第1章 网页设计基础知识 3
1.1基础概念 3
1.2网页与HTML语言 4
1.3 Web标准：结构、表现与行为 5
1.3.1标准的重要性 5
1.3.2 “Web标准”概述 6
1.4初步理解网页设计与开发的过程 7
1.4.1基本任务与角色 7
1.4.2明确网站定位 8
1.4.3收集信息和素材 8
1.4.4策划栏目内容 8
1.45设计页面方案 9
1.4.6制作页面 9
1.4.7实现后台功能 9
1.4.8整合与测试网站 10
1.5与设计相关的技术因素 10
1.6本章小结 12
第2章HTML网页文档结构 13
2.1 HTML简介 13
2.1.1创建第一个HTML文件 13
2.1.2 HTML文件结构 15
2.2简单的HTML案例 16
2.3网页源文件的获取 18
2.3.1直接查看源文件 19
23.2保存网页 19
2.4辅助：利用Dreamweaver快速建立基本文档 20
2.5本章小结 24
第3章用HTML设置文本和图像 25
3.1文本排版 25
3.1.1实现段落与段内换行（＜p＞和＜br＞） 25
3.1.2设置标题（＜hl＞～＜h6＞） 27
3.1.3使文字水平居中（＜center＞） 27
3.1.4设置文字段落的缩进（＜blockquote＞） 29
3.2设置文字列表 29
3.2.1建立无序列表（＜ul＞） 29
3.2.2建立有序列表（＜ol＞） 30
3.3 HTML标记与HTML属性 31
3.3.1用align属性控制段落的水平位置 31
3.3.2用bgcolor属性设置背景颜色 32
3.3.3设置文字的特殊样式 34
3.3.4设置文字的大小和颜色（＜font＞） 35
3.4忘记过时的HTML标记和属性 35
3.5特殊文字符号 36
3.6在网页中使用图像（＜img＞） 38
3.6.1网页中的图片格式 38
3.6.2一个简单的图片网页 38
3.6.3使用路径 39
3.7用width和height属性设置图片的尺寸 41
3.8用alt属性为图像设置替换文本 43
3.9辅助：利用Dreamweaver设置文本和图像 43
3.10辅助：利用Dreamweaver代码视图提高效率 47
3.10.1代码提示 47
3.10.2代码折叠 49
3.10.3使用拆分视图对代码快速定位 49
3.11本章小结 50
第4章用HTML建立超链接（＜a＞） 51
4.1设置基本文字超链接 51
4.1.1 URL的格式 51
4.1.2 URL的类型 52
4.2设置页面内部的特定目标的链接 53
4.3设置图片的超链接 54
4.4设置电子邮件链接 54
4.5设置以新窗口显示链接页面 55
4.6创建热点区域 55
4.6.1用HTML建立热点区域（＜map＞和＜area＞） 56
4.6.2辅助：利用Dreamweaver精确定位热点区域 57
4.7框架之间的链接 59
4.7.1建立框架与框架集（＜frame＞和＜frameset＞） 59
4.7.2用cols属性将窗口分为左右两部分 60
4.7.3用rows属性将窗口分为上中下三部分 60
4.7.4框架的嵌套 61
4.7.5用src属性在框架中插入网页 61
4.7.6用src属性在框架之间链接 62
4.7.7创建嵌入式框架（＜iframe＞） 64
4.8链接增多后网站的组织结构与维护 65
4.9本章小结 66
第5章用HTML创建表格 67
5.1表格基本结构（＜table＞） 67
5.2合并单元格 68
5.2.1用colspan属性左右合并单元格 68
5.2.2用rowspan属性上下合并单元格 69
5.3用align属性设置对齐方式 70
5.4用bgcolor属性设置表格背景色和边框颜色 71
5.5用cellpadding属性和cellspacing属性设定距离 72
5.6完整的表格标记（＜thead＞、 ＜tbody＞和＜tfoot＞） 73
5.7需要抛弃的方法：用表格进行页面布局 75
5.8本章小结 78
第6章（X）HTML与CSS概述 81
6.1 HTML与XHTML 81
6.1.1追根溯 81
6.1.2 DOCTYPE（文档类型）的含义与选择 82
6.1.3 XHTML与HTML的重要区别 83
6.2 （X）HTML与CSS 84
6.2.1 CSS标准 85
6.2.2传统HTML的缺点 85
6.2.3 CSS的引入 86
6.2.4如何编辑CSS 88
6.2.5浏览器与CSS 89
6.3本章小结 90
第7章CSS核心基础 91
7.1构造CSS规则 91
7.2基本CSS选择器 92
7.2.1标记选择器 92
7.2.2类别选择器 93
7.2.3 ID选择器 95
7.3在HTML中使用CSS的方法 96
7.3.1行内样式 96
7.3.2内嵌式 97
7.3.3链接式 98
7.3.4导入样式 99
7.3.5各种方式的优先级问题 100
7.4本章小结 102
第8章 手工编写与借助工具 103
8.1从零开始 103
8.2设置标题 104
8.3控制图片 105
8.4设置正文 106
8.5设置整体页面 106
8.6对段落进行分别设置 107
8.7完整代码 108
8.8 CSS的注释 109
8.9辅助：使用Dreamweaver创建页面 109
8.10辅助：在Dreamweaver中新建CSS规则 110
8.11辅助：在Dreamweaver中编辑CSS规则 112
8.12为图像创建CSS规则 114
8.13本章小结 116
第9章CSS的高级特性 117
9.1复合选择器 117
9.1.1“交集”选择器 117
9.1.2“并集”选择器 118
9.1.3后代选择器 120
9.2 CSS的继承特性 122
9.2.1继承关系 122
9.2.2 CSS继承的运用 123
9.3 CSS的层叠特性 125
9.4本章小结 126
第10章用CSS设置文本样式 127
10.1长度单位 127
10.2颜色定义 128
10.3准备页面 129
10.4设置文字的字体 129
10.5设置文字的倾斜效果 130
10.6设置文字的加粗效果 131
10.7英文字母大小写转换 132
10.8控制文字的大小 133
10.9文字的装饰效果 133
10.10设置段落首行缩进 134
10.11设置字词间距 135
10.12设置段落内部的文字行高 136
10.13设置段落之间的距离 136
10.14控制文本的水平位置 137
10.15 设置文字与背景的颜色 138
10.16设置段落的垂直对齐方式 138
10.16.1使用line-height属性进行设置 138
10.162更通用的解决方案 139
10.17本章小结 140
第11章用CSS设置图像效果 141
11.1设置图片边框 141
11.1.1基本属性 141
11.1.2为不同的边框分别设置样式 142
11.2图片缩放 144
11.3图文混排 145
11.3.1文字环绕 145
11.3.2设置图片与文字的间距 146
11.4案例——八大行星科普网页 147
11.5设置图片与文字的对齐方式 150
11.5.1横向对齐方式 150
11.5.2纵向对齐方式 151
11.6本章小结 154
第12章用CSS设置背景颜色与图像 15
12.1设置背景颜色 15
12.2设置背景图像 156
12.3设置背景图像平铺 157
12.4设置背景图像位置 159
12.5设置背景图片位置固定 162
12.6设置标题的图像替换 163
12.7使用滑动门技术的标题 166
12.8本章小结 168
第13章CSS盒子模型 171
13.1“盒子”与“模型”的概念探究 171
13.2边框（border） 172
13.2.1设置边框样式（border-sle） 173
13.2.2属性值的简写形式 174
13.2.3边框与背景 176
13.3设置内边距（padding） 177
13.4设置外边距（margin） 178
13.5盒子之间的关系 179
13.5.1 HTML与DOM 180
13.5.2标准文档流 183
13.5.3 ＜div＞标记与＜span＞标记 184
13.6盒子在标准流中的定位原则 187
13.6.1行内元素之间的水平margin 187
13.6.2块级元素之间的竖直margin 188
13.6.3嵌套盒子之间的margin 189
13.6.4 margin属性可以设置为负值 191
13.7思考题 192
13.8本章小结 196
第14章 盒子的浮动与定位 197
14.1盒子的浮动 197
14.1.1准备代码 197
14.1.2案例1——设置第1个浮动的div 199
14.1.3案例2——设置第2个浮动的div 199
14.1.4案例3——设置第3个浮动的div 199
14.1.5案例4——改变浮动的方向 200
14.1.6案例5——再次改变浮动的方向 200
14.1.7案例6——全部向左浮动 201
14.1.8案例7——使用clear属性清除浮动的影响 202
14.1.9案例8——扩展盒子的高度 203
14.2盒子的定位 204
14.2.1静态定位（static） 204
14.2.2相对定位（relative） 205
14.2.3绝对定位（absolute） 209
14.2.4固定定位（fixed） 214
14.3 z-index空间位置 214
14.4盒子的display属性 215
14.5本章小结 216
第15章用CSS设置表格样式 217
15.1控制表格 217
15.1.1表格中的标记 217
15.1.2设置表格的边框 219
15.13确定表格的宽度 222
15.1.4其他与表格相关的标记 223
15.2美化表格 224
15.2.1搭建HTML结构 224
15.2.2整体设置 225
15.2.3设置单元格样式 226
15.2.4斑马纹效果 227
15.2.5设置列样式 227
15.3设置鼠标指针经过时整行变色提示的表格 232
15.3.1在Firefox和IE 7中实现鼠标指针经过时整行变色 232
15.3.2在IE 6中实现鼠标指针经过时整行变色 233
15.3.3最终合并代码 234
15.4辅助：使用jQuery实现更多效果 236
15.4.1用jQuery实现斑马纹效果 237
15.4.2用jQuery实现“前3行”特殊样式 239
15.4.3用jQuery实现渐变背景色表格效果 240
15.4.4用jQuery实现鼠标指针经过变色效果 241
15.5案例——日历 241
15.5.1搭建HTML结构 241
15.5.2设置整体样式和表头样式 244
15.5.3设置日历单元格样式 245
15.6本章小结 248
第16章用CSS设置链接与导航菜单 249
16.1丰富的超链接特效 250
16.2创建按钮式超链接 252
16.3制作荧光灯效果的菜单 253
16.3.1 HTML框架 254
16.3.2设置容器的CSS样式 254
16.3.3设置菜单项的CSS样式 255
16.4控制鼠标指针 257
16.5设置项目列表样式 257
16.5.1列表的符号 258
16.5.2图片符号 260
16.6创建简单的导航菜单 261
16.6.1简单的竖直排列菜单 261
16.6.2横竖自由转换菜单 264
16.7设置图片翻转效果 265
16.8应用滑动门技术的玻璃效果菜单 266
16.8.1基本思路 266
16.8.2设置菜单整体效果 267
16.8.3使用“滑动门”技术设置玻璃材质背景 268
16.8.4进一步解决的问题 269
16.9鼠标指针经过时给图片增加边框 270
16.10本章小结 272
第17章用CSS建立表单 273
17.1表单的用途和原理 273
17.2表单输入类型 274
17.2.1文本输入框 274
17.2.2单选按钮 274
17.2.3复选按钮 275
17.2.4密码输入框 275
17.25按钮 276
17.2.6多行文本框 277
17.2.7列表框 277
17.3 CSS与表单 278
17.3.1表单中的元素 278
17.3.2像文字一样的按钮 281
17.3.3多彩的下拉菜单 283
17.4案例——“数独”游戏网页 284
17.4.1搭建基本表格 285
17.4.2设置表格样式 286
17.4.3加入文本输入框 287
17.4.4设置文本输入框的样式 287
17.5对齐文本框和旁边的图像按钮 289
17.6本章小结 290
第18章 网页样式综合案例——灵活的电子相册 291
18.1搭建框架 291
18.2阵列模式 293
18.3单列模式 298
18.4改进阵列模式 301
18.5 IE 6兼容 304
18.6双向联动模式 306
18.6.1在Firefox中实现 306
18.6.2 IE 6兼容 311
18.6.3改变方向 312
18.7本章小结 314
第19章 固定宽度布局剖析与制作 317
19.1向报纸学习排版思想 317
19.2 CSS排版观念 319
19.2.1两列布局 320
19.2.2三列布局 320
19.2.3多列布局 321
19.2.4布局结构的表达式与结构图 321
19.3圆角框 325
19.3.1准备图像 325
19.3.2搭建HTML结构 326
19.3.3放置背景图像 328
19.3.4设置样式并修复缺口 329
194单列布局 330
19.4.1放置第一个圆角框 331
19.4.2设置圆角框的CSS样式 331
19.4.3放置其他圆角框 334
19.5 “1-2-1”固定宽度布局 335
19.5.1准备工作 336
19.5.2绝对定位法 337
19.5.3浮动法 339
19.6 “1-3-1”固定宽度布局 341
19.7 “1-（（1-2）+1）-1”固定宽度布局 343
19.8本章小结 344
第20章 变宽度网页布局剖析与制作 345
20.1 “1-2-1”变宽度网页布局 345
20.1.1 “1-2-1”等比例变宽布局 345
20.1.2 “1-2-1”单列变宽布局 348
20.2 “1-3-1”宽度适应布局 352
20.2.1 “1-3-1”三列宽度等比例布局 352
20.2.2 “1-3-1”单侧列宽度固定的变宽布局 352
20.2.3 “1-3-1”中间列宽度固定的变宽布局 353
20.2.4进一步的思考 355
20.2.5 “1-3-1”双侧列宽度固定的变宽布局 356
20.2.6 “1-3-1”中列和侧列宽度固定的变宽布局 358
20.3变宽布局方法总结 359
20.4分列布局背景色问题 360
20.4.1设置固定宽度布局的列背景色 360
20.4.2设置特殊宽度变化布局的列背景色 364
20.4.3设置单列宽度变化布局的列背景色 364
20.5 CSS排版与传统的表格方式排版的分析 365
20.6浏览器的兼容性问题 368
20.7 CSS布局页面的调试技巧 368
20.7.1技巧1：设置背景色或者边框确定错误范围 369
20.7.2技巧2:删除无关代码暴露核心矛盾 369
20.7.3技巧3：先用Firefox调试然后使它兼容IE 369
20.7.4技巧4：善于利用工具提高调试效率 370
20.7.5技巧5：善于提问寻求帮助 370
20.8本章小结 370
第21章 网页布局综合案例——儿童用品网上商店 371
21.1案例概述 371
21.2内容分析 372
21.3 HTML结构设计 374
21.4原型设计 377
21.5页面方案设计 380
21.6布局设计 383
21.6.1整体样式设计 383
21.6.2页头部分 384
21.6.3内容部分 386
21.6.4 页脚部分 389
21.7细节设计 389
21.7.1页头部分 389
21.7.2内容部分 395
21.7.3左侧的主要内容列 395
21.7.4右边栏 398
21.8 CSS布局的优点 402
21.9交互效果设计 403
21.9.1次导航栏 403
21.9.2主导航栏 404
21.9.3账号区 404
21.9.4图像边框 405
21.9.5产品分类 407
21.10遵从Web标准的设计流程 407
21.11从“网页”到“网站” 408
21.11.1历史回顾 408
21.11.2不完善的办法 408
21.11.3服务器出场 409
21.11.4 CMS出现 409
21.11.5具体操作 409
21.12本章小结 410
附录A网站发布与管理 411
A.1在Internet上建立自己的Web站点 411
A.1.1制作网站内容 411
A.1.2申请域名 411
A.1.3信息发布 411
A.2租用虚拟主机空间 412
A.2.1了解基本的技术名词 412
A.2.2选择和租用虚拟主机 413
A.3向服务器上传网站内容 414
A.3.1使用Dreamweaver上传文件 414
A.3.2使用IE浏览器上传文件 415
A.3.3使用专业FTP工具上传文件 416
A.4网站管理 418
A.4.1修改密码 418
A.4.2集团邮箱管理 419
A.4.3注意事项 420
附录B CSS英文小字典 421