基础篇 静态网页的设计和制作
使用 Dreamweaver 进行静态网页设计制作，包括站点的创建和管理、文本的使用、图像 和媒体的插入、表格和框架的应用、链接的创建和使用、交互式表单、Div 元素的应用、CSS 样式表和资源管理、模板和库等内容。第 1 章 概论
随着计算机和计算机网络的发展，网络已经与人们的生活密不可分。利用网络，人们足 不出户就可以完成购物、接受教育、远程医疗等活动，还可以在网络信息海洋中寻找想要的信 息，这一切都主要依靠因特网中的 Web 页技术。工欲善其事，必先利其器。在制作网页前， 不仅需要了解网络的相关概念， 还要知道制作网页的工具以及在网页中使用的脚本语言等。 在 本章，将介绍网页设计的基础知识、HTML 标记语言和网站设计的流程等内容。1.1 计算机网络的概念
计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互联起来， 以功能完善的网络软件（网络通信协议、信息交换方式和网络操作系统等）实现网络中资源共 享和信息传递的系统。 计算机网络按范围来分，一般可以分为局域 网（同一建筑、同一单位或方圆几公里地域内的 专用网络）、城域网（一组相邻的公司或一个城 市）、广域网（一个国家或地区）。图 1.1 所示为 总线型局域网结构图。 早期的计算机系统是高度集中的，20 世纪 50 年代中后期， 许多系统都将地理上分散的多个 终端通过通信线路连接到一台中心计算机上， 这样就出现了第一代计算机网络。 第一代计算机 网络是以单个计算机为中心的远程联机系统。 第二代计算机网络兴起于 20 世纪 60 年代后期，它将多个主机通过通信线路互联起来， 为用户提供服务， 典型代表是美国国防部高级研究计划局协助开发的基于 TCP/IP 的 ARPA 网。 20 世纪 70 年代至 80 年代中期，第二代网络得到迅猛发展。第二代计算机网络以通信子网为 中心。这个时期，网络定义为“以能够相互共享资源为目的互联起来的具有独立功能的计算机 之集合体” ，形成了现代计算机网络的基本概念。 第三代计算机网络是具有统一的网络体系结构并遵循国际标准的开放式和标准化的网 络。国际标准化组织（ISO）在 1984 年颁布了 OSI 开放系统互联参考模型，该模型分为七个 计算机 电缆 图 1.1 总线型局域网结构图层次，也称为 OSI 七层模型，公认为新一代计算机网络体系结构的基础。OSI 参考模型的颁布 为普及局域网奠定了基础。 第四代计算机网络从 20 世纪 80 年代末开始，局域网技术发展成熟，出现光纤及高速网 络技术、多媒体、智能网络，整个网络就像一个对用户透明的大的计算机系统，发展为以因特 网（Internet）为代表的互联网。 因特网是目前世界上影响最大的国际性计算机网络。它以 TCP/IP 网络协议将各种不同类 型、不同规模、位于不同地理位置的物理网络连接成一个整体。图 1.2 所示为因特网的结构。 图 1.2 因特网的结构示意图 一台计算机连接到因特网，就可以访问因特网上的资源。在图 1.2 所示的结构中，有的 计算机通过局域网连接到因特网；有的计算机通过调制解调器，然后通过电话线连接到因特 网上，还有的直接连接到因特网上。因特网上提供各种信息资源的服务器就是这样连接到因 特网上的。 将因特网的通信部分用一朵“云”来表示，意思是在通信部分，其结构非常的复杂，有 的是公用电话网， 有的是网络公司或行业部门建立的全国性的光纤主干网。 它们在地域上互相 重叠，又互相连接，形成一个大的网络。 因特网的应用很多，如聊天、购物、接受教育、玩游戏、收发电子邮件等，其中的很多 应用是基于 Web 来实现的。例如，用户要登录到某个网站以获取一些信息，可按如下方式来 操作： （1）启动一个网络浏 览应 用程序 。比 如微软 公 司开发 的网络 浏览 器 IE（ Internet Explorer），它已内置于 Windows 操作系统。 （2）在地址栏中输入准备查看的网站地址。比如 www.sohu.com，按 Enter 键之后（假定 本机的网络设置和所访问的 Web 服务器都工作正常），就会在浏览器中显示相应的网页。通过 网页可以浏览新闻等信息。 从以上内容可以看到，计算机网络是一些自治的计算机通过通信线路组成的有机整体。 网络上提供的服务一般有电子邮件、文件传送、WWW 服务等，这些服务大都是一些专门的 服务器提供的。 我国的因特网建设从 20 世纪 90 年代起到现在，已经有了巨大的发展。根据中国互联网 信息中心的调查， 截止到 2012 年 12 月 31 日， 我国网民规模达到 5.64 亿， 互联网普及率为 42.1%， 手机网民规模为 4.20 亿，域名总数约为 1341 万个，其中 CN 域名为 751 万个，中国网站总 数约为 268 万个，国际出口带宽为 1 899 792Mbps。
1.2 WWW 和 HTML
WWW 的全称是 World Wide Web，正式的译名是万维网。WWW 服务是因特网上应用最 广泛的服务。通过 Web 浏览器，用户可以很方便地在 Internet 上享受信息检索、游戏娱乐、教 育学习和网络聊天等“冲浪”的乐趣。WWW 网站中包含有多个网页（Web 页面），以提供包 括文本、图片、声音、动画和影像等信息。网页之间可以建立链接，通过链接，用户能在具有 链接关系的页面之间进行切换。 Web 页面一般是由 HTML（HyperText Markup Language，超文本标记语言）语言编写的， 通过 HTTP（HyperText Transfer Protocol，超文本传输协议）协议在网络中传输。HTML 是一 种跨平台的超文本标记语言，所创建 HTML 文件是带有格式标识符和超文本链接内嵌代码的 ASCII 文本文件。HTML 语言的特点是通过对一些项加上标记来描述网页上的元素（文本、图 片、动画、表格等），比如在<b>和</b>之间的文字将会被浏览器解释为粗体字。下面用记事 本来制作一个用 HTML 语言编写的网页。 打开记事本，在其中输入以下文本： <html> <head> <title>我的网页</title> </head> <body> 我的第一个网页！ </body> </html> 保存该文件时， “保存类型”中选择“所有文件” ，输入文件名为 example.htm，如图 1.3 所示，单击“保存”按钮保存文件。 这样就在保存的目录下有了一个 example.htm 文件，打开后的效果如图 1.4 所示。 图 1.3 文本文件保存为 HTML 文件 图 1.4 example.htm 的浏览效果 通过这样的方法，就制作了一个简单的网页，同时可以知道，网页文件可以通过文本编 辑器来书写。实际上，无论多复杂的网页，都可以按这种方式来书写，只是这样做工作量将非 常得大，效率也很低。1.3 WWW 的工作流程
在物理结构上，组成 WWW 的是 Web 客户机和 Web 服务器。它们都连接在因特网上，通 过因特网进行通信。浏览者的计算机是客户机，提供信息的计算机是服务器（服务器一般由处 理速度快、 存储容量大的计算机承担， 运行了 WWW 服务器程序的个人计算机也可以作为 Web 服务器）。在应用程序上，客户机上运行的是 IE 之类的浏览器程序。浏览器程序的主要作用就 是对 HTML 标记语言进行解释并且将它显示在浏览器窗口中。在 Web 服务器上，运行的是 WWW 服务器程序，可以是 Windows 下的 IIS，也可以是 Linux 下的 Apache 或其他的 WWW 服务器程序。 根据静态网页和动态网页的不同，WWW 工作的流程有两种方式。 l 如果是静态网页，在客户机上的浏览器地址栏中输入一个网页地址，按 Enter 键，客 户机就用因特网上的 HTTP 协议发送一个请求到该地址所指定的服务器。 服务器收到 请求后， 将客户机请求的页面文件或系统的默认页面文件传送到客户机中。 浏览器将 会解释这个 HTML 文件，并将结果显示在浏览器窗口中。运行示意图如图 1.5 所示。 l 如果是动态网页，当服务器收到请求后，将根据请求的信息，在服务器上找到相应页 面文件并对该文件进行处理， 运行该文件包含的程序代码， 然后将运行的结果以标准 的 HTML 文件格式送回到客户机，由客户机的浏览器显示结果，运行示意图如图 1.6 所示。 图 1.5 静态网页的工作流程 图 1.6 动态网页的工作流程1.4 HTML 语言基础
1.4.1 HTML 语言简介 1990 年， HTML 语言与 WWW 一起诞生于瑞士的 GERN 实验室。 Tim BernersLee 及其开 发小组研究建立了一种以一定格式传输信息的方法，就是众所周知的超文本传输协议 HTTP。 该协议使用了 HTML 语言。HTML 语言作为一种标识性的语言，由一些特定符号和语法组成， 用来制作超文本文档。在超文本中可以加入图片、声音、动画、视频等内容，并且可以从一个 文件跳转到另一个文件。 用 HTML 编写的超文本文档称为 HTML 文档， 一个 HTML 文件的扩 展名是.htm 或是.html，它在各种操作系统平台（如 UNIX，Windows 等）下都能使用。 经过十几年的发展，各个浏览器开发公司都在为 HTML 加入更多的特征，如框架、样式 等。到现在已经发展到了 HTML 5.0 版本，扩展了 DHTML 和 XML 等子集。不过目前较为流行的仍然是 1999 年 12 月发布的 HTML 4.01 版本。 下面通过一个简单的例子来认识什么是 HTML。 可以用记事本编辑器来编写 HTML 文件， 打开记事本，输入以下代码： <html> <head> <title>送杜少府之任蜀州</title> </head> <body> <p align="center">送杜少府之任蜀州<br /></p> <p align="center">作者：王勃<br /></p> <hr align="center" width="300" color="#0066CC" /> <p align="center"> 城阙辅三秦，风烟望五津。<br /> 与君离别意，同是宦游人。<br /> 海内存知己，天涯若比邻。<br /> 无为在岐路，儿女共沾巾。</p> </body> </html> 然后将记事本中的代码保存为 HTML 文件，选择“文件”→“另存为”命令，将文件命 名为 songbieshi.html，保存类型为“所有文件” ，找到并用 IE 打开刚才保存的文件，IE 浏览器 会自动显示刚才编辑的 HTML 文件，浏览结果如图 1.7 所示。 图 1.7 songbieshi.html 的浏览结果 注意：所有文件夹、网页文件名以及网页中所用到的图片、动画、多媒体等网页元素， 最好不要用中文和带空格的名称，防止上传到服务器上后不能识别而出错。 观察 songbieshi.html 实例的 HTML 代码可以看到，这个网页文件的第一个符号为<html>， 类似的还有<head>、</head>、<body>、</body>、</html>等，这些在 HTML 文件中用来描述 功能的符号称为“标记” 。标记是 HTML 中用来控制文字、图形等显示方式的符号。标记在使 用时必须用尖括号“< >”括起来，标记分单独出现的标记和成对出现的标记两种。大多数标 记都是成对对称出现的，由首标记和尾标记组成。其中，起始的叫做“首标记” ，结尾的就叫 “尾标记” 。每个标记可以有一个或几个控制属性。
1.4.2 HTML 文档的基本结构 HTML 文档的基本结构如下： <html> <!标志该 html 文档的开始 > <head> <title>网页文档标题</title> </head> <body>网页文档的主体部分</body> </html> <!标志着 html 文档的结束> <html>标记是文档标识符，它是成对出现的，首标记<html>和尾标记</html>分别位于文 档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML）编写的。该标记不带有 任何属性。事实上，现在所用的浏览器都是自动识别 HTML 文档的，并不要求有<html>标记 的出现，也不对它进行任何处理。但是，为了提高文档的适用性，还是应该养成用这个标记的 习惯。 <head>和</head>之间的内容是文档头部分。习惯上把 HTML 文档分为文档头和文档主体 两个部分。 文档头用来规定该文档的标题 （出现在浏览器窗口的标题栏中） 和文档的一些属性， 主体部分就是在浏览器窗口中看到的内容。嵌套在<head>标记中使用的子标记主要有<title>， 还可以出现其他子标记，如<isindex>，<meta>等，这些子标记都不是必须的。 <title>标记是成对的，用来规定 HTML 文档的标题。在<title>和</title>之间的内容将显示 在 Web 浏览器窗口的标题栏中。 <body>标记用来定义文档主体部分，是网页的主要内容。在<body>和</body>之间的内容 将显示在浏览器窗口内。在<body>标记中可以规定整个文档的一些基本属性： l bgcolor：指定 html 文档的背景色。 l text：指定 html 文档中文字的颜色。 l background：指定 html 文档的背景颜色或图片。 在指定颜色对象时，可以用该颜色的代码或者对应颜色的英文单词。例如，指定文档的 背景色为绿色，就可以表示为：<body bgcolor="green">。文档主体部分可用颜色如表 1.1 所示。 表 1.1 颜色列表
名称 Black Red Line Maroon Gray Silver Navy Olive 颜色 黑色 红色 石灰色 栗色 灰色 银白色 海军蓝 橄榄绿 名称 Purple Yellow Aqua Blue Green Fuchsia White Teal 颜色 紫色 黄色 浅绿色 蓝色 绿色 紫红色 白色 暗蓝绿 1.4.3 HTML 语言的语法规则 HTML 文档扩展名为.htm 或.html，由标记（标签）、代码和注释组成。 HTML 语法的三种基本表达方式如下所示： <标记> <标记>对象</标记> <标记 属性 1="参数 1" 属性 2="参数 2" …… >对象</标记>
例如，有如下代码： <font size="7" color="#0000ff">网页</font> 其中<font>和</font>分别为首标记和尾标记，用来定义“网页”两个字的属性，标记中有 size 和 color 两个属性，分别定义“网页”两个字的大小为“7” （36 磅），颜色为“#0000ff” （十六进制 RGB 颜色代码），属性的值要加西文引号。 HTML 语言代码不区分大小写，多数 HTML 标记可以嵌套，但不能交叉，HTML 文件一 行可以写多个标记，一个标记也可以分写多行，标记前后和标记属性之间可以添加多个空格、 回车和制表符，不用任何续行符。 在 HTML 文档中可以加入注释，采用的格式为：<!注释内容>，其中，注释内容可以 换行，Web 浏览器不显示注释内容。 1.4.4 HTML 语言的常用标记及其用法 HTML 是一种标记语言。下面介绍 HTML 的几种主要标记。 1．格式化标记 在文字处理中把对文字的大小、外观的处理叫做格式化。在 HTML 标记语言中，也有起 到格式化作用的标记。 （1）字体和大小的设置。字体和大小的设置是通过标记<font>和</font>来设置的。例如， 有如下代码： <font face="宋体" size="6">欢迎！</font>
在<font>标记中加入了 face 和 size 属性，用来指定字体的名称和大小。一般来说，size 的 值可以从 1～7，分别代表 9、10、12、14、18、24、36 磅的字。该标记的作用是将内容为“欢 迎!”的字体设置为宋体，大小为 24 磅。缺省该标记时表示为默认字体和大小。 （2）段落设置与换行。段的设置标记是<p>和</p>，作用是设置段落。有如下代码： <p>第一段</p> <p>第二段</p> 显示效果如图 1.8 所示。 如果将上面的代码改为： <p>第一 段</p> <p>第二段</p> 再显示， 可以看到， 代码修改以后， 网页的显示与未修改前相比没有变化， 这说明在 HTML 文档中回车是不起换行作用的。 换行的设置标记是<br>或<br/>，例如，有以下代码： <p>第一段</p> <p>第二段</p> <p>第一行<br>第二行</p> 显示效果如图 1.9 所示。从图中可以看到<br>标记产生的效果同<p>标记产生的效果在间 距上是不一样的。 （3）字的效果设置。可以用 HTML 标记语言给字体设置一些特殊的效果。比如下划线 的开始和结束标记<u></u>、粗体字的开始和结束标记<b></b>、斜体字的开始和结束标记 <i></i>等。
图 1.8 段落设置 图 1.9 段落设置和换行 以下 HTML 源代码在浏览器中的显示效果如图 1.10 所示。 <p><b>粗体</b><i>斜体</i><u>下划线</u></p> 也可以将标记进行嵌套使用，从而同时显示多种效果。 2．设置链接 链接标记的格式如下： <a href="exam2.htm">跳转到 exam2.htm</a>
代码中<a>和</a>指明了该处是一个链接， 用属性 href 表明链接的目标是 exam2.htm 文件，
链接的载体是“跳转到 exam2.htm” 。显示的效果如图 1.11 所示，单击“跳转到 exam2.htm” 可以打开当前文件夹下的 exam2.htm 文件（前提是 exam2.htm 存在）。 图 1.10 字的效果设置 图 1.11 超级链接 链接对象除了可以是 HTML 文档外，还可以是其他 文件类型，例如： <a href="myfile.zip">点此下载</a> 出现的效果是当单击“点此下载”这几个字时，浏 览器会弹出下载对话框，让用户下载 myfile.zip 文件。 3．表格 表格在网页中有着广泛的应用，它既可以显示数据， 又可以用来实现定位显示等布局操作。 将下面的代码用记事本编辑并保存为一个 HTML 文 件后，用浏览器显示，可以看到如图 1.12 所示的效果。 <html> <head> <title>table</title> </head> 图 1.12 表格
<body> <table width="30%" height="150" border="4" cellspacing="2" cellpadding="12"> <tr> <td>11</td> <td>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> <tr> <td>31</td> <td>32</td> </tr> </table> </body> </html> 标记<table>和</table>定义了一个表格，其中的参数如下： width="30%" height="150" border="4" cellspacing="2" cellpadding="12" 设置了表格的宽度（用相对浏览器窗口的百分比来表示）、表格的高度（用像素表示）、 边框的宽度、单元格的间距、单元格的边距。如果调整浏览器窗口的宽度，就会发现表格宽度 也会随着调整，这是由于表格的宽度是用百分比定义的。 <tr>和</tr>表示了表格中一行的开始和结束，而<td>和</td>则表示了一个列的开始和结束。 <tr> <td>11</td> <td>12</td> </tr> 这段代码表示的是一行的两个单元格。 表格标记还可以加入一些常见的属性，如背景色和对齐方式等，标记背景色的语法是 bgcolor＝"颜色代码"，其中颜色代码用"#"加上红绿蓝三基色的十六进制代码表示，也可以用 颜色的英文单词表示，比如<table bgcolor="#0000ff">和<table bgcolor="Blue">均表示表格的背 景色为蓝色。 也可以单独设置某一行的颜色或某一个单元格的颜色， 比如<tr bgcolor="#ffff00"> 表示这一行为黄色，<td bgcolor="#99ff00">则表示这个单元格为淡绿色。应用颜色的优先顺序 为单元格、行、表格。 表格的对齐方式由 align 属性设置，其取值有 left、center、right 三种，分别表示居左、居 中和居右。例如，有如下代码： <html> <head> <title>table</title> </head> <body> <table align="center" width="100" height="50" border="4"> <tr> <td>居中的表格</td> </tr>
</table> <br> <table align="left" width="100" height="50" border="4"> <tr> <td>居左的表格</td> </tr> </table> <br> <table align="right" width="100" height="50" border="4"> <tr> <td>居右的表格</td> </tr> </table> </body> </html> 显示效果如图 1.13 所示。 图 1.13 表格的对齐方式 在很多标记中都可以使用 align 属性，在<p>中表示段落文字的对齐，在<tr>和<td>中表示 表格中某一行或某个单元格中文字的对齐。 在网页中表格主要用在文字、图片等内容组织上，网页中的文字和图片等内容往往是放 置在一个没有边框的表格内，以达到版面整齐划一的效果。 从上面的介绍中可以看到，如果完全用 HTML 代码编写网页是一件非常辛苦的事情。首 先是工作量大，每一个细小的地方都要编写，其次需要记忆大量的 HTML 标记符，另外，还 不知道书写的代码在浏览器中显示出来到底是什么效果， 必须在浏览器中才可以看到， 因此往 往需要反复修改、保存、浏览才能达到预想的效果，效率很低。这样人们开发了很多的工具 软件来设计网页。它们的特点之一就是以所见即所得的方式来编写网页。Macromedia 公司的 Dreamweaver 是众多可视化网页编辑工具中的佼佼者，据统计，世界上 70%的网站都是用它开 发的。
1.5 网页、网站和主页
进行网页设计和制作之前，首先要知道网页的相关知识，如什么是网页，什么是网站， 网页与网站之间的关系等， 了解了这些基本知识才能在今后的开发过程中得心应手。 本节将逐 一简单介绍网页、网站和主页。1.5.1 网页 网页（WebPage）是 WWW 的基本文档，是用 HTML 或者其他语言（如 JavaScript、JSP、 ASP、PHP 等）编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文本、图 片、声音、动画等媒体形式的页面文件。它是网站组成的基本单位，用户可以用浏览器来显示 网页和网页之间的交互。 网页按其表现形式可分为静态网页和动态网页。 静态网页是指用 HTML 制作完成的网页，其扩展名是.html、.htm、.shtml、.xml 等，不包 含数据库，没有后台程序。网页内容固定不变，不能与用户进行交互，但在其页面中也可出现 各种动态效果，比如 GIF 动画、Flash 动画、视频和滚动字幕等。 动态网页是指用网页脚本语言 ASP.NET、ASP、JSP、PHP 等制作完成的网页，包含数据 库，有后台程序。网页内容随用户访问时间不同而发生变化，能与用户发生交互，比如用户在 论坛留言、跟帖等。 1.5.2 网站 网站（WebSite）也称站点，包含多个独立的网页、脚本和数据库等，多个网页按照一定 的结构组织在一起就构成一个网站。从资源管理器的角度来说，网页是一个文件，而网站是一 个目录，里面有多个 HTML 文件和图片、动画、声音等资源文件。网站一般用于展示某类信 息或提供相关的网络服务，比如学校利用网站发布教学信息，提供教学资源和社团活动；政府 部门利用网站发布政策新闻； 公司利用网站宣传产品或招聘等。 人们通过网页浏览器访问网站， 获取需要的信息或者享受某种服务。 1.5.3 主页 主页是用户访问一个网站后看到的第一个页面，通常称为首页。主页通常显示网站的主 题和导航信息， 网站中的其他网页用来显示某一方面的详细内容， 主页与其他网页通过链接组 织起来。一般情况下，作为网站主页的文件名是 index、default 或 main 加上相应的扩展名，例 如 index.html、default.jsp 等。
1.6 网页的基本元素
构成网页的基本元素有文本、图片、动画、声音、链接、表单等。 1．文本 文本就是网页上的文字信息，文字是网页中最基本的元素，虽然图片及多媒体效果在网 页中所占的比重越来越大， 但由于文字所占的存储空间非常小， 以文字为主体的页面下载速度 快，节省网络带宽，所以在网站中，文字的主导地位是无可替代的。 2．图片 现在很难找到一个没有图片的网页，图片是组成网页的基本元素，图像传递的信息比文 字更直观，另外，在网页中适当地添加图片可以使网页更美观。计算机能够显示的图片格式很 多，但并不是所有格式的图片都适合放在网页中，其中有些特有格式图片，需要使用专门的应 用程序才能显示图片内容，有些格式的图片太大，不适合用于网上传输。在 Web 页面上使用的图片格式主要有 GIF、JPG/JPEG、PNG、BMP 等，其中使用最为广 泛的是 GIF、JPEG/JPG 和 PNG。 3．动画和声音 动画是网页上一个重要的表现形式，网页上适当地使用动画有利于表现内容，使网页更 生动。网页动画是由多幅图片连续放映，利用人类眼睛的视觉暂留特点来形成连续的动画。由 于网络传输带宽的限制，要求动画的体积小，所以网页上的大部分动画看起来略显粗糙。 网页上支持的动画主要有 GIF 动画和 Flash 动画， GIF 动画是 GIF 图片格式的小型翻页型 动画。Flash 动画的文件大小比 GIF 动画小，并且是以流的形式播放，可以一边下载一边播放， 另一方面，Flash 图形是矢量图形，因此用 Flash 制作的动画看起来比较清晰。但是因为 Flash 动画的播放需要 Flash 插件，因此需要安装 Flash 插件才可以播放。 声音作为多媒体元素的一种，在网页中应用的相对较少，主要是用于网页背景音乐和音 乐站点。在 HTML 语言中，原本没有专门的针对声音的标记，在网页上播放声音大部分要靠 插件来完成。由于现在的主流浏览器均支持不同的插件，因此网页中支持的声音格式比较多， 比如 MP3、WMA、RM、MID、AIF 等。比较常用的声音格式有 MID 格式（常用作背景音乐） 和 MP3 格式（常用作音乐站点）。 4．链接 与其他媒体（报纸、杂志）相比，网页中最值得称道的地方就是可以设置链接。链接是 指建立在同一站点或不同站点中 Web 页之间的跳转关系，用于引导浏览者转向其感兴趣的页 面。它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。链接由链接载体 和链接目标两部分组成。许多页面元素可以作为链接载体，如文本、图像、图像热区、轮替图 像、动画等，而链接目标可以是任意网络资源，如页面、图像、声音、程序、Email 甚至是页 面中的某个位置——锚点。 5．表单 网页不同于其他媒体的另一个特性是它与浏览者之间的交互功能，表单是网页完成交互 功能的重要元素。 它的作用是接收用户在浏览器端输入的数据并传送到服务器端， 完成浏览者 和服务器之间的交互。 在网络上它一般应用于会员注册、 网上调查等需要用户提供信息的地方。 表单是一个容器，表单内一般包含文本框、选择框和提交按钮等内容。图 1.14 所示是一 个表单的例子。 图 1.14 表单
浏览者在表单中输入信息，然后单击“确定”按钮就可以将输入的信息传送到网站服务 器中，然后由服务器进行处理，并根据处理结果向浏览器反馈信息。
1.7 网页制作和美化的工具
由 1.2 节和 1.4 节可知，直接用记事本一类的文字编辑器也可以写出网页代码。但是使用 这种方法制作网页要求设计者必须具有较扎实的 HTML 语言基础，初学者不易掌握。所以制 作网页一般要选用专业的网页制作工具。另外，在网页中往往还需要使用图片、动画等元素， 这些元素也需要相关工具来制作。下面对常见的工具作一简单介绍。 1.7.1 网页制作类工具 制作网页首先要选定一种网页制作软件。选择一个好的网页编辑器会令你事半功倍。下 面介绍目前较常用的几种网页制作工具。 1．Dreamweaver Dreamweaver 是 Macromedia 公司（Macromedia 公司 2005 年 4 月被 Adobe 公司收购）出 品的网页制作工具，可以说是当前最流行的网页编辑器。它支持所见即所得的方式编辑网页， 有强大的站点管理功能，便于站点的维护和管理；支持最新的 HTML 语言的扩展功能；支持 层技术，还提供了层动画；内置强大的交互式网页制作功能。Dreamweaver 可以使用户不用深 入了解 HTML 就能制作出非常专业的网页。 2．FrontPageFrontPage 是微软公司开发的网页制作工具。对 Word 熟悉的用户使用 FrontPage 进行网页 设计会非常顺手。它在主要功能上与 Dreamweaver 差不多，提供了非常丰富的模板，对新手 来说是一个不错的选择。 用户可以在它的导航下轻松地完成一个网页的制作， 它还提供了对网 站的管理等功能。 3．HotDog HotDog 是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助 设计者制作页面中的复杂部分，对于那些希望在网页中加入 CSS、Java、RealVideo 等复杂技 术的高级设计者来说是个很好的选择。 当然，要制作出理想的网页，还是要学习一些 HTML 语言和必要的脚本编程知识，才可 以从更高的角度来理解网页的本质，更好地掌握各种网页编辑软件工具。 1.7.2 图像制作类工具 许多图像制作工具软件都能够方便地进行网页图像的制作和处理。 1．Photoshop Photoshop 是 Adobe 公司最著名的图像处理软件，是图像制作的首选工具。它对图像的处 理方式多样，特别是对图像的滤镜处理，可以制作出许多特殊的图像效果。Photoshop CS 版提 供的功能可以轻松对将图像进行切片等操作， 使网页使用方便， 支持将图像存储为网页支持的 GIF、JPEG、PNG 等格式。 2．ImageReady ImageReady 也是 Adobe 公司开发的工具软件。它提供了网页图形的集成开发环境，是一
个非常优秀的网页图像制作工具。它的界面和操作都类似于 Photoshop，可以用层技术来编辑 图像。用户直接在该软件中就可以完成对图形的优化操作。它支持将文件输出为 JPG、GIF、 PNG 等图形格式，可以直接制作动画，还可以直接产生 HTML 代码。 3．Fireworks Fireworks 是 Macromedia 公司专门为制作网页图像设计开发的软件。 无论是专业人员还是 初学者，都可以用它制作出效果不错的网页图像。它也有一个集成的网页图像开发环境，具有 同时按位图图形和矢量图形的模式进行编辑的特点。 Fireworks 也可以制作简单的翻页型动画。 4．Cool 3D Cool 3D 是 Ulead（友立）公司出品的一个专门制作文字 3D 效果的软件，它可以方便地 生成具有各种特殊效果的 3D 文字，并支持输出 BMP、JPG、TAG、GIF 格式。Cool 3D 也可 以制作网页上的 3D 文字动画，它可以把生成的动画保存为 GIF 和 AVI 文件格式。 5．Painter Painter 是 Meta Creation 公司开发的图像制作工具，它除了有常见的铅笔、水粉、蜡笔、 油画笔之外，还可以用它的特殊画笔十分容易地画出火焰、霓虹灯、树叶等效果，且画出的图 像十分逼真、自然。 1.7.3 动画制作类工具 除了 1.7.2 节中所介绍的 ImageReady、Fireworks 和 Cool 3D 外，下面这些工具也常用来 制作网页中的动画。 1．Flash Flash 是 Macromedia 公司专门为网页动画设计开发的软件。用该软件制作的动画采用的 “流”控制技术，可以一边下载动画，一边播放，并且设计者可自己决定流的大小，因此，制 作的动画在网页中播放时基本看不出时间上的延迟，且下载时间较短。 在 Flash 中，大量的图形是矢量图形，因此，用 Flash 制作的图形在放大与缩小的操作中 没有失真，而且用它制作的动画文件所占的体积较小，这些都是 Flash 特有的优点。 另外，Flash 也提供了动作属性的功能，通过动作属性可以轻松地完成一些特殊的控制以 及进行一些交互处理，不用编写一行代码也可以完成许多精彩的控制效果。 2．GIF Animator GIF Animator 是一套专门的动画制作工具。它可以同时合成处理几个动画，还可以将视频 AVI 文件转换成 GIF 文件，并提供了一些特效处理功能，如立方体特效、走马灯、颜色动画 和翻页效果等。 3．3D Studio Max 3D Studio Max 是一个功能十分强大的 3D 图像制作软件。它也是用关键帧的原理来制作 动画的，特别擅长制作各种特技效果，如风晴雨雪、云雾烟火等，其自身还带有非常丰富的材 质库。
1.8 网站的设计流程
设计一个网站就像设计一个程序一样，要经过整体规划、素材收集、页面设计、调试测 试、发布与维护等步骤。下面简单介绍网站的设计流程和要遵循的一般原则。1．整体规划 在网页设计前，首先要给网站一个准确的定位，是用来宣传自身，还是用来提供商务服 务、资讯服务，从而确定主题与设计风格。 确定了主题以后，就要根据希望提供的功能来确定设计网站所使用的技术。首先要确定 Web 服务器平台，是采用 Windows 的 IIS，还是 Linux 的 Apache；然后根据网站功能的复杂 程度决定是采用静态网站还是动态网站。 对于动态网站， 还要考虑使用何种数据库及采用什么 技术来支持。 整体规划还包括网站结构的规划，即根据希望提供的信息和功能设计网站的结构，是层 次结构、线型结构、还是网状结构。 建设一个规范的网站，从结构设计、页面设计到数据库的集成，每一个环节都非常重要。 2．网页的设计与制作 网站整体规划完成后，就需要利用收集和制作的素材，采用网页制作工具去设计并完成 每一个网页的制作。网页制作过程一般分为网页布局设计和有关内容的添加两个部分。 布局就是以最适合浏览的方式将文字和图片编排在网页的不同位置，使得浏览者的视觉 效果与使用效果达到最佳状态。网页作为一种版面，有文字和图片。文字有标题与正文之分； 图片也有主次之别。如果将文字和图片简单地罗列到一个页面上，会显得零乱不堪。因此必须 根据内容需求，将文字和图片按照一定的次序合理地编排和布局，使它们组成一个有机整体， 展示给浏览者。 布局完成后，就可以在相应位置添加所收集和制作的素材了。 有时还需要为网页添加一些动态效果或实现一些特殊功能的脚本程序等。 3．测试网页 在网页制作过程中和完成以后，需要对网页进行测试，查看所设计网页的实际浏览效果 以及有没有错误。 测试网页要尽可能放置在服务器上或者与服务器相同的环境中， 应尽量多地 使用不同公司、不同版本的 Web 浏览器进行测试。测试的项目包括： （1）链接测试。主要看网页中是否有链接错误的情况。 （2）外观测试。在不同的浏览器、不同分辨率、不同的系统字体设置情况下网页的外观 有无改变，网页中的文字、图片能否正常显示。 （3）速度测试。浏览者在不同的网速下浏览网页，显示的速度如何，是否可以容忍。 （4）脚本和程序测试。测试页面中的 JavaScript、CGI 等程序是否能正常工作，是否存在 安全漏洞。 4．网页的上传、发布与维护 网页制作完成后，就可以利用 FTP 等方式上传到服务器并发布到互联网上了。网站空间 的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法。同时，还 可以通过“中国互联网络信息中心” （CNNIC）的域名注册系统申请诸如.com、.cn、.net 等域 名，详细的申请方式可以到 CNNIC 网站（http://www.cnnic.cn）上查询。利用域名可以使浏览 者更容易记住你的网站。网页上传以后，还必须保持内容的经常性更新，这样才能不断吸引访 问者单击浏览。同时，还要定期对网站进行维护和备份，以便网站遭到黑客入侵、病毒感染或 硬件故障等问题后能及时恢复，保障网站的正常运行。
本章小结
网络是对人类生活影响最大的技术之一。WWW 将网络的应用深入到普通人的生活中。 本章首先简要介绍了计算机网络的基础知识、WWW 的工作流程。其次，介绍了设计网页所 使用的语言——HTML。深入掌握 HTML 知识有助于制作优秀的网页。如果要了解更多更详 细的 HTML 知识，可以参阅有关 HTML 的专门书籍。再次介绍了与网站相关的基本知识，让 学习者了解什么是网页，什么是网站，什么是主页，组成网页的各种元素，制作和美化网页的 工具有哪些。最后介绍了网站开发的整个流程，让学习者有的放矢地设计和制作网站，以满足 用户的需求。习题一
一、填空题 1．计算机网络按范围来分，一般可以分为局域网、城域网和________。 2．HTML 是________语言。 3．网页按其表现形式可分为________和________两类。 4．静态网页的扩展名为________、________、________和.xml。 二、选择题 1．WWW 是（ ）。 A．万维网 B．超文本标记语言 C．浏览器 D．网页 2．下列哪个不是图片格式（ ）。 A．jpg B．png C．swf D．bmp 3．网页的基本元素不包括（ ）。 A．文本 B．标记 C．声音 D．动画 4．下列所示标记哪个是换行标记（ ）。 A．<html> B．<head> C．<br> D．<p> 5．Dreamweaver CS5 软件是哪家公司的（ ）。A．Adobe B．Macromedia C．Corel D．Autodesk 三、简答题 1．网络对你的生活有哪些影响？ 2．举出你知道的网络的例子，并对其结构进行了解。 3．设计一个网站，一般的工作步骤有哪些？ 4．简述因特网上访问一个网站时的工作流程。 5．静态网页与动态网页的区别是什么？ 6．网页和网站有什么区别？ 7．WWW 的工作原理是什么？
8．HTML 是什么意思？它是一种什么样的语言？ 四、上机题 1．访问几个门户网站，了解一下该网站的结构和提供的内容。 2．访问中国互联网（网址 http://www.cnnic.cn），了解现在我国的网络发展情况。 3．用记事本书写如图 l.15 所示效果的一个网页。要求三个字要居中，前面两个字是粗体，后一个字和 惊叹号是斜体。 图 1.15 上机题效果示意图 4．用记事本程序制作两个网页，其中一个链接到另一个网页。 5．在计算机上安装 Web 服务器。
