第1章 网页的构成与Web标准 1
1.1 什么是网页 1
1.2 网页的构成 1
1.2.1 页面显示的信息 2
1.2.2 构成页面的代码 2
1.2.3 显示网页的浏览器 4
1.3 关于Web标准 4
1.3.1 什么是Web标准 4
1.3.2 页面的内容 5
1.3.3 页面的结构 5
1.3.4 页面的表现 6
1.4 Web标准网站欣赏 6
第2章 使用CSS构建页面的原理 8
2.1 什么是CSS 8
2.2 CSS的语法 8
2.3 CSS应该定义在哪里 9
2.3.1 元素内部的CSS 9
2.3.2 页面头部的CSS 10
2.3.3 外部的CSS 11
2.4 应用样式的优先级 12
2.5 DOCTYPE的选择 13
2.5.1 什么是DOCTYPE 13
2.5.2 选择什么样的DOCTYPE 13
2.6 使用CSS控制表现效果的好处 14
第3章 Web标准中的兼容问题 15
3.1 兼容问题的由来 15
3.1.1 浏览器的版本问题 15
3.1.2 浏览器的兼容问题 15
3.2 需要兼容的浏览器 15
3.2.1 常用浏览器介绍 16
3.2.2 浏览器显示的差异 16
3.3 兼容问题的解决原理 17
3.3.1 避免使用会产生兼容问题的属性 17
3.3.2 使用CSS hack解决兼容问题 18
3.3.3 其他兼容的方法 19
3.4 CSS hack的使用 20
3.4.1 针对IE的CSS hack 20
3.4.2 针对Firefox的CSS hack 21
第4章 制作背景 23
4.1 网页背景的相关知识 23
4.1.1 背景的分类 23
4.1.2 使用CSS控制背景颜色 23
4.1.3 使用CSS控制背景图片 25
4.1.4 使用CSS控制背景图片的重复 27
4.1.5 固定背景图片 28
4.1.6 设置背景图片的显示位置 30
4.2 设置多个背景 32
4.3 制作渐变背景 37
4.3.1 效果图分析 37
4.3.2 背景图片的制作 38
4.3.3 页面文件的制作 39
4.3.4 使用滤镜制作渐变背景 43
4.4 综合实例——企业网站引导页的制作 44
4.4.1 效果图分析 45
4.4.2 页面结构制作 45
4.4.3 页面内容及样式制作 46
4.5 小结 50
第5章 制作Logo和Banner 51
5.1 Logo和Banner的相关知识 51
5.1.1 Logo和Banner的概念 51
5.1.2 盒子模型 52
5.1.3 CSS边框属性 52
5.1.4 CSS内边距属性 54
5.1.5 CSS外边距属性 56
5.2 制作图像Logo 58
5.2.1 效果图分析 58
5.2.2 页面结构制作 59
5.2.3 Logo图片位置的确定 59
5.3 制作图像Banner 61
5.3.1 效果图的分析 61
5.3.2 页面结构制作 61
5.3.3 Banner图片位置的确定 62
5.4 综合实例——公司网站顶部内容的制作 64
5.4.1 效果图分析 64
5.4.2 页面结构制作 65
5.4.3 页面内容及样式制作 65
5.5 小结 70
第6章 制作站点导航栏 71
6.1 站点导航栏的相关知识 71
6.1.1 站点导航栏的分类 71
6.1.2 CSS浮动属性 72
6.1.3 CSS清除浮动属性 76
6.1.4 CSS字体属性 78
6.2 制作文本导航栏 81
6.2.1 效果图的分析 81
6.2.2 页面结构的制作 82
6.2.3 使用＜span＞标签制作文本导航栏内容 82
6.2.4 使用＜li＞标签制作文本导航栏内容 86
6.3 制作图片导航栏 87
6.3.1 效果图的分析 87
6.3.2 页面结构的制作 88
6.3.3 页面内容的制作 88
6.4 制作横向自由伸展的导航栏 92
6.4.1 九宫格技术原理 92
6.4.2 效果图的分析 95
6.4.3 制作导航栏的结构 96
6.4.4 制作页面的CSS样式 96
6.5 综合实例——企业网站下拉式导航栏的制作 99
6.5.1 效果图分析 99
6.5.2 页面结构制作 99
6.5.3 页面内容及样式制作 100
6.5.4 导航栏的制作和样式定义 101
6.6 小结 105
第7章 制作列表和表单 106
7.1 列表和表单的相关知识 106
7.1.1 列表的分类 106
7.1.2 表单的分类 109
7.1.3 CSS列表属性 113
7.2 制作新闻列表 116
7.2.1 效果图的分析 116
7.2.2 页面结构的制作 117
7.2.3 新闻列表网页样式的制作 118
7.2.4 修饰列表图片的定位 119
7.3 复杂列表排版 120
7.3.1 overflow属性的语法结构 120
7.3.2 效果图的分析 123
7.3.3 页面结构的制作 123
7.3.4 CSS部分的制作 125
7.4 制作用户注册表单 127
7.4.1 效果图的分析 128
7.4.2 页面结构的制作 128
7.4.3 CSS部分的制作 129
7.5 综合实例——会员注册页面的制作 131
7.5.1 效果图的分析 132
7.5.2 页面结构的制作 132
7.5.3 CSS部分的制作 134
7.6 小结 136
第8章 制作页面内容的版式 137
8.1 关于页面内容版式的知识 137
8.1.1 段落的设置 137
8.1.2 图文混排 140
8.1.3 CSS文本属性 142
8.1.4 CSS表格属性 144
8.2 制作独立的文本段落 147
8.2.1 设置段落的大小 147
8.2.2 定义段落的显示效果 149
8.3 制作图文混排版式 151
8.3.1 效果图的分析 151
8.3.2 页面结构的制作 152
8.3.3 CSS部分的制作 153
8.4 制作数据表格 156
8.4.1 效果图的分析 156
8.4.2 页面结构的制作 157
8.4.3 CSS部分的制作 159
8.4.4 应用JavaScript制作鼠标经过表格 160
8.5 综合实例——产品信息页面的制作 161
8.5.1 效果图的分析 161
8.5.2 页面结构的制作 162
8.5.3 CSS部分的制作 165
8.6 小结 169
第9章 制作超链接 170
9.1 关于超链接的知识 170
9.1.1 超链接的分类 170
9.1.2 超链接的组成与超链接的伪类 171
9.1.3 多个超链接样式的定义 174
9.1.4 鼠标特效 179
9.2 制作Windows风格样式的CSS按钮 181
9.2.1 效果图的分析 181
9.2.2 页面结构的制作 181
9.2.3 CSS部分的制作 183
9.3 综合实例——制作仿按钮下陷效果的实例 187
9.3.1 效果图的分析 187
9.3.2 页面结构的制作 187
9.3.3 制作页面的CSS样式 188
9.4 小结 193
第10章 制作页面底部信息 194
10.1 关于页面底部信息的知识 194
10.2 制作包含导航链接的页面底部内容 194
10.2.1 效果图的分析 194
10.2.2 页面结构的制作 195
10.2.3 CSS部分的制作 196
10.3 小结 198
第11章 制作博客类网页 199
11.1 博客类网页介绍 199
11.1.1 博客页面的作用 199
11.1.2 博客页面的构成及特点 200
11.2 效果图的分析 200
11.2.1 界面设计分析 201
11.2.2 规划页面布局 202
11.3 切图与划分页面内容 202
11.3.1 隐藏页面中的文本内容 202
11.3.2 切取页面中的背景 203
11.3.3 切取页面中的内容 203
11.3.4 保存各种图片 204
11.4 规划并建立站点 205
11.5 页面头部内容制作 206
11.5.1 制作头部的结构代码 206
11.5.2 定义页面的相关信息 207
11.5.3 导入样式表文件 207
11.6 页面头部内容的制作 208
11.6.1 头部内容结构分析 208
11.6.2 对顶部内容进行定义 208
11.6.3 导航栏的制作 210
11.7 制作日志内容部分 212
11.7.1 制作网页主体部分 212
11.7.2 制作日志摘要部分的结构代码 214
11.7.3 对日志摘要部分添加样式 215
11.7.4 翻页部分的制作 219
11.7.5 制作日志内容下边框 220
11.8 制作右侧列表内容 221
11.8.1 博主信息栏 221
11.8.2 列表模块的制作 223
11.8.3 文本模块的制作 224
11.8.4 右侧列表内容底边框的制作 226
11.9 页面底部内容及整体页面调整 227
11.9.1 页面底部内容的制作 227
11.9.2 整体页面调整 227
11.10 制作二级页面 228
11.10.1 二级页面效果图的分析 228
11.10.2 分析通用的样式 229
11.10.3 定义新的CSS样式 230
11.11 小结 232
第12章 制作企业宣传类网页 233
12.1 企业宣传类网页介绍 233
12.1.1 企业宣传类网页的作用 233
12.1.2 企业宣传类网页的构成及特点 234
12.2 效果图的分析 234
12.2.1 界面设计分析 234
12.2.2 规划页面布局 235
12.3 切图与划分页面内容 236
12.3.1 隐藏页面中的文本内容 236
12.3.2 切取并保存页面中的内容文件 236
12.3.3 保存各种图片 237
12.4 规划并建立站点 237
12.5 页面头部信息内容制作 238
12.5.1 制作头部的结构代码 238
12.5.2 定义页面的相关信息 239
12.5.3 导入样式表文件 239
12.6 页面头部内容的制作 240
12.6.1 头部内容结构分析 240
12.6.2 对整体样式进行定义 240
12.6.3 头部内容的制作 241
12.7 页面主体内容的制作 246
12.7.1 主体内容结构分析 246
12.7.2 制作主体部分左边内容 248
12.7.3 制作主体部分中间内容 250
12.7.4 制作主体部分右边内容 252
12.8 页面底部内容的制作 254
12.9 制作二级页面 255
12.9.1 二级页面效果图分析 255
12.9.2 制作页面及样式 256
12.10 小结 258
第13章 制作网店类网页 259
13.1 网店类网页介绍 259
13.1.1 网店类网页的作用 259
13.1.2 网店类网页的构成及特点 260
13.2 效果图的分析 260
13.2.1 界面设计分析 261
13.2.2 规划页面布局 262
13.3 切图与划分页面内容 262
13.3.1 隐藏页面中的文本内容 262
13.3.2 切取并保存页面中的内容文件 263
13.4 规划并建立站点 263
13.5 页面头部内容的制作 264
13.5.1 头部内容结构分析 264
13.5.2 对整体样式进行定义 265
13.5.3 对头部内容进行样式定义 266
13.5.4 对网站Logo进行样式定义 266
13.5.5 对网站工具栏进行样式定义 267
13.5.6 对用户工具栏进行样式定义 268
13.5.7 对网站广告进行样式定义 269
13.6 页面主体内容的制作 270
13.6.1 主体内容结构分析 270
13.6.2 对主体内容最外层的块进行样式定义 271
13.6.3 对搜索栏进行样式定义 272
13.6.4 对商品列表进行样式定义 273
13.6.5 对用户登录部分、最新商品部分和最热门商品部分进行样式定义 275
13.6.6 对商品展示内容进行样式定义 279
13.6.7 对主体底部内容进行样式定义 283
13.7 底部内容的制作 287
13.8 制作二级页面 289
13.8.1 二级页面效果图的分析 289
13.8.2 制作页面及样式 289
13.9 小结 293
第14章 制作门户网页 294
14.1 门户类网页介绍 294
14.1.1 门户类网页的作用 294
14.1.2 门户类网页的构成及特点 295
14.2 效果图的分析 295
14.2.1 界面设计分析 295
14.2.2 规划页面布局 296
14.3 切图与划分页面内容 297
14.3.1 隐藏页面中的文本内容 297
14.3.2 切取并保存页面中的内容文件 298
14.3.3 保存各种图片 299
14.4 规划并建立站点 300
14.5 页面头部信息内容的制作 301
14.5.1 制作头部的结构代码 301
14.5.2 定义页面的相关信息 301
14.5.3 导入样式表文件 302
14.6 页面头部的制作 302
14.6.1 头部内容结构分析 302
14.6.2 对整体样式进行定义 303
14.7 头部内容的制作 305
14.7.1 对头部文件整体添加样式 305
14.7.2 制作顶部内容 305
14.7.3 制作网站Logo和Banner 306
14.7.4 制作导航栏 307
14.7.5 制作搜索栏 309
14.8 页面主体内容的制作 310
14.9 制作资讯部分的内容 311
14.9.1 制作旅游资讯部分内容 312
14.9.2 制作四川旅游地图部分内容 314
14.9.3 制作线路精选部分内容 315
14.10 制作网站主体Banner部分内容 318
14.10.1 制作互动版块内容 319
14.10.2 制作专题旅游内容 321
14.10.3 制作游记攻略内容 324
14.10.4 制作旅游图库内容 326
14.10.5 制作经典推荐内容 328
14.10.6 制作社区热帖内容 330
14.11 页面底部内容的制作 332
14.12 制作二级页面 333
14.13 制作页面及样式 334
14.13.1 制作社区热帖内容 335
14.13.2 制作热门作者排行 337
14.13.3 制作最新帖子内容 338
14.14 小结 341