第1章 网页设计基础与网站开发流程
1.1 认识网页 2
1.1.1 网页和网站 2
1.1.2 网页类型 3
1.1.3 静态网页和动态网页 3
1.1.4 网页基本构成元素 5
1.2 页面设计概述 6
1.2.1 网页设计任务 6
1.2.2 网页设计原则 7
1.2.3 网页设计流程 7
1.2.4 网页配色 8
1.3 网站开发流程 8
1.3.1 个人网站开发流程 8
1.3.2 应用项目开发流程 11
1.3.3 承包网站开发流程 12
1.4 上机习题 18
第2章 HTML语言基础
2.1 认识HTML和XHTML 20
2.2 HTML基础 20
2.2.1 HTML语言的作用 20
2.2.2 HTML文档基本结构 21
2.2.3 HTML基本语法 21
2.2.4 HTML常用标签 23
2.2.5 HTML公共属性 29
2.3 XHTML基础 32
2.3.1 XHTML文档基本结构 32
2.3.2 XHTML基本语法 33
2.3.3 XHTML文档类型 34
2.3.4 DTD文档类型解析 35
2.3.5 名字空间 37
2.4 上机习题 38
第3章 CSS语言基础
3.1 CSS概述 41
3.1.1 认识CSS 41
3.1.2 为什么学习CSS 41
3.1.3 CSS特性 42
3.2 CSS语法和用法 43
3.2.1 CSS基本结构 43
3.2.2 CSS基本用法 44
3.2.3 CSS样式表 45
3.2.4 导入外部样式表 46
3.2.5 CSS注释和空格 47
3.3 CSS属性、属性值和单位 47
3.3.1 CSS属性 48
3.3.3 CSS属性值 49
3.4 基本选择器 52
3.4.1 标签选择器 52
3.4.2 类选择器 53
3.4.3 ID选择器 56
3.4.4 通配选择器 58
3.5 复合选择器 58
3.5.1 子选择器 59
3.5.2 相邻选择器 60
3.5.3 包含选择器 62
3.5.4 多层选择器嵌套 63
3.5.5 属性选择器 64
3.5.6 伪选择器 69
3.5.7 选择器分组 70
3.6 CSS继承性、层叠性和特殊性 71
3.6.1 CSS继承性 71
3.6.2 CSS层叠性 73
3.6.3 CSS样式的优先级 74
3.6.4 CSS特殊性 75
3.7 上机习题 79
第4章 HTML5+CSS3基础
4.1 HTML 5概述 82
4.1.1 为什么要学习HTML5 82
4.1.2 HTML5开发组织 84
4.1.3 HTML5主要模块 84
4.2 HTML5基础 84
4.2.1 HTML5基本语法 85
4.2.2 新增的元素 87
4.2.3 新增的属性 93
4.2.4 新增的全局属性 96
4.2.5 HTML5的其他新功能 98
4.3 CSS3基础 101
4.3.1 选择器 101
4.3.2 文本阴影特效 103
4.3.3 设计半透明色 104
4.3.4 弹性盒模型 107
4.3.5 自定义边框样式 107
4.3.6 设计圆角 109
4.3.7 设计栏目阴影 110
4.3.8 设计渐变效果 111
4.4 上机习题 113
第5章 DIV+CSS网页设计进阶——从页面小工到产品经理
5.1 设计符合标准的网页结构 116
5.1.1 设计语义化网页结构 116
5.1.2 标签语义化详解 117
5.1.3 常用结构化元素解析 121
5.1.4 设计符合标准的文档结构嵌套 124
5.1.5 设计富信息的文档 129
5.2 设计高效样式表 131
5.2.1 CSS类样式 131
5.2.2 类样式应用技巧 132
5.2.3 设计通用类样式 133
5.2.4 应用默认样式 136
5.2.5 其他类型选择符样式处理 140
5.2.6 CSS代码编写实用技巧 140
5.3 设计可维护样式表 143
5.3.1 添加注释 143
5.3.2 灵活使用ID和Class属性 145
5.3.3 格式化CSS样式代码 146
5.3.4 遵循代码编写习惯 147
5.4 设计模块化样式表 147
5.4.1 灵活使用CSS样式继承 147
5.4.2 理解继承与包含的关系 150
5.4.3 根据模块化设计样式表 152
5.5 设计可兼容样式表 154
5.5.1 了解浏览器冲突问题 154
5.5.2 CSS兼容方法 155
5.5.3 使用IE条件语句 156
5.6 上机习题 158
第6章 儿童类网站布局与设计——设置字体和文本样式
6.1 设置字体样式 161
6.1.1 定义字体类型 161
6.1.2 定义字体大小 162
6.1.3 定义字体颜色 164
6.1.4 定义字体样式 165
6.2 设置文本样式 168
6.2.1 定义首行缩进 168
6.2.2 定义左右缩进 169
6.2.3 定义行距 170
6.2.4 定义文本间距 173
6.2.5 设计水平对齐 174
6.2.6 设计垂直对齐 176
6.3 案例实战 177
6.3.1 产品策划 177
6.3.2 画板 177
6.3.3 设计图 177
6.3.4 切图 178
6.3.5 重构 179
6.3.6 布局 179
6.4 上机习题 189
第7章 青春校园类网站布局与设计——设置超链接和图片样式
7.1 设置超链接样式 192
7.1.1 定义伪类样式 192
7.1.2 定义下划线样式 193
7.1.3 设计立体样式 196
7.1.4 设计导航样式 197
7.2 设置图片样式 199
7.2.1 定义图片大小 199
7.2.2 定义边框样式 200
7.2.3 设计透明图片 204
7.3 设置背景图片样式 207
7.3.1 定义背景图像 207
7.3.2 定义背景图片平铺 210
7.3.3 定义背景图片位置 214
7.3.4 定义背景图片固定位置 219
7.4 设计圆角样式 222
7.4.1 无图定义圆角 222
7.4.2 一图定义圆角 225
7.4.3 两图定义圆角 227
7.4.4 四图定义圆角 230
7.5 案例实战 233
7.5.1 产品策划 233
7.5.2 画板 233
7.5.3 设计图 234
7.5.4 切图 234
7.5.5 重构 235
7.5.6 布局 236
7.6 上机习题 244
第8章 音乐影视类网站布局与设计——列表结构和样式
8.1 设计列表结构和样式 248
8.1.1 定义列表结构 248
8.1.2 设置列表结构的默认样式 252
8.1.3 自定义列表样式 257
8.1.4 设计列表菜单样式 261
8.2 案例实战 268
8.2.1 产品策划 268
8.2.2 画板 268
8.2.3 设计图 269
8.2.4 切图 269
8.2.5 重构 270
8.2.6 布局 271
8.3 上机习题 283
第9章 信息分类网站布局与设计——导航菜单样式
9.1 设计导航菜单 286
9.1.1 横向菜单样式 286
9.1.2 垂直菜单样式 290
9.1.3 多级菜单样式 295
9.2 案例实战 300
9.2.1 产品策划 300
9.2.2 画板 300
9.2.3 设计图 301
9.2.4 切图 301
9.2.5 重构 302
9.2.6 布局 302
9.3 上机习题 320
第10章 企业网站布局与设计——表格结构和样式
10.1 构建表格结构 322
10.1.1 表格的基本结构和属性 322
10.1.2 定义附属表格结构 326
10.1.3 定义表格分区 328
10.2 定义表格样式 332
10.2.1 定义表格边框样式 332
10.2.2 表格的视觉设计 337
10.2.3 表格特殊性设计 340
10.3 案例实战 344
10.3.1 产品策划 344
10.3.2 画板 345
10.3.3 设计图 345
10.3.4 切图 346
10.3.5 重构 346
10.3.6 布局 348
10.4 上机习题 366
第11章 个性风格网站布局与设计——表单结构和样式
11.1 构建表单结构 369
11.1.1 了解表单基本结构 369
11.1.2 定义输入域 370
11.1.3 定义选择域 374
11.1.4 设计符合语义的表单结构 376
11.1.5 设计易用表单结构 378
11.2 设计表单样式 381
11.2.1 定义输入域样式 381
11.2.2 定义选择域样式 386
11.2.3 定义列表域样式 389
11.2.4 设计易用表单样式 391
11.3 案例实战 398
11.3.1 产品策划 398
11.3.2 画板 398
11.3.3 设计图 399
11.3.4 切图 400
11.3.5 重构 400
11.3.6 布局 401
11.4 上机习题 410
第12章 生活时尚网站布局与设计——CSS盒模型
12.1 CSS盒模型 413
12.1.1 认识盒模型 413
12.1.2 定义边框样式 415
12.1.3 设计三角形样式 418
12.1.4 定义外间距 424
12.1.5 设计栏目边距重叠 426
12.1.6 定义内间距 430
12.2 案例实战 435
12.2.1 产品策划 435
12.2.2 画板 435
12.2.3 设计图 436
12.2.4 切图 437
12.2.5 重构 437
12.2.6 布局 438
12.3 上机习题 461
第13章 休闲旅游网站布局与设计——CSS定位
13.1 CSS定位布局 465
13.1.1 定义浮动布局 465
13.1.2 浮动布局问题处理 471
13.1.3 定义清除浮动 476
13.1.4 定义精确定位 479
13.1.5 定义层叠顺序 485
13.2 案例实战 488
13.2.1 产品策划 488
13.2.2 画板 488
13.2.3 设计图 488
13.2.4 切图 489
13.2.5 重构 489
13.2.6 布局 491
13.3 上机习题 504
本书介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。结合新的HTML5+CSS3技术,通过八个综合案例,分别从不同类型网站的布局风格以及实现方法讲解DIV+CSS网页布局和制作方法。全书系统讲解了CSS样式的基础理论和实际运用技术,并结合实例讲解层叠样式表与层布局相结合制作网页的方法。在实例的制作过程中介绍CSS样式设计各方面知识的同时,还结合实际网页制作中可能遇到的问题提供解决问题的思路、方法和技巧,使初学者也可以轻松掌握DIV+CSS布局的方式,制作出精美的网页并搭建功能强大的网站。
全书力求模拟真实开发场景,以及各个环节的实现细节和方法,用简单的方法帮助读者掌握Web标准进行网页设计的方方面面,以及CSS布局中表现与内容分离的相关知识。
本书内容丰富、结构清晰,注重思维锻炼与实践应用,适合初、中级网页设计爱好者以及希望学习Web标准对原有网站进行重构的网页设计者。本书配套光盘包括书中部分实例文件和视频教程,供读者学习和参考。
本书配套光盘内容为书中部分视频教学及案例源文件,并赠送网页配色及素材大礼包。