图书在版编目（CIP）数据

HTML+CSS网页设计与布局从入门到精通／温谦编著．北京：人民邮电出版社，2008.8（2012.3重印）

ISBN 978-7-115-18339-2

I．H…　II．温…　III．①超文本标记语言，HTML—主页制作—程序设计②主页制作—软件工具，CSS　IV．TP312　TP393.092

中国版本图书馆CIP数据核字（2008）第090134号

内 容 提 要

本书紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。

本书共分4个部分21章和两个附录，包括网页设计基础、HTML基础、CSS基础、CSS高级技术和CSS布局技术等内容。全书遵循Web标准，强调“表现”与“内容”的分离，抛弃了那些过时的HTML标记和属性，从更规范的角度全面、系统地介绍了网页设计制作方法与技巧。附录收录了网站发布与管理的知识和160个应用CSS时出现频度较高的英文单词及其中文解释。书中给出了大量详细的案例，并对案例进行分析，便于读者在理解的基础上，直接修改后使用。本书作者具备扎实的实践功底，行文细腻，对每一个技术细节以及每一个实际工作中可能遇到的难点和错误都进行了详细的说明，并给出了解决方案。

本书适合于网页设计制作人员和开发人员阅读，读者可以在掌握HTML和CSS之后做出精美的网页。

HTML+CSS网页设计与布局从入门到精通

◆　编        著　前沿科技　温　谦

责任编辑　杨　璐

◆　人民邮电出版社出版发行

北京市崇文区夕照寺街14号

邮编　100061　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

北京天宇星印刷厂印刷

◆　开本：787×1092　1/16

印张：27.5

字数：665千字

印数：31601-36600册

2008年8月第1版

2012年3月北京第17次印刷

ISBN 978-7-115-18339-2/TP

定价：49.00元

读者服务热线：(010)67132692　印装质量热线：(010)67129223

反盗版热线：(010)67171154

目 录

前言

第1部分　HTML基础篇

第1章　网页设计基础知识

1.1　基础概念

1.2　网页与HTML语言

1.3　Web标准：结构、表现与行为

1.3.1　标准的重要性

1.3.2　“Web标准”概述

1.4　初步理解网页设计与开发的过程

1.4.1　基本任务与角色

1.4.2　明确网站定位

1.4.3　收集信息和素材

1.4.4　策划栏目内容

1.4.5　设计页面方案

1.4.6　制作页面

1.4.7　实现后台功能

1.4.8　整合与测试网站

1.5　与设计相关的技术因素

1.6　本章小结

第2章　HTML网页文档结构

2.1　HTML简介

2.1.1　创建第一个HTML文件

2.1.2　HTML文件结构

2.2　简单的HTML案例

2.3　网页源文件的获取

2.3.1　直接查看源文件

2.3.2　保存网页

2.4　辅助：利用Dreamweaver快速建立基本文档

2.5　本章小结

第3章　用HTML设置文本和图像

3.1　文本排版

3.1.1　实现段落与段内换行（<p>和<br>）

3.1.2　设置标题（<h1>~<h6>）

3.1.3　使文字水平居中（<center>）

3.1.4　设置文字段落的缩进（<blockquote>）

3.2　设置文字列表

3.2.1　建立无序列表（<ul>）

3.2.2　建立有序列表（<ol>）

3.3　HTML标记与HTML属性

3.3.1　用align属性控制段落的水平位置

3.3.2　用bgcolor属性设置背景颜色

3.3.3　设置文字的特殊样式

3.3.4　设置文字的大小和颜色（<font>）

3.4　忘记过时的HTML标记和属性

3.5　特殊文字符号

3.6　在网页中使用图像（<img>）

3.6.1　网页中的图片格式

3.6.2　一个简单的图片网页

3.6.3　使用路径

3.7　用width和height属性设置图片的尺寸

3.8　用alt属性为图像设置替换文本

3.9　辅助：利用Dreamweaver设置文本和图像

3.10　辅助：利用Dreamweaver代码视图提高效率

3.10.1　代码提示

3.10.2　代码折叠

3.10.3　使用拆分视图对代码快速定位

3.11　本章小结

第4章　用HTML建立超链接（<a>）

4.1　设置基本文字超链接

4.1.1　URL的格式

4.1.2　URL的类型

4.2　设置页面内部的特定目标的链接

4.3　设置图片的超链接

4.4　设置电子邮件链接

4.5　设置以新窗口显示链接页面

4.6　创建热点区域

4.6.1　用HTML建立热点区域（<map>和<area>）

4.6.2　辅助：利用Dreamweaver精确定位热点区域

4.7　框架之间的链接

4.7.1　建立框架与框架集（<frame>和<frameset>）

4.7.2　用cols属性将窗口分为左右两部分

4.7.3　用rows属性将窗口分为上中下三部分

4.7.4　框架的嵌套

4.7.5　用src属性在框架中插入网页

4.7.6　用src属性在框架之间链接

4.7.7　创建嵌入式框架（<iframe>）

4.8　链接增多后网站的组织结构与维护

4.9　本章小结

第5章　用HTML创建表格

5.1　表格基本结构（<table>）

5.2　合并单元格

5.2.1　用colspan属性左右合并单元格

5.2.2　用rowspan属性上下合并单元格

5.3　用align属性设置对齐方式

5.4　用bgcolor属性设置表格背景色和边框颜色

5.5　用cellpadding属性和cellspacing属性设定距离

5.6　完整的表格标记（<thead>、<tbody>和<tfoot>）

5.7　需要抛弃的方法：用表格进行页面布局

5.8　本章小结

第2部分　CSS基础篇

第6章　(X)HTML与CSS概述

6.1　HTML与XHTML

6.1.1　追根溯源

6.1.2　DOCTYPE（文档类型）的含义与选择

6.1.3　XHTML与HTML的重要区别

6.2　(X)HTML与CSS

6.2.1　CSS标准

6.2.2　传统HTML的缺点

6.2.3　CSS的引入

6.2.4　如何编辑CSS

6.2.5　浏览器与CSS

6.3　本章小结

第7章　CSS核心基础

7.1　构造CSS规则

7.2　基本CSS选择器

7.2.1　标记选择器

7.2.2　类别选择器

7.2.3　ID选择器

7.3　在HTML中使用CSS的方法

7.3.1　行内样式

7.3.2　内嵌式

7.3.3　链接式

7.3.4　导入样式

7.3.5　各种方式的优先级问题

7.4　本章小结

第8章　手工编写与借助工具

8.1　从零开始

8.2　设置标题

8.3　控制图片

8.4　设置正文

8.5　设置整体页面

8.6　对段落进行分别设置

8.7　完整代码

8.8　CSS的注释

8.9　辅助：使用Dreamweaver创建页面

8.10　辅助：在Dreamweaver中新建CSS规则

8.11　辅助：在Dreamweaver中编辑CSS规则

8.12　为图像创建CSS规则

8.13　本章小结

第9章　CSS的高级特性

9.1　复合选择器

9.1.1　“交集”选择器

9.1.2　“并集”选择器

9.1.3　后代选择器

9.2　CSS的继承特性

9.2.1　继承关系

9.2.2　CSS继承的运用

9.3　CSS的层叠特性

9.4　本章小结

第10章　用CSS设置文本样式

10.1　长度单位

10.2　颜色定义

10.3　准备页面

10.4　设置文字的字体

10.5　设置文字的倾斜效果

10.6　设置文字的加粗效果

10.7　英文字母大小写转换

10.8　控制文字的大小

10.9　文字的装饰效果

10.10　设置段落首行缩进

10.11　设置字词间距

10.12　设置段落内部的文字行高

10.13　设置段落之间的距离

10.14　控制文本的水平位置

10.15　设置文字与背景的颜色

10.16　设置段落的垂直对齐方式

10.16.1　使用line-height属性进行设置

10.16.2　更通用的解决方案

10.17　本章小结

第11章　用CSS设置图像效果

11.1　设置图片边框

11.1.1　基本属性

11.1.2　为不同的边框分别设置样式

11.2　图片缩放

11.3　图文混排

11.3.1　文字环绕

11.3.2　设置图片与文字的间距

11.4　案例——八大行星科普网页

11.5　设置图片与文字的对齐方式

11.5.1　横向对齐方式

11.5.2　纵向对齐方式

11.6　本章小结

第12章　用CSS设置背景颜色与图像

12.1　设置背景颜色

12.2　设置背景图像

12.3　设置背景图像平铺

12.4　设置背景图像位置

12.5　设置背景图片位置固定

12.6　设置标题的图像替换

12.7　使用滑动门技术的标题

12.8　本章小结

第3部分　CSS高级篇

第13章　CSS盒子模型

13.1　“盒子”与“模型”的概念探究

13.2　边框（border）

13.2.1　设置边框样式（border-style）

13.2.2　属性值的简写形式

13.2.3　边框与背景

13.3　设置内边距（padding）

13.4　设置外边距（margin）

13.5　盒子之间的关系

13.5.1　HTML与DOM

13.5.2　标准文档流

13.5.3　<div>标记与<span>标记

13.6　盒子在标准流中的定位原则

13.6.1　行内元素之间的水平margin

13.6.2　块级元素之间的竖直margin

13.6.3　嵌套盒子之间的margin

13.6.4　margin属性可以设置为负值

13.7　思考题

13.8　本章小结

第14章　盒子的浮动与定位

14.1　盒子的浮动

14.1.1　准备代码

14.1.2　案例1——设置第1个浮动的div

14.1.3　案例2——设置第2个浮动的div

14.1.4　案例3——设置第3个浮动的div

14.1.5　案例4——改变浮动的方向

14.1.6　案例5——再次改变浮动的方向

14.1.7　案例6——全部向左浮动

14.1.8　案例7——使用clear属性清除浮动的影响

14.1.9　案例8——扩展盒子的高度

14.2　盒子的定位

14.2.1　静态定位（static）

14.2.2　相对定位(relative)

14.2.3　绝对定位(absolute)

14.2.4　固定定位（fixed）

14.3　z-index空间位置

14.4　盒子的display属性

14.5　本章小结

第15章　用CSS设置表格样式

15.1　控制表格

15.1.1　表格中的标记

15.1.2　设置表格的边框

15.1.3　确定表格的宽度

15.1.4　其他与表格相关的标记

15.2　美化表格

15.2.1　搭建HTML结构

15.2.2　整体设置

15.2.3　设置单元格样式

15.2.4　斑马纹效果

15.2.5　设置列样式

15.3　设置鼠标指针经过时整行变色提示的表格

15.3.1　在Firefox和IE 7中实现鼠标指针经过时整行变色

15.3.2　在IE 6中实现鼠标指针经过时整行变色

15.3.3　最终合并代码

15.4　辅助：使用jQuery实现更多效果

15.4.1　用jQuery实现斑马纹效果

15.4.2　用jQuery实现“前3行”特殊样式

15.4.3　用jQuery实现渐变背景色表格效果

15.4.4　用jQuery实现鼠标指针经过变色效果

15.5　案例——日历

15.5.1　搭建HTML结构

15.5.2　设置整体样式和表头样式

15.5.3　设置日历单元格样式

15.6　本章小结

第16章　用CSS设置链接与导航菜单

16.1　丰富的超链接特效

16.2　创建按钮式超链接

16.3　制作荧光灯效果的菜单

16.3.1　HTML框架

16.3.2　设置容器的CSS样式

16.3.3　设置菜单项的CSS样式

16.4　控制鼠标指针

16.5　设置项目列表样式

16.5.1　列表的符号

16.5.2　图片符号

16.6　创建简单的导航菜单

16.6.1　简单的竖直排列菜单

16.6.2　横竖自由转换菜单

16.7　设置图片翻转效果

16.8　应用滑动门技术的玻璃效果菜单

16.8.1　基本思路

16.8.2　设置菜单整体效果

16.8.3　使用“滑动门”技术设置玻璃材质背景

16.8.4　进一步解决的问题

16.9　鼠标指针经过时给图片增加边框

16.10　本章小结

第17章　用CSS建立表单

17.1　表单的用途和原理

17.2　表单输入类型

17.2.1　文本输入框

17.2.2　单选按钮

17.2.3　复选按钮

17.2.4　密码输入框

17.2.5　按钮

17.2.6　多行文本框

17.2.7　列表框

17.3　CSS与表单

17.3.1　表单中的元素

17.3.2　像文字一样的按钮

17.3.3　多彩的下拉菜单

17.4　案例——“数独”游戏网页

17.4.1　搭建基本表格

17.4.2　设置表格样式

17.4.3　加入文本输入框

17.4.4　设置文本输入框的样式

17.5　对齐文本框和旁边的图像按钮

17.6　本章小结

第18章　网页样式综合案例——灵活的电子相册

18.1　搭建框架

18.2　阵列模式

18.3　单列模式

18.4　改进阵列模式

18.5　IE 6兼容

18.6　双向联动模式

18.6.1　在Firefox中实现

18.6.2　IE 6兼容

18.6.3　改变方向

18.7　本章小结

第4部分　CSS布局篇

第19章　固定宽度布局剖析与制作

19.1　向报纸学习排版思想

19.2　CSS排版观念

19.2.1　两列布局

19.2.2　三列布局

19.2.3　多列布局

19.2.4　布局结构的表达式与结构图

19.3　圆角框

19.3.1　准备图像

19.3.2　搭建HTML结构

19.3.3　放置背景图像

19.3.4　设置样式并修复缺口

19.4　单列布局

19.4.1　放置第一个圆角框

19.4.2　设置圆角框的CSS样式

19.4.3　放置其他圆角框

19.5　“1-2-1”固定宽度布局

19.5.1　准备工作

19.5.2　绝对定位法

19.5.3　浮动法

19.6　“1-3-1”固定宽度布局

19.7　“1-((1-2)+1)-1”固定宽度布局

19.8　本章小结

第20章　变宽度网页布局剖析与制作

20.1　“1-2-1”变宽度网页布局

20.1.1　“1-2-1”等比例变宽布局

20.1.2　“1-2-1”单列变宽布局

20.2　“1-3-1”宽度适应布局

20.2.1　“1-3-1”三列宽度等比例布局

20.2.2　“1-3-1”单侧列宽度固定的变宽布局

20.2.3　“1-3-1”中间列宽度固定的变宽布局

20.2.4　进一步的思考

20.2.5　“1-3-1”双侧列宽度固定的变宽布局

20.2.6　“1-3-1”中列和侧列宽度固定的变宽布局

20.3　变宽布局方法总结

20.4　分列布局背景色问题

20.4.1　设置固定宽度布局的列背景色

20.4.2　设置特殊宽度变化布局的列背景色

20.4.3　设置单列宽度变化布局的列背景色

20.5　CSS排版与传统的表格方式排版的分析

20.6　浏览器的兼容性问题

20.7　CSS布局页面的调试技巧

20.7.1　技巧1：设置背景色或者边框，确定错误范围

20.7.2　技巧2：删除无关代码，暴露核心矛盾

20.7.3　技巧3：先用Firefox调试，然后使它兼容IE

20.7.4　技巧4：善于利用工具，提高调试效率

20.7.5　技巧5：善于提问，寻求帮助

20.8　本章小结

第21章　网页布局综合案例——儿童用品网上商店

21.1　案例概述

21.2　内容分析

21.3　HTML结构设计

21.4　原型设计

21.5　页面方案设计

21.6　布局设计

21.6.1　整体样式设计

21.6.2　页头部分

21.6.3　内容部分

21.6.4　页脚部分

21.7　细节设计

21.7.1　页头部分

21.7.2　内容部分

21.7.3　左侧的主要内容列

21.7.4　右边栏

21.8　CSS布局的优点

21.9　交互效果设计

21.9.1　次导航栏

21.9.2　主导航栏

21.9.3　账号区

21.9.4　图像边框

21.9.5　产品分类

21.10　遵从Web标准的设计流程

21.11　从“网页”到“网站”

21.11.1　历史回顾

21.11.2　不完善的办法

21.11.3　服务器出场

21.11.4　CMS出现

21.11.5　具体操作

21.12　本章小结

附录A　网站发布与管理

A.1　在Internet上建立自己的Web站点

A.1.1　制作网站内容

A.1.2　申请域名

A.1.3　信息发布

A.2　租用虚拟主机空间

A.2.1　了解基本的技术名词

A.2.2　选择和租用虚拟主机

A.3　向服务器上传网站内容

A.3.1　使用Dreamweaver上传文件

A.3.2　使用IE浏览器上传文件

A.3.3　使用专业FTP工具上传文件

A.4　网站管理

A.4.1　修改密码

A.4.2　集团邮箱管理

A.4.3　注意事项

附录B　CSS英文小字典

前言

设计师在设计制作网页时，要考虑的最核心的两个问题是“网页内容是什么”和“如何表现这些内容”。本书介绍的HTML和CSS就是分别用来设定它们的。

在过去，由于CSS尚不成熟，人们更多地关注HTML，想尽办法使HTML同时承担“内容”和“表现”两方面的任务。而现在，CSS逐步完善，使用它可以制作出符合Web标准的网页。Web标准的核心原则是“内容”与“表现”分离，这样HTML和CSS就各司其职了。这样做有很多优点：

使页面载入和显示得更快；

降低网站的流量费用；

修改设计时更有效率且代价更低；

帮助整个站点保持视觉风格的一致性；

使站点可以更好地被搜索引擎找到，以增加网站访问量；

使站点对浏览者和浏览器更具亲和力；

在世界上越来越多人采用Web标准时，它还能提高设计师的职场竞争实力，这意味着更好的工作和更高的收入。

因此，本书详细地讲解利用HTML和CSS设计制作符合Web标准的网页的方法，使读者可以熟练地掌握它们，设计制作出高质量的网站。

学习路线

本书分“HTML基础篇”、“CSS基础篇”、“CSS高级篇”和“CSS布局篇”4个部分，共21章，遵循下面这张学习路线图，读者可以系统掌握Web标准网页的制作过程与技术。

学习方法建议

学习和掌握一门技术并不是一件轻而易举的事情，一方面需要具备钻研的精神和态度；另一方面，使用正确的方法，才能最快地成功。因此，我们根据自己的一些经验，向读者提出几条建议，希望对读者的学习有所帮助。

(1) 务必重视对基础的掌握。
建议读者在学习时不要仅仅关注于某一个效果的具体实现方法，而是要真正把其中的基本原理搞清楚，把最基础的道理想明白，只有这样才能真正地解决问题，才能有真正的提高。

(2) 记熟本书中出现的英文单词。
很多初学者感到CSS学起来比较困难，很重要的一个原因，是CSS的属性名称众多。这对于母语是英语的人来说，几乎不存在困难，因为这些属性名称本身就是一些常用的单词。而对于中国读者来说，要记住这么多英文属性名称，除了需要理解它们的意思，还要记住它们，确实就有一定的难度了。

因此，建议读者先把遇到的英语单词集中背一次，就像学英语课文先学单词一样，扫清单词障碍，学起来就会容易很多了。我们总结了本书中比较频繁出现的160个英文单词，并给出了中文解释，作为本书的附录，如果读者在学习时遇到困难可以查一查。

(3) 一定要在理解的基础上多练习，多实践。
“纸上得来终觉浅，绝知此事要躬行。”希望读者能够在自己探索和研究的基础上学习本书，而不要把本书的例子作为现成的内容直接用于网站上。只有经过自己思考和消化的内容，才是真正掌握的知识，成为实现自己目标的有力武器。

(4) 利用好本书配套的网站。
本书的配套网站http://www.artech.cn中包含的视频教程，可以帮助读者理解书中的一些难点和重点，读者可以充分提高学习效率。

(5) 要时刻同时使用Firefox和IE浏览器进行测试。
学习CSS的一个重要方面是掌握调试的方法，能够解决不同浏览器中对CSS的不同表现而带来的问题，也就是浏览器兼容性问题。因此，读者最好能够在计算机上安装Firefox、IE 6和IE 7这3种浏览器，以确保自己设计制作的网页在这三者上都有正确的表现。

获取更新内容

关于本书的勘误和补充内容，我们会随时发布在网站上。读者可以登录本书配套网站查询（网址是http://www.artech.cn），以了解所有与本书内容相关的问题，或提出您的意见和建议。我们十分希望获得您的反馈意见，以改进我们的工作。

关于其他问题，读者也可以发邮件至luyang@ptpress.com.cn，我们会及时给您回复。

本书由前沿科技温谦主要编写，参与编写工作的还有温颜、曾顺、白玉成、温鸿钧、刘璐、王斌、刘军、陈宾、刘艳茹、韩军、张晓静、武智涛、孙琳、王璐、张伟、张琳、潘莹、史长虹等。

编者

第1部分　HTML基础篇

第1章　网页设计基础知识

本章首先将对一些与网络相关的概念做一些浅显的解释，使读者对互联网传递信息的基本原理有所了解，然后对网页设计的一些原则和方法作一个简单的概述。本章的内容大多并不直接涉及具体的操作，但是可以为后面章节的学习打下基础，因此希望读者能够充分理解本章中所介绍的相关概念。

1.1　基础概念

相信读者都有过上网冲浪的经历，打开浏览器并在地址栏中输入一个网站的地址，就会展示出相应的网页内容了，如图1.1所示。

图1.1　使用浏览器软件显示网页

网页中可以包含很多种类型的内容作为网页的元素，其中最基本的网页元素是文字，此外还包括静态的图形和动画，以及声音和视频等其他形式的多媒体文件。网页的最终目的就是给访问者显示有价值的信息，并留下最深刻的印象。

技术背景

请读者理解一点，一个网页实际上并不是由一个单独的文件构成的，这与Word、PDF等格式的文档有明显的区别。网页显示的图片、背景声音以及其他多媒体文件都是单独存放的。具体组织方式在后面的讲解中逐渐深入介绍。

在开始设计网页和网站之前，需要了解一些基础知识。这些知识并不复杂，但是它们对以后的工作过程有非常重要的影响。

这里说明几个非常重要的概念。首先必须知道什么是“浏览器”和“服务器”。互联网就是处在世界各地的计算机互相连接而成的一个计算机网络。网站的浏览者坐在家中查看各种网站上的内容，实际上就是从远程的计算机中读取了一些内容，然后在本地的计算机上显示出来的过程。

因此，提供内容信息的计算机就称为“服务器”，访问者使用“浏览器”程序，例如集成在Windows操作系统中的Internet Explorer，就可以通过网络取得“服务器”上的文件以及其他信息。服务器可以同时供许多不同的人（“浏览器”）访问。

访问的具体过程简单地说，就是当用户的计算机联入Internet后，通过浏览器发出访问某个站点的请求，然后这个站点的服务器就把信息传送到用户的浏览器上，即将文件下载到本地的计算机，浏览器再显示出文件内容。这个过程的示意图如图1.2所示。

图1.2　服务器与浏览器的关系示意图

互联网也常被称为“万维网”，是从WWW这个词语翻译而来的。它是“WorldWide Web”的首字母缩写，简称Web。WWW计划是由Tim Bemers.Lee在CERN（欧洲量子物理实验室）的时候开始使用的。实际上Web是一个大型的相互链接的文件所组成的集合体，范围包括了整个世界。

实际上，WWW可以认为是互联网所提供的很多功能中的一个，就是指通过浏览器能够访问各种网站的这种功能。当然，互联网还提供了很多其他的功能，例如当制作好网站之后，需要把网站传送到远程服务器上，这就要用到FTP功能，它就不属于WWW的范畴了。

1.2　网页与HTML语言

网页文件是用一种被称为HTML（HyperText Markup Language)的标记语言书写的文本文件，它可以在浏览器中按照设计者所设计的方式显示内容，网页文件也经常被称为HTML文件。有两种方式来产生网页文件：一种是自己手工编写HTML代码；另一种是借助一些辅助软件来编写，例如使用Adobe公司的Dreamweaver或者微软公司的Expression Web这样的网页制作软件。

用浏览器打开任意一个网页，然后选择浏览器的菜单中的“查看→源文件”命令，这时会自动打开记事本程序，里面显示的就是这个网页的HTML源文件，如图1.3所示。这些源文件看起来感觉非常复杂，实际上它并不难掌握，本书后面的任务就是教读者如何编写HTML文件。

图1.3　网页的HTML源文件

1.3　Web标准：结构、表现与行为

网页相关的技术走入实用阶段，不过短短十几年的时间，就已经发生了很多重要的变化。其中最重要的一点是“Web标准”被广泛地接受。

1.3.1　标准的重要性

相信读者对“标准”这个词都非常熟悉，也能很容易地了解标准的重要性。在越来越开放的环境中，各个相互关联的事物要能够协同工作，就必须遵守一些共同的标准来工作。

例如，个人电脑的型号是开放的标准，而个人电脑的零件的规格是统一的。为个人电脑生产零件的厂家成千上万，大家都是在同一个标准下进行设计和生产，因此用户只需要买来一些零件，比如CPU、内存条和硬盘等，简单地“插”（组合）在一起，就能成为一台好用的电脑了，这就是“标准”的作用。相比之下，其他行业就远不如PC行业了，比如汽车行业，一个零件只能用在某个品牌的汽车上。这样不仅麻烦得多，而且也不利于成本的降低。

互联网是另一个“标准”倍出的领域，连接到互联网的各种设备的品牌繁多、功能各不相同，因此必须依靠严谨合理的标准，才能使这些纷繁复杂的设备都协同工作起来。

“Web标准”也是互联网领域中的标准，实际上，它并不是一个标准，而是一系列标准的集合。

从发展历程来说，Web是逐步发展和完善的，到目前它还在快速发展之中。在早期阶段，互联网上的网站都很简单，网页的内容也非常简单，自然相应的标准也是很简单的。而随着技术的快速发展，相应的各种新标准也都应运而生了。

打个比方，如果仅仅是简单地写一个便条或者一封信，那么对格式的要求就很低，而如要出版一本书，就必须严格地设置书中的格式，比如各级标题用什么字体、什么字号，正文
的格式，图片的格式，等等。这是因为从一个便条到一本书，内容的性质已经不同了。

同样，在互联网上，刚开始的时候内容还很少，也很简单，也不存在更多的复杂应用，因此一些简单（或者说“简陋”）的标准就已经够用了。而现在互联网上的内容已经非常多了，而且逻辑和结构日益复杂，出现了各种交互应用，这时就必须从更本质的角度来研究互联网上的信息，使得这些信息仍然能够清晰、方便地被操作。

读者应该理解，一个标准并不是某个人或者某个公司，在某一天忽然间制定出来的。标准都是在实际应用过程中，经过市场的竞争和考验，经过一系列的研究讨论和协商之后达成的共识。

1.3.2　“Web标准”概述

下面来着重讲解关于网页的标准——“Web标准”。

网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每种组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。由于传统的图书是固定的，不能变化的，因此它不存在“行为”。

在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。

因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。

不很严谨地说，“结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。也就是说，（X）HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。本书将重点介绍前两者，对于JavaScript仅在少数案例中用到，只进行一些简单的介绍。

“结构”、“表现”和“行为”的关系，如图1.4所示。

图1.4　“结构”、“表现”和“行为”的关系

这3个组成部分被明确以后，一个重要的思想随之产生，即这三者的分离。最开始时HTML同时承担着“结构”与“表现”的双重任务，从而给网站的开发、维护等工作带来很多困难。而当把它们分离开，就会带来很多优点。具体内容在后面会一一讲解。

这里仅给出一个例子简单说明。图1.5中显示的一个页面的初始效果，即仅通过HTML定义了这个页面的结构，图中使用文字说明了这个页面中的各个组成部分，以及使用的HTML标记，灰色线框中的效果是使用浏览器查看的效果。这个效果是很单调的，仅仅是所有元素依次排列而已。

图1.5　仅使用HTML定“结构”的页面效果

对上述的页面，使用CSS设定了样式以后，它的表现形式就完全不同了。图1.6所示的是一种表现方式。借助于CSS，在不改变它的HTML结构和内容的前提下，可以设计出很多种不同的表现形式来，而且可以随时在不改变HTML结构的情况下修改样式。这就是“结构”与“表现”分离所带来的好处。

图1.6　使用CSS设定样式之后的效果

1.4　初步理解网页设计与开发的过程

网站是如何建立起来的呢？简单来说，网站开发的全过程大致分为策划与定义、设计、开发、测试和发布5个阶段。本节将对开发的流程进行介绍。

1.4.1　基本任务与角色

在每一个开发阶段，都需要相关各方人员的共同合作，包括客户、设计师和编程开发员等不同角色，每个角色在不同的阶段有各自承担的责任。表1.1列出了在网站建设与网页设计的各个阶段中需要参与的人员角色。

通常，客户会提出他们的要求，并提供要在网站中呈现的具体内容。设计师负责进行页面的设计，并构建网站。程序开发员为网站添加动态功能。在测试阶段，需要大家共同配合，寻找不完善的地方，并加以改进，各方人员满意后才能把网站发布到互联网上。因此，每个参与者都需要以高度的责任感和参与感投入到项目的开发过程中，只有这样才能开发出高水平的网站。

经过近10年的发展，互联网已经深入到社会的各个领域，伴随着这个发展过程，网站开发已经成为了一个拥有大量从业人员的行业，从而整个工作流程也日趋成熟和完善。通常开发一个网站需要经过如图1.7所示的环节，下面就对其中的每一个环节进行介绍。

图1.7　网站开发的工作流程

1.4.2　明确网站定位

首先在动手制作网站之前给要做的网站一个准确的定位，明确建站目的是什么。谁能决定网站的定位呢？如果网站是做给自己的，比如一个个人网站，那么自己说了算；如果是为客户建立网站，那么一定要与客户的决策层人士共同讨论，要理解他们的想法，这是十分重要的。

在理解了客户的想法后，就要站在客户的立场上，探讨网站的定位。根据经验，如果设计师能够从客户的立场出发，给客户提出一些中肯的建议，并结合到策划中去，那么可以说设计工作已经成功了一半，这也可以大大减小在日后与客户的沟通中发生不愉快的可能性。

1.4.3　收集信息和素材

在明确建站目的和网站定位以后，开始收集相关的意见，要结合公司其他部门的实际情况，这样可以发挥网站的最大作用。

这一步是前期策划中最为关键的一步，因为网站是为公司服务的，所以全面地收集相关的意见和想法可以使网站的信息和功能趋于完善。收集来的信息需要整理成文档，为了保证这个工作的顺利进行，可以让相关部门配合提交一份本部门需要在网站上开辟的栏目的计划书。这份计划书一定要考虑充分，因为如果要把网站作为一个正式的站点来运营的话，那么每个栏目的设置都应该是有规划的。如果考虑不充分，会导致以后突如其来的新加内容破坏网站的整体规划和风格。当然，这并不意味着网站成形后不许添加栏目，只是在添加的过程中需要结合网站的具体情况，过程更加复杂，所以最好是当初策划时尽可能考虑全面。

1.4.4　策划栏目内容

对收集的相关信息进行整理后，要找出重点，根据重点以及公司业务的侧重点，结合网站定位来确定网站的栏目。开始时可能会因为栏目较多而难以确定最终需要的栏目，这就需
要展开另一轮讨论，需要所有的设计和开发人员在一起阐述自己的意见，一起反复比较，将确定下来的内容进行归类，形成网站栏目的树状列表用以清晰表达站点结构。

对于比较大的网站，可能还需要讨论和确定二级栏目以下的子栏目，对它进行归类，并逐一确定每个二级栏目的主页面需要放哪些具体的东西，二级栏目下面的每个小栏目需要放哪些内容，让栏目负责人能够很清楚地了解本栏目的细节。讨论完以后，就应由栏目负责人来按照讨论过的结果写栏目规划书。栏目规划书要求写得详细具体，并有统一的格式，以便网站留档。这次的策划书只是第一版本，以后在制作的过程当中如果出现问题应及时修改该策划书，并且也需要留档。

1.4.5　设计页面方案

现在需要做的就是让美术设计师（也称为美工）根据每个栏目的策划书来设计页面。这里需要再次指出，在设计之前，应该让栏目负责人把需要特殊处理的地方跟设计人员讲明。在设计页面时设计师要根据策划书把每个栏目的具体位置和网站的整体风格确定下来。为了让网站有整体感，应该在网页中放置一些贯穿性的元素，最终要拿出至少3种不同风格的方案。每种方案应该考虑到公司的整体形象，与公司的精神相结合。确定设计方案后，经讨论后定稿。最后挑选出两种方案交给客户选择，由客户确定最终的方案。

1.4.6　制作页面

方案设计完成以后，下一步是实现静态页面，由制作人员负责根据设计师给出的设计方案制作出网页，并制作成模板。在这个过程中需要十分注意网站的页面之间的逻辑，并区分静态页面和需要服务器端实现的动态页面。

在制作页面的同时，栏目负责人应该开始收集每个栏目的具体内容并整理。模板制作完成后，由栏目负责人往每个栏目里面添加具体内容。对于静态页面，将内容添加到页面中即可；对于需要服务器端编程实现的页面，应交由编程人员继续完成。

为了便于读者理解，在这里举一个例子，以区分动态页面和静态页面的含义。例如某个公司的网站，需要展示1000种商品，每个页面中展示10种商品。如果只用静态页面来制作，那么一共需要100个静态页面，在日后需要修改某商品的信息时，需要重新制作相应的页面，修改得越多，工作量就越大。如果借助于服务器端的程序，制作为动态页面，例如使用ASP技术，只需要制作一个页面，然后把1000种商品的信息存储在数据库中。页面根据浏览者的需求调用数据库中的数据，动态地显示这些商品信息。需要修改商品信息时只要修改数据库中的数据即可。这就是动态页面的作用。

1.4.7　实现后台功能

将动态页面设计好后，只剩下程序部分需要完成了。在这一步中，由程序员根据功能需求来编写程序，实现动态功能。

需要说明的是，网站的建设过程中，“如何统筹”是一个比较重要的问题。在上面所讲述的过程进行的同时，网站的程序人员正处于开发程序的阶段，如果实现的过程中出现什么问题，编程人员应和制作人员及时沟通，以免程序开发完成后发现问题再进行大规模的返工。

1.4.8　整合与测试网站

当制作和编程的工作都完成以后，就要把程序和页面进行整合。整合完成以后，需要内部测试，测试成功后即可上传到服务器上，交由客户检验。通常客户会提出一些修改意见，这时根据客户要求完成修改即可。

如果这时客户提出会导致结构性调整的问题，工作量就会很大。客户并不了解网站建设的流程，很容易与网站开发人员产生不愉快的情况。因此最好在开发的前期准备阶段就充分理解用户的想法和需求，同时将一些可能发生的情况提前告诉客户，这样就容易与客户保持愉快的合作关系。

1.5　与设计相关的技术因素

从上一节中可以看出，一个完善的网站实际上是需要由若干个不同的角色人员共同配合完成的。本书重点介绍的是与页面制作相关的内容。

制作Web页面之前，应该对一些和制作相关的技术因素和设计因素有所了解。下面对网页设计中首先会遇到的一些参数作一介绍。因为在设计一个页面之前，首先要确定这个网页要设计成多大尺寸，以及用户的浏览器是否能够正确显示的功能问题。

1．屏幕显示分辨率

“屏幕显示分辨率”是显示器在显示图像时的分辨率。分辨率是用“点”来衡量的，显示器上的这个“点”就是指像素（pixel）。

显示分辨率的数值是指整个显示器所有可视面积上水平像素和垂直像素的数量。例如800×600像素的分辨率，是指在整个屏幕上水平显示800个像素，垂直显示600个像素。显示分辨率的水平像素和垂直像素的总数总是成一定比例的，一般为4:3、5:4或8:5。每个显示器都有自己的最高分辨率，并且可以兼容其他较低的显示分辨率，所以一个显示器可以设置多种不同的分辨率。

为什么设计网页的时候要考虑显示分辨率呢？这是因为浏览同一个网页的人们所用的计算机显示器不同，分辨率设置不同，这样显示的效果也会不同。例如如果以最常见的1024×768像素的分辨率为目标设计了一个网页，那么使用800×600像素分辨率显示器的访问者浏览这个网页时会看到页面显示不完整，需要反复拖动浏览器的滚动条来看未显示出来的部分。

随着计算机的飞速发展，流行的显示分辨率也在不断变化。如图1.8所示的统计数据是一个网站在2007年11月期间大约2万名访问者使用的显示器分辨率的数据。

图1.8　访问者使用的显示器分辨的数据

可以看到，主流的显示分辨率是1024×768像素，占大约70%。值得注意的是，其余的分辨率中，只有800×600像素这种分辨率小于1024×768像素，而且可以看出，使用800×600像素这种最低分辨率的用户已经非常少了，仅占2.43%。

因此，大多数网站中的页面，可以按照1024×768像素的分辨率来进行设计，这样可以保证97%以上用户非常舒服地浏览网页。

2．浏览器类型

浏览器类型也是在网页设计时会遇到的一个问题。由于各个软件厂商对HTML的标准支持有所不同，导致了同样的网页在不同的浏览器下会有不同的表现。

随着CSS在网页设计中的普及和流行，浏览器的因素变得比以往传统的网页设计中更为重要。这是因为，各种浏览器对CSS标准支持的差异远远大于对HTML标准的支持。因此，读者必须认识到，设计出来的网页，在不同的浏览器上的效果可能会有很大差异。具体的相关内容，在本书后面的章节中还会多次提及，这里先提醒读者注意。

图1.9所示是一个网站在2007年11月期间，大约2万名访问者使用的浏览器类型的统计数据。

图1.9　访问者使用的浏览器类型的统计数据

可以看到Internet Explorer是占绝对主流的。而Firefox浏览器的份额在不断提高，其余的浏览器使用者，相对来说就很少了。

而对CSS的支持，不仅不同的浏览器之间存在差异，即使在Internet Explorer浏览器中，不同版本也会有所差别，因此，不但需要对不同的浏览器所占的比例有所了解，还应该对Internet Explorer浏览器的不同版本情况有所了解。

如图1.10所示的统计数据是图1.9中，使用Internet Explorer浏览器的用户的具体版本数据。

图1.10　访问者使用的浏览器的不同版本的数据

可以看到，在对Internet Explorer浏览器的各个版本中，6.0和7.0版是占绝对主流的，而使用5.5及以下版本的用户已经非常少了。

因此，就目前而言，在制作网页的时候，应该保证在Internet Explorer 6.0、Internet Explorer7.0和Firefox这3个浏览器中都显示正确，这样可以保证99%以上的访问者可以正确浏览该网页。

1.6　本章小结

通过本章的学习，可以了解到，网页设计和开发是一个综合性相当强的工作。网页设计中并没有非常复杂的技术，但是却包罗万象。既需要有美工人员能进行视觉方面的设计，也需要程序开发人员进行功能开发。因此需要设计师对各个方面的技术和知识有所掌握，才能从容应付可能会遇到的各种问题。这也需要不断积累设计经验，只有这样才能胜任网页设计的工作。

第2章　HTML网页文档结构

在上一章中，介绍了关于互联网的一些基础知识。制作网页最基础的两个规范分别称为HTML和CSS，它们在网页中起着不同的作用。本书正是围绕着这两个内容进行讲解的，本章首先对HTML进行讲解，这里将介绍HTML的基本概念以及一些简单的应用。此外，Dreamweaver是目前流行的网页制作软件之一，因此本章中还会对Dreamweaver软件的使用进行一些简单的介绍。

通过本章的学习，读者将会清楚地了解HTML语言在网络中所处的位置，这样从总体上把握HTML，并熟悉Dreamweaver软件的基本操作，为后面章节的学习打下基础。

2.1　HTML简介

前面提到过网页的基础是HTML，全称为Hypertext Markup Language，译为超文本标记语言。

首先应该明确一个概念，HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如如何在网页中定义一个标题、一段文本或者一个表格等，这些都是利用一个个HTML标记完成的。其最基本的语法就是：<标记>内容</标记>
。标记通常都是成对使用的，有一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器从服务器接收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。

例如，在HTML中以<p></p>标记来定义一个文本段落，以<table></table>标记来定义一个表格。当浏览器碰到<p></p>标记时，就会把<p></p>标记之间的所有文字以一个段落的样式显示出来。

再进一步，上面说的<p>标记和<table>标记都属于结构标记，也就是它们用于定义网页内容的结构。此外，还有一类标记，称为形式标记，用于定义网页内容的形式。比如浏览器遇到<b></b>标记时，就会把<b></b>标记中的所有文字以粗体样式显示出来。或者，有“<i>网页</i>”这样一个HTML语句，其显示结果就是斜体的“网页”
两个字。

读者可以看到，HTML就是这样易学易用。总的原则就是，用什么样的标记就能得到什么样的效果。希望获得什么效果，就用相应的标记即可。因此，学习HTML实际上就是学习如何使用各种HTML的标记。

2.1.1　创建第一个HTML文件

人们经常在有意无意中使用网页这个概念，那么网页的本质是什么呢？实际上网页就是
一个文件，只不过这个文件是利用HTML写成的，所以又被称为HTML文件。HTML文件的本质就是一个文本文件，只是扩展名为“.htm”或“.html”的文本文件。所以，可以利用任何文本编辑软件创建、编辑HTML文件。在Windows操作系统中，最简单的文本编辑软件就是NotePad（记事本）。

现在我们来创建自己的第一个HTML文件。HTML文件的创建方法非常简单。具体的操作步骤如下。

1 选择“开始”，然后依次选择“程序→附件→记事本”命令。

2 在打开的记事本窗口中写入如下代码。此时记事本窗口如图2.1所示。

图2.1　在记事本程序中输入HTML文件内容

3 编写完成后保存该文档。选取记事本菜单栏中的“文件→保存”命令，会弹出如图2.2所示的“另存为”对话框。要特别注意，应首先在“保存类型”下拉列表中选择“所有文件”选项，然后再在“文件名”文本框中输入一个文件名，并以“.htm”或者“.html”作为文件名的后缀。

图2.2　修改后缀名

注意

如果这里不改成“所有文件”，记事本程序会自动在文件名后面加上“.txt”后缀，这样浏览器就不会把这个文件当做网页文件对待了。

4 设置完成后单击“保存”按钮，这时该文本文件就变为了HTML文件，在Windows中，可以看到它的图标就是网页文件的图标了，如图2.3所示。

图2.3　打开HTML文件

5 这时双击该HTML文件，就会自动打开浏览器，并显示该文件的内容，看到的效果如图2.4所示。

图2.4　在IE浏览器中的现实效果

这就是我们制作的第一个HTML文件，尽管它只有一行文字，但这就标志着我们已经迈出了走进互联网世界的第一步！

说明

由于HTML文件本质上就是文本文件，因此使用任何文本编辑软件都可以对它进行编辑。当然Dreamweaver是最常用的专业网页编辑软件之一，但是在这一节中，我们仍然使用最简单的记事本，来编写和编辑HTML文档，目的是通过最基本的操作，尽可能深入地掌握HTML的原理。

2.1.2　HTML文件结构

在上面的HTML文件里用到了5个HTML标记，下面就依次讲解它们的作用。实际上，它们构成了最简单的完整的HTML文件结构。

1．<html>标记

<html>标记放在HTML文件的开头，并没有什么实质性的功能，只是一个形式上的标记，但还是希望读者形成一个良好的编写习惯，在HTML文件开头使用<html>标记来做一个形式上的开始。

2．<head>标记

<head>也称为头标记，一般放在<html>标记里，其作用是放置关于此HTML文件的信息，如提供索引、定义CSS样式等。

3．<title>标记

<title>称为标题标记，包含在<head>标记内，它的作用是设定网页标题，可以看见在浏览器左上方的标题栏中显示这个标题，此外，在Windows任务栏中显示的也是这个标题，如图2.5所示。

图2.5　HTML文件标题

4．<body>标记

<body>又称为主体标记，网页所要显示的内容都放在这个标记内，它是HTML文件的重点所在。在后面章节所介绍的HTML标记都将在这个标记内。然而它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像，这将在后面进行介绍。

另外在构建HTML框架的时候要注意一个问题，标记是不可以交错的，否则将会造成错误，如：

这里面，第4行与第5行出现了一个交错，这是错误的。

2.2　简单的HTML案例

通过以上的学习，我们已经对HTML有了一个基本的认识，下面来举几个简单的例子。希望读者能够通过这几个简单的例子，理解HTML的基本原理，这对于以后深入掌握各种HTML的标记会有很大的帮助。

【例1】设置标题。

在浏览器中打开这个网页，其效果如图2.6所示。

图2.6　标题标记

这里运用了标题标记<Hn></Hn>（n表示1到6的数字）。这个标记用来设置标题文字以加粗方式显示在网页中。它共有6个层次，也就是可以设置6种大小样式。

【例2】设置文字颜色。

在浏览器中打开这个网页，其效果如图2.7所示。

图2.7　字体颜色标记

<font color=#></font>标记可以用来控制文字颜色，#代表颜色的英文名称。这里的标记写法和前面的例子有所不同，在标记名称（font）的后面还有一个单词color，它称为标记的“属性”，用于设置某一个标记的某些附属性质，例如color这个属性，就用来设置文字的颜色属性。

常用的颜色名称有black（黑）、gray（深灰）、silver（浅灰）、green（绿）、purple（紫）、yellow（黄）、red（红）、white（白）等。

对于大多数中国用户来说，对大多数颜色的名称都是不熟悉的，因此多数情况都适用其他的方法来描述颜色的具体值，在后面的章节中再详细介绍。

【例3】同时设置加粗、倾斜以及文字的颜色。

在浏览器中打开这个网页，其效果如图2.8所示。

图2.8　蓝色粗斜字体

<b></b>标记的作用是使其中的文字以加粗的形式显示，<i></i>标记的作用是使其中的文字以倾斜的形式显示。

需要注意的是，这是一个标记间的相互嵌套，也就是一个标记放在另一个标记之中，它们共同控制了最里面的文字的显示方式。

【例4】插入图片。

在浏览器中打开这个网页，其效果如图2.9所示。

图2.9　插入图片

图片插入的HTML标记是<img>，它有一个src属性，用于指明图像文件的位置。例如上面的代码中，src属性设置为“cup.gif”，这就是说该图片和调用它的HTML文件处于同一目录中，这时可以直接使用其图片的文件名，图片的扩展名也要一并加上。

注意

从这里可以印证前面谈到过的一个问题，网页文件中的图像文件与HTML文件是分离各自保存的，假设需要把这个网页复制到别人的计算机上，就要把这个HTML文件和图像文件一起复制过去，否则就不能正常显示了。读者可以和Word文档对比一下，在Word文档中插入图像以后，这个Word文档本身就把图像信息包含在文档数据中了，它与网页文档存在着明显的区别。

【例5】注释标记。

在浏览器中打开这个网页，其效果如图2.10所示。

图2.10　注释标记

可以看到，在“<!-”和“-->”之间的内容，即“这是注释文本……”这行字并没有在浏览器中显示出来。“<!-”和“-->”这对标记就称为注释标记，它的作用是使网页的设计者自己或用户了解该文件的内容，所以注释标记中的内容是不会显示在浏览器中的。

通过上面5个案例，读者已经了解了网页文件的基本原理。当然，实际工作中，需要用到的标记、属性远不止于此，这正是我们在后面的章节中要详细讲解的内容。

2.3　网页源文件的获取

通过上面的几个实例，可以更加了解HTML标记的概念，无论希望在网页中显示文字，还是想在网页中插入图片，都是利用相应的HTML标记来完成的。一句话，HTML标记直接
掌握着网页的内容。

HTML本身是十分简单的，可是要做一个精美的网页是不容易的，这需要较长时间的实践。在这个过程中，除了要多动手，还要多看，看别人的优秀网页是怎么设计、怎么制作的。有时同一种网页效果，可以采用多种方法来完成，所以对于初学者来说不要轻易放过任何一个网页，要实际看看人家是怎样编写HTML代码的，也就是查看网页源文件。

2.3.1　直接查看源文件

查看源文件的具体操作步骤如下。

打开浏览器，这里以IE浏览器为例。选择菜单栏中的“查看→源文件”命令即可看到该网页的源文件了，如图2.11所示。

图2.11　查看源文件

2.3.2　保存网页

我们不但可以查看网页的源代码，也可以把整个网页保存下来。具体的操作步骤如下。

选择浏览器菜单栏中的“文件→另存为”命令，这样就可以将所需的与该网页相关的部件全部保存下来，如图2.12所示。

图2.12　保存网页

注意在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”选项，这样将把网页中包含的图像等其他相关内容都保存下来。在保存的HTML文件的同一个文件夹中会出现一个文件夹，里面有所有的相关文件，如图2.13所示。

图2.13　保存的网页文件

说明

有些设计者为其制作的网页采用了特殊技术，使得浏览者不能将网页或某些相关的文件保存下来；还有些设计者采用了“隐藏”网页，使得浏览者看不到保存下来的HTML文件的详细HTML代码。不过绝大部分的网页都是非常友善的，可以让浏览者充分享受网页中所提供的资源。

免费样章到此结束。

喜欢这本书？

点击购买

或

前往Kindle商店查看图书详情。