内 容 简 介本书作者根据自己在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍了CSS 3 + DIV网页样式与布局的技术。全书共分为24章，前19章分别介绍了开发网站的准备工作、HTML 5技术、CSS样式入门、CSS样式基本语法、CSS 3的高级特性、控制网页字体和段落样式、控制网页图片样式、控制网页背景和边框样式、美化网页浏览效果、控制表格与表单样式、控制列表样式、使用CSS 3滤镜美化网页元素、CSS定位与DIV布局核心技术、CSS + DIV盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作、CSS 3与JavaScript的搭配应用、CSS与XML的综合应用、CSS与Ajax的综合应用。最后5章介绍了5个综合性网站的例子。通过学习案例，使读者进一步巩固所学的知识，提高实战能力。本书内容丰富、全面，图文并茂，步骤清晰，通俗易懂，专业性强，使读者能理解CSS 3 + DIV网页样式与布局的技术，并能解决实际生活或工作中的问题，真正做到知其然更知其所以然。通过重点章节，条理清晰、系统地介绍了读者希望了解的网页设计技巧。本书涉及面广泛，几乎囊括了CSS 3 + DIV网页样式与布局的所有重要知识，适合所有的网页设计初学者快速入门，同时也适合想全面了解CSS 3 + DIV网页样式与布局的设计人员阅读。前 言
伴随着Web 2.0潮流的盛行，传统的表格布局模式正逐渐被网页标准化CSS + DIV的设计方式取代，对最新CSS 3的学习也成为网页设计师的必修功课。本书专门针对网页样式与布局的初学者，帮助他们快速提高实战水平。
1. 本书特色
(1)知识全面：由浅入深，涵盖了所有的CSS 3 + DIV知识点，帮助读者快速掌握网页设计方面的技能。
(2)图文并茂：在介绍案例的过程中，每一个操作均有对应的插图。图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程及效果，便于更快地理解和掌握。
(3)易学易用：颠覆传统“看”书的观念，变成一本能“操作”的图书。
(4)案例丰富：把知识点融会于系统的案例实训中，并且结合经典案例进行讲解和拓展，进而实现“知其然，并知其所以然”的效果。
(5)贴心提示：本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“注意”等形式进行说明，以免读者在学习的过程中走弯路。
(6)超值赠送：除了本书的素材和结果外，还附赠封面所述的大量的资源，读者可以全面掌握网页设计方方面面的知识。
2. 读者对象
本书不仅适合网页设计初级读者入门学习，也可作为中、高级用户的参考手册。书中大量的实例模拟真实的网页设计案例，对读者的工作有现实的借鉴作用。
3. 作者团队
本书作者刘玉红长期从事网站设计与开发工作。胡同夫、梁云亮、王攀登、王婷婷、陈伟光、包慧利、孙若淞、肖品、王维维和刘海松等人参与了本书的编写工作。
本书虽然倾注了编者的努力，但由于水平有限，书中难免存在疏漏之处，恳请读者批评指正。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。
编 者
目 录
第1章 制作网页的准备工作 1
1.1 认识网页和网站 2
1.1.1 什么是网页 2
1.1.2 什么是网站 3
1.2 网页中需要包含的要素 3
1.2.1 需要HTML文件 3
1.2.2 需要DIV层 4
1.2.3 需要CSS定义的网页样式 4
1.2.4 需要JavaScript设置网页动画 5
1.2.5 需要域名与服务器空间 5
1.3 一个简单网页的基本构成 6
1.3.1 head部分 6
1.3.2 body部分 6
1.3.3 注释部分 7
1.4 制作网页的总体流程 8
1.4.1 网页规划 8
1.4.2 搜集资料 8
1.4.3 使用Photoshop设计网页的总体效果 9
1.4.4 通过切图，得到网页素材文件 9
1.4.5 搭建网页DIV层 10
1.4.6 定义CSS和JavaScript效果 11
1.4.7 测试网页 11
1.5 网站种类与网页布局方式 12
1.5.1 网站的种类 12
1.5.2 网页布局方式 13
1.6 综合示例——在Photoshop CS6中构建网页结构 15
1.7 上机练习——使用Photoshop制作纵向导航条 16
1.8 专家答疑 18
第2章 网页实现技术——HTML 5 21
2.1 HTML 5的基本概念 22
2.1.1 HTML 5简介 22
2.1.2 HTML 5文件的基本结构 22
2.1.3 认识HTML 5标记 23
2.2 HTML 5文件的编写方法 23
2.2.1 使用记事本手工编写HTML文件 24
2.2.2 使用Dreamweaver CS6编写HTML文件 24
2.3 HTML 5的基本标记 27
2.3.1 字符标记 27
2.3.2 超级链接标记 28
2.3.3 列表标记 30
2.3.4 制作纯文本网页 31
2.4 HTML 5的段落和图片标记 32
2.4.1 常用段落和图片标记 32
2.4.2 文字和图片混合排版 33
2.5 HTML 5的表单标记 34
2.5.1 常用的表单控件 34
2.5.2 多行文本标记和下拉列表 36
2.5.3 用户注册页面 37
2.6 HTML 5的表格标记 38
2.6.1 表格标记 38
2.6.2 制作季度报表 40
2.7 综合示例——制作网站首页 41
2.8 上机练习——简单的HTML 5网页 45
2.9 专家答疑 45
第3章 CSS 3样式入门 47
3.1 CSS概述 48
3.1.1 CSS的功能 48
3.1.2 浏览器与CSS 48
3.1.3 CSS的发展历史 49
3.2 CSS 3的常用单位 49
3.2.1 颜色单位 49
3.2.2 长度单位 53
3.3 编辑和浏览CSS 54
3.3.1 手工编写CSS 54
3.3.2 用Dreamweaver编写CSS 55
3.4 在HTML 5中调用CSS的方法 56
3.4.1 行内样式 56
3.4.2 内嵌样式 57
3.4.3 链接样式 59
3.4.4 导入样式 60
3.5 调用方法的优先级问题 61
3.5.1 行内样式和内嵌样式比较 61
3.5.2 内嵌样式和链接样式比较 62
3.5.3 链接样式和导入样式 62
3.6 综合示例——制作学生信息统计表 63
3.7 专家答疑 65
第4章 CSS样式的基本语法 67
4.1 CSS基础语法 68
4.1.1 CSS构造规则 68
4.1.2 CSS的注释 68
4.2 CSS的常用选择器 69
4.2.1 标签选择器 69
4.2.2 类选择器 70
4.2.3 ID选择器 71
4.2.4 选择器的声明 71
4.3 综合示例——制作炫彩网站Logo 72
4.4 专家答疑 75
第5章 CSS 3的高级特性 77
5.1 复合选择器 78
5.1.1 全局选择器 78
5.1.2 “交集”选择器 79
5.1.3 “并集”选择器 79
5.1.4 继承(后代)选择器 80
5.2 CSS 3新增的选择器 81
5.2.1 属性选择器 81
5.2.2 结构伪类选择器 83
5.2.3 UI元素状态伪类选择器 84
5.2.4 伪类选择器 86
5.3 CSS的继承特性 87
5.3.1 继承关系 87
5.3.2 CSS继承的运用 88
5.4 CSS的层叠特性 89
5.4.1 同一选择器被多次定义的处理 89
5.4.2 同一标签运用不同类型选择器的处理 90
5.5 综合示例——制作新闻菜单 91
5.6 专家答疑 94
第6章 使用CSS 3控制网页字体与段落的样式 95
6.1 通过CSS控制字体样式 96
6.1.1 控制字体类型 96
6.1.2 定义字体大小 97
6.1.3 定义字体风格 98
6.1.4 控制文字的粗细 99
6.1.5 将小写字母转为大写字母 100
6.1.6 设置字体的复合属性 101
6.1.7 定义文字的颜色 102
6.2 CSS 3中新增的文本高级样式 103
6.2.1 添加文本的阴影效果 103
6.2.2 设置文本的溢出效果 104
6.2.3 控制文本的换行 105
6.2.4 设置字体尺寸 106
6.3 通过CSS控制文本间距与对齐方式 107
6.3.1 设置单词之间的间隔 108
6.3.2 设置字符之间的间隔 108
6.3.3 为文本添加下划线、上划线、删除线 109
6.3.4 设置垂直对齐方式 110
6.3.5 转换文本的大小写 112
6.3.6 设置文本的水平对齐方式 113
6.3.7 设置文本的缩进效果 115
6.3.8 设置文本的行高 116
6.3.9 文本的空白处理 116
6.3.10 文本的反排 118
6.4 综合示例——设置网页标题 119
6.5 上机练习——制作新闻页面 121
6.6 专家答疑 122
第7章 使用CSS控制网页图片的样式 123
7.1 图片缩放 124
7.1.1 通过描述标记width和height来缩放图片 124
7.1.2 使用CSS 3中的max-width和max-height缩放图片 124
7.1.3 使用CSS 3中的width和height缩放图片 125
7.2 设置图片的对齐方式 126
7.2.1 设置图片横向对齐 126
7.2.2 设置图片纵向对齐 127
7.3 图文混排 129
7.3.1 设置文字的环绕效果 129
7.3.2 设置图片与文字的间距 130
7.4 综合示例——制作学校宣传单 132
7.5 上机练习——制作简单的图文混排网页 134
7.6 专家答疑 135
第8章 使用CSS控制网页背景与边框样式 137
8.1 使用CSS控制网页背景 138
8.1.1 设置背景颜色 138
8.1.2 设置背景图片 139
8.1.3 背景图片的重复 140
8.1.4 背景图片的显示 142
8.1.5 背景图片的位置 143
8.2 CSS 3中新增的控制网页背景的属性 145
8.2.1 背景图片大小 145
8.2.2 背景显示区域 146
8.2.3 背景图像的裁剪区域 148
8.2.4 背景复合属性 149
8.3 使用CSS控制边框样式 150
8.3.1 设置边框的样式 150
8.3.2 设置边框的颜色 152
8.3.3 设置边框的线宽 153
8.3.4 设置边框的复合属性 155
8.4 CSS 3中新增的边框圆角效果 155
8.4.1 设置圆角边框 156
8.4.2 指定两个圆角半径 156
8.4.3 绘制四个角的圆角边框 157
8.4.4 绘制不同种类的边框 159
8.5 综合示例——制作简单的公司主页 161
8.6 上机练习——制作简单的生活资讯主页 164
8.7 专家答疑 165
第9章 使用CSS 3美化网页浏览效果 167
9.1 使用CSS 3美化超链接 168
9.1.1 改变超级链接的基本样式 168
9.1.2 设置带有提示信息的超级链接 169
9.1.3 设置超级链接的背景图 170
9.1.4 设置超级链接的按钮效果 171
9.2 使用CSS 3美化鼠标特效 172
9.2.1 使用CSS 3控制鼠标箭头 172
9.2.2 设置鼠标变换式超链接 174
9.2.3 设置网页页面滚动条 175
9.3 综合示例1——图片版本的
超级链接 177
9.4 综合示例2——关于鼠标特效 178
9.5 上机练习——制作一个简单的导航栏 181
9.6 专家答疑 182
第10章 使用CSS控制表格和表单的样式 185
10.1 美化表格样式 186
10.1.1 设置表格边框的样式 186
10.1.2 设置表格边框的宽度 188
10.1.3 设置表格边框的颜色 189
10.2 美化表单样式 190
10.2.1 美化表单中的元素 190
10.2.2 美化提交按钮 192
10.2.3 美化下拉菜单 193
10.3 综合示例——制作用户登录页面 195
10.4 上机练习——制作用户注册页面 197
10.5 专家答疑 199
第11章 使用CSS控制列表样式 201
11.1 使用CSS控制项目列表 202
11.1.1 美化无序列表 202
11.1.2 美化有序列表 203
11.1.3 美化自定义列表 205
11.1.4 制作图片列表 206
11.1.5 缩进图片列表 207
11.1.6 列表复合属性 209
11.2 使用CSS制作网页菜单 210
11.2.1 制作无需表格的菜单 210
11.2.2 制作水平和垂直菜单 212
11.3 综合示例——模拟soso导航栏 214
11.4 上机练习——将段落转变成列表 217
11.5 专家答疑 219
第12章 使用CSS 3滤镜美化网页元素 221
12.1 滤镜概述 222
12.2 基本滤镜 222
12.2.1 通道(Alpha)滤镜 223
12.2.2 模糊(Blur)滤镜 225
12.2.3 色彩(Chroma)滤镜 226
12.2.4 投影(DropShadow)滤镜 227
12.2.5 水平翻转(FlipH)滤镜 229
12.2.6 垂直翻转(FlipV)滤镜 229
12.2.7 光晕(Glow)滤镜 230
12.2.8 灰度(Gray)滤镜 231
12.2.9 反相(Invert)滤镜 232
12.2.10 遮罩(Mask)滤镜 233
12.2.11 波浪(Wave)滤镜 233
12.2.12 阴影(Shadow)滤镜 235
12.2.13 X-ray滤镜 236
12.3 高级滤镜 236
12.3.1 光照(Light)滤镜 237
12.3.2 渐隐(BlendTrans)滤镜 238
12.3.3 切换(RevealTrans)滤镜 240
12.4 专家答疑 241
第13章 CSS定位与DIV布局核心技术 243
13.1 了解块级元素和行内级元素 244
13.1.1 块级元素和行内级元素的应用 244
13.1.2 div元素和span元素的区别 246
13.2 盒子模型 247
13.2.1 盒子模型的概念 247
13.2.2 定义网页的border区域 247
13.2.3 定义网页的padding区域 249
13.2.4 定义网页的margin区域 250
13.3 CSS 3新增的弹性盒模型 253
13.3.1 定义盒子的布局取向(box-orient) 254
13.3.2 定义盒子布局的顺序(box-direction) 255
13.3.3 定义盒子布局的位置(box-ordinal-group) 257
13.3.4 定义盒子的弹性空间(box-flex) 258
13.3.5 管理盒子的空间(box-pack和box-align) 260
13.3.6 盒子空间的溢出管理(box-lines) 262
13.4 综合示例——图文排版效果 263
13.5 上机练习——淘宝导购菜单 265
13.6 专家解惑 268
第14章 CSS + DIV盒子的浮动与定位 269
14.1 定义DIV 270
14.1.1 什么是DIV 270
14.1.2 创建DIV 270
14.2 盒子的定位 271
14.2.1 静态定位 271
14.2.2 相对定位 272
14.2.3 绝对定位 273
14.2.4 固定定位 274
14.2.5 盒子的浮动 275
14.3 其他CSS布局定位方式 277
14.3.1 溢出(overflow)定位 277
14.3.2 隐藏(visibility)定位 279
14.3.3 z-index空间定位 280
14.4 新增的CSS 3多列布局 282
14.4.1 设置列宽度 282
14.4.2 设置列数 283
14.4.3 设置列间距 285
14.4.4 设置列边框样式 286
14.5 综合示例——定位网页的布局样式 288
14.6 上机练习——制作阴影文字效果 291
14.7 专家答疑 292
第15章 固定宽度网页布局的剖析与制作 293
15.1 CSS的排版观念 294
15.1.1 将页面用DIV分块 294
15.1.2 设置各块的位置 294
15.1.3 用CSS定位 295
15.2 固定宽度网页剖析与布局 299
15.2.1 网页单列布局模式 299
15.2.2 网页1-2-1型布局模式 303
15.2.3 网页1-3-1型布局模式 305
15.3 专家答疑 309
第16章 自动缩放网页布局的剖析与制作 311
16.1 自动缩放网页1-2-1型布局模式 312
16.1.1 网页1-2-1等比例变宽布局 312
16.1.2 网页1-2-1单列变宽布局 313
16.2 自动缩放网页1-3-1型布局模式 314
16.2.1 网页1-3-1三列宽度等比例布局 314
16.2.2 网页1-3-1单侧列宽度固定的变宽布局 314
16.2.3 网页1-3-1中间列宽度固定的变宽布局 317
16.2.4 网页1-3-1双侧列宽度固定的变宽布局 320
16.2.5 网页1-3-1中列和左侧列宽度固定的变宽布局 324
16.3 分列布局背景色的使用 327
16.3.1 设置固定宽度布局的列背景色 327
16.3.2 设置特殊宽度变化布局的列背景色 329
16.4 综合案例——单列宽度变化布局 330
16.5 上机练习——多列等比例宽度变化布局 332
16.6 专家答疑 334
第17章 CSS 3和JavaScript的搭配应用 335
17.1 JavaScript的语法基础 336
17.1.1 什么是JavaScript 336
17.1.2 数据类型 336
17.1.3 变量 338
17.1.4 运算符的简单应用 338
17.1.5 流程控制语句的简单应用 341
17.1.6 函数的简单应用 344
17.2 常见的JavaScript编写工具 347
17.2.1 记事本工具 347
17.2.2 Dreamweaver 348
17.3 JavaScript在HTML中的使用 349
17.3.1 在HTML网页头中嵌入JavaScript代码 349
17.3.2 在HTML网页中嵌入JavaScript代码 350
17.3.3 在HTML网页元素的事件中嵌入JavaScript代码 351
17.3.4 在HTML中调用已经存在的JavaScript文件 352
17.3.5 通过JavaScript伪URL引入JavaScript脚本代码 353
17.4 JavaScript与CSS 3的结合使用 354
17.4.1 设置动态内容 354
17.4.2 改变动态样式 355
17.4.3 动态定位网页元素 357
17.4.4 设置网页元素的显示与隐藏 359
17.5 HTML 5、CSS 3和JavaScript的 搭配应用 360
17.5.1 设定左右移动的图片 360
17.5.2 制作颜色选择器 363
17.5.3 制作跑马灯效果 365
17.6 综合示例——制作树形导航菜单 366
17.7 上机练习——制作滚动的菜单 371
17.8 专家答疑 373
第18章 CSS与XML的综合运用 375
18.1 XML语法基础 376
18.1.1 XML的基本应用 376
18.1.2 XML文档的组成和声明 377
18.1.3 XML元素介绍 379
18.2 用CSS修饰XML文件 381
18.2.1 XML使用CSS 381
18.2.2 设置字型属性 382
18.2.3 设置色彩属性 383
18.2.4 设置边框属性 384
18.2.5 设置文本属性 385
18.3 综合示例1——招聘广告 387
18.4 综合示例2——图文混排页面 389
18.5 上机练习——古诗欣赏 391
18.6 专家答疑 394
第19章 CSS与Ajax的综合应用 395
19.1 Ajax概述 396
19.1.1 什么是Ajax 396
19.1.2 Ajax的关键元素 398
19.1.3 CSS在Ajax应用中的
地位 399
19.2 Ajax快速入门 400
19.2.1 全面剖析XMLHttpRequest对象 400
19.2.2 发出Ajax请求 402
19.2.3 处理服务器响应 403
19.3 综合示例——制作自由拖动的网页 405
19.4 上机练习——制作加载条 410
19.5 专家答疑 411
第20章 商业门户类网站赏析 413
20.1 整体设计 414
20.1.1 颜色应用分析 414
20.1.2 架构布局分析 415
20.2 主要模块设计 416
20.2.1 网页整体样式插入 416
20.2.2 网页局部的样式 417
20.2.3 顶部模块样式代码分析 427
20.2.4 中间主体代码分析 428
20.2.5 底部模块分析 432
20.3 网站调整 432
20.3.1 部分内容调整 432
20.3.2 模块调整 433
20.3.3 调整后预览测试 435
第21章 制作娱乐休闲类网页 437
21.1 整体设计 438
21.1.1 应用设计分析 438
21.1.2 架构布局分析 439
21.2 主要模块设计 440
21.2.1 网页整体样式插入 440
21.2.2 顶部模块代码分析 441
21.2.3 视频模块代码分析 442
21.2.4 评论模块代码分析 444
21.2.5 热门推荐模块代码分析 445
21.2.6 底部模块分析 447
21.3 网页调整 448
21.3.1 部分内容调整 448
21.3.2 调整后预览测试 449
第22章 制作图像影音类网页 451
22.1 整体设计 452
22.1.1 颜色应用分析 452
22.1.2 架构布局分析 452
22.2 主要模块设计 454
22.2.1 样式代码分析 454
22.2.2 顶部模块样式代码分析 462
22.2.3 网站主体模块代码分析 464
22.2.4 底部模块分析 468
22.3 网站调整 469
22.3.1 部分内容调整 469
22.3.2 模块调整 470
22.3.3 调整后预览测试 476
第23章 制作企业门户类网页 477
23.1 构思布局 478
23.1.1 设计分析 478
23.1.2 排版架构 478
23.2 主要模块设计 479
23.2.1 Logo与导航菜单 479
23.2.2 Banner区 481
23.2.3 资讯区 481
23.2.4 版权信息 484
第24章 制作在线购物类网页 487
24.1 整体布局 488
24.1.1 设计分析 488
24.1.2 排版架构 488
24.2 主要模块设计 489
24.2.1 Logo与导航区 489
24.2.2 Banner与资讯区 491
24.2.3 产品类别区域 492
24.2.4 页脚区域 494
