第1章 网页和网站的基础知识 1
1.1 认识网页 1
1.1.1 网页和网站 1
1.1.2 网页的类型 2
1.1.3 静态网页与动态网页 3
1.1.4 网页的基本构成元素 4
1.2 如何设计网页 5
1.2.1 网页设计的基本原则 5
1.2.2 网页设计成功要素 6
1.2.3 网页的设计风格及色彩搭配 7
1.2.4 网页设计的实现 8
1.3 网页设计的要点 10
1.3.1 为用户考虑 10
1.3.2 主题突出 11
1.3.3 整体原则 12
1.3.4 内容与形式相统一 13
1.3.5 更新和维护 14
1.4 网页布局设计流程 14
1.4.1 前期策划 15
1.4.2 收集素材 15
1.4.3 页面的版式与布局分析 15
1.4.4 确定网站的主色调 16
1.4.5 设计页面整体 17
1.4.6 其他页面元素的设计 17
1.4.7 切割和优化页面 17
1.4.8 制作HTML页面 17
1.4.9 添加网页后台程序 17
1.4.10 测试并上传网站 17
1.5 本章小结 18
第2章 使用Web标准设计和制作 19
2.1 HTML基础 19
2.1.1 表格布局的优点 19
2.1.2 表格布局的缺点 20
2.2 了解Web标准 21
2.2.1 什么是Web标准 21
2.2.2 什么是W3C 21
2.2.3 W3C发布的标准 21
2.2.4 Web标准的优势 23
2.3 网络设计的标准时代 25
2.3.1 为什么要建立网站标准 25
2.3.2 遵循标准的网站与传统网站的区别 25
2.3.3 采用网站标准的优缺点 26
2.4 Web标准三剑客 27
2.4.1 什么是内容、结构、表现和行为 27
2.4.2 DIV与CSS结合的优势 28
2.4.3 如何改善现有网站 28
2.5 关于Web标准的思考与争论 29
2.5.1 关于Web标准的优点 29
2.5.2 关于布局 30
2.5.3 关于浏览器兼容 30
2.6 关于Web标准的误区 31
2.6.1 抛弃表格布局的思维方式 31
2.6.2 正确使用XHTML标签 32
2.6.3 善于利用CSS 33
2.6.4 “通过验证”并不是最终目的 33
2.7 本章小结 34
第3章 HTML和XHTML基础 35
3.1 HTML基础 35
3.1.1 HTML概述 35
3.1.2 HTML文件的基本结构 35
3.1.3 HTML的主要功能 36
3.1.4 HTML的基本语法 36
3.2 HTML标签 37
3.2.1 基本标签 38
3.2.2 格式标签 39
3.2.3 文本标签 40
3.2.4 超链接标签 41
3.2.5 图像标签 41
3.2.6 表格标签 42
3.2.7 分区标签 43
3.3 XHTML介绍 43
3.3.1 什么是XHTML 44
3.3.2 升级到XHTML的好处 44
3.3.3 XHTML的页面结构 44
3.3.4 XHTML的代码规范 46
3.3.5 选择文档类型 49
3.3.6 XHTML和HTML的比较 50
3.3.7 名字空间 51
3.4 本章小结 52
第4章 CSS样式基础 53
4.1 CSS概述 53
4.1.1 CSS的特点 54
4.1.2 CSS的类型 54
4.1.3 CSS的基本语法 56
4.2 CSS样式表的基本用法 56
4.2.1 在XHTML内插入样式表 56
4.2.2 CSS样式表的规则 56
4.3 CSS样式表的分类 57
4.3.1 内联样式 57
4.3.2 内联样式 58
4.3.3 外部样式表 59
4.4 CSS文档结构 59
4.4.1 结构 59
4.4.2 继承 60
4.4.3 特殊性 62
4.4.4 层叠 63
4.4.5 重要性 63
4.5 单位和值 63
4.5.1 颜色值 64
4.5.2 定义字体 65
4.5.3 群选择符 67
4.5.4 派生选择符 67
4.5.5 id选择符 67
4.5.6 类选择符 68
4.5.7 定义链接的样式表 69
4.6 本章小结 70
第5章 DIV+CSS布局入门 71
5.1 定义DIV 71
5.1.1 CSS的特点 71
5.1.2 插入DIV 72
5.1.3 DIV的嵌套和固定格式 74
5.2 可视化模型 75
5.2.1 盒模型 75
5.2.2 视觉可视化模型 77
5.2.3 相对定位 78
5.2.4 绝对定位 79
5.2.5 浮动定位 80
5.2.6 空白变叠加 85
5.3 CSS布局方式 86
5.3.1 居中的布局设计 86
5.3.2 浮动的布局设计 87
5.3.3 高度自适应 93
5.4 CSS 3.0中盒模型的新增属性 94
5.4.1 实战1：overflow 94
5.4.2 实战2：overflow-x 96
5.4.3 实战3：overflow-y 97
5.4.4 实战4：使用CSS 3.0实现鼠标经过变换效果 98
5.5 商业案例——设计制作咖啡店网站页面 99
5.5.1 设计分析 100
5.5.2 布局分析 100
5.5.3 制作流程 101
5.5.4 制作流程 101
5.5.5 案例小结 111
5.6 课后作业——制作个人网站页面 111
5.6.1 案例分析 112
5.6.2 技能剖析 112
5.7 本章小结 113
第6章 设置页面背景图像 114
6.1 背景控制概述 114
6.1.1 背景控制原则 114
6.1.2 背景控制属性 115
6.2 背景颜色控制 116
6.2.1 实战5：控制页面背景颜色 116
6.2.2 实战6：设置块背景颜色 118
6.3 背景图像控制 119
6.3.1 实战7：设置背景图像 119
6.3.2 实战8：背景图像的重复方式 120
6.3.3 实战9：背景图像的定位 121
6.3.4 实战10：背景图像的滚动 123
6.4 CSS 3.0中背景的新增属性 125
6.4.1 实战11：background-origin 125
6.4.2 实战12：background-clip 127
6.4.3 实战13：background-size 129
6.4.4 multiple backgrounds 130
6.4.5 实战14：使用CSS 3.0实现动态背景 131
6.5 商业案例——设计制作汽车租赁网站 134
6.5.1 设计分析 135
6.5.2 布局分析 135
6.5.3 制作流程 136
6.5.4 制作步骤 137
6.5.5 实例小结 148
6.6 课后作业——设计制作通信服务宣传页面 148
6.6.1 实例分析 149
6.6.2 技能剖析 150
6.7 本章小结 151
第7章 设置页面中的图像 152
7.1 背景控制概述 152
7.1.1 实战15：图像边框 152
7.1.2 实战16：图像定位 157
7.1.3 实战17：图像缩放 158
7.1.4 实战18：图像对齐方式 160
7.2 图文混排 162
7.2.1 实战19：文本混排 162
7.2.2 实战20：设置混排间距 164
7.3 CSS 3.0中边框的新增属性 164
7.3.1 实战21：border-image 164
7.3.2 实战22：border-radius 166
7.3.3 实战23：border-color 167
7.3.4 实战24：box-shadow 169
7.3.5 实战25：使用CSS 3.0实现图像滑过动画效果 170
7.4 商业案例——设计制作休闲游戏网站 176
7.4.1 设计分析 176
7.4.2 布局分析 177
7.4.3 制作流程 177
7.4.4 制作步骤 178
7.4.5 实例小结 196
7.5 课后作业——设计制作企业英文网站 196
7.5.1 案例分析 197
7.5.2 技能剖析 197
7.6 本章小结 198
第8章 CSS文本内容排版 199
8.1 文本排版概述 199
8.1.1 文本排版原则 199
8.1.2 文本控制属性 200
8.2 CSS文本样式 200
8.2.1 实战26：字体 201
8.2.2 实战27：大小 202
8.2.3 实战28：粗细 204
8.2.4 实战29：样式 204
8.2.5 实战30：颜色 205
8.2.6 实战31：修饰 206
8.2.7 实战32：英文字母大小写 207
8.3 CSS段落样式 207
8.3.1 实战33：段落水平对齐 208
8.3.2 实战34：段落垂直对齐 209
8.3.3 实战35：行间距和字间距 210
8.3.4 实战36：首字下沉 212
8.4 CSS 3.0中文字的新增属性 212
8.4.1 实战37：text-shadow 212
8.4.2 实战38：text-overflow 214
8.4.3 实战39：word-wrap 216
8.4.4 实战40：使用CSS 3.0实现可折叠栏目 217
8.5 商业案例——设计制作企业网站页面 221
8.5.1 设计分析 221
8.5.2 布局分析 222
8.5.3 制作流程 222
8.5.4 制作步骤 223
8.5.5 案例小结 233
8.6 课后作业——制作美容时尚网站页面 233
8.6.1 案例分析 234
8.6.2 技能剖析 234
8.7 本章小结 235
第9章 设置表单样式 236
9.1 表单设计概述 236
9.1.1 网页表单设计的原则 236
9.1.2 表单应用分类 238
9.2 表单设计 239
9.2.1 表单和表单元素 240
9.2.2 实战41：＜label＞标签的作用 245
9.2.3 实战42：文本框样式设计 246
9.2.4 实战43：下拉列表样式设计 247
9.3 实战44：CSS 3.0中控制内容的新增属性 248
9.4 CSS 3.0中颜色的新增属性 249
9.4.1 实战45：HSL Colors 250
9.4.2 实战46：HSLA Colors 251
9.4.3 实战47：Opacity 252
9.4.4 实战48：RGBA Colors 254
9.4.5 实战49：使用CSS 3.0实现动态堆叠卡效果 256
9.5 商业案例——设计制作游戏网站的登录页 260
9.5.1 设计分析 260
9.5.2 布局分析 261
9.5.3 制作流程 261
9.5.4 制作步骤 262
9.5.5 案例小结 271
9.6 课后作业——制作网站搜索栏 272
9.6.1 案例分析 272
9.6.2 技能剖析 272
9.7 本章小结 273
第10章 设置列表样式 274
10.1 列表控制概述 274
10.1.1 列表控制的原则 274
10.1.2 列表标签的使用 275
10.2 列表样式控制 276
10.2.1 实战50：ul无序列表 276
10.2.2 实战51：ol有序列表 277
10.2.3 实战52：dl定义列表 277
10.2.4 实战53：更改列表项目样式 278
10.3 使用列表制作菜单 279
10.3.1 实战54：无需表格的菜单 280
10.3.2 实战55：菜单的横竖转换 281
10.4 CSS 3.0中其他模块的新增属性 282
10.4.1 实战56：@media 282
10.4.2 @font-face 284
10.4.3 实战57：columns 285
10.4.4 speech 287
10.4.5 实战58：使用CSS 3.0实现选项卡式新闻块 289
10.5 商业案例——设计制作音乐网站页面 293
10.5.1 设计分析 294
10.5.2 布局分析 294
10.5.3 制作流程 294
10.5.4 制作步骤 296
10.5.5 实例小结 317
10.6 课后作业——设计制作娱乐网站页面 317
10.6.1 案例分析 318
10.6.2 技能剖析 319
10.7 本章小结 320
第11章 设置页面超链接样式 321
11.1 超链接概述 321
11.1.1 超链接样式控制的原则 321
11.1.2 超链接控制的属性 322
11.2 超链接特效 325
11.2.1 实战59：文字式超链接 325
11.2.2 实战60：按钮式超链接 327
11.2.3 实战61：浮雕式超链接 329
11.3 CSS 3.0中用户界面的新增属性 330
11.3.1 实战62：box-sizing 330
11.3.2 实战63：resize 332
11.3.3 实战64：outline 334
11.3.4 nav-index 335
11.3.5 实战65：使用CSS 3.0实现动态菜单效果 336
11.4 商业案例——设计制作电子商务网站 339
11.4.1 设计分析 339
11.4.2 布局分析 339
11.4.3 制作流程 340
11.4.4 制作步骤 340
11.4.5 案例小结 357
11.5 课后作业——设计制作健康类网站页面 357
11.5.1 案例分析 358
11.5.2 技能剖析 358
11.6 本章小结 360
第12章 使用JavaScript搭建动态效果 361
12.1 列表控制概述 361
12.1.1 列表控制的原则 361
12.1.2 JavaScript的特点 364
12.1.3 JavaScript的应用范围 365
12.1.4 CSS与JavaScript 368
12.2 使用JavaScript设置图像效果 368
12.2.1 实战66：实现相册效果 368
12.2.2 实战67：实现图像滑动切换效果 371
12.3 针对菜单的JavaScript效果 376
12.3.1 实战68：实现弹性快速导航效果 377
12.3.2 实战69：制作动态十足的菜单效果 381
1 2.4 针对文字的JavaScript效果 384
12.4.1 实战70：选择字体大小 385
12.4.2 实战71：实现打字效果 386
12.5 商业案例——设计制作游戏网站页面 388
12.5.1 设计分析 388
12.5.2 布局分析 388
12.5.3 制作流程 389
12.5.4 制作步骤 390
12.5.5 案例小结 402
12.6 课后作业——设计制作购物网站页面 402
12.6.1 案例分析 403
12.6.2 技能剖析 404
12.7 本章小结 405
第13章 CSS与XML和Ajax的综合使用 406
13.1 XML基础 406
13.1.1 XML概念 406
13.1.2 XML的特点 406
13.1.3 XML的结构和基本语法 407
13.1.4 实战72：HTML与XML 410
13.1.5 什么是“形式良好的”XML文件 411
13.2 XML与CSS的应用 413
13.2.1 实战73：在XML中链接CSS样式 413
13.2.2 实战74：实现隔行变色的表格 415
13.3 Ajax基础 419
13.3.1 Ajax简介 419
13.3.2 Ajax的关键元素 420
13.3.3 Ajax的优势 421
13.3.4 实现Ajax的步骤 422
13.3.5 使用CSS的必要性 423
13.4 实战75：Ajax与CSS的综合运用 424
13.5 商业案例——设计制作休闲乐园网站 428
13.5.1 设计分析 429
13.5.2 布局分析 429
13.5.3 制作流程 430
13.5.4 制作步骤 431
13.5.5 案例小结 442
13.6 课后作业——设计制作社区网站 442
13.6.1 案例分析 443
13.6.2 案例剖析 444
13.7 本章小结 444
第14章 HTML 5.0与CSS高级运用 445
14.1 HTML 5.0概述 445
14.1.1 HTML 5.0标签 445
14.1.2 HTML 5.0事件属性 449
14.1.3 HTML 5.0标准属性 451
14.1.4 实战76：使用HTML 5.0实现动感页面效果 452
14.2 id与class 455
14.2.1 id是什么 455
14.2.2 什么情况下使用id 456
14.2.3 class是什么 457
14.2.4 什么情况下使用class 457
14.3 DIV与span对象 458
14.4 CSS代码简写 459
14.4.1 font样式简写 459
14.4.2 color样式简写 460
14.4.3 background样式简写 460
14.4.4 margin和padding样式简写 461
14.4.5 border样式简写 462
14.4.6 list样式简写 463
14.5 商业案例——设计制作游戏网站 464
14.5.1 设计分析 464
14.5.2 布局分析 464
14.5.3 制作流程 465
14.5.4 制作步骤 466
14.5.5 案例小结 474
14.6 课后作业——设计制作企业网站页面 474
14.6.1 案例分析 475
14.6.2 技能剖析 475
14.7 本章小结 476