《HTML+CSS3网页设计与製作案例课堂》是2014年清华大学出版社出版的图书。
基本介绍
- 书名：HTML+CSS3网页设计与製作案例课堂
- ISBN：9787302386179
- 定价：58
- 出版社：清华大学出版社
- 出版时间：2014-12-19
- 装帧：平装
图书简介
本书根据作者在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍HTML + CSS 3网页样式与布局的技术。
目录
第1章HTML与CSS3网页设计概述 1
1.1网页与网站 2
1.1.1什幺是网页和网站 2
1.1.2网页的基本构成元素 2
1.2HTML的基本概念 3
1.2.1什幺是HTML 4
1.2.2HTML的发展历程 4
1.2.3HTML档案的基本结构 4
1.3CSS的基本概念 5
1.3.1什幺是CSS 5
1.3.2HTML与CSS的优缺点 5
1.3.3浏览器对CSS3的支持 6
1.4HTML与CSS网页的开发环境 6
1.4.1记事本开发环境 6
1.4.2DreamweaverCS6开发环境 7
1.5专家答疑 7
第2章网页文档的结构 9
2.1HTML文档的基本结构 10
2.1.1HTML页面的整体结构 10
2.1.2HTML5新增的结构标记 10
2.2HTML5的基本标记详解 11
2.2.1文档类型说明 11
2.2.2HTML标记 11
2.2.3头标记head 11
2.2.4网页的主体标记body 14
2.2.5页面注释标记<!----> 15
2.3HTML5语法的变化 15
2.3.1标籤不再区分大小写 15
2.3.2允许属性值不使用引号 16
2.3.3允许部分属性值的属性省略 17
2.4HTML5档案的编写方法 17
2.4.1示例1——使用记事本手工编写HTML5 17
2.4.2示例2——使用DreamweaverCS6编写HTML档案 18
2.5使用浏览器查看HTML5档案 20
2.5.1示例3——查看页面效果 20
2.5.2示例4——查看源档案 21
2.6综合示例——符合W3C标準的HTML5网页 21
2.7上机练习——简单的HTML5网页 22
2.8专家答疑 23
第3章网页文本的设计 25
3.1在网页中添加文本 26
3.1.1普通文本的添加 26
3.1.2特殊字元文本的添加 26
3.2使用HTML5标记添加特殊文本 28
3.2.1添加重要文本 28
3.2.2添加倾斜文本 29
3.2.3添加上标和下标文本 29
3.2.4设定文本旁注的文字大小 30
3.2.5设定已删除文本 30
3.2.6定义文本的方向 31
3.3使用HTML5标记排版网页文本 31
3.3.1网页段落文本换行 32
3.3.2分段显示网页段落文本 32
3.3.3设定网页中的标题文本 33
3.3.4为网页添加水平线 34
3.4文字列表 35
3.4.1建立无序列表<ul> 35
3.4.2建立有序列表<ol> 36
3.4.3建立不同类型的无序列表 37
3.4.4建立不同类型的有序列表 38
3.4.5建立嵌套列表 39
3.4.6自定义列表 39
3.5综合示例——製作简单的纯文本网页 40
3.6上机练习——製作旅游网网页 41
3.7专家答疑 42
第4章网页色彩和图像的设计 43
4.1网页色彩的套用 44
4.1.1认识色彩 44
4.1.2网页中色彩的搭配 45
4.1.3网页元素的色彩搭配 46
4.1.4网页颜色的使用风格 47
4.1.5精彩配色赏析 48
4.2网页中的图像<img> 49
4.2.1在网页中插入图像 49
4.2.2设定图像的宽度和高度 51
4.2.3设定图像的提示文字 51
4.2.4将图片设定为网页背景 52
4.2.5排列图像 53
4.3综合示例——图文并茂的房屋装饰装修网页 54
4.4上机练习——线上购物网站的产品展示 55
4.5专家答疑 56
第5章网页超连结的设计 57
5.1连结和路径 58
5.1.1超连结的概念 58
5.1.2连结路径URL 58
5.1.3创建HTTP路径 60
5.1.4创建FTP路径 61
5.1.5创建电子邮件路径 61
5.2创建网页文本连结 62
5.2.1使用连结元素<a>创建文本超连结(1) 62
5.2.2使用连结元素<a>创建文本超连结(2) 63
5.2.3设定以新视窗显示超连结页面 64
5.2.4连结到同一页面的不同位置 65
5.3创建网页图像连结 66
5.3.1创建图像超连结 67
5.3.2创建图像局部连结 67
5.4创建浮动框架 68
5.5综合示例——用Dreamweaver
精确定位热点区域 69
5.6上机练习——创建热点区域 71
5.7专家答疑 72
第6章网页表单的设计 75
6.1表单概述 76
6.2在网页中添加基本的表单元素 76
6.2.1添加单行文本输入框 77
6.2.2添加多行文本输入框 77
6.2.3添加密码输入框 78
6.2.4添加单选按钮 79
6.2.5添加複选框 80
6.2.6添加下拉选择框 80
6.2.7添加普通按钮 81
6.2.8添加提交按钮 82
6.2.9添加重置按钮 83
6.3在网页中添加高级表单元素 84
6.3.1添加不能为空的网站网址输入框 84
6.3.2添加信箱输入框 85
6.3.3添加时间类型表单 86
6.3.4添加数值输入框 87
6.3.5添加滚动控制项 87
6.3.6添加不能为空的表单元素 88
6.4综合示例——创建用户反馈表单 89
6.5上机练习——製作用户注册表单 90
6.6专家答疑 91
第7章网页表格的设计 93
7.1表格的基本结构 94
7.2创建表格 95
7.2.1创建普通表格 95
7.2.2创建一个带有标题的表格 96
7.3编辑表格 97
7.3.1定义表格的框线类型 97
7.3.2定义表格的表头 98
7.3.3设定表格的背景 99
7.3.4设定单元格的背景 101
7.3.5合併单元格 102
7.3.6排列单元格中的内容 106
7.3.7设定单元格的行高与列宽 107
7.4完整的表格标记 108
7.5综合示例——製作计算机报价表 109
7.6上机练习——製作学生成绩表 111
7.7专家答疑 114
第8章网页音频和视频的设计 117
8.1audio标籤 118
8.1.1audio标籤概述 118
8.1.2audio标籤的属性 119
8.1.3audio标籤浏览器的支持情况 119
8.2在网页中添加音频档案 120
8.2.1添加自动播放音频档案 120
8.2.2添加带有控制项的音频档案 120
8.2.3添加循环播放的音频档案 121
8.2.4添加预播放的音频档案 121
8.3video标籤 122
8.3.1video标籤概述 122
8.3.2video标籤的属性 123
8.3.3video标籤浏览器的支持情况 124
8.4在网页中添加视频档案 124
8.4.1添加自动播放的视频档案 124
8.4.2添加带有控制项的视频档案 125
8.4.3添加循环播放的视频档案 125
8.4.4添加预播放的视频档案 126
8.4.5设定视频档案的高度和宽度 127
8.5专家答疑 127
第9章网页图形的绘製 129
9.1添加canvas的步骤 130
9.2绘製基本形状 130
9.2.1绘製矩形 131
9.2.2绘製圆形 132
9.2.3使用moveTo与lineTo绘製直线 133
9.2.4使用bezierCurveTo绘製贝塞尔曲线 134
9.3绘製渐变图形 136
9.3.1绘製线性渐变 136
9.3.2绘製径向渐变 137
9.4绘製变形图形 138
9.4.1绘製平移效果的图形 138
9.4.2绘製缩放效果的图形 139
9.4.3绘製旋转效果的图形 140
9.4.4绘製组合效果的图形 141
9.4.5绘製带阴影的图形 143
9.5使用图像 144
9.5.1绘制图像 145
9.5.2平铺图像 146
9.5.3裁剪图像 147
9.5.4图像的像素处理 149
9.6绘製文字 150
9.7图形的保存与恢复 152
9.7.1保存与恢复状态 152
9.7.2保存档案 153
9.8综合示例——绘製火柴棒人物 154
9.9上机练习——绘製商标 157
9.10专家答疑 158
第10章CSS3网页样式核心基础 161
10.1CSS3基础语法概述 162
10.1.1CSS3的构造规则 162
10.1.2CSS3的常用单位 162
10.1.3CSS3的注释 166
10.2编辑CSS3档案的方法 167
10.2.1手工编写CSS3 167
10.2.2用Dreamweaver编写CSS 168
10.3在HTML5中使用CSS3的方法 169
10.3.1行内样式 169
10.3.2内嵌样式 170
10.3.3连结样式 171
10.3.4导入样式 172
10.3.5优先权问题 173
10.4CSS3的基本选择器 176
10.4.1标籤选择器 176
10.4.2类选择器 177
10.4.3ID选择器 178
10.4.4全局选择器 179
10.5综合示例——製作炫彩网站Logo 179
10.6上机练习——製作学生信息统计表 182
10.7专家答疑 184
第11章使用CSS3控制网页字型与段落样式 185
11.1丰富网页文字样式 186
11.1.1设定文字的字型样式 186
11.1.2设定文字的字号 187
11.1.3设定字型风格 188
11.1.4设定加粗字型 189
11.1.5将小写字母转为大写字母 190
11.1.6设定字型的複合属性 191
11.1.7设定字型颜色 192
11.2网页文本的高级样式 193
11.2.1设定文本阴影效果 193
11.2.2设定文本溢出效果 194
11.2.3设定文本的控制换行 195
11.2.4保持字型尺寸不变 196
11.3丰富网页中的段落样式 197
11.3.1设定单词之间的间隔 197
11.3.2设定字元之间的间隔 198
11.3.3设定文字的修饰效果 199
11.3.4设定垂直对齐方式 200
11.3.5转换文本的大小写 202
11.3.6设定文本的水平对齐方式 203
11.3.7设定文本的缩进效果 204
11.3.8设定文本的行高 205
11.3.9文本的空白处理 206
11.3.10文本的反排 207
11.4综合示例——设定网页标题 208
11.5上机练习——製作新闻页面 210
11.6专家答疑 211
第12章使用CSS3控制网页图片的显示样式 213
12.1缩放图片 214
12.1.1使用描述标记width和height缩放图片 214
12.1.2使用CSS3中的max-width和max-height缩放图片 214
12.1.3使用CSS3中的width和height缩放图片 215
12.2网页图片与文字的对齐方式 216
12.2.1横向对齐方式 216
12.2.2纵向对齐方式 217
12.3图文混排样式 219
12.3.1设定文字环绕效果 219
12.3.2设定图片与文字的间距 220
12.4综合示例——製作学校宣传单 222
12.5上机练习——製作简单的图文混排网页 224
12.6专家答疑 225
第13章使用CSS3控制网页背景与框线的样式 227
13.1使用CSS3美化背景 228
13.1.1设定背景颜色 228
13.1.2设定背景图片 229
13.1.3背景图片重複 230
13.1.4背景图片显示 231
13.1.5背景图片位置 233
13.1.6背景图片大小 234
13.1.7背景显示区域 236
13.1.8背景图像裁剪区域 237
13.1.9背景複合属性 238
13.2使用CSS3美化框线 239
13.2.1设定框线的样式 240
13.2.2设定框线的颜色 241
13.2.3设定框线的线宽 242
13.2.4设定框线的複合属性 244
13.3设定框线的圆角效果 245
13.3.1设定圆角框线 245
13.3.2指定两个圆角半径 246
13.3.3绘製四个不同圆角框线 247
13.3.4绘製不同种类的框线 249
13.4综合示例——製作简单的公司主页 250
13.5上机练习——製作简单的生活资讯主页 253
13.6专家答疑 255
第14章使用CSS3控制表格和表单样式 257
14.1美化表格的样式 258
14.1.1设定表格框线的样式 258
14.1.2设定表格框线的宽度 260
14.1.3设定表格框线的颜色 261
14.2美化表单样式 262
14.2.1美化表单中的元素 262
14.2.2美化提交按钮 264
14.2.3美化下拉选单 265
14.3综合示例——製作用户登录页面 267
14.4上机练习——製作用户注册页面 268
14.5专家答疑 270
第15章使用CSS3控制网页超连结和滑鼠的样式 273
15.1使用CSS3丰富超连结样式 274
15.1.1改变超连结的基本样式 274
15.1.2设定带有提示信息的超连结 275
15.1.3设定超连结的背景图 276
15.1.4设定超连结的按钮效果 277
15.2使用CSS3丰富滑鼠样式 278
15.2.1使用CSS3控制滑鼠箭头 278
15.2.2设定滑鼠变幻式超连结 280
15.2.3设定网页的页面滚动条 281
15.3综合示例1——图片版本的超连结 283
15.4综合示例2——滑鼠特效 284
15.5上机练习——製作一个简单的导航栏 287
15.6专家答疑 288
第16章使用CSS3控制网页导航选单的样式 291
16.1使用CSS3来丰富项目的列表样式 292
16.1.1丰富无序列表样式 292
16.1.2丰富有序列表样式 293
16.1.3丰富自定义列表样式 295
16.1.4製作图片列表 296
16.1.5缩进图片列表 298
16.1.6列表的複合属性 299
16.2使用CSS3製作网页选单 300
16.2.1製作无需表格的选单 300
16.2.2製作水平和垂直选单 302
16.3综合示例——模拟搜搜导航栏 304
16.4上机练习——将段落转变成列表 307
16.5专家答疑 309
第17章掌握CSS3的高级属性 311
17.1複合选择器 312
17.1.1“交集”选择器 312
17.1.2“并集”选择器 313
17.1.3后代选择器 313
17.2CSS3新增的选择器 314
17.2.1属性选择器 315
17.2.2结构伪类选择器 316
17.2.3UI元素状态伪类选择器 318
17.3CSS的继承特性 319
17.3.1继承关係 319
17.3.2CSS继承的运用 320
17.4CSS的层叠特性 321
17.4.1同一选择器被多次定义的处理 321
17.4.2同一标籤运用不同类型选择器的处理 322
17.5综合示例——製作新闻选单 323
17.6专家答疑 326
第18章CSS3定位与DIV布局核心技术 327
18.1了解块级元素和行内级元素 328
18.1.1块级元素和行内级元素的套用 328
18.1.2div元素和span元素的区别 330
18.2盒子模型 331
18.2.1盒子模型的概念 331
18.2.2定义网页的border区域 332
18.2.3定义网页的padding区域 333
18.2.4定义网页的margin区域 334
18.3CSS3新增的弹性盒模型 338
18.3.1定义盒子的布局取向(box-orient) 338
18.3.2定义盒子的布局顺序(box-direction) 339
18.3.3定义盒子布局的位置(box-ordinal-group) 341
18.3.4定义盒子的弹性空间(box-flex) 342
18.3.5管理盒子空间(box-pack和box-align) 344
18.3.6盒子空间的溢出管理(box-lines) 346
18.4综合示例——图文排版效果 347
18.5上机练习——淘宝导购选单 349
18.6专家答疑 352
第19章CSS3+DIV盒子的浮动与定位 353
19.1定义DIV 354
19.1.1什幺是DIV 354
19.1.2创建DIV 354
19.2盒子的定位 355
19.2.1静态定位 355
19.2.2相对定位 356
19.2.3绝对定位 357
19.2.4固定定位 358
19.2.5盒子的浮动 359
19.3其他CSS布局定位方式 361
19.3.1溢出(overflow)定位 361
19.3.2隐藏(visibility)定位 362
19.3.3z-index空间定位 364
19.4新增的CSS3多列布局 366
19.4.1设定列宽度 366
19.4.2设定列数 367
19.4.3设定列间距 369
19.4.4设定列框线样式 370
19.5综合示例——定位网页布局样式 372
19.6上机练习——製作阴影文字效果 374
19.7专家答疑 375
第20章网页布局剖析与製作 377
20.1固定宽度网页剖析与布局 378
20.1.1示例1——网页单列布局模式 378
20.1.2示例2——网页1-2-1型布局模式 381
20.1.3示例3——网页1-3-1型布局模式 384
20.2自动缩放网页1-2-1型布局模式 387
20.2.1示例4——“1-2-1”等比例变宽布局 387
20.2.2示例5——“1-2-1”单列变宽布局 388
20.3自动缩放网页1-3-1型布局模式 389
20.3.1示例6——“1-3-1”三列宽度等比例布局 390
20.3.2示例7——“1-3-1”单侧列宽度固定的变宽布局 390
20.3.3示例8——“1-3-1”中间列宽度固定的变宽布局 393
20.3.4示例9——“1-3-1”双侧列宽度固定的变宽布局396
20.3.5示例10——“1-3-1”中列和左侧列宽度固定的变宽布局 399
20.4分列布局背景色的使用 402
20.4.1示例11——设定固定宽度布局的列背景色 402
20.4.2示例12——设定特殊宽度变化布局的列背景色 404
20.4.3示例13——设定单列宽度变化布局的列背景色 405
20.4.4示例14——设定多列等比例宽度变化布局的列背景 406
20.5专家答疑 408
第21章製作企业门户类网页 411
21.1构思布局 412
21.1.1设计分析 412
21.1.2排版架构 412
21.2模组分割 413
21.2.1Logo与导航选单 413
21.2.2左侧的文本介绍 415
21.2.3右侧的导航连结 417
21.2.4版权资讯 418
21.3整体调整 419
第22章製作线上购物类网页 421
22.1整体布局 422
22.1.1设计分析 422
22.1.2排版架构 422
22.2模组分割 423
22.2.1Logo与导航区 423
22.2.2Banner与资讯区 425
22.2.3产品类别区域 427
22.2.4页脚区域 429
22.3专家答疑 429
