1.1 网页概述
1.1.1 什么是网页
Web 直译过来就是“网” ，可以理解为通过超级链接将各种文档连接起来的一个大规模的 信息集合。
网页（Web 页）实际上就是 HTML 文件，是一种可以在 WWW 上传输，并能被浏览器认 识和翻译成页面的文件。WWW 是 World Wide Web 的缩写；HTML 则是 Hyper Text Markup Language 的缩写，意为“超文本标记语言” ，它是一种规范，一种标准。超文本就是指页面可 以包含图片、链接、音乐等非文字的元素。网页实际上就是由 HTML 语言编写出来的。HTML 语言的发展很快，已经经历了 HTML 1.0、HTML 2.0 和 HTML 3.0 多个版本，现在正朝着动态 HTML（DHTML）和虚拟 HTML（VHTML）方面发展，对于一般网页制作者而言，只要掌 握 HTML 2.0 就可以了。 制作网页所需要的硬件和软件如下： （1）硬件。计算机主频最好在 PⅡ以上，内存最好在 128MB 以上，必须有足够大的空间来 存放网页素材。如果条件许可，还可以配置一台扫描仪和数码相机，以便获取和处理图片素材。 （2）软件。Dreamweaver CS5 是目前制作网页的最新软件版本，FrontPage 也是一个不错 的产品。处理网页图像和文字可以选择 Fireworks，若要制作网页动画，可以选择 Flash，还有 很多与之相关的软件就不一一介绍。 1.1.2 网页中的基本元素 网页包括的主要元素有文本、图像、动画、声音、视频、表格、表单等，图 11 所示就是 一个包含了多元素的网页。 1．文本 文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。在制作网页 时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。 文本在网页中的主要功能是显示信息和超级链接，文本通过文字的具体内容与不同的格 式来显示信息的重要内容，这是文本的直接功能。此外，文本作为一个对象，往往又是超级链 接的触发体，通过文本表达的链接目标指向相关内容。 2．图像 图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以 用作标题、网站标志、网页背景、链接按钮、导航条、网页主图等，网页中使用图像的格式主 要有 GIF、JPEG、PNG 等格式。 （1）GIF 图像。GIF（Graphics Interchange Format）由 CompuServe 公司 1987 年 6 月制 定，支持 64000 像素的图像，最多只能支持 256 色到 16MB 颜色的调色板，也就是 8 位的图
像。GIF 靠水平扫描像素行找到固定的颜色区域进行压缩，然后减少同一区域中像素数量。单 个文件中的多重图像，可按行扫描迅速解码以及有效的压缩，具有硬件无关性，GIF 通常对于 卡通、图像、Logo 以及带有透明区域的图像、动画很有作用，主要用于多媒体制作与网页制 作中。GIF 文件格式的扩展名是.gif。GIF 文件的特点是文件小，使用时占用系统内存少，调 用时间短。 图 11 新浪网主页 （2）JPEG 图像。JPEG（Joint Photographic Experts Group，联合照片专家组）是一种特别 为照片图像设计的图片压缩处理格式。JPEG 文件格式的扩展名为.jpg。JPEG 文件采用先进的 压缩算法（分无损压缩与有损压缩两类），可以保持较好的图像保真度和较高的压缩比。当压 缩比达到 48:1 时，可以保持很好的图像效果。JPEG 文件格式是扫描照片、带材质的图像、带 渐变色过渡的图像或者多于 256 种颜色图像的最佳格式。 （3）PNG 图像。PNG（Portable Network Graphic）即可移植网络图形。PNG 图像是专门 针对 Web 开发的一种无损压缩图像，它的压缩比要大大超过许多传统的图像无损压缩算法， 同时还支持透明背景和动态效果。PNG 文件格式的扩展名是.png。 3．动画 动画实质上就是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由于活 动的对象比静止的对象更具有吸引力，因而网页上通常有大量的动画。网页中使用较多的是 GIF 动画和 Flash 动画。动画的功能是提供信息、展示作品、装饰网页、动态交互。 4．声音 声音是多媒体网页的重要组成部分。当前存在着一些不同类型的声音文件和格式，也有 不同的方法将这些声音文件添加到 Web 页中去。在决定被添加声音的格式和方式之前，需要 考虑声音的用途、声音文件的格式、声音文件的大小、声音的品质和浏览器的差别等，不同的 浏览器对于声音文件的处理方法是非常不同的， 彼此之间可能不兼容。 用于网络声音文件的格
式非常多，常用的是 MIDI、MAV、MP3 和 AIF 等。 一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。可以 在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。 浏览器不同， 处理声音文件的方式也会有很大差异， 最好将声音文件添加到 Flash 影片中， 然后嵌入 SWF 文件以改善一致性。 5．视频 网页中视频文件的格式也非常多，常见的有 RealPlayer、MPEG、AVI 和 DivX 等。视频 文件的采用让网页变得非常精彩而且有动感。 网络上的许多插件也使得向网页中插入视频文件 变得非常简单。 6．表格 表格是一种用来控制网页中页面布局的有效方式。为了达到理想的视觉效果，通常都不 显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。 在创建表格后，就可以方便地修改其外观和结构，创建者可以执行以下任意操作： （1）添加网页内容。 （2）添加、删除、拆分及合并行和列。 （3）修改表格、行或单元格属性以添加颜色和对齐。 （4）拷贝和粘贴单元格。 许多设计人员使用表格对网页进行布局。Dreamweaver 提供两种方式来查看和操作表格： 标准视图和布局视图。在标准视图中，表格显示为行和列的网格，而布局视图允许创建者在将 表格用作基础结构的同时在网页上绘制、移动方框以及调整方框的大小。 7．表单 表单是一种特殊的网页元素。表单的主要用途是收集联系信息、接受用户要求、获得反 馈意见、设置访问者签名、让浏览者输入关键字搜索相关网页、让浏览者注册会员或以会员身 份登录。在图 11 中，登录的用户名、密码、搜索引擎等都是表单。 表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。 站点浏览者填写表单的方式通常是输入文本、 选中单选按钮和复选框， 以及从下拉列表框中选 择选项。根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、 搜索表单和用户注册表单等类型。 除了上面介绍的元素，还可以在 Dreamweaver CS5 文档中插入 Flash 影片或对象、 QuickTime 或 Shockwave 影片、Java Applets、ActiveX 控件或者其他音频和视频对象。
1.1.3 网页的类型 网页或网站由一个或多个超级文本组成，一个网页包含的元素很多，但经过浏览器编译 后能够看到以下几大类元素：文字、图像、表格、动画和视频等。还有很多元素是看不到的， 比如应用程序的执行过程。不同内容的网页被执行的过程是不同的，一般有 3 种类型：基本网 页、动态网页和模板网页。 1．基本网页 基本网页又称静态网页，是相对动态网页而言的，并不是指网页中的元素是静止不动的， 而是指客户端浏览器与服务器端不发生任何交互的网页，如图 12 所示。但网页中可能包括 GIF 动画、Flash 动画或变换图像，当单击或鼠标指针经过时才会变化，这种静态网页执行过 程较为简单，如图 13 所示就是它的工作原理。
图 12 静态网页实例 图 13 静态网页工作过程 2．动态网页 动态网页中除了基本网页中的元素以外还包括一些程序，这些应用程序需要浏览器与服 务器之间发生交互行为，而且应用程序的执行需要应用程序服务器才能完成。 应用程序服务器的作用是读取动态网页上的代码，根据代码中的指令完成网页，然后将 代码从网页上去掉， 所得的结果将是一个静态网页； 应用程序服务器将该网页传送回网页服务 器，网页服务器将网页发送到浏览器，浏览器得到的仍然是一个纯 HTML 的静态网页。 动态网页是人与服务器对话的结果，如图 14 所示的登录、注册、网上购物等都属于此类网站。 图 14 中国网络律师 动态网页有两种：一种是普通动态网页，它不包含数据库；一种是包含数据库的动态网页。 （1）普通动态网页，其工作过程如图 15 所示。 1）客户端浏览器向网络中的服务器发出请求，指向某个动态网页。 2）服务器接受请求信号后，将该网页送到应用程序服务器。 3）应用程序服务器检查该网页，并执行其中的如 JavaScript、VBScript、CGI、ASP、PHP 和 Perl 等应用程序代码。 4）应用程序服务器将完成的网页再传回给服务器。 5）服务器将完成的静态网页传回给浏览器。 客户端请求 客户端浏览器求 服务器 接受响应 网页
6）客户端浏览器接收到服务器传来的信号后，开始解读 HTML 标签，然后将结果转换并 显示出来。 Web服务器 客户机 客户机 客户机 客户浏览器 http请求 返回静态网页 图 15 动态网页工作过程 （2）包含数据库如 Access、SQL、MYSQL 等的动态网页，其工作过程如图 16 所示。 数据库服务器 Web服务器 客户机 客户机 客户浏览器 应用服务器 数据库服务 返回记录集 返回静态网页 http请求 数据请求 客户机 图 16 包含数据库的动态网页工作工程 1）浏览器向网络中的服务器发出请求，指向某个动态网页。 2）服务器接受请求信号后，将该网页送至应用程序服务器。 3）应用程序服务器检查该网页，查询网页中的应用程序指令。 4）应用程序服务器将查询指令发送到数据库驱动程序。 5）数据库驱动程序对数据库进行查询。 6）记录集被返回给数据库驱动程序。 7）驱动程序再将记录集送到应用程序服务器。 8）应用程序服务器将数据插入网页，此时动态网页又变成静态网页。 9）服务器将完成的静态网页传回给浏览器。 10）浏览器接到服务器送来的信号后，开始解读 HTML 标签，然后将其结果转换并显示。 3．模板网页 模板提供一个标准页面，它的模式固定，例如页面布局、字体排列等固定不变，只需要改变
页面的内容，这有助于读者成批地建立页面风格相同的页面，从而使网站风格得到统一。模板能 够带给你对网页功能和布局更为完整的概念，并且模板文件能够让你更容易地浏览页面代码。 注意： 浏览器在浏览网页 （静态网页和动态网页） 的时候并不是请求一次， 而是请求多次。 当服务器第一次将网页以文本的形式送回浏览器时，浏览器顺序“阅读”网页中的代码，当遇 到图像、GIF 动画、Flash 动画或应用程序代码时，浏览器就会发送第二次请求，服务器找到 图像、GIF 动画、Flash 动画、应用程序代码并运行它们，并将完成的结果送回浏览器，这样 经过反复多次请求，才将整个网页显示出来。 在实际工作中，整个请求过程只需要几十秒甚至几秒的时间，这要取决于浏览器客户端 计算机的性能、网络速度以及网页的大小等多方面因素。
1.2 网页制作工具简介
1.2.1 网页编辑工具 过去创建和管理网页是由训练有素的专业人员采用 HTML 语言手工编写程序来实现的。 而现在有许多可视化程度很高的网页制作工具， 不需要掌握专门网页制作技术就能够创作出富 有 特 色 、 动 感 十 足 的 网 页 来 。 下 面 简 单 介 绍 目 前 流 行 的 网 页 编 辑 工 具 FrontPage 和 Dreamweaver。 1．FrontPage FrontPage 是 Microsoft 公司出品的入门级网页编辑软件。FrontPage 支持所见即所得的编 辑方式，它不需要掌握很深的网页制作技术知识，甚至不需要了解 HTML 语言格式。如果会 使用 Word，很快就能学会 FrontPage，因为它的使用方法同 Word 相似。可以像编辑 Word 文 档那样在文章中加入表格、图像，甚至可以加入声音、动画或电影。FrontPage 自带的向导和 模板能使初学者在编辑网页时感到更加方便。FrontPage 最强大之处是站点管理功能。在更新 服务器上的站点时，不需要创建更改文件的目录，FrontPage 会跟踪文件并拷贝那些新版本的 文件。 2．Dreamweaver CS5 Dreamweaver CS5 是 Adobe 公司推出的一款网页设计的专业软件，其功能强大和易操作 性使它成为同类开发软件的佼佼者。 Dreamweaver 是集网站的创建和管理于一身的专业性网页 编辑工具，因其界面更为友好和人性化、操作容易、可快速生成跨平台及跨浏览器的网页和网 站，并且能进行可视化的操作，拥有强大的管理功能，所以受到了广大网页设计师的青睐，一 经推出就好评如潮。 Dreamweaver CS5 是 Adobe 公司推出的最新版本， 它与 Adobe 公司的 Flash、 Fireworks 配合使用， 功能更为强大， 是目前专业人士首选的网页制作工具。 Dreamweaver、 Flash 和 Fireworks 被称为“网页制作三剑客” 。 1.2.2 网页动画制作软件 Flash 也是公司推出的一款功能强大的动画制作软件，它将动画设计与处理推向了一个更 高、更灵活的艺术水准。Flash 是一种交互式动画设计工具，用它可以将音乐、声效、动画以 及富有新意的界面融合在一起，以制作出高品质的 Flash 动画。Flash 动画文件较小，能提高 网络传送的速度，大大增强了网站的视觉冲击力，吸引了越来越多的浏览者访问网站。Flash CS5 目前的最新版本。1.2.3 网络图像处理软件 Adobe Fireworks CS5 是 Adobe 推出的一款网页图形图像制作软件，该软件可以加速网页 设计与开发，是一款创建与优化网页图像和快速构建网站界面的理想工具。Fireworks CS5 不 仅具备编辑矢量图形与位图图像的灵活性，还提供了一个预先构建资源的公用库，并可与 Adobe Photoshop CS5、Adobe Illustrator CS5、Adobe Dreamweaver CS5 和 Adobe Flash CS5 软 件集成。在 Fireworks 中可以设计网页中的图像，如设计网页标志、网页按钮、网络广告、网 站的整体页面效果和处理产品图像等。 Photoshop 是由 Adobe 公司出品的著名的图形图像处理软件。它能够实现各种专业化的图 像处理，是专业图像创作的首选软件。
1.3 网页的设计
网页的设计包括页面构图、色彩搭配、平面布局、版式设计、空间表现等方面的内容， 这些内容要求符合人们的审美心理，给人以艺术美感和视觉冲击，能引起浏览者的注意。 1.3.1 确定网页内容 网页设计人员美化网页，增加网页设计的艺术感，都是为网页设计的内容服务的。网页 的内容与其性质有关，不同性质的网页，内容也不同，所产生的美化效果也不同。一般说来， 网页有几项基本内容：标题、网站标志、主体内容、页眉页脚、导航栏、广告栏等。 1．标题 设计一个页面，首先要有明确的标题。标题能够体现出网页设计的目的，在很大程度上 决定了网页其他元素的定位。一个好的网页要求其标题有概括性，简短、有特色、易记，还要 符合自己的总体风格， 页面中的内容要紧紧围绕其标题来组织， 绝对不要出现名不副实的现象。 2．背景 背景是指网页的底部图案，许多网页的背景都为纯色的，实际上并不一定要这样，网页选 用的背景应该与整套页面的色彩相协调。要使自己的网页美观，合理地使用颜色是非常重要的。 如果你的网页属于庄重型的，可以使用蓝色作背景，因为这样看来比较肃穆一些；如果 你的网页属于感情化的，就多使用一些浪漫的颜色，如粉红色、淡紫色和玫瑰红等。黑色不常 用， 因为黑色太深沉， 给人以压抑感。 在图案设计中， 黑色通常用来勾画或点缀最深沉的部分。 3．文字 当标题确定后，就要采集内容，所采集的内容必须与标题相符，同时要保证内容的正确 性。还要注意的是内容的数量，一般而言，站点的质量是与它的内容成正比的，只有丰富的内 容才能满足更广泛的浏览者需求。但内容不要繁杂，同时应保证内容的趣味性。在采集内容的 过程中，一定要注意特色。 所谓特色，就是要突出个性。如果是个人主页，就要突出自己的性格、兴趣、爱好等； 如果是企业网页，那就要突出本企业的特点和企业文化。放置相关的内容时，应把这些内容进 行分类，设置栏目，让人清楚明了。栏目不要设置太多，要注意分层，较重要的栏目最好能从 首页进入，并且保证用各种浏览器都能看到页面的最佳效果。 4．图片 一个页面上如果没有图片只有文字叙述，肯定会让人感到索然无味，就会不愿多看，因此必须在网页上加一些图片，以增加其可视性。但必须注意到，美观只是网页的要求之一，还 必须内容充实。 5．网站的标志 网站作为一种信息交流的媒体，在传递信息的同时，也需要对自身进行宣传，就是说它 需要有自己的特定标志。网站标志如同一个产品的商标，集中体现了网站的特色、内容、文化 内涵及个性。一般网站的标志都十分醒目、独特，并设置在网页的显要位置，给浏览者留下深 刻的印象。当前常见的网站，其网站标志的位置一般在页面的左上方。 6．页眉和页脚 页眉是指网页上端的部分（如图 17 所示）。它和整个页面的设计风格相同，良好的页眉 在页面中会起到较好的标志作用。 页眉的位置是浏览者注意力较集中的地方， 大多数网站设计 者会在这里放置广告条或一些重要链接等。 图 17 页眉 页脚是指页面的低端部分（如图 18 所示）。页脚的部分一般用来标注网站所属的企事业单 位的名称和地址，网站的版权及电子信箱等，浏览者可以从这里了解到一些站点所有者的情况。 图 18 页脚 7．导航栏 成功的网页是不能缺少导航栏这个重要部分的。导航栏是网站设计中的一个独立部分， 它的位置对网页的结构和整体布局有着至关重要的作用。 导航栏的位置一般有 4 种： 页面左侧、 右侧、顶部和底部。有的网站设置了多种导航，就是为了增强网页的可访问性。 8．其他内容 如果想使自己的网站更具有特色，可适当地使用一些网页制作技巧，如添加背景音乐、 视频、制作动态网页等，这些措施可以让网页更有可观性，但是这些技巧不要加得太多，否则 会影响网页下载的速度。 页眉 黑框里的内容均为页脚
1.3.2 确定网站的 CI 所谓 CI（Corporate Idendity，公司统一标志）就是通过视觉来统一企业的形象。网站的功 能不仅仅局限于传递信息， 它在宣传方面的功能丝毫不亚于报刊杂志等传统媒体， 一个优秀的 网站和一个实际存在的公司一样，需要整体的形象包装和设计。 一般来说，网站的 CI 设计涉及以下几个方面的内容。 1．网站的标志 通常使用有代表性的人、物、符号等作为网站的标志（如图 19 所示），可口可乐公司就 使用本公司的商标作为站点的标志。 图 19 网站的标志 2．网站的标准色彩 标准色彩是指能体现网站形象和延伸内涵的色彩。如 IBM 的深蓝色、肯德基的红兰条型。 一般来说，一个网站的标准色彩不超过 3 种，太多则让人眼花缭乱。 标准色彩用于网站的标志、标题、主菜单和主色块，能够给人一种整体统一的感觉，如 图 110 所示的网页标准色彩使用深红色，图 111 所示的网页使用浅绿色。而其他色彩的使用 只是作为点缀和衬托，决不能喧宾夺主。 图 110 “荆楚理工学院校园网”首页 下面介绍一些网页配色时的小技巧。 （1）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面 看起来色彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它的对比色。 （3）用一个色系。简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、 土灰、土蓝。
图 111 tom.com 首页 3．网站的标准字体 和标准色彩一样，标准字体是指用于标志、标题和主菜单的特有字体。一般网页默认的 中文字体是宋体。 为了体现站点的 “与众不同” 和特有风格， 可以根据需要选择一些特别字体， 如要体现设计精美可以用广告体，要体现亲切随意可以用手写体。 4．网站的宣传标语 网站的宣传标语是用来概括网站的目的和精神的标志性语言，往往只是一句话甚至一两 个字。如雀巢咖啡的广告词“味道好极了！”，Intel 的“给你一个奔腾的心”等，都能给听 众或浏览者留下非常深刻的印象。 1.3.3 首页设计 主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不 看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让 人产生一种深入探索网站的冲动。优秀的主页是一个好的网站必须具备的第一要素。 首页设计要注意的几个问题： （1）简洁明快。首页是吸引用户注意的关键所在，设计上要以清楚醒目为上，让人一目 了然。不要过于繁杂，堆砌太多的细节。 （2）浏览速度快。一般来说，首页的下载时间超过 10～15 秒，很多用户就会失去耐心， 提高浏览速度，就要尽可能地减小首页的数据量，少用图像，特别是大的图像。另外要尽量减 少表格嵌套，不要把所有内容都放在一个大表里。 （3）使首页易于漫游。首页其实就是一张大的导航图，设计上要尽量使浏览更快捷更方 便，能让用户迅速定位到感兴趣的页面上。 （4）保持新鲜感。如果首页从不改变，用户很快会厌倦，应时刻确保主页提供的是最新 信息。可以在首页上预告即将有新资料推出，可吸引用户再来浏览，或是在页头以大字标题宣 布新消息，或是定期改变主页上的图像、主页的式样。 1.3.4 版面设计 版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。由于显示器分辨率的
不同的原因，同一个页面可能用 640×480 像素、800×600 像素、1024×768 像素的分辨率等 来显示。布局，就是以最适合浏览的方式安排图片和文字在页面上的位置。 版面布局的步骤要经过三个步骤，一是设计草案，这属于创意阶段，不讲究细腻工整，不 必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可；二是粗略布局，遵循突出重点、平 衡谐调的原则，把需要的功能模块安排到页面上；三是制定方案，将粗略布局精细化，具体化。 常用的版面布局形式有： （1）T 结构布局。指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内 容的布局，因为菜单条背景较深，整体效果类似英文字母 T，所以我们称之为 T 型布局（如图 112 所示）。这是网页设计中用的最广泛的一种布局方式（如图 113 所示）。优点是页面结构 清晰、主次分明、容易掌握。缺点是规矩呆板，如果细节色彩上不注意，很容易让人感到乏味。 图 112 T 型结构示意图 图 113 网页实例 1 （2）“口”型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是 主菜单，右面放友情链接等，中间是主要内容（如图 114 所示）。这种布局的优点是充分利 用版面（如图 116 所示），信息量大，缺点是页面拥挤，不够灵活。 （3）“三”型布局。这种布局多用于国外站点，国内用得不多（如图 115 所示）。特点 是页面上横向两条色块，将页面整体分割为 4 部分，色块中大多放广告条。
图 114 “口”型结构布局示意图 图 115 “三”型结构布局示意图 图 116 网页实例 2 （4）对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色， 一般用于设计型站点（如图 117 所示）。优点是视觉冲击力强，缺点是将两部分有机地结合 比较困难。 （5）POP 布局。POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片 或 Flash 动画作为页面的设计中心（如图 118 所示）。优点是显而易见，漂亮吸引人；缺点就 是速度慢。 图 117 对称对比布局示意图 图 118 POP 布局
1.3.5 可用性设计 对于网站来说，可用性是指用户能否有效地找到所需的信息或完成他的任务，效率如何， 以及是否让人有愉快满意的感受？如果网站的可用性较差， 将会浪费用户的时间， 从而大大降 低网站的回头访问率，还会引起不必要的网络阻塞。这对网站的生存是一个至关重要的问题。 因此，为网站开发人员提供可用性设计指导是十分必要的。 下面从屏幕布局、内容设计、可访问性、媒体使用、与用户的沟通、一致性和导航等方 面介绍网站的可用性设计。 1．屏幕布局 （1）内容应占据网页的大部分空间，至少应占一半，最好接近 80%，导航部分应不超过 20%（如图 119 所示）。 图 119 “搜狐”首页 （2）使用空白区而不是粗线条或广告来分隔不同内容。 （3）颜色选择： l 除了图片和图像之外，不要使用太多的颜色来修饰某个对象。 l 正文和背景色的对比度要大。 l 正文区和其他功能区（如工具条、菜单条等）应使用不同的背景色。 （4）可读性： l 标题区、标题行和正文区应使用不同大小的字体。 l 使用静止的正文，而不要用移动、闪烁或变焦的文字。 l 字体应足够大，字体太小会降低可读性。但也不要太大或太疏，尽量避免看网页时需 要很大的滚动。 l 不要将字体设置成绝对尺寸，应尽量使用相对尺寸。 l 使用统一的字体，不要混合使用多种字体，否则会降低阅读速度。 l 底色或背景图片应与文字对比强烈，易于阅读。 （5）可浏览性： l 每个网页都应该有标题，且网页标题应该清楚地表明网页的内容（如图 120 所示）。
图 120 网页标题 l 句子或段落应简短，每句不超过 20 个词，每段不超过 5 个句子。 l 每个网页都应按照“倒金字塔”原则进行编写，即从一个简单的结论开始渐次展开。 l 使用排版印刷的设计风格，横向排列信息，以符合用户的阅读习惯。 （6）要考虑不同的用户环境，选择适合的分辨率。目前 15 寸显示器常用的分辨率为 800 像素×600 像素； 目前 17 寸显示器常用的分辨率为 1024 像素×768 像素； 目前 19 寸显示器常 用的分辨率为 1280 像素×1024 像素。 目前最为普遍的是以 1024 像素×768 像素分辨率为基准 制作网页，设置为居中显示方式，但实际要传达的信息部分以 800 像素×600 像素分辨率为基 准。在这种情况下，网页的两侧会出现空白，可以在空白处添加一些背景图像、背景色和浮动 广告（尽可能的少）等。 2．内容设计 （1）范围。 l 网站的内容应既要能达到网站设计的目标，又能满足用户的期望。 l 网站的内容应及时更新，以反映当前的最新状态。 （2）准确性。 l 写作质量要高，没有语法、拼写和排版错误。 l 文章应该分段，这样用户容易理解。 l 那些既向用户提供信息，又允许用户进行评论的网页，应明确区分信息区和评论区。 （3）著作权。 l 每篇文章或文档应标明作者姓名等相关信息。 l 应提供相应的参考文献。 l 应介绍站点拥有者的背景资料，如公司图标、名字、地址、电话号码和 Email 地址。 （4）实用性。 l 应该标明网站所用资源的产生日期。 网页标题应该清楚地表明网 页内容
l 应指出网页最近修改的时间。 （5）提供选择功能。 l 应该有输出和打印的格式选择。 l 让不同的用户选择不同的语言来显示网页。 3．网页设计 （1）网页的大小。 网页的大小不应超过 30000 字节，以使用户能够在 10 秒钟之内打开网页。 （2）链接。 l 为链接加上描述信息。 l 当一个链接被点击后，要把所有指向同一目标的链接都表示成己被访问过。 l 在链接旁注明下载文件的大小，帮助用户预测下载时间。 （3）框架。 只有在必要时才使用框架。由于 IE 及 Netscape 对框架属性定义有所差异，公开网页前应 作多方面测试，可能框架在 IE 下显示是漂亮的一页，但在 Netscape 下显示可能很丑陋。 4．可访问性 （1）下载速度。 下载网页的时间应使用户能够接受，一般来说在 10～20 秒之间。 （2）浏览器的兼容性。 l 保证网页能被所有主流的浏览器兼容。 l 保证网页能被同一浏览器的不同版本兼容。 l 保证网页能被不同类型的显示器（如单色显示器和数字电视等）兼容。 （3）搜索功能。 提供站内搜索功能，帮助用户更快地查找到所需的信息（如图 121 所示）。 图 121 设置收索功能 （4）网站的可访问性。 l 利用 META 标记为搜索引擎提供本网页的关键词和描述信息。 提供站内收索功能
l 按照规范向搜索引擎提交信息以保证站点能够被搜索到。 （5）网站内容的可访问性。 为多媒体（声音、动画等）提供等价的文本形式，以便使那些只能使用纯文本浏览器的 用户能够获得网页的内容。同样，应为那些不能阅读和阅读困难的用户（如盲人）提供与文字 等效内容（如声音文件等）。 5．多媒体的使用 （1）音频、动画和视频。 l 只有在必要时（如示范、教学、演讲等）才使用。 l 提供向一个多媒体元素的超链接， 并说明文件格式和大小的文字， 让用户根据自己的 带宽判断是否下载。 （2）图形、图像。 l 只有当图形或图像真正有助于用户对信息的理解时才使用它。 l 使用图像的缩略图技术。 l 不要在搜索页面中使用图形。 l 在必须使用图形的时候，可以多次使用同一个图形。 6．交互性 l 在网站上提供网站所有者的 Email 地址和联机表单，以便获取用户对网站的反馈意见。 l 提供网上论坛、网络会议等功能，让用户能够共享观点并进行讨论。 7．一致性 l 网页布局应该一致。 l 文本的字型、字体和颜色应该保持一致。 l 网页的导航帮助（如菜单条、按钮等）应一致。 l 不要每页都采用不同的背景图片， 以免每次跳转都要花费时间去下载， 采用相同的底 色或背景图片还可以增加网页的一致性，树立风格。 8．导航 l 每页中都应设有返回主页的链接（如图 122 所示）。 图 122 指向网站首页的链接 每页中应有指向网站 首页的链接
l 应该把站点的内容按类别分组（如图 123 所示）。 图 123 内容按类别分组 l 用户找到所需内容的点击链接次数要尽可能少（一般不应超过 3 次）。 l 应该保证用户点击链接时不会出现网页不存在的情况。 l 应提供站点结构图以帮助用户更快地找到所需的信息。 l 为用户提供反馈信息，告诉他目前在站点中的位置。
1.4 HTML 基础
HTML（Hyper Text Markup Language，超文本标记语言）是构成 Web 页面的主要工具， 是用来表示网上信息的符号标记语言。 在 Internet 上，如果想在全球范围内发布信息，需要一个能够被广泛理解的语言，也就是 说所有计算机都能够理解的用于出版的“母语” 。WWW（World Wide Web）所使用的出版语 言就是 HTML 语言。 通过 HTML， 将所需要表达的信息按某种规则写成 HTML 文件， 通过专用的浏览器来识别， 并将这些 HTML“翻译”成可以识别的信息，就是我们所见到的网页。HTML 的功能如下： （1）出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。 （2）通过超链接检索在线信息。 （3）为获取远程服务而设计表单，可用于检索信息、订购产品。 （4）在文档中直接包含了电子表格、视频剪辑、声音剪辑以及其他一些功能。 1.4.1 HTML 语言结构的基本标志 HTML 语言是标准的 ASCII 文件，从结构上讲，HTML 文件由元素组成，组成文件的许 多元素用于组织文件内容和指导文件的输出格式。 1．文档标志 文档标志为<html></html>。<html>标志用于 HTML 文档的最前面，用来标识 HTML 文档 的开始。 而</html>标志恰恰相反， 它放在 HTML 文档的最后面， 用来标识 HTML 文档的结束， 两个标志必须成对使用。 把 站 点 的 内 容 按类别分组
2．文件头标志 文件头标志为<head></head>。<head>和</head>构成 HTML 文档的开头部分，在此标志之 间可以使用<title></title>、<script></script>等标志对。<head></head>标志对之间的内容不会在 浏览器的框内显示出来。两个标志必须成对使用。 3．文件主体标志 文件主体标志为<body></body>。<body></body>是 HTML 文档的主体部分，在此标志 对之间可以包含<p></p>、<h1></h1>、<br>、<hr>等众多标志。它们所定义的文本、图像等 将会在浏览器的框内显示出来。两个标志必须成对使用。<body>标志中还可以有如表 11 所 示的属性。 表 11 <body>标志属性 属性 用途 示例 <body bgcolor="# rrggbb"> 设置背景颜色 <body bgcolor="red">红色背景 <body text="# rrggbb"> 设置文本颜色 <body textr="#0000ff">蓝色文本 <body link="# rrggbb"> 设置链接颜色 <body link="blue">链接为蓝色 <body vlink="# rrggbb"> 设置已经使用的链接的颜色 <body vlink="#ff0000"> 4．文件标题标志 文件标题标志为<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝 色部分显示的文本信息，那些信息一般是网页的“主题” 。要将网页的主题显示到浏览器的顶 部其实很简单，只要在<title></title>标志对之间加上显示的文本即可。 注意：<title></title>标志对只能放在<head></head>标志对之间。 下面是一个综合的例子，说明了 HTML 文档中最基本标志的使用。 <html> <head> <title>显示在浏览器最上边蓝色条中的文本</title> </head> <body bgcolor="red"text="blue"> <p>红色背景、蓝色的文本</p> </body> </html> 1.4.2 页面格式标志 在网页设置中会用到 HTML 页面设置、列表设置等格式标志。 1．段落标志 （1）<p></p>。<p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照 段落的格式显示在浏览器上。另外，<p>标志还可以使用 align 属性，它用来说明对齐方式， 语法是<p align=" "></p>。align 可以是 Left（左对齐）、Center（居中）和 Right（右对齐）三 个值中的一个。
如<p align="Center"></p>表示标志对中的文本使用居中对齐方式。 （2）<per></per>。<per></per>标志对用来对文本进行预处理操作。 2．换行标志
的使用上面还有一定的技巧，如果把<br>加在<p></p>标志对的外边，将创建一个很大的回车 换行，即<br>前面和后面文本的行与行之间的距离很大，若放在<p></p>的里面，则<br>前面 和后面的文本行与行之间的距离比较小。 3．列表标志 （1）<dl></dl>、<dt></dt>、<dd></dd>。<dl></dl>用来创建一个普通的列表，<dt></dt> 用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd> 都必须放在<dl></dl>标志对之间。 下面是一个创建普通列表的例子： <html> <head> <title>一个普通的列表</title> </head> <body tetx="blue"> <dl> <dt>中国城市</dt> <dd>北京<dd> <dd>上海<dd> <dd>广州<dd> <dt>美国城市</dt> <dd>华盛顿<dd> <dd>芝加哥<dd> <dd>纽约<dd> </dd> </body> </html> 上面实例在浏览器中的显示结果如图 124 所示。 （2）<ol></ol>、<ul></ul>、<li></li>。<ol></ol>标志对用来创建一个有数字的列表； <ul></ul>标志对用来创建一个标有圆点的列表；<li></li>标志对只能在<ol></ol>或<ul></ul> 标志对之间使用，此标志对用来创建一个列表项，若<li></li>放在<ol></ol>之间，则每个列表 项加上一个数字，若<li></li>放在<ul></ul>之间，则每个列表项加上一个圆点。 <html> <head> <title>一个普通的列表</title> </head> <body tetx="blue"> <ol> <p>中国城市</p> <li>北京</li> <li>上海</li> <li>广州</li> </ol> <ul> <p>美国城市</p> <li>华盛顿</li> <li>芝加哥</li> <li>纽约</li> </ul> </body> </html>
实例在浏览器中显示的结果如图 125 所示。 图 124 列表标志在浏览器中的显示效果 图 125 列表标志在浏览器中的显示效果 （3）<div></div>。<div></div>标志对用来排版大块 HTML 段落，也用于格式化表，此 标志对的用法与<p></p>标志对非常相似，同样有 align 对齐方式属性。 4．标题格式标志 HTML 语言提供了一系列对文本中的标题进行操作的标志对，如<h1></h1>…<h6></h6>， 一共有 6 对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也就是 说标志中 h 后面的数字越大标题文本就越小。如果 HTML 文档需要输出标题文本，就可以使 用这 6 对标题中的任何一对。 1.4.3 文本标志 1．黑体字、斜体字、下划线标志对 <b></b>用来使文本以黑体字的形式输出。 <i></i>用来使文本以斜体字的形式输出。 <u></u>用来使文本以下划线的形式输出。 2．文字字型标志 文字字型标志还有<tt></tt>、<cite></cite>、<em></em>、<strong></strong>。这些标志对 的用法和上面讲的一样，差别只是输出文本的字体不一样。 <tt></tt>用来输出打字机风格字体的文本。 <cite></cite>用来输出引用方式的字体（通常是斜体） 。 <em></em>用来输出需要强调的文本（通常是斜体加黑体）。 <strong></strong>则用来输出加重文本（通常是斜体加黑体）。 3．文字大小、字体、颜色标志 <font></font>是很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变， 这些改变主要是通过对两个属性 size 和 color 的控制来实现的。size 属性用来改变字体大小， 它可以取值-N、N 和+N；而 color 属性则用来改变文本的颜色。颜色的取值可以是基本标志 中讲过的十六进制 RGB 颜色码或 HTML 语言给定的颜色常量名。 4．文本标志的综合应用 <html> <head> <title>文本标志的综合示例</title>
</head> <body tetx="blue"> <h1>最大的标题</h1> <h3>使用 h3 的标题</h3> <h6>最大的标题</h6> <p><b>黑体字文本</b></p> <p><i>斜体字文本</i></p> <p><u>下划线文本</u></p> <p><tt>打字机风格的文本</tt></p> <p><cite>引用方式的文本</cite></p> <p><em>强调文本</em></p> <p><strong>加重文本</strong></p>
<p><font size="+1" color="#FF0000">size 取值"+1"color 取值为红色时的文本</font></p> </body> </html> 上面程序在浏览器中显示的效果如图 126 所示。 图 126 文本标志在浏览器中的显示效果 1.4.4 图像标志 图像在网页制作中担任着非常重要的角色。 HTML 语言也专门提供了<img>标志来处理图 像的输出。 1．图像属性赋值标志 <img>标志并不是真正将图像加入到 HTML 文档中，而是将标志对的 SRC 属性赋值。这 个值是图像文件的文件名，包括路径，这个路径可以是相对路径，也可以是网址。实际上就是 通过路径将图形文件嵌入到文档中。 所谓相对路径是指所要链接或嵌入到当前 HTML 文档的文件与当前文件的相对位置所形 成的路径。通常有如下情况： （1）假如 HTML 文件与图形文件（假设文件名为 logo.gif）在同一个目录下，则可以将 代码写成<img src="logo.gif">。
（2） 假如图形文件放在当前 HTML 文档所在目录的一个子目录 （子目录名假设是 images） 下，则代码应该为<img src="images/logo.gif">。 （3）假设图形文件放在当前 HTML 文档所在目录的上层目录（目录名假设是 home）下， 则相对路径就必须是准网址。即用“../”表示网站，然后在后面紧跟文件在网站中的路径。假 设 home 是网站下的一个目录，则代码应为<img src="../home/logo.gif">，若 home 是网站目录 king 下面的一个子目录，则代码应该为<img src="../king/home/logo.gif">。 必须强调，src 属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之 外，<img >标志还有 alt、align、border、width 和 height 属性。 1）alt 属于是当鼠标移动到图像上时显示的文本。 2）align 是图形的对齐方式。 3）border 属性是图形的边框，可以取大于或者等于 0 的整数，默认单位是像素。 4）width 和 height 属性是图形的宽和高，默认单位是像素。 2．水平线标志
<hr>标志是在 HTML 文档中假如一条水平线， 它可以直接使用， 具有 size、 color、 width 和 noshade 属性。 （1）size 是设置水平线的厚度。 （2）width 是设置水平线的宽度，默认单位为像素。 （3）noshade 属性不需要赋值，而是直接加入标志即可使用，它是用来加入一条没有阴 影的水平线（不加入此属性，水平线将有阴影）。 1.4.5 表格标志 表格标志对于网页制作是很重要的， 现在很多网页都使用多重表格， 主要是因为表格不但 可以固定文本和图像的输出，而且还可以任意进行背景和前景颜色的设置。 1．创建表格标志 <table></table>标志对用来创建一个表格，它有如表 12 所示的属性。 表 12 <table></table>标志属性 属性 用途 <table bgcolor=""> 设置表格的背景色 <table border=""> 设置边框的宽度，若不设置宽度默认值为 0 <table bordercolor=""> 设置边框的颜色
<table bordercolorlight=""> 设置边框明亮部分的颜色（当 border 的值大于等于 1 才有用） <table bordercolordark=""> 设置边框昏暗部分的颜色（当 border 的值大于等于 1 才有用） <table cellspacing=""> 设置表格的单元格之间的空间大小 <table cellspacing=""> 设置表格的单元格边框与其内部内容之间空间大小 <table width=""> 设置表格的宽度，单位用绝对像素值或总宽度的百分比 2．行、单元格和表格头标志 （1）<tr></tr>、<td></td>。<tr></tr>标志对用来创建表格的每一行。此标志对只能放在 <table></table>标志对之间使用，而在此标志对之间加入文本是无用的，因为<tr></tr>之间只 能紧跟<td></td>标志对才是有效的语法。<td></td>标志对用来创建表格中每一行中的每一个
单元格，此标志对只有放在<tr></tr>标志对之间才是有效的，输入的文本也只有放在<td></td> 标志对之间才有效（即才能被显示出来）。<table></table>、<tr></tr>和<td></td>标志对之间的 关系，如表 13 所示。 表 13 <table></table>、<tr></tr>和<td></td>标志对之间的关系 标志 含义 <table> 最外层，创建一个表格 <tr> 创建一行 <td>要输出的文本只能放在此处</td> <td>要输出的文本只能放在此处</td> <td>要输出的文本只能放在此处</td> 创建一个单元格（这里总共创建了三个单元格） </tr> 行末尾 </table> 最外层 此外，<tr>还有 align 和 valign 属性。
align 是水平对齐方式，取值为 left（左对齐） 、center（居中对齐）、right（右对齐）。 valign 是垂直对齐方式，取值为 top（靠顶端对齐） 、middle（居中间对齐） 、bottom（靠底 部对齐） 。 <td>具有 width、colspan、rowspan 和 nowrap 属性。 width 是单元格的宽度，单位用绝对像素值或总宽度的百分比。 colspan 设置一个表格单元格跨占的列数（缺省值为 1）。 rowspan 设置一个表格单元格跨占的行数（缺省值为 1）。 nowrap 禁止对表格单元格内的内容自动断行。 （2）<th></th>。<th></th>标志对用来设置表格头，文字通常是黑体、居中。 3．表格标志的综合应用 <html> <hrad> <title>表格标志的综合示例</title> </head> <body> <table border="1"width="80%"bgcolor="#e8e8e8" cellpadding="2" bordercolor= "30000ff"> <tr> <th width="33%" colspan="2" valign="bottom">意大利</th> <th width="36%" colspan="2" valign="bottom">英格兰</th> <th width="36%" colspan="2" valign="bottom">西班牙</th> <tr> <td width="16%" align="center">AC 米兰</td> <td width="16%" align="center">佛罗伦萨</td> <td width="17%" align="center">曼联</td> <td width="17%" align="center">纽卡斯卡</td> <td width="17%" align="center">巴塞罗那</td> <td width="17%" align="center">皇家社会</td> <tr> <td width="16%" align="center">尤文图斯</td> <td width="16%" align="center">桑普多利亚</td> <td width="17%" align="center">利物普</td> <td width="17%" align="center">阿森纳</td>
<td width="17%" align="center">皇家马德里</td> <td width="17%" align="center">...</td> <tr> <td width="16%" align="center">拉奇奥</td> <td width="16%" align="center">国际米兰</td> <td width="17%" align="center">切尔西</td> <td width="17%" align="center">米德尔斯堡</td> <td width="17%" align="center">马德里竞技</td> <td width="17%" align="center">...</td> </table> </body> </html> 以上例子在浏览器中显示的结果如图 127 所示。 佛罗伦 萨 纽卡斯 卡 阿森纳 图 127 表格标志在浏览器中的显示效果 1.4.6 链接标志 链接是 HTML 语言的一大特色。 正因为有了它， 人们对内容的浏览才具有灵活性和网络性。 1．创建链接页面标志 创建页面标志对的 href 属性是不可缺少的，标志对之间加入需要链接的文本和图像（链 接图像即加入<img src=" ">标志）。Href 的值可以是网址或相对路径，也可以为 mailto:形式。 对于第一种情况，语法为<a href="URL"></a>，这样就可以创建一个超文本链接，例如：
<a href="xld.home.chinaren.net/"> 这是我的网站</a>
对于第二种情况， 语法为<a href="mailto:EMAIL"> </a>， 这就创建一个自动发送电子邮件 的连接，mailto:后边紧跟着要自动发送的电子邮件的地址（即 Email 地址），例如：
<a href="mailto:jmun_jsjxy@163.com">这是我的电子邮箱(Email)</a>
此外，<a href=" "> </a>还具有 target 属性。此属性用来指明浏览的目标帧，这将在 1.3.7 节介绍目标帧的时候给予介绍，这里提到它的目的是要说明如果不使用 target 属性，当浏览者 单击链接之后将在原来的浏览窗口中浏览新的 HTML 文档。当 target 的值等于"_blank"时，单 击链接后将会打开一个新的浏览器窗口来浏览新的 HTML 文档。例如：
<a href="xld.home. chinaren.net/" target="_blank"> 这是我的网站</a> 2．创建链接标签标志
<a name=""></a>标志对要结合<a href=" "> </a>标志对使用才有效果。<a name=""></a>标 志对用来在 HTML 文档中创建一个标签（也就是做一个记号），属性 name 是不可缺少的，它 的值是标签名，例如：
创建标签是为了在 HTML 文档中创建一些链接，以便能够找到同一文档中有标签的地方。 要找到标签所在地，就必须使用<a href=" "> </a>标志对，例如要找到“标签名”这个标签， 就要编写如下代码： <a href="#标签名">单击此处将使浏览器跳到"标签名" </a> 1.4.7 标志帧 帧可以用来向浏览器窗口中装载多个 HTML 文件。 也就是说每个 HTML 文件占据一个帧， 而多个帧可以同时显示在同一浏览器窗口中，它们组成了一个最大的帧，即一个包含多个 HTML 文档的 HTML 文件 （我们称它为主文档）。 帧通常的使用方法是在一个帧中放置目录 （即 可以供选择的链接），然后将 HTML 文件显示在另一个帧中。 1．帧属性标志 <frameset></frameset>标志对放在帧主文档<body></body>标志对的外边， 也可以嵌套在其 他帧的文档中， 并且可以嵌套使用。 此标志对用来定义主文档中有几个帧并且各个帧是如何排 列的。它具有 rows 和 cols 属性，使用<frameset>标志时这两个属性至少选择一个，否则浏览 器窗口只显示第一个定义的帧，剩下的一概不管，<frameset></frameset>标志对也就没有起到 任何作用。 rows 用来规定主文档中各个帧的行定位，而 cols 用来规定主文档中各个帧的列定位。这 两个属性的取值可以是百分数、绝对像素值或者*，其中*代表那些未被说明的空间，如果同一 个属性中出现多个*则将剩下的未被说明的空间平均分配。同时，所有的帧按照 rows 和 cols 值从左到右，然后从上到下排列，示例如表 14 所示。 表 14 帧属性标志示例说明 示例 说明 <frameset rows="*,*,*"> 总共有三个按列排列的帧，每个帧占整个浏览器窗口的 1/3 <frameset cols="40%,*,*"> 总共有三个按行排列的帧，第一个帧占整个浏览器窗口的 40%，剩下 的空间平均分配给另外两个帧 <frameset rows="40%,*" cols="50%,*,200"> 总共有六个帧，先是在第一行中从左到右排列三个帧，然后在第二行 中从左到右再排列三个帧，即两行三列，所占空间依据 rows 和 cols 属性的值，其中 200 的单位是像素 2．帧内容标志 （1）<frame>。<frame>标志放在<frameset></frameset>之间，用来定义某一个具体的帧。 <frame>标志具有 src、 name、 scrolling 和 noresize 属性， 其中 src 和 name 属性都是必须赋值的。 src 是此帧的源 HTML 文件名（包括网络路径、相对路径或网址），浏览器将会在此帧中 显示 src 指定的 HTML 文件。
name 是此帧的名字，这个名字用来供超文本链接标志<a href="" target="">中的 target 属 性，用来指定链接的 HTML 文件将显示在哪一个帧中。例如定义一个帧，名字是 main，在帧 中显示的 HTML 文件名是 jc.htm，则代码为：<frame src="jc.htm" name="main">。当有一个链 接单击了这个链接后， 文件 new.htm 将要显示在名为 main 的帧中， 则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样就可以在一个帧中建立网站目录，加入一系列链接， 当单击链接以后在另一帧中显示被链接的 HTML 文件。
scrolling 用来指定是否显示滚动轴，取值可以是 yes（显示）、no（不显示）、auto（若需 要则会自动显示，不需要则自动不显示）。 noresize 属性值直接加入标志中就可以使用，不需要赋值，它用来禁止用户调整一个帧的大小。 （2）<noframes></noframes>。<noframes></noframes>标志对也是放在<frameset></frameset> 标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。 3．帧标志的综合应用 下面是一个有关帧的综合应用的例子。 主文档： <html> <head> <title>帧标志综合示例</title> </head> <frameset cols="25%,*"> <frame src="menu.htm" scrolling="no" name="Left"> <frame src="pagel.htm" scrolling="auto" name="Main"> <noframes> <body> <p>对不起,您的浏览器不支持"帧"!</p> </body> </noframes> </frameset> </html> 目录页 meun.htm: <html> <head> <title>目录</title> </head> <body> <p><font color="#ff0000">目录</font></p> <p><a href="pagel.htm" target="Main">链接到第一页</a></p> <p><a href="page2.htm" target="Main">链接到第二页</a></p> </body> </html> 第一页 pagel.htm <html> <head> <title>第一页</title> </head> <body> <p align="center"><font color="#8000ff">这是第一页!</font></p> </body> </html> 第二页 page2.htm <html> <head> <title>第二页</title> </head> <body> <p align="center"><font color="#ff0080">这是第二页!</font></p> </body> </html>
综合实例的运行效果如图 128 所示。 图 128 综合实例运行效果 1.4.8 表单标志 表单在 Web 网页中用来给访问者填写信息，从而获取用户信息，使网页具有交互的功能。 一般是将表单设计在一个 HTML 文档中，当用户填写完信息后执行提交（submit）操作。于 是表单的内容就从客户端浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处 理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。 1．创建表单标志 <form></form>标志对用来创建一个表单，也就是定义表单的开始和结束位置，在标志对 之间的一切都属于表单内容。<form>标志还有 action、method 和 target 属性。
action 的值是处理程序的程序名（包含绝对路径和相对路径），如<form action="http:// myhome.com/counter.cgi">，当用户提交表单时，服务器将执行网址http://myhome.com/上的名 为 counter.cgi的 CGI 程序。
method 属性用来定义处理程序从表单中获得信息的方式，可以取 GET 和 POST 中间的任 何一个。GET 方式是处理程序从当前 HTML 文档中获取数据，然而这种方式传送的数据量是 有所限制的，一般限制在 1KB 以下。POST 方式与 GET 方式正好相反，它是当前的 HTML 文 档把数据传送给处理程序，传送的数据量要比使用 GET 方式大得多。 terget 属性用来指定目标窗口或目标帧。 2．定义输入区标志 <input type=" " >标志用来定义一个用户输入区，用户可以在其中输入信息。此标志必须 放在<form></form>标志对之间。 <input type=" " >标志中共提供了 8 种类型的输入区域，具体是哪一种类型由 type 属性决 定，这 8 种类型的具体内容如表 15 所示。 表 15 type 属性列表 Type 属性取值 输入区域类型 输入区域示例 <input type="text" size="" maxlength="" > 单行文本输入区域， size 与 maxlength 属性用来 定义此种输入区域显示尺寸大小与输入的最大 字符数 <input type="submit"> 将表单内容提交给服务器按钮 <input type="reset"> 将表单的内容全部清除，重新填写按钮
续表 Type 属性取值 输入区域类型 输入区域示例 <input type="checkbox" checked="checked"> 一个复选框， checked 属性用来设置该复选框缺 省时是否被选中，右边示例使用了三个复选框 <input type="hidden"> 隐藏区域，用户不能在其中输入，用来预设某 些要传送的信息 <input type="image" src="URL"> 使用图像来代替 submit 按钮，图像的源文件由 src 属性指定，用户单击后，表单中的信息和单 击位置的 X、Y 坐标一起传送给服务器 <input type="password"> 输入密码的区域，当用户输入密码时，区域内 将会显示* <input type="radio"> 单选框类型， radio 属性表示输入项是一个单选 项，右边示例中使用了三个单选项 此外，八种类型的输入区域有一个公共的属性 name，此属性给每一个输入区域一个名字。 这个名字与输入区域是一一对应的， 即一个输入区域对应一个名字。 服务器就是通过调用某一 个输入区域名字的 value 属性来获得该区域的数据。而 value 属性是另一公共属性，它可以用 来指定输入区域的缺省值。 3．创建列表框标志 （1）<select></select>。<select></select>标志对用来创建一个下拉列表框或可以复选的列 表框。此标志对用于<form></form>标志对之间。<select>具有 multiple、name 和 size 属性。 name 是此列表的名字，它与上面介绍的 name 属性作用是一样的。 size 属性用来设置列表的高度，缺省时值为 1，若没有设置（加入）multiple 属性，显示 的将是一个弹出式的列表框。 （2）<option>。<option>标志是用来指定列表框的一个选项，它放在<select></select>标志 对之间。此标志具有 selected 和 value 属性。selected 属性用来指定默认的选项。value 属性用 来给<option>指定的选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select> 区域的名字的 value 属性来获得该区域选中的数据项，如表 16 所示。 表 16 示例说明 HTML 代码 浏览器显示的结果 <from action="cgibin/tongji.cgi" method="post"> <p>请选择最喜欢的女歌手 : <select name="gxl" size="1"> <option value="zh">祖海 <option value="szy" selected>宋祖英 <option value="hh">韩红 <option value="sy">孙悦 </select> </form> <form action="cgibin/tongji.cgi" method="post"> <p>请选择最喜欢的男歌手 : <select name="gxl" size="1"> <option value="ldh">刘德华 <option value="zhxy" selected>张学友 <option value="gfch">郭富城 <option value="lm">黎明 </select> </form>
4．创建文本框标志 <textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于<form></form> 标志对之间。<textarea>具有 name、cols 和 rows 属性。cols 和 rows 属性分别用来设置文本框 的列数和行数，这里的行和列是以字符为单位的，如表 17 所示。 表 17 示例说明 HTML 代码 浏览器显示的结果 <form action="cgibin/tongji.cgi" method="post"> <p>你的意见对我很重要: <textarea name="yj" cols="20" rows="5">请将意见输入此区域 </textarea> </form> 1.4.9 多媒体标志 多媒体标志用于插入音乐和各种多媒体插件。 1．插入背景音乐标志 <bgsound>用来插入背景音乐，但只适用于 IE，其参数设定不多。 例如： <bgsound src="your.mid"autostart="true" loop="infinite"> src="your.mid" 设定 mid 档案及路径，可以是相对路径，也可以是绝对路径。 autostart="true" 是否在音乐文件传完之后就自动播放音乐。true 表示是，false 表示否（内定值）。 loop="infinite" 是否自动反复播放。loop=2 表示重复 2 次，infinite 表示重复多次。 2．插入各种多媒体标志
<embed>用以插入各种多媒体，格式可以是 MIDI、MAV、AIFF、AU 等，netscape 及新 版的 IE 都支持。其参数设定较多。 例如： <embed src="your.mid" autostart="true" loop="true" height="true"> src="your.mid" 设定 mid 档案及路径，可以是相对路径，也可以是绝对路径。 autostart="true" 是否在音乐文件传完之后，就自动播放音乐。true 表示是，false 表示否（内定值）。 loop="true" 是否自动反复播放。loop=2 表示重复 2 次，infinite 表示重复多次。 hidden="true" 是否完全隐藏控制画面，true 为是，no 为否（内定）。 starttime="分:秒" 设定歌曲开始播放的时间。如 starttime="00:30"表示从第 30 秒处开始播放。 volume="0100" 设定音量的大小，数量是 0 到 100 之间。内定值为使用者系统本身设定。 width="整数"和 high="整数" 设定控制画面的宽度和高度（若 hidden="no"）。 align="center"
设定控制画面和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、left right texttop、middle、absmiddle、absbottom。
Controls="smallconsole"
设定控制画面的外貌。预设值是 console。其中 console 一般正常的面板；smallconsole 较 小的面板；playbutton 只显示播放按钮；pausebutton 只显示暂停按钮；stopbutton 只显示停止 按钮；volumelever 只显示音量调整按钮。
1.4.10 其他标志 1．<marquee>
<marquee>适用于 IE，译为“跑马灯” 。例如 status Bar，其意思是指走动或卷动的文字， 其参数设定较多。例如：
<marquee behavior="scroll" direction="left" bgcolor="#0000ff" height="30" width="150" hspace="0" vspace="0" loop="infinite" scrollamount="30" scrolldelay= "500">hello</marquee> behavior="scroll"。设定文字的卷动方式，可选值为： scroll 一般卷动，是内定值。 slied 例如幻灯片，一格格的，效果是文字一接触左边便全部消失。 alternate 文字向左右两边撞来撞去。 direction="left" 设置文字卷动方向，left 表示向左，是内定值，right 表示向右。 bgcolor="#0000ff" 设置文字卷动范围的背景颜色。 height="30" width="150" 设置文字卷动范围，可以采取相对或绝对值，如 30%或 30 等，单位为像素。 hspace="0" vspace="0" 设定文字的水平及垂直空白位置。 loop="infinite" 设定文字卷动的次数，其值可以是正整数或 infinite，infinite 是内定的，表示无限次。 scrollamount="30" 设定每“格”文字之间的间隔，单位是像素。 scrolldelay="500" 设定文字卷动的停顿时间，单位是毫秒。 2．<blink> <blink>是令文字闪烁，只适用于 netscape，用法直接，没有参数。例如： <blink>天上的星星不说话，地上的孩子叫妈妈<blink> 显示的结果为：天上的星星不说话，地上的孩子叫妈妈 3．<meta> <meta httpequiv="contenttype" content="text/html;charset=big5"> <meta httpequiv="contenttype" content="text/html;charset=iso88591> 设定这是 HTML 文件及其编码语系，中文网页请使用 BIG5，或者不设编码也可，纯英文 网页建议使用 ISO88591。 <meta name="GENERATOR" content="Mozilla/4.04[en] (win95;I) [Netscape]"> <meta name="GENERATOR" content="Microsoft FrontPage 3.0"> 表示该网页由什么编辑器写成。 <meta httpequiv="refresh" content=10;url=html:www.3wc.com>
这一行较为实用，能在预定的秒数内自动转到指定的网址，原始码中的 10 表示 10 秒。 4．<link>
<link>用来将目前文件与其他 URL 链接，但不会有链接按钮，用于<head>标志，格式如下： <link href="URL" rel="relationship"> <link href="URL" rev="relationship">
1.5 实践技能训练
1.5.1 字体设置标记 实例说明：本实例介绍字体设置标志的方法，效果如图 112 所示。 实例分析：利用字体设置标志，设置字体的大小、颜色及字体的属性，完成字体设置的 HTML 网页的制作。 操作步骤如下： （1）选择“开始”→“程序”→Macromedia→Dreamweaver CS5，启动 Dreamweaver CS5 程序。 （2）选择 HTML 进入编辑环境，选择 。 （3）在文档窗口输入源代码如下所示： <html> <head> <title>HTML 中字体的设置</title> </head> <body> <h1 align=center> <font size="14" color="#0000FF" face=cursive>欢迎进入校园网站</font> </h1> </body> </html> （4）选择“文件”→“保存”命令，在“另存为”对话框选择存放位置、输入网页文件 名。例如，输入 ziti.htm。在“保存类型”中选择“所有文件” ，然后单击“保存”按钮。 （5）双击打开 ziti.htm 文件，显示的结果如图 129 所示。 图 129 字体设置显示效果 1.5.2 字符修饰标记 实例说明：本实例介绍字符修饰标记的使用方法，效果如图 130 所示。 实例分析：利用字符修饰标记，<i></i>、<u></u>，完成字符修饰 HTML 网页的制作。 操作步骤如下：（1）选择“开始”→“程序”→Macromedia→Dreamweaver CS5，启动 Dreamweaver CS5 程序。 （2）选择 HTML 进入编辑环境，选择 。 （3）在文档窗口输入源代码如下所示： <html> <head> <title>HTML 中字符修饰的设置</title> </head> <body bgcolor="ffffff" text="#000000"> <font size="12"><i><u>校园是我家，大家共同建设她.</u></i></font> </body> </html> （4）选择“文件”→“保存”命令，在“另存为”对话框选择存放位置、输入网页文件 名。例如，输入 zifu.htm。在“保存类型”中选择“所有文件” ，然后单击“保存”按钮。 （5）双击打开 zifu.htm 文件，显示的结果如图 130 所示。 图 130 字符修饰设置显示效果 1.5.3 表格标记 实例说明：本实例介绍表格标记的使用方法，效果如图 131 所示。 图 131 表格设置显示效果 实 例分 析：利 用表 格标记 ，<table>元 素用于 定义一 个表 格，每 一个 表格只 有一 对 <table></table>。<td></td>用来定义表格单元，一张网页可以包含多个表格单元。<tr></tr>用 来定义表格的行，<th></th>用来定义表格的头。 操作步骤如下：
（1）选择“开始”→“程序”→Macromedia→Dreamweaver CS5，启动 Dreamweaver CS5 程序。 （2）选择 HTML 进入编辑环境，选择 。 （3）在文档窗口输入源代码如下所示： <html> <head> <title>表格标记的是设置</title> </head> <body> <table align="center" border="15" width="100" height="100"> <caption valign="top">学生成绩单</caption> <tr><th colspan="100">赵亮</th></tr> <tr> <th bgcolor="white">语文</th> <th bgcolor="white">数学</th> <th bgcolor="white">英语</th> </tr> <tr> <td align="left">98</td> <td align="center">97</td> <td align="right">86</td> </tr> </table> </body> </html> （4）选择“文件”→“保存”命令，在“另存为”对话框选择存放位置、输入网页文件 名。例如，输入 biao.htm。在“保存类型”中选择“所有文件” ，然后单击“保存”按钮。 （5）双击打开 biao.htm 文件，显示的结果如图 131 所示。
