《网站开发案例课堂：HTML+CSS3网页设计与制作案例课堂》根据作者在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍HTML + CSS 3网页样式与布局的技术。
　　《网站开发案例课堂：HTML+CSS3网页设计与制作案例课堂》分为22章，内容包括HTML与CSS 3网页设计概述、网页文档的结构、网页文本的设计、网页色彩和图像的设计、网页超链接的设计、网页表单的设计、网页表格的设计、网页音频和视频的设计、网页图形的绘制、CSS 3网页样式核心基础、控制网页字体和段落样式、控制网页图片的显示样式、控制网页背景和边框样式、控制表格与表单样式、控制网页超链接和鼠标样式、控制网页导航菜单样式、CSS 3的高级特性、CSS定位与DIV布局核心技术、CSS + DIV盒子的浮动与定位、网页布局剖析与制作，最后以两个综合性网站的设计为例进行讲解。通过每章的实战案例，让读者进一步巩固所学的知识，提高综合实战能力。
　　《网站开发案例课堂：HTML+CSS3网页设计与制作案例课堂》内容丰富、全面，图文并茂，步骤清晰，通俗易懂，专业性强，使读者能理解HTML + CSS 3网页样式与布局的技术，并能解决工作中的实际问题，真正做到“知其然，更知其所以然”。
　　《网站开发案例课堂：HTML+CSS3网页设计与制作案例课堂》涉及面广泛，几乎涵盖了HTML + CSS 3网页样式与布局的所有重要知识，适合所有的网页设计初学者快速入门，同时也适合想全面了解HTML + CSS 3网页样式与布局的设计人员阅读。

第1章 HTML与CSS 3网页设计概述 1
1.1 网页与网站 2
1.1.1 什么是网页和网站 2
1.1.2 网页的基本构成元素 2
1.2 HTML的基本概念 3
1.2.1 什么是HTML 4
1.2.2 HTML的发展历程 4
1.2.3 HTML文件的基本结构 4
1.3 CSS的基本概念 5
1.3.1 什么是CSS 5
1.3.2 HTML与CSS的优缺点 5
1.3.3 浏览器对CSS 3的支持 6
1.4 HTML与CSS网页的开发环境 6
1.4.1 记事本开发环境 6
1.4.2 Dreamweaver CS6开发环境 7
1.5 专家答疑 7


第2章 网页文档的结构 9
2.1 HTML文档的基本结构 10
2.1.1 HTML页面的整体结构 10
2.1.2 HTML 5新增的结构标记 10
2.2 HTML 5的基本标记详解 11
2.2.1 文档类型说明 11
2.2.2 HTML标记 11
2.2.3 头标记head 11
2.2.4 网页的主体标记body 14
2.2.5 页面注释标记 15
2.3 HTML 5语法的变化 15
2.3.1 标签不再区分大小写 15
2.3.2 允许属性值不使用引号 16
2.3.3 允许部分属性值的属性省略 17
2.4 HTML 5文件的编写方法 17
2.4.1 示例1——使用记事本手工编写HTML 5 17
2.4.2 示例2——使用Dreamweaver CS6编写HTML文件 18
2.5 使用浏览器查看HTML 5文件 20
2.5.1 示例3——查看页面效果 20
2.5.2 示例4——查看源文件 21
2.6 综合示例——符合W3C标准的HTML 5网页 21
2.7 上机练习——简单的HTML 5网页 22
2.8 专家答疑 23


第3章 网页文本的设计 25
3.1 在网页中添加文本 26
3.1.1 普通文本的添加 26
3.1.2 特殊字符文本的添加 26
3.2 使用HTML 5标记添加特殊文本 28
3.2.1 添加重要文本 28
3.2.2 添加倾斜文本 29
3.2.3 添加上标和下标文本 29
3.2.4 设置文本旁注的文字大小 30
3.2.5 设置已删除文本 30
3.2.6 定义文本的方向 31
3.3 使用HTML 5标记排版网页文本 31
3.3.1 网页段落文本换行 32
3.3.2 分段显示网页段落文本 32
3.3.3 设定网页中的标题文本 33
3.3.4 为网页添加水平线 34
3.4 文字列表 35
3.4.1 建立无序列表
3.5
3.4.2 建立有序列表
3.6
3.4.3 建立不同类型的无序列表 37
3.4.4 建立不同类型的有序列表 38
3.4.5 建立嵌套列表 39
3.4.6 自定义列表 39
3.5 综合示例——制作简单的纯文本网页 40
3.6 上机练习——制作旅游网网页 41
3.7 专家答疑 42


第4章 网页色彩和图像的设计 43
4.1 网页色彩的应用 44
4.1.1 认识色彩 44
4.1.2 网页中色彩的搭配 45
4.1.3 网页元素的色彩搭配 46
4.1.4 网页颜色的使用风格 47
4.1.5 精彩配色赏析 48
4.2 网页中的图像 49
4.2.1 在网页中插入图像 49
4.2.2 设置图像的宽度和高度 51
4.2.3 设置图像的提示文字 51
4.2.4 将图片设置为网页背景 52
4.2.5 排列图像 53
4.3 综合示例——图文并茂的房屋装饰装修网页 54
4.4 上机练习——在线购物网站的产品展示 55
4.5 专家答疑 56


第5章 网页超链接的设计 57
5.1 链接和路径 58
5.1.1 超链接的概念 58
5.1.2 链接路径URL 58
5.1.3 创建HTTP路径 60
5.1.4 创建FTP路径 61
5.1.5 创建电子邮件路径 61
5.2 创建网页文本链接 62
5.2.1 使用链接元素创建文本超链接(1) 62
5.2.2 使用链接元素创建文本超链接(2) 63
5.2.3 设置以新窗口显示超链接页面 64
5.2.4 链接到同一页面的不同位置 65
5.3 创建网页图像链接 66
5.3.1 创建图像超链接 67
5.3.2 创建图像局部链接 67
5.4 创建浮动框架 68
5.5 综合示例——用Dreamweaver
精确定位热点区域 69
5.6 上机练习——创建热点区域 71
5.7 专家答疑 72


第6章 网页表单的设计 75
6.1 表单概述 76
6.2 在网页中添加基本的表单元素 76
6.2.1 添加单行文本输入框 77
6.2.2 添加多行文本输入框 77
6.2.3 添加密码输入框 78
6.2.4 添加单选按钮 79
6.2.5 添加复选框 80
6.2.6 添加下拉选择框 80
6.2.7 添加普通按钮 81
6.2.8 添加提交按钮 82
6.2.9 添加重置按钮 83
6.3 在网页中添加高级表单元素 84
6.3.1 添加不能为空的网站网址输入框 84
6.3.2 添加邮箱输入框 85
6.3.3 添加时间类型表单 86
6.3.4 添加数值输入框 87
6.3.5 添加滚动控件 87
6.3.6 添加不能为空的表单元素 88
6.4 综合示例——创建用户反馈表单 89
6.5 上机练习——制作用户注册表单 90
6.6 专家答疑 91


第7章 网页表格的设计 93
7.1 表格的基本结构 94
7.2 创建表格 95
7.2.1 创建普通表格 95
7.2.2 创建一个带有标题的表格 96
7.3 编辑表格 97
7.3.1 定义表格的边框类型 97
7.3.2 定义表格的表头 98
7.3.3 设置表格的背景 99
7.3.4 设置单元格的背景 101
7.3.5 合并单元格 102
7.3.6 排列单元格中的内容 106
7.3.7 设置单元格的行高与列宽 107
7.4 完整的表格标记 108
7.5 综合示例——制作计算机报价表 109
7.6 上机练习——制作学生成绩表 111
7.7 专家答疑 114


第8章 网页音频和视频的设计 117
8.1 audio标签 118
8.1.1 audio标签概述 118
8.1.2 audio标签的属性 119
8.1.3 audio标签浏览器的支持情况 119
8.2 在网页中添加音频文件 120
8.2.1 添加自动播放音频文件 120
8.2.2 添加带有控件的音频文件 120
8.2.3 添加循环播放的音频文件 121
8.2.4 添加预播放的音频文件 121
8.3 video标签 122
8.3.1 video标签概述 122
8.3.2 video标签的属性 123
8.3.3 video标签浏览器的支持情况 124
8.4 在网页中添加视频文件 124
8.4.1 添加自动播放的视频文件 124
8.4.2 添加带有控件的视频文件 125
8.4.3 添加循环播放的视频文件 125
8.4.4 添加预播放的视频文件 126
8.4.5 设置视频文件的高度和宽度 127
8.5 专家答疑 127


第9章 网页图形的绘制 129
9.1 添加canvas的步骤 130
9.2 绘制基本形状 130
9.2.1 绘制矩形 131
9.2.2 绘制圆形 132
9.2.3 使用moveTo与lineTo绘制直线 133
9.2.4 使用bezierCurveTo绘制贝塞尔曲线 134
9.3 绘制渐变图形 136
9.3.1 绘制线性渐变 136
9.3.2 绘制径向渐变 137
9.4 绘制变形图形 138
9.4.1 绘制平移效果的图形 138
9.4.2 绘制缩放效果的图形 139
9.4.3 绘制旋转效果的图形 140
9.4.4 绘制组合效果的图形 141
9.4.5 绘制带阴影的图形 143
9.5 使用图像 144
9.5.1 绘制图像 145
9.5.2 平铺图像 146
9.5.3 裁剪图像 147
9.5.4 图像的像素处理 149
9.6 绘制文字 150
9.7 图形的保存与恢复 152
9.7.1 保存与恢复状态 152
9.7.2 保存文件 153
9.8 综合示例——绘制火柴棒人物 154
9.9 上机练习——绘制商标 157
9.10 专家答疑 158


第10章 CSS 3网页样式核心基础 161
10.1 CSS 3基础语法概述 162
10.1.1 CSS 3的构造规则 162
10.1.2 CSS 3的常用单位 162
10.1.3 CSS 3的注释 166
10.2 编辑CSS 3文件的方法 167
10.2.1 手工编写CSS 3 167
10.2.2 用Dreamweaver编写CSS 168
10.3 在HTML 5中使用CSS 3的方法 169
10.3.1 行内样式 169
10.3.2 内嵌样式 170
10.3.3 链接样式 171
10.3.4 导入样式 172
10.3.5 优先级问题 173
10.4 CSS 3的基本选择器 176
10.4.1 标签选择器 176
10.4.2 类选择器 177
10.4.3 ID选择器 178
10.4.4 全局选择器 179
10.5 综合示例——制作炫彩网站Logo 179
10.6 上机练习——制作学生信息统计表 182
10.7 专家答疑 184


第11章 使用CSS 3控制网页字体与段落样式 185
11.1 丰富网页文字样式 186
11.1.1 设置文字的字体样式 186
11.1.2 设置文字的字号 187
11.1.3 设置字体风格 188
11.1.4 设置加粗字体 189
11.1.5 将小写字母转为大写字母 190
11.1.6 设置字体的复合属性 191
11.1.7 设置字体颜色 192
11.2 网页文本的高级样式 193
11.2.1 设置文本阴影效果 193
11.2.2 设置文本溢出效果 194
11.2.3 设置文本的控制换行 195
11.2.4 保持字体尺寸不变 196
11.3 丰富网页中的段落样式 197
11.3.1 设置单词之间的间隔 197
11.3.2 设置字符之间的间隔 198
11.3.3 设置文字的修饰效果 199
11.3.4 设置垂直对齐方式 200
11.3.5 转换文本的大小写 202
11.3.6 设置文本的水平对齐方式 203
11.3.7 设置文本的缩进效果 204
11.3.8 设置文本的行高 205
11.3.9 文本的空白处理 206
11.3.10 文本的反排 207
11.4 综合示例——设置网页标题 208
11.5 上机练习——制作新闻页面 210
11.6 专家答疑 211


第12章 使用CSS 3控制网页图片的显示样式 213
12.1 缩放图片 214
12.1.1 使用描述标记width和height缩放图片 214
12.1.2 使用CSS 3中的max-width和max-height缩放图片 214
12.1.3 使用CSS 3中的width和height缩放图片 215
12.2 网页图片与文字的对齐方式 216
12.2.1 横向对齐方式 216
12.2.2 纵向对齐方式 217
12.3 图文混排样式 219
12.3.1 设置文字环绕效果 219
12.3.2 设置图片与文字的间距 220
12.4 综合示例——制作学校宣传单 222
12.5 上机练习——制作简单的图文混排网页 224
12.6 专家答疑 225


第13章 使用CSS 3控制网页背景与边框的样式 227
13.1 使用CSS 3美化背景 228
13.1.1 设置背景颜色 228
13.1.2 设置背景图片 229
13.1.3 背景图片重复 230
13.1.4 背景图片显示 231
13.1.5 背景图片位置 233
13.1.6 背景图片大小 234
13.1.7 背景显示区域 236
13.1.8 背景图像裁剪区域 237
13.1.9 背景复合属性 238
13.2 使用CSS 3美化边框 239
13.2.1 设置边框的样式 240
13.2.2 设置边框的颜色 241
13.2.3 设置边框的线宽 242
13.2.4 设置边框的复合属性 244
13.3 设置边框的圆角效果 245
13.3.1 设置圆角边框 245
13.3.2 指定两个圆角半径 246
13.3.3 绘制四个不同圆角边框 247
13.3.4 绘制不同种类的边框 249
13.4 综合示例——制作简单的公司主页 250
13.5 上机练习——制作简单的生活资讯主页 253
13.6 专家答疑 255


第14章 使用CSS 3控制表格和表单样式 257
14.1 美化表格的样式 258
14.1.1 设置表格边框的样式 258
14.1.2 设置表格边框的宽度 260
14.1.3 设置表格边框的颜色 261
14.2 美化表单样式 262
14.2.1 美化表单中的元素 262
14.2.2 美化提交按钮 264
14.2.3 美化下拉菜单 265
14.3 综合示例——制作用户登录页面 267
14.4 上机练习——制作用户注册页面 268
14.5 专家答疑 270


第15章 使用CSS 3控制网页超链接和鼠标的样式 273
15.1 使用CSS 3丰富超链接样式 274
15.1.1 改变超链接的基本样式 274
15.1.2 设置带有提示信息的超链接 275
15.1.3 设置超链接的背景图 276
15.1.4 设置超链接的按钮效果 277
15.2 使用CSS 3丰富鼠标样式 278
15.2.1 使用CSS 3控制鼠标箭头 278
15.2.2 设置鼠标变幻式超链接 280
15.2.3 设置网页的页面滚动条 281
15.3 综合示例1——图片版本的超链接 283
15.4 综合示例2——鼠标特效 284
15.5 上机练习——制作一个简单的导航栏 287
15.6 专家答疑 288


第16章 使用CSS 3控制网页导航菜单的样式 291
16.1 使用CSS 3来丰富项目的列表样式 292
16.1.1 丰富无序列表样式 292
16.1.2 丰富有序列表样式 293
16.1.3 丰富自定义列表样式 295
16.1.4 制作图片列表 296
16.1.5 缩进图片列表 298
16.1.6 列表的复合属性 299
16.2 使用CSS 3制作网页菜单 300
16.2.1 制作无需表格的菜单 300
16.2.2 制作水平和垂直菜单 302
16.3 综合示例——模拟搜搜导航栏 304
16.4 上机练习——将段落转变成列表 307
16.5 专家答疑 309


第17章 掌握CSS 3的高级属性 311
17.1 复合选择器 312
17.1.1 “交集”选择器 312
17.1.2 “并集”选择器 313
17.1.3 后代选择器 313
17.2 CSS 3新增的选择器 314
17.2.1 属性选择器 315
17.2.2 结构伪类选择器 316
17.2.3 UI元素状态伪类选择器 318
17.3 CSS的继承特性 319
17.3.1 继承关系 319
17.3.2 CSS继承的运用 320
17.4 CSS的层叠特性 321
17.4.1 同一选择器被多次定义的处理 321
17.4.2 同一标签运用不同类型选择器的处理 322
17.5 综合示例——制作新闻菜单 323
17.6 专家答疑 326


第18章 CSS 3定位与DIV布局核心技术 327
18.1 了解块级元素和行内级元素 328
18.1.1 块级元素和行内级元素的应用 328
18.1.2 div元素和span元素的区别 330
18.2 盒子模型 331
18.2.1 盒子模型的概念 331
18.2.2 定义网页的border区域 332
18.2.3 定义网页的padding区域 333
18.2.4 定义网页的margin区域 334
18.3 CSS 3新增的弹性盒模型 338
18.3.1 定义盒子的布局取向(box-orient) 338
18.3.2 定义盒子的布局顺序(box-direction) 339
18.3.3 定义盒子布局的位置(box-ordinal-group) 341
18.3.4 定义盒子的弹性空间(box-flex) 342
18.3.5 管理盒子空间(box-pack和box-align) 344
18.3.6 盒子空间的溢出管理(box-lines) 346
18.4 综合示例——图文排版效果 347
18.5 上机练习——淘宝导购菜单 349
18.6 专家答疑 352


第19章 CSS 3 + DIV盒子的浮动与定位 353
19.1 定义DIV 354
19.1.1 什么是DIV 354
19.1.2 创建DIV 354
19.2 盒子的定位 355
19.2.1 静态定位 355
19.2.2 相对定位 356
19.2.3 绝对定位 357
19.2.4 固定定位 358
19.2.5 盒子的浮动 359
19.3 其他CSS布局定位方式 361
19.3.1 溢出(overflow)定位 361
19.3.2 隐藏(visibility)定位 362
19.3.3 z-index空间定位 364
19.4 新增的CSS 3多列布局 366
19.4.1 设置列宽度 366
19.4.2 设置列数 367
19.4.3 设置列间距 369
19.4.4 设置列边框样式 370
19.5 综合示例——定位网页布局样式 372
19.6 上机练习——制作阴影文字效果 374
19.7 专家答疑 375


第20章 网页布局剖析与制作 377
20.1 固定宽度网页剖析与布局 378
20.1.1 示例1——网页单列布局模式 378
20.1.2 示例2——网页1-2-1型布局模式 381
20.1.3 示例3——网页1-3-1型布局模式 384
20.2 自动缩放网页1-2-1型布局模式 387
20.2.1 示例4——“1-2-1”等比例变宽布局 387
20.2.2 示例5——“1-2-1”单列变宽布局 388
20.3 自动缩放网页1-3-1型布局模式 389
20.3.1 示例6——“1-3-1”三列宽度等比例布局 390
20.3.2 示例7——“1-3-1”单侧列宽度固定的变宽布局 390
20.3.3 示例8——“1-3-1”中间列宽度固定的变宽布局 393
20.3.4 示例9——“1-3-1”双侧列宽度固定的变宽布局396
20.3.5 示例10——“1-3-1”中列和左侧列宽度固定的变宽布局 399
20.4 分列布局背景色的使用 402
20.4.1 示例11——设置固定宽度布局的列背景色 402
20.4.2 示例12——设置特殊宽度变化布局的列背景色 404
20.4.3 示例13——设置单列宽度变化布局的列背景色 405
20.4.4 示例14——设置多列等比例宽度变化布局的列背景 406
20.5 专家答疑 408


第21章 制作企业门户类网页 411
21.1 构思布局 412
21.1.1 设计分析 412
21.1.2 排版架构 412
21.2 模块分割 413
21.2.1 Logo与导航菜单 413
21.2.2 左侧的文本介绍 415
21.2.3 右侧的导航链接 417
21.2.4 版权信息 418
21.3 整体调整 419


第22章 制作在线购物类网页 421
22.1 整体布局 422
22.1.1 设计分析 422
22.1.2 排版架构 422
22.2 模块分割 423
22.2.1 Logo与导航区 423
22.2.2 Banner与资讯区 425
22.2.3 产品类别区域 427
22.2.4 页脚区域 429
22.3 专家答疑 429

　　第1章
　　HTML与CSS 3
　　网页设计概述
　　目前，网页设计已经成为学习计算机的重要内容之一。制作网页可采用可视化编辑软件，但是无论采用哪一种网页编辑软件，都离不开HTML与CSS的相关内容，本章就来介绍HTML与CSS 3网页设计的相关概述内容。
　　1.1 网页与网站
　　打开一个网站时，首先呈现在读者面前的就是网页，网页上可以有图片、文字、音频和视频等构成网站的基本元素，网页是承载各种网站应用的平台。
　　1.1.1 什么是网页和网站
　　网页（Web Page）是一个文件，它存放在世界上某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页是依据网址（URL，例如www.sohu.com）来识别和访问的，当在浏览器的地址栏中输入网址后，经过一段时间内复杂而又快速的程序处理过程，网页文件会被传送到浏览者面前的计算机中，然后再通过浏览器解释网页内容，将其展现到读者的眼前。网页通常是HTML格式的（文件扩展名为.html或.htm）。
　　网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合，例如，常见的网站有搜狐、新浪等。简单地说，网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯信息，或者利用网站来提供相关的网络服务。衡量一个网站的性能时，通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供的服务等几方面来考虑，最直接的衡量标准是这个网站的真实流量。
　　在一个网站中，网页按照类型不同，可以分为两种，主页和普通网页。主页（Home Page）也叫首页，是进入一个网站的开始页面，就像搜狐的首页一样，如图1-1所示。
　　图1-1 搜狐的首页
　　1.1.2 网页的基本构成元素
　　在Internet发展的早期，网站只能保存单纯的文本。后来，经过一些年的发展，图像、声音、动画、视频和3D等技术已经在因特网上广泛应用，网站发展成如今图文并茂的样子，并且通过动态网页技术，用户可以与其他用户或者网站管理者进行交流。
　　网页常见的构成元素有文本、图像、超链接、表格、表单、导航栏、动画、框架等，如图1-2所示。
　　图1-2 网页常见的构成元素
　　（1） 文本：网页中的信息主要以文本为主。在网页中可以通过字体、大小、颜色、底纹、边框等来设计文本的属性。
　　（2） 图像：有了图像，才能看到丰富多彩的网页。网页上图片为JPG或GIF格式。通常图片会被运用在Logo、Banner和背景图上。Logo是代表企业形象或栏目内容的标志性图片，一般在网页的左上角。Banner是用于宣传网站内某个栏目或活动的广告，一般要求制作成动画形式，达到宣传的效果。Banner一般位于网页的顶部和底部。在网页页面中比较常用的图片还包括背景图，但要慎用背景图片，除非设计者确信背景图可以给网页增加不少魅力。
　　（3） 超链接：超链接是网站的灵魂，是从一个网页指向另一个目的端的链接。目的端通常是一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者是本网页中的其他位置。超链接本身可以是文字或者图片。
　　（4） 表格：表格是网页中展现数据的主要方式，能够以表的形式显示数据信息。表格也可以用来进行网页排版，在以往的很长一段时间内，使用表格排版是网站的首选方式。
　　（5） 表单：表单是用来收集站点访问者信息的集合。站点访问者填写表单的方式是输入文本、单击单选按钮和复选框，以及从下拉菜单中选择选项。在填好表单之后，站点访问者便送出所输入的数据，该数据就会根据网站设计者所设置的表单处理程序，以各种不同的方式进行处理。
　　（6） 导航栏：导航栏是一组超链接，一般用于网站各部分内容间相互链接的指引。导航栏可以是按钮或者文本超链接。
　　（7） 动画：动画是网页上最活跃的元素，包括GIF动画和Flash动画。
　　网页中除了这些最基本元素外，还包括横幅广告、字幕、悬停按钮、计数器、音频、视频等。
　　1.2 HTML的基本概念
　　因特网上的信息是以网页的形式展示给用户的，因此，网页是网络信息传递的载体。
　　网页文件是用一种标签语言书写的，这种语言称为超文本标记语言（Hyper Text Markup Language，HTML）。
　　1.2.1 什么是HTML
　　HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML最基本的语法是<标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。
　　例如，在HTML中，用
　　标记符来定义一个段落，用来定义一个换行符。当浏览器遇到
　　标记符时，会把该标记中的内容自动形成一个段落。当遇到
　　标记符时，会自动换行，并且该标记符后的内容会从一个新行开始。这里的
　　标记符是单标记，没有结束标记，标记中的“/”符号可以省略，但为了代码的规范性，一般建议加上。
　　1.2.2 HTML的发展历程
　　HTML主要用于描述超文本中内容的显示方式。标记语言从诞生到今天，经历了十几年，发展过程中也有很多曲折，经历的版本及发布日期如表1-1所示。
　　表1-1 HTML的发展历程
　　版 本 发布日期 说 明
　　超文本标记语言（第一版） 1993年6月 作为互联网工程工作小组（IETF）的工作草案发布
　　（并非标准）
　　HTML 2.0 1995年11月 作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时
　　HTML 3.2 1996年1月14日 W3C推荐标准
　　HTML 4.0 1997年12月18日 W3C推荐标准
　　HTML 4.01 1999年12月24日 微小改进，W3C推荐标准
　　ISO HTML 2000年5月15日 基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准
　　XHTML 1.0 2000年1月26日 W3C推荐标准，后来经过修订，于2002年8月1日重新发布
　　XHTML 1.1 2001年5月31日 较1.0有微小改进
　　XHTML 2.0草案 没有发布 2009年，W3C停止了XHTML 2.0工作组的工作
　　HTML 5 2012年12月17日 万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML 5规范已经正式定稿
　　1.2.3 HTML文件的基本结构
　　完整的HTML文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。
　　一个HTML文件的基本结构如下：
　　文件开始的标记
　　文档头部结束的标记
　　文件主体开始的标记
　　...文档主体内容
　　文件主体结束的标记
　　文件结束的标记
　　从上面的代码可以看出，在HTML文件中，所有的标记都是相对应的，开头标记的形式为<标记>，结束标记的形式为，在这两个标记中间，放置相应的内容。
　　1.3 CSS的基本概念
　　一个美观大方且简约的页面以及高访问量的网站，是网页设计者的追求。然而，仅通过HTML实现是非常困难的，HTML语言仅仅定义了网页的结构，对于文本样式没有过多涉及。这就需要一种技术对页面的布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制，这种技术就是CSS。
　　1.3.1 什么是CSS
　　CSS（Cascading Style Sheet，“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
　　通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分开。
　　CSS最早是1996年由W3C审核通过并推荐使用的，CSS目前最新版本为CSS 3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象做盒模型控制的能力，并能够进行初步的交互设计，是目前最优秀的基于文本展示表现的设计语言。
　　1.3.2 HTML与CSS的优缺点
　　（1） HTML发展到今天，存在三个主要缺点：
　　? HTML代码不规范、臃肿，需要足够智能和庞大的浏览器才能够正确显示HTML。
　　? 数据与表现混杂，当页面要改变显示时，就必须重新制作HTML。
　　? 不利于搜索引擎搜索。
　　（2） HTML也有两个显著的优点：
　　? 使用Table的表现方式不需要考虑浏览器兼容问题。
　　? 简单易学，易于推广。
　　（3） CSS的产生恰好弥补了HTML的缺点，主要表现在以下几个方面。
　　① 表现与结构分离
　　CSS 2.0从真正意义上实现了设计代码与内容的分离，它将设计部分剥离出来并放在一个独立的样式文件中，HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好。
　　② 提高页面浏览速度
　　对于同一个页面视觉效果，采用CSS布局的页面容量要比Table 编码的页面文件容量小得多，前者一般只有后者的1/2。浏览器不用去编译大量冗长的标签。
　　③ 易于维护和改版
　　开发者只要简单修改几个CSS 文件，就可以重新设计整个网站的页面。
　　④ 继承性能优越（层叠处理）
　　CSS代码在浏览器的解析顺序上会根据CSS的级别进行，它按照对同一元素定义的先后来应用多个样式。良好的CSS代码设计可以使代码之间产生继承关系，能够达到最大限度的代码重用，从而降低代码量及维护成本。
　　⑤ 易于被搜索引擎搜索
　　由于CSS代码规范整齐，且与网页内容分离，所以引擎搜索时仅分析内容部分即可。
　　（4） CSS的缺点在于，需要考虑浏览器兼容性的问题，比较难学。
　　1.3.3 浏览器对CSS 3的支持
　　目前，CSS 3是众多浏览器普遍支持的最完善的版本，最新的浏览器均支持该版本。使用CSS 3样式设计出来的网页，在众多平台及浏览器下对样式的表现最为接近，其中IE浏览器对CSS的支持相对比较全面，所以本书中的示例大多是在IE浏览器下运行的。
　　1.4 HTML与CSS网页的开发环境
　　HTML与CSS文件是纯文本格式文件，所以在编辑HTML和CSS时，就有了多种选择，可以使用一些简单的纯文本编辑工具，例如记事本等，同样可以选择专业的CSS 3编辑工具，例如Dreamweaver等。
　　1.4.1 记事本开发环境
　　单击Windows桌面上的“开始”按钮，选择“所有程序”→“附件”→“记事本”命令，打开记事本程序，如图1-3所示。
　　图1-3 打开记事本程序
　　在记事本程序中输入相关的HTML和CSS代码，然后将记事本文件以扩展名为.html或.htm进行保存，并在浏览器中打开文档以查看效果。
　　1.4.2 Dreamweaver CS6开发环境
　　使用记事本可以编写HTML文件，但是编写效率太低，对于语法错误及格式都没有提示，因此，很多专门制作网页的工具弥补了这种缺陷。其中，Adobe公司的Dreamweaver CS6用户界面非常友好，是一款非常优秀的网页开发工具，并深受广大用户的喜爱。Dreamweaver CS6的主界面如图1-4所示。
　　图1-4 Dreamweaver CS6的主界面
　　1.5 专 家 答 疑
　　疑问1：为何使用记事本编辑的HTML文件无法在浏览器中预览，而是直接在记事本中打开？
　　很多初学者在保存文件时，没有将HTML文件的扩展名.html或.htm作为文件的后缀，导致文件还是以.txt为扩展名，因此，无法在浏览器中查看。如果读者是通过单击鼠标右键创建记事本文件，在给文件重命名时，一定要以.html或.htm作为文件的后缀。特别要注意的是，当Windows系统的扩展名隐藏时，更容易出现这样的错误。读者可以在“文件夹选项”对话框中查看是否显示扩展名。
　　疑问2：如何显示或隐藏Dreamweaver CS6的欢迎屏幕？
　　Dreamweaver CS6欢迎屏幕可以帮助使用者快速进行打开文件、新建文件和获得相关帮助的操作。如果读者不希望显示该窗口，可以按下Ctrl+U组合键，在弹出的窗口中，选择左侧的“常规”页，将右侧“文档选项”部分的“显示欢迎屏幕”取消勾选。
　　……