第1章 网站制作前需知 1
1.1 网站开发流程 1
1.2 分析网页效果图 2
1.2.1 划分模块 2
1.2.2 CSS模块化 3
1.2.3 class使用技巧 4
1.2.4 如何“切图” 5
1.3 与产品经理、设计师、后端工程师进行有效沟通 5
1.4 XHTML CSS基础知识 6
1.4.1 XHTML文件的构成 6
1.4.2 CSS文件的构成 7
1.4.3 标签语义化 8
1.4.4 CSS命名规范 9
1.4.5 CSS样式重置 10
1.4.6 CSS Sprites技术 11
1.4.7 页面质量评估标准 13
1.4.8 代码注释的重要性 15
1.4.9 CSS Hack 16
第2章 企业网站 19
2.1 页面效果图分析 19
2.1.1 头部和页脚分析 20
2.1.2 首页主体内容分析 21
2.1.3 内页主体内容分析 21
2.2 布局规划及切图 22
2.2.1 页面布局规划 22
2.2.2 切割首页及导出图片 22
2.2.3 切割内页及导出图片 23
2.3 XHTML编写 24
2.3.1 页面XHTML框架搭建 24
2.3.2 页面头部和页脚的XHTML编写 24
2.3.3 页面公共部分的XHTML编写 26
2.3.4 首页主体内容的XHTML编写 27
2.3.5 内页主体内容的XHTML编写 28
2.3.6 首页XHTML代码总览 29
2.3.7 内页XHTML代码总览 30
2.4 CSS编写 32
2.4.1 页面公共部分的CSS编写 32
2.4.2 页面框架的CSS编写 33
2.4.3 页面头部和页脚的CSS编写 34
2.4.4 首页主体内容的CSS编写 36
2.4.5 内页主体内容的CSS编写 37
2.4.6 网站CSS代码总览 38
2.5 制作中需要注意的问题 39
第3章 个人网站 42
3.1 页面效果图分析 42
3.1.1 头部分析 43
3.1.2 首页主体内容分析 44
3.1.3 内页主体内容分析 44
3.2 布局规划及切图 45
3.2.1 页面布局规划 46
3.2.2 切割首页及导出图片 46
3.2.3 切割内页及导出图片 46
3.3 XHTML编写 47
3.3.1 页面XHTML框架搭建 47
3.3.2 页面头部的XHTML编写 48
3.3.3 页面公共部分的XHTML编写 48
3.3.4 首页主体内容的XHTML编写 49
3.3.5 内页主体内容的XHTML编写 51
3.3.6 首页XHTML代码总览 52
3.3.7 内页XHTML代码总览 54
3.4 CSS编写 55
3.4.1 页面公共部分的CSS编写 55
3.4.2 页面框架的CSS编写 56
3.4.3 页面头部的CSS编写 57
3.4.4 首页主体内容的CSS编写 58
3.4.5 内页主体内容的CSS编写 59
3.4.6 网站CSS代码总览 61
3.5 制作中需要注意的问题 62
3.5.1 块级元素和行内元素 62
3.5.2 CSS文档流 62
第4章 产品展示网站 64
4.1 页面效果图分析 64
4.1.1 头部和页脚分析 66
4.1.2 首页主体内容分析 66
4.1.3 内页主体内容分析 67
4.2 布局规划及切图 68
4.2.1 页面布局规划 68
4.2.2 切割首页及导出图片 68
4.2.3 切割内页及导出图片 69
4.3 XHTML编写 70
4.3.1 页面XHTML框架搭建 70
4.3.2 页面头部和页脚的XHTML编写 70
4.3.3 页面公共部分的XHTML编写 71
4.3.4 首页主体内容的XHTML编写 72
4.3.5 内页主体内容的XHTML编写 74
4.3.6 首页XHTML代码总览 75
4.3.7 内页XHTML代码总览 76
4.4 CSS编写 78
4.4.1 页面公共部分的CSS编写 78
4.4.2 页面框架的CSS编写 79
4.4.3 页面头部和页脚的CSS编写 80
4.4.4 首页主体内容的CSS编写 81
4.4.5 内页主体内容的CSS编写 81
4.4.6 网站CSS代码总览 82
4.5 制作中需要注意的问题 83
4.5.1 网页的编码格式 83
4.5.2 CSS加入网页方法 83
第5章 教育科研机构网站 84
5.1 页面效果图分析 84
5.1.1 头部和页脚分析 85
5.1.2 首页主体内容分析 86
5.1.3 内页主体内容分析 87
5.2 布局规划及切图 88
5.2.1 页面布局规划 88
5.2.2 切割首页及导出图片 88
5.2.3 切割内页及导出图片 89
5.3 XHTML编写 90
5.3.1 页面XHTML框架搭建 90
5.3.2 页面头部和页脚的XHTML编写 91
5.3.3 页面公共部分的XHTML编写 92
5.3.4 首页主体内容的XHTML编写 92
5.3.5 内页主体内容的XHTML编写 95
5.3.6 首页XHTML代码总览 97
5.3.7 内页XHTML代码总览 98
5.4 CSS编写 99
5.4.1 页面公共部分的CSS编写 99
5.4.2 页面框架的CSS编写 100
5.4.3 页面头部和页脚的CSS编写 101
5.4.4 首页主体内容的CSS编写 102
5.4.5 内页主体内容的CSS编写 104
5.4.6 网站CSS代码总览 105
5.5 制作中需要注意的问题 105
5.5.1 label标签中的for属性 105
5.5.2 zoom：1的作用 106
第6章 电子商务网站 108
6.1 页面效果图分析 108
6.1.1 头部和页脚分析 111
6.1.2 首页主体内容分析 111
6.1.3 内页主体内容分析 113
6.2 布局规划及切图 114
6.2.1 页面布局规划 114
6.2.2 切割首页及导出图片 114
6.2.3 切割内页及导出图片 116
6.3 XHTML编写 117
6.3.1 页面XHTML框架搭建 117
6.3.2 页面头部和页脚的XHTML编写 118
6.3.3 页面公共部分的XHTML编写 120
6.3.4 首页主体内容的XHTML编写 121
6.3.5 内页主体内容的XHTML编写 125
6.3.6 首页XHTML代码总览 126
6.3.7 内页XHTML代码总览 127
6.4 CSS编写 128
6.4.1 页面公共部分的CSS编写 128
6.4.2 页面框架的CSS编写 129
6.4.3 页面头部和页脚的CSS编写 130
6.4.4 首页主体内容的CSS编写 132
6.4.5 内页主体内容的CSS编写 134
6.4.6 网站CSS代码总览 135
6.5 制作中需要注意的问题 136
6.5.1 CSS Sprites技术的利与弊 136
6.5.2 准确提炼网站中的公共模块 137
第7章 电子政务网站 138
7.1 页面效果图分析 138
7.1.1 头部和页脚分析 140
7.1.2 首页主体内容分析 141
7.1.3 内页主体内容分析 142
7.2 布局规划及切图 143
7.2.1 页面布局规划 143
7.2.2 切割首页及导出图片 144
7.2.3 切割内页及导出图片 145
7.3 XHTML编写 145
7.3.1 页面XHTML框架搭建 145
7.3.2 页面头部和页脚的XHTML编写 145
7.3.3 页面公共部分的XHTML编写 146
7.3.4 首页主体内容的XHTML编写 148
7.3.5 内页主体内容的XHTML编写 150
7.3.6 首页XHTML代码总览 151
7.3.7 内页XHTML代码总览 152
7.4 CSS编写 154
7.4.1 页面公共部分的CSS编写 154
7.4.2 页面框架的CSS编写 155
7.4.3 页面头部和页脚的CSS编写 156
7.4.4 首页主体内容的CSS编写 156
7.4.5 内页主体内容的CSS编写 157
7.4.6 网站CSS代码总览 157
7.5 制作中需要注意的问题 158
7.5.1 marquee标签 158
7.5.2 word-spacing 158
第8章 搜索资讯网站 159
8.1 页面效果图分析 159
8.1.1 头部和页脚分析 161
8.1.2 首页主体内容分析 161
8.1.3 内页主体内容分析 161
8.2 布局规划及切图 163
8.2.1 页面布局规划 163
8.2.2 切割首页及导出图片 163
8.2.3 切割内页及导出图片 164
8.3 XHTML编写 164
8.3.1 页面XHTML框架搭建 165
8.3.2 页面头部和页脚的XHTML编写 165
8.3.3 页面公共部分的XHTML编写 166
8.3.4 首页主体内容的XHTML编写 167
8.3.5 内页主体内容的XHTML编写 167
8.3.6 首页XHTML代码总览 168
8.3.7 内页XHTML代码总览 170
8.4 CSS编写 172
8.4.1 页面公共部分的CSS编写 172
8.4.2 页面框架的CSS编写 173
8.4.3 页面头部和页脚的CSS编写 173
8.4.4 首页主体内容的CSS编写 174
8.4.5 内页主体内容的CSS编写 175
8.4.6 网站CSS代码总览 176
8.5 制作中需要注意的问题 177
8.5.1 display:inline-block；的使用方法 177
8.5.2 ＜！-［ifIE 6］＞…＜！［endif］-＞的使用方法 177
第9章 电影网站 179
9.1 页面效果图分析 179
9.1.1 页面头部和页脚分析 181
9.1.2 首页主体内容分析 181
9.1.3 内页主体内容分析 183
9.2 布局规划及切图 184
9.2.1 页面布局规划 184
9.2.2 切割首页及导出图片 184
9.2.3 切割内页及导出图片 185
9.3 XHTML编写 186
9.3.1 页面XHTML框架搭建 186
9.3.2 页面头部和页脚的XHTML编写 187
9.3.3 页面公共部分的XHTML编写 188
9.3.4 首页主体内容的XHTML编写 188
9.3.5 内页主体内容的XHTML编写 192
9.3.6 首页XHTML代码总览 195
9.3.7 内页XHTML代码总览 196
9.4 CSS编写 197
9.4.1 页面公共部分的CSS编写 197
9.4.2 页面框架的CSS编写 199
9.4.3 页面头部和页脚的CSS编写 200
9.4.4 首页主体内容的CSS编写 200
9.4.5 内页主体内容的CSS编写 202
9.4.6 网站CSS代码总览 204
9.5 制作中需要注意的问题 204
9.5.1 CSS选择器 204
9.5.2 CSS选择器的优先级 204
第10章 游戏网站 206
10.1 页面效果图分析 206
10.1.1 左栏信息和页脚分析 207
10.1.2 首页主体内容分析 208
10.1.3 内页主体内容分析 208
10.2 布局规划及切图 209
10.2.1 页面布局规划 209
10.2.2 切割首页及导出图片 209
10.2.3 切割内页及导出图片 210
10.3 XHTML编写 211
10.3.1 页面XHTML框架搭建 211
10.3.2 页面左栏信息和页脚的XHTML编写 212
10.3.3 页面公共部分的XHTML编写 212
10.3.4 首页主体内容的XHTML编写 213
10.3.5 内页主体内容的XHTML编写 215
10.3.6 首页XHTML代码总览 216
10.3.7 内页XHTML代码总览 217
10.4 CSS编写 219
10.4.1 页面公共部分的CSS编写 219
10.4.2 页面框架的CSS编写 220
10.4.3 页面左栏信息和页脚的CSS编写 220
10.4.4 首页主体内容的CSS编写 221
10.4.5 内页主体内容的CSS编写 222
10.4.6 网站CSS代码总览 223
10.5 制作中需要注意的问题 224
10.5.1 网页设计稿中特殊字体的处理 224
10.5.2 切图时应该保存成哪种图片格式 224
第11章 婚庆网站 226
11.1 页面效果图分析 226
11.1.1 页面头部和页脚分析 227
11.1.2 首页主体内容分析 228
11.1.3 内页主体内容分析 228
11.2 布局规划及切图 229
11.2.1 页面布局规划 229
11.2.2 切割首页及导出图片 230
11.2.3 切割内页及导出图片 230
11.3 XHTML编写 231
11.3.1 页面XHTML框架搭建 231
11.3.2 页面头部和页脚的XHTML编写 232
11.3.3 页面公共部分的XHTML编写 233
11.3.4 首页主体内容的XHTML编写 235
11.3.5 内页主体内容的XHTML编写 236
11.3.6 首页XHTML代码总览 238
11.3.7 内页XHTML代码总览 240
11.4 CSS编写 241
11.4.1 页面公共部分的CSS编写 241
11.4.2 页面框架的CSS编写 242
11.4.3 页面头部和页脚的CSS编写 243
11.4.4 首页主体内容的CSS编写 244
11.4.5 内页主体内容的CSS编写 245
11.4.6 网站CSS代码总览 246
11.5 制作中需要注意的问题——z-index属性 246
第12章 论坛类网站 249
12.1 页面效果图分析 249
12.1.1 页面头部和页脚分析 250
12.1.2 首页主体内容分析 251
12.1.3 内页主体内容分析 252
12.2 布局规划及切图 253
12.2.1 页面布局规划 253
12.2.2 切割首页及导出图片 253
12.2.3 切割内页及导出图片 253
12.3 XHTML编写 254
12.3.1 页面XHTML框架搭建 254
12.3.2 页面头部和页脚的XHTML编写 254
12.3.3 页面公共部分的XHTML编写 255
12.3.4 首页主体内容的XHTML编写 260
12.3.5 内页主体内容的XHTML编写 262
12.3.6 首页XHTML代码总览 264
12.3.7 内页XHTML代码总览 265
12.4 CSS编写 266
12.4.1 页面公共部分的CSS编写 266
12.4.2 页面框架的CSS编写 270
12.4.3 页面头部和页脚的CSS编写 270
12.4.4 首页主体内容的CSS编写 271
12.4.5 内页主体内容的CSS编写 272
12.4.6 网站CSS代码总览 272
12.5 制作中需要注意的问题 273
12.5.1 网站文件规划 273
12.5.2 CSS样式规划 274
第13章 餐饮网站 275
13.1 页面效果图分析 275
13.1.1 网站标志、导航和页脚分析 276
13.1.2 首页主体内容分析 277
13.1.3 内页主体内容分析 277
13.2 布局规划及切图 278
13.2.1 页面布局规划 278
13.2.2 切割首页及导出图片 278
13.2.3 切割内页及导出图片 279
13.3 XHTML编写 280
13.3.1 页面XHTML框架搭建 280
13.3.2 网站标志、导航和页脚的XHTML编写 280
13.3.3 页面公共部分的XHTML编写 281
13.3.4 首页主体内容的XHTML编写 282
13.3.5 内页主体内容的XHTML编写 282
13.3.6 首页XHTML代码总览 283
13.3.7 内页XHTML代码总览 284
13.4 CSS编写 285
13.4.1 页面公共部分的CSS编写 285
13.4.2 页面框架的CSS编写 286
13.4.3 网站标志、导航和页脚的CSS编写 287
13.4.4 首页主体内容的CSS编写 287
13.4.5 内页主体内容的CSS编写 288
13.4.6 网站CSS代码总览 289
13.5 制作中需要注意的问题 289
第14章 汽车网站 290
14.1 页面效果图分析 290
14.1.1 页面头部和页脚分析 291
14.1.2 首页主体内容分析 292
14.1.3 内页主体内容分析 293
14.2 布局规划及切图 294
14.2.1 页面布局规划 294
14.2.2 切割首页及导出图片 294
14.2.3 切割内页及导出图片 295
14.3 XHTML编写 295
14.3.1 页面XHTML框架搭建 295
14.3.2 页面头部和页脚的XHTML编写 296
14.3.3 页面公共部分的XHTML编写 298
14.3.4 首页主体内容的XHTML编写 299
14.3.5 内页主体内容的XHTML编写 300
14.3.6 首页XHTML代码总览 302
14.3.7 内页XHTML代码总览 303
14.4 CSS编写 304
14.4.1 页面公共部分的CSS编写 304
14.4.2 页面框架的CSS编写 305
14.4.3 页面头部和页脚的CSS编写 306
14.4.4 首页主体内容的CSS编写 307
14.4.5 内页主体内容的CSS编写 309
14.4.6 网站CSS代码总览 310
14.5 制作中需要注意的问题——IE 6下1px间距的问题 310
第15章 在线阅读网站 313
15.1 页面效果图分析 313
15.1.1 页面头部和页脚分析 315
15.1.2 首页主体内容分析 315
15.1.3 内页主体内容分析 316
15.2 布局规划及切图 317
15.2.1 页面布局规划 317
15.2.2 切割首页及导出图片 318
15.2.3 切割内页及导出图片 319
15.3 XHTML编写 319
15.3.1 页面XHTML框架搭建 319
15.3.2 页面头部和页脚的XHTML编写 320
15.3.3 页面公共部分的XHTML编写 321
15.3.4 首页主体内容的XHTML编写 321
15.3.5 内页主体内容的XHTML编写 322
15.3.6 首页XHTML代码总览 323
15.3.7 内页XHTML代码总览 324
15.4 CSS编写 326
15.4.1 页面公共部分的CSS编写 326
15.4.2 页面框架的CSS编写 326
15.4.3 页面头部和页脚的CSS编写 327
15.4.4 首页主体内容的CSS编写 328
15.4.5 内页主体内容的CSS编写 329
15.4.6 网站CSS代码总览 330
15.5 制作中需要注意的问题 331
15.5.1 img标签中alt属性与title属性 331
15.5.2 圆角背景的实现 332
第16章 常用浏览器及兼容处理 334
16.1 常用浏览器 334
16.1.1 常用浏览器及内核 334
16.1.2 页面兼容问题产生原因 335
16.2 兼容处理 336
16.2.1 理解CSS盒模型 336
16.2.2 怪异模式问题及解决方案 337
16.2.3 IE 6双边距问题及解决方案 338
16.2.4 普通文档流中块框的垂直边界问题及解决方案 339
16.2.5 IE 6、IE 7的hasLayout问题及解决方案 339
16.2.6 IE 6对png24格式图片的透明度支持问题及解决方案 340
16.2.7 IE 6下多余3px的问题及解决方案 341
16.2.8 各种浏览器中图片下方有空隙产生的问题及解决方案 342
16.2.9 IE 6无法定义1px高度的问题及解决方案 343
16.2.10 高度不适应问题 343
16.2.11 兼容问题的技巧 345
第17章 网页制作的调试工具及使用 346
17.1 Firefox浏览器下的页面调试工具及使用 346
17.2 IE浏览器下的页面调试工具及使用 349
17.3 Chrome浏览器下的页面调试工具及使用 350
第18章 代码发布前的优化 353
18.1 检查代码 353
18.1.1 XHTML代码的检查 353
18.1.2 CSS代码的检查 354
18.2 压缩代码 355
18.3 版本控制 356
18.4 上传 357