Embed Size (px)
DESCRIPTION
网页设计与制作概述. 1. 网页设计的基本方式 2. 网页中常见元素 3. 网页元素的创作与编辑工具 4.HTML 基础 5. 动态网页的支持技术. 1.1 网页设计的基本方式. 1.1.1 手工编码方式 1.1.2 利用可视化工具 1.1.3 手工编码与可视化工具结合. 1.2 网页中的常见元素. 1.2.1 文本 1.2.2 图象与动画 1.2.3 音频与视频 1.2.4 超级链接 1.2.5 表格 1.2.6 表单 1.2.7 导航栏 1.2.8 其他元素. 1.3 网页元素的创作与编辑工具. - PowerPoint PPT Presentation
Citation preview
1. 网页设计的基本方式 2. 网页中常见元素 3. 网页元素的创作与编辑工具 4.HTML 基础 5. 动态网页的支持技术
网页设计与制作概述
1.1 网页设计的基本方式
1.1.1 手工编码方式
1.1.2 利用可视化工具
1.1.3 手工编码与可视化工具结合
1.2 网页中的常见元素
1.2.1 文本1.2.2 图象与动画1.2.3 音频与视频 1.2.4 超级链接1.2.5 表格1.2.6 表单1.2.7 导航栏1.2.8 其他元素
1.3 网页元素的创作与编辑工具
1.3.1 网页图像制作工具
1.3.2 动画制作工具
1.3.3 网页编辑工具
1.1.1 手工编码方式 网页是由 HTML （ HYPER TEXT MARK
UP LANGUAGE ）超文本标记语言编码的文本文档，设计制作网页的过程就是生成 HTML 代码的过程。在 WWW （ World Wide Web ）发展的初期人们制作网页是通过直接编写HTML 代码来实现的。
手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂，因此，对大多数网页设计人员来说采用这个方式比较困难。但手工编码可以灵活地制作出丰富的网页效果。
1.1.2 可视化工具方式 随着网页制作技术的不断发展，出现了
诸如 FrontPage 、 Dreamweaver 等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。
1.1.3 编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网
页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉 Html 语言又能运用可视化工具。除了上面三种基本的网页设计制作方式外，我们还可以通过修改已有的网页代码生成自己的网页。在网页编辑制作过程中具体采用何种方式要根据个人的具体情况而定，每必要拘泥于某种固定的模式。
1.2.1 文本
文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。文本能准确地表达信息的内容和含义。为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。这些功能都给网页中的文本赋予了新的生命力。
1.2.2 图像和动画
图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。用户可以在网页中使用 GIF, JPEG(JPG), PNG三种图象格式，其中使用最 广泛的是 GIF 和 JPEG两种格式。
在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
1.2.3 声音和视频 声音是多媒体网页的一个重要组成部分。当前存在着
一些不同类型的声音文件和格式，也有不同的方法将这些声音添加到Web页中。在决定添加声音之前，需要考虑的因素包括其用途，格式，文件大小，声音品质和浏览器差别等。
用于网络的声音文件的格式非常多，常用的有 MIDI、WAV、 MP3和 AIF 等。设计者在使用这些格式的文件时，需要加以区别。很多浏览器不要插件也可以支持 MIDI,WAV和 AIF 格式的文件，而MP3和 RM格式的声音文件则需要专门的浏览器播放。
一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得可以控制。
视频文件的格式也非常多，常见的有 Realplay, MPEG, AVI和 DivX等。视频文件的采用让网页变得精彩而有动感。
1.2.4 超级链接
超级链接技术可以说是万维网流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。
当浏览者单击超级链接热点时，其目的端将显示在Web 浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个 AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。
1.2.5 表格
在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。
1.2.6 表单
使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。
1.2.7 导航栏
导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。
一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。
1.2.8 其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮， Java 特效， ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。
1.3.1 网页图像制作工具 1. Fireworks MX Firework MX是Macromedia公司的产品，是目前
最流行的网页图像制作软件。只要将 Dreamweaver的默认图像编辑器设为 Fireworks ，那么在 Fireworks 中制作完成网页图像后将其输出就会立即在 Dreamweaver 中更新。 Fireworks还可以安装使用所有的 Photoshop滤镜，并且可以直接导入 PSD 格式图像。其最方便之处是，它可以将图像切割，图像映射，悬停按钮，图像翻转等效果直接生成 HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。
1.3.2 动画制作工具 1. Flash MX 2004 Flash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。与其它的动和软件相比，它具有一些优点： 制作的是矢量图像。只有用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像不会随浏览器窗口大小的改变而改变画面质量。
使用插件方式工作。 提供了一些增强功能。例如，支持位图，声音，渐变色和 Alpha透明等。拥有了这些功能，用户就完全可以建立一个全部由Flash制作的站点。
Flash 影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下做到本地在观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。
1.3.3 网页编辑工具 Dreamweaver MX 和 Fireworks MX 、 Flash MX
一起，被人们喻为“网页制作三剑客”。同 FrontPage 一样， Dreamweaver 也是“所见即所得”的网页编辑软件。它能够很好的支持 ActiveX, JavaScript, Java, Flash 和 Shockwave 等，而且还能通过鼠标拖动的方式从头到尾制作动态的 HTML 效果。可以在 Dreamweaver 和 HTML 代码编辑器之间进行自由转化，而 HTML 语法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到“所见即所得”带来的方便。
HTML教程
HTML概况 HTML英语意思是： Hypertext Marked Lang
uage ，即超文本标记语言 , 是一种用来制作超文本文档的简单标记语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台。
html 文件扩展名是 .html或 .htm ，它们是可供浏览器解释浏览的文件格式。 Html 语言使用标签对的方法编写文件，它通常使用 <标签名></标签名>来表示标志的开始和结束。在Html 文档中这样的标志对一般是成对使用的。
HTML脚本的结构 超文本文档分文档头和文档体两部分，在文档头里，
对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
<HTML> <HEAD> 头 部 信 息 </HEAD>
<BODY> 文 档 主 体， 正 文 部 分 </BODY>
</HTML>
标签的说明 用“ <” 和“ >”括起来的符号，我们称它为标签
1. 单标签
只需单独使用就能完整地表达意思，这类标记的语法是： < 标签名称 >
最常用的单标签是 <BR>, 它表示换行。
标签的说明 2. 双标签
它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（ / ）即成为尾标记。这类标记的语法是： < 标签 > 内 容 </ 标签 >
标签的说明 3. 标签属性 许多单标记和双标记的始标记内可以包含一些属性， 其语法是：
< 标签名字 属性 1 属性 2 属性 3 … >
常用的标签
1、 <html></html> <html>标志用于 Html 文档的最前边，用来标识 Html 文档的开始。而 </html>标志恰恰相反，它放在 Html 文档的最后边，用来标识 Html 文档的结束，两个标志必须一块使用。
常用的标签
2 、 <head></head> <head>和 </head> 构成 Html 文档的开头部分，在此标志对之间可以使用 <title></title>、 <script></script>等等标志对，这些标志对都是描述 Html 文档相关信息的标志对， <head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
常用的标签3 、标题 一般文章都有标题、副标题、章和节
等结构， HTML 中也提供了相应的标题标签 <Hn>, 其中 n 为标题的等 HTML总共提供六个等级的标题， n越小，标题字号就越大，以下列出所有等级的标题：
〈 H1>…</H1> 第一级标题 〈 H2>…</H2> 第二级标题 〈 H3>…</H3> 第三级标题
常用的标签4、 <title></title>
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在 <title></title>标志对之间加入您要显示的文本即可。注意： <title></title>标志对只能放在 <head></head>标志对之间。
常用的标签
5 、 <body></body> <body></body>是 Html 文档的主体部分，在此标志对之间可包含 <p>、 </p>、<h1>、 </h1>、 <br>、 <hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。 <body>标志中还可以有以下属性：
属性 用途 示例
<body bgcolor="#rrggbb">
设置背景颜色。 <body bgcolor="red">红色背景
<body text="#rrggbb">
设置文本颜色。 <body text="#0000ff">蓝色文本
<body link="#rrggbb">
设置链接颜色。 <body link="blue">链接为蓝色
<body vlink="#rrggbb">
设置已使用的链接的颜色。
<body vlink="#ff0000">
<body alink="#rrggbb">
设置正在被击中的链接的颜色。
<body alink="yellow">
常用的标签
6 、 <p></p> <p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外， <p>标志还可以使用 align 属性，它用来说明对齐方式，语法是： <p align=""></p>。 align可以是 Left(左对齐 )、 Center(居中 )和Right(右对齐 )三个值中的任何一个。
常用的标签
7 、 <br> <br>是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行
常用的标签
8 、 <font></font> <font></font>是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。用 face 属性来设置字体 .
常用的标签
9 、 img
指明一个图像在网络的位置。不是把图像的所有信息包含进来，浏览器根据路径到指定的地方去取图像。
<IMG SRC=" 图形文件地址 ">
src属性在 <img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外， <img>标志还有 alt 、 align 、 border 、 width和height 属性。
常用的标签10 、 <hr>
<这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。 <HR>有三个属性：
size 水平线的宽度 width 水平线的长，用占屏幕宽度的百分比或象素值来表示 align 水平线的对齐方式，有 LEFT RIGHT CENTER三种 noshade 线段无阴影属性，为实心线段
常用的标签11 、 <a> </a> 链接标签 基本格式 <A HREF=" 资源地址 "> 链接
文字 </A>
· 标签 <A> 表示一个链接的开始， </A> 表示链接的结束； · 属性“HREF” 定义了这个链接所指的地方；
· 通过点击“链接文字”可以到达指定的文件。
<a> </a> 链接 链接分为本地链接、 URL 链接和目录链接。 本地链接： 对同一台机器上的不同文件进行的连接称为本地链接。采用绝对路径或相对路径来指示一个文件。URL 链接 如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种 URL 地址。
URL 链接的形式是： 协议名： // 主机 .域名／路径／文件名例如：
<A HREF="http://www.sjstc.edu.cn/default.htm"> 中国山西之窗 </A> <A HREF="telnet://bbs.xanet.edu.cn"> 西北网络中心兵马俑站 </A>
常用的标签
12 、 <table><tr><td></td></tr></table> 表格标签 ,<table></table>表示一个表格 ,
<tr></tr>表示表格的一行 <td></td>表示表格的一行中的一列 .
表格的属性属性 用途
<table border=""> 设置边框的宽度，
<table bgcolor=""> 设置表格的背景色。
<table width=""> 设置表格的宽度
<table cellspacing=""> 设置表格格子之间空间的大小。
<table cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小。
常用的标签 表单标签<form></form> 一般格式： <form name=“ ” method=“ ” action=“ ”>
<input type=“ ” name=“ ”> …… </form> <form></form>标志对用来创建一个表单，也即定
义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。 <form>标志具有 action 、 method和 target 属性。
action 的值是处理程序的程序名 (包括网络路径 :网址或相对路径 )，如： <form action=“http://xld.home.chinaren.net/counter.cgi”>，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为 counter.cgi的 CGI程序。
method属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。 GET方式是处理程序从当前Html 文档中获取数据。POST方式与 GET方式相反，它是当前的 Html 文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。
target 属性用来指定目标窗口或目标帧。
<input type=“ ”> <input type=“”>标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在 <form></form>标志对之间。<input type=“”>标志中共提供了八种类型的输入区域，具体是哪一种类型由 type属性来决定。
八种类型的输入区域有一个公共的属性 name ，此属性给每一个输入区域一个名字。
Type 属性取值 输入区域类型<input type="TEXT" size="" maxlength="">
单行的文本输入区域 ,size与 maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数
<input type="SUBMIT">
将表单内容提交给服务器的按钮
<input type="RESET"> 将表单内容全部清除 ,重新填写的按钮
<input type="CHECKBOX" checked>
一个复选框 ,checked属性用来设置该复选框缺省时是否被选中 ,
<sub></sub> 设置为下标 <sup></sup> 设置为上标 <small></small> 把文字缩小一号 <big></big> 把文字放大一号 <em></em> 同 <i></i> <strong></strong> 同 <b></b>
<pre> </pre>预格式化文本标签 , 用来控制换行和空格 .
<bdo dir=“rtl”> </bdo>将文字倒置 块引用 (Blockquote) <blockquote>...</bloc
kquote> 处理大段引用和小块引用 <del> </del> 标记删除文字 <ins> </ins> 标记插入文字
HTML 实体 有些字符，比如说“ <” 字符，在 HTML 中有特
殊的含义，因此不能在文本中使用。想要在 HTML 中显示一个小于号“ <” ，需要用到字符实体。一个字符实体拥有三个部分：一个and符号（ & ），一个实体名或者一个实体号，最后是一个分号（ ; ）使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。注意：实体名是大小写敏感的。
HTML 链接
文字基本语法 <a href=“URL”> 要链接的文字 </a>
图片链接 :<a href=“URL”> <img src=“ 要链接的图片” > </a>
属性 target :_blank _self _top parsant
内框架 <iframe src=# name=## width=# height=#
> ... </iframe> src 初始页面的 URLname窗口标识 (Frame Name)(之后可对此标识进行各窗口间相互操作 )... = 此处文字将只出现在不支持 FRAMES 的浏览器中。
Width 指定内框架的宽度 Height 指定内框架的高度
