《DIV+CSS 3.0网页样式与布局全程揭秘》 - 清华大学出版社第五事业部

第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
12.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