《HTML5+CSS3 网页设计》是2017年清华大学出版社出版的图书，作者是刘玉红。
基本介绍
- 书名：HTML5+CSS3 网页设计
- 作者：刘玉红
- 出版社：清华大学出版社
- 出版时间：2017.09.01
出版信息
HTML5+CSS3 网页设计
作者：刘玉红、蒲娟
定价：78元
印次：1-1
ISBN：9787302480723
出版日期：2017.09.01
印刷日期：2017.08.24
印次：1-1
ISBN：9787302480723
出版日期：2017.09.01
印刷日期：2017.08.24
内容简介
本书採取“HTML5网页设计→CSS3美化网页→网页版式布局→综合案例实战”的讲解模式，深入浅出地为读者讲解了网页设计和排版布局的各项技术及实战技能。 本书第1篇“HTML5网页设计”主要讲解HTML5快速入门、HTML5网页文档结构、HTML5网页中的文本和图像、用HTML5建立超连结、用HTML5创建表格和表单、HTML5中的多媒体、使用HTML5绘制图形、获取地理位置、Web通信新技术、构建离线的Web套用等；第2篇“CSS3美化网页”主要讲解CSS3概述与基本语法、使用CSS3美化网页字型与段落、使用CSS3美化网页图片、使用CSS3美化网页背景与框线、使用CSS3美化表格和表单样式、使用CSS3美化超连结和滑鼠、使用CSS3控制网页导航选单的样式等；
目录
第1篇 HTML5网页设计
第1章 HTML5快速入门
1.1 HTML5概述 4
1.1.1 HTML5简介 4
1.1.2 HTML5档案的基本结构 5
1.2 HTML5档案的编写方法 5
1.2.1 案例1——手工编写HTML5 5
1.2.2 案例2——使用HTML编辑器编写HTML 6
1.3 使用浏览器查看HTML5档案 10
1.3.1 各大浏览器与HTML5的兼容 10
1.3.2 案例3——查看页面效果 11
1.3.3 案例4——查看源档案 11
1.4 高手甜点 12
1.5 跟我练练手 12
第2章 HTML5网页文档结构
2.1 Web标準 14
2.1.1 Web标準概述 14
2.1.2 Web标準规定的内容 15
2.2 HTML5文档的基本结构 16
2.2.1 HTML5结构 16
2.2.2 文档类型说明 17
2.2.3 HTML5标记<html> 17
2.2.4 头标记<head> 17
2.2.5 网页的主体标记<body> 20
2.2.6 页面注释标记<!-- --> 21
2.3 综合案例——符合W3C标準的
HTML5网页 22
2.4 高手甜点 23
2.5 跟我练练手 24
第3章 HTML5网页中的文本和图像
3.1 在网页中添加文本 26
3.1.1 案例1——普通文本的添加 26
3.1.2 案例2——特殊字元文本的添加 26
3.1.3 案例3——添加特殊文本 28
3.2 文本排版 30
3.2.1 案例4——换行标记<br> 30
3.2.2 案例5——段落标记<p> 31
3.2.3 案例6——标题标记<h1>～<h6> 32
3.3 文字列表 33
3.3.1 案例7——建立无序列表<ul> 33
3.3.2 案例8——建立有序列表<ol> 34
3.3.3 案例9——建立不同类型的无序列表 35
3.3.4 案例10——建立不同类型的有序列表 36
3.3.5 案例11——建立嵌套列表 37
3.3.6 案例12——自定义列表<dl> 38
3.4 网页中的图像 39
3.4.1 案例13——插入图像<img> 39
3.4.2 案例14——设定图像的宽度和高度
width、height 41
3.4.3 案例15——设定图片的提示文字alt 42
3.4.4 案例16——将图片设定为网页背景
background 43
3.4.5 案例17——排列图像align 44
3.5 综合案例1——图文并茂房屋装饰装修
网页 44
3.6 综合案例2——线上购物网站产品展示
效果 46
3.7 高手甜点 47
3.8 跟我练练手 48
第4章 用HTML5建立超连结
4.1 网页超连结概述 50
4.1.1 超连结的概念 50
4.1.2 超连结中的URL 50
4.1.3 超连结的URL类型 51
4.2 建立网页超连结href 51
4.2.1 案例1——创建超文本连结 51
4.2.2 案例2——创建图片连结 53
4.2.3 案例3——创建下载连结 54
4.2.4 案例4——使用相对路径和绝对路径 55
4.2.5 案例5——设定以新视窗显示超连结
页面 56
4.2.6 案例6——设定电子邮件连结 58
4.3 案例7——浮动框架iframe 59
4.4 案例8——精确定位热点区域map、
area 61
4.5 综合案例——使用锚连结製作电子书
阅读网页 64
4.6 高手甜点 67
4.7 跟我练练手 68
第5章 用HTML5创建表格和表单
5.1 表格的基本结构 70
5.2 使用HTML5创建表格 72
5.2.1 案例1——创建普通表格<table>
<tr><td> 72
5.2.2 案例2——创建一个带有标题的表格
<caption> 73
5.2.3 案例3——定义表格的框线类型border 74
5.2.4 案例4——定义表格的表头<th> 75
5.2.5 案例5——设定表格背景bgcolor、
background 76
5.2.6 案例6——设定单元格背景bgcolor 78
5.2.7 案例7——合併单元格colspan、
rowspan 79
5.2.8 案例8——排列单元格中的内容align 83
5.2.9 案例9——设定单元格的行高与列宽
cellpadding 84
5.3 案例10——创建完整的表格 85
5.4 案例11——认识表单<form> 87
5.5 表单基本元素的使用 88
5.5.1 案例12——单行文本输入框text 88
5.5.2 案例13——多行文本输入框textarea 89
5.5.3 案例14——密码域password 89
5.5.4 案例15——单选按钮radio 90
5.5.5 案例16——複选框checkbox 91
5.5.6 案例17——下拉列表框select 92
5.5.7 案例18——普通按钮button 93
5.5.8 案例19——提交按钮submit 94
5.5.9 案例20——重置按钮reset 95
5.6 表单高级元素的使用 96
5.6.1 案例21——url属性的套用 96
5.6.2 案例22——email属性的套用 97
5.6.3 案例23——date和time的套用 98
5.6.4 案例24——number属性的套用 99
5.6.5 案例25——range属性的套用 100
5.6.6 案例26——required属性的套用 101
5.7 综合案例1——创建用户反馈单 102
5.8 综合案例2——製作商品报价单 103
5.9 高手甜点 105
5.10 跟我练练手 106
第6章 HTML5中的多媒体
6.1 网页音频标记audio 108
6.1.1 audio标记概述 108
6.1.2 audio标记的属性 108
6.1.3 音频解码器 109
6.1.4 audio标记浏览器的支持情况 109
6.2 网页视频标记video 109
6.2.1 video标记概述 109
6.2.2 video标记的属性 110
6.2.3 视频解码器 110
6.2.4 video标记浏览器的支持情况 110
6.3 添加网页音频档案 111
6.3.1 案例1——设定背景音乐 111
6.3.2 案例2——设定音乐循环播放loop 112
6.4 添加网页视频档案 112
6.4.1 案例3——为网页添加视频档案video 112
6.4.2 案例4——设定自动运行autoplay 113
6.4.3 案例5——设定视频档案的循环
播放loop 114
6.4.4 案例6——设定视频视窗的高度与宽度
height、width 115
6.5 添加网页滚动文字 115
6.5.1 案例7——滚动文字标记marquee 116
6.5.2 案例8——滚动方向属性direction 116
6.5.3 案例9——滚动方式属性behavior 117
6.5.4 案例10——滚动速度属性scrollamount 118
6.5.5 案例11——滚动延迟属性scrolldelay 119
6.5.6 案例12——滚动循环属性loop 120
6.5.7 案例13——滚动範围属性height、
width 121
6.5.8 案例14——滚动背景颜色属性bgcolor 122
6.5.9 案例15——滚动空间属性hspace、
vspace 123
6.6 高手甜点 124
6.7 跟我练练手 124
第7章 使用HTML5绘制图形
7.1 什幺是canvas 126
7.2 绘製基本形状 127
7.2.1 案例1——绘製矩形 127
7.2.2 案例2——绘製圆形 128
7.2.3 案例3——使用moveTo与lineTo
绘製直线 129
7.2.4 案例4——使用bezierCurveTo绘製
贝济埃曲线 131
7.3 绘製渐变图形 133
7.3.1 案例5——绘製线性渐变 133
7.3.2 案例6——绘製径向渐变 135
7.4 绘製变形图形 136
7.4.1 案例7——变换原点坐标 136
7.4.2 案例8——图形缩放 137
7.4.3 案例9——旋转图形 138
7.5 绘製其他样式的图形 139
7.5.1 案例10——图形组合 140
7.5.2 案例11——绘製带阴影的图形 142
7.5.3 案例12——绘製文字 143
7.6 使用图像 145
7.6.1 案例13——绘制图像 145
7.6.2 案例14——图像平铺 146
7.6.3 案例15——图像裁剪 148
7.6.4 案例16——像素处理 149
7.7 图形的保存与恢复 151
7.7.1 案例17——保存与恢复状态 152
7.7.2 案例18——保存档案 153
7.8 综合案例1——绘製火柴棒人物 154
7.9 综合案例2——绘製商标 157
7.10 高手甜点 159
7.11 跟我练练手 160
第8章 获取地理位置
8.1 GeolocationAPI获取地理位置 162
8.1.1 地理定位的原理 162
8.1.2 获取定位信息的方法 162
8.1.3 常用地理定位方法 162
8.1.4 案例1——判断浏览器是否支持HTML5
获取地理位置信息 163
8.1.5 案例2——指定纬度和经度坐标 164
8.1.6 案例3——获取当前位置的经度与纬度 165
8.2 目前浏览器对地理定位的支持情况 167
8.3 综合案例——在网页中调用
Google地图 168
8.4 高手甜点 171
8.5 跟我练练手 172
第9章 Web通信新技术
9.1 跨文档讯息传输 174
9.1.1 跨文档讯息传输的基本知识 174
9.1.2 案例1——跨文档通信套用测试 174
9.2 WebSocketsAPI 177
9.2.1 WebSocketAPI的概念 177
9.2.2 WebSockets通信基础 177
9.2.3 案例2——伺服器端使用Web
SocketsAPI 179
9.2.4 案例3——客户端使用Web
SocketsAPI 183
9.3 综合案例——编写简单的WebSocket
伺服器 183
9.4 高手甜点 188
9.5 跟我练练手 188
第10章 构建离线的Web
10.1 HTML5离线Web套用概述 190
10.2 使用HTML5离线Web套用API 190
10.2.1 案例1——检查浏览器的支持情况 190
10.2.2 案例2——搭建简单的离线应用程式 191
10.2.3 案例3——支持离线行为 191
10.2.4 案例4——manifest档案 192
10.2.5 案例5——ApplicationCacheAPI 193
10.3 实例2——使用HTML5离线Web套用
构建套用 195
10.3.1 案例6——创建记录资源的manifest
档案 195
10.3.2 案例7——创建构成界面的HTML和
CSS 195
10.3.3 案例8——创建离线的JavaScript 196
10.3.4 案例9——检查applicationCache的
支持情况 198
10.3.5 案例10——为Update按钮添加处理
函式 198
10.3.6 案例11——添加Storage功能代码 199
10.3.7 案例12——添加离线事件处理程式 199
10.4 高手甜点 200
10.5 跟我练练手 201
第2篇 CSS3美化网页
第11章 CSS3概述与基本
11.1 CSS3概述 206
11.1.1 CSS3功能 206
11.1.2 浏览器与CSS3 206
11.1.3 CSS3基础语法 207
11.1.4 CSS3常用单位 207
11.2 编辑和浏览CSS3 212
11.2.1 案例1——手工编写CSS3 212
11.2.2 案例2——Dreamweaver编写CSS 213
11.3 在HTML5中使用CSS3的方法 215
11.3.1 案例3——行内样式 215
11.3.2 案例4——内嵌样式 216
11.3.3 案例5——连结样式 217
11.3.4 案例6——导入样式 219
11.3.5 案例7——优先权问题 220
11.4 CSS3的常用选择器 222
11.4.1 案例8——标籤选择器 223
11.4.2 案例9——类选择器 223
11.4.3 案例10——ID选择器 224
11.4.4 案例11——全局选择器 225
11.4.5 案例12——组合选择器 226
11.4.6 案例13——继承选择器 227
11.4.7 案例14——伪类选择器 228
11.5 选择器声明 230
11.5.1 案例15——集体声明 230
11.5.2 案例16——多重嵌套声明 231
11.6 综合实例1——製作炫彩网站Logo 231
11.7 综合案例2——製作学生信息统计表 234
11.8 高手甜点 236
11.9 跟我练练手 237
第12章 使用CSS3美化网页字型与段落
12.1 美化网页文字 240
12.1.1 案例1——设定文字的字型 240
12.1.2 案例2——设定文字的字号 241
12.1.3 案例3——设定字型风格 242
12.1.4 案例4——设定加粗字型 243
12.1.5 案例5——将小写字母转换为
大写字母 244
12.1.6 案例6——设定字型的複合属性 245
12.1.7 案例7——设定字型颜色 246
12.2 设定文本的高级样式 247
12.2.1 案例8——设定文本阴影效果 248
12.2.2 案例9——设定文本溢出效果 249
12.2.3 案例10——设定文本的控制换行 250
12.2.4 案例11——保持字型尺寸不变 251
12.3 美化网页中的段落 252
12.3.1 案例12——设定单词之间的间隔 252
12.3.2 案例13——设定字元之间的间隔 253
12.3.3 案例14——设定文字的修饰效果 254
12.3.4 案例15——设定垂直对齐方式 255
12.3.5 案例16——转换文本的大小写 257
12.3.6 案例17——设定文本的水平对齐方式 258
12.3.7 案例18——设定文本的缩进效果 260
12.3.8 案例19——设定文本的行高 261
12.3.9 案例20——文本的空白处理 262
12.3.10 案例21——文本的反排 263
12.4 综合案例1——设定网页标题 264
12.5 综合案例2——製作新闻页面 266
12.6 高手甜点 267
12.7 跟我练练手 268
第13章 使用CSS3美化网页图片
13.1 图片缩放 270
13.1.1 案例1——通过描述标记width和
height缩放图片 270
13.1.2 案例2——使用CSS3中的max-width
和max-height缩放图片 270
13.1.3 案例3——使用CSS3中的width和
height缩放图片 272
13.2 设定图片的对齐方式 272
13.2.1 案例4——设定图片横向对齐 273
13.2.2 案例5——设定图片纵向对齐 273
13.3 图文混排 275
13.3.1 案例6——设定文字环绕效果 275
13.3.2 案例7——设定图片与文字的间距 277
13.4 综合案例1——製作学校宣传单 278
13.5 综合案例2——製作简单图文
混排网页 281
13.6 高手甜点 282
13.7 跟我练练手 283
第14章 使用CSS3美化网页背景与框线
14.1 使用CSS3美化背景 286
14.1.1 案例1——设定背景颜色
background-color 286
14.1.2 案例2——设定背景图片
background-image 287
14.1.3 案例3——背景图片重複
background-repeat 288
14.1.4 案例4——背景图片显示
background-attachment 290
14.1.5 案例5——背景图片位置
background-position 291
14.1.6 案例6——背景图片大小
background-size 293
14.1.7 案例7——背景显示区域
background-origin 294
14.1.8 案例8——背景图像裁剪区域
background-clip 296
14.1.9 案例9——背景複合属性 297
14.2 使用CSS3美化框线 299
14.2.1 案例10——设定框线样式
border-style 299
14.2.2 案例11——设定框线颜色
border-color 300
14.2.3 案例12——设定框线线宽
border-width 302
14.2.4 案例13——设定框线複合属性 303
14.3 设定框线圆角效果border-radius 304
14.3.1 案例14——设定圆角框线 304
14.3.2 案例15——指定两个圆角半径 305
14.3.3 案例16——绘製四个不同圆角框线 306
14.3.4 案例17——绘製不同种类的框线 308
14.4 综合案例1——製作简单公司主页 310
14.5 综合案例2——製作简单生活资讯
主页 314
14.6 高手甜点 316
14.7 跟我练练手 317
第15章 使用CSS3美化表格和表单样式
15.1 美化表格样式 320
15.1.1 案例1——设定表格框线样式
border-collapse 320
15.1.2 案例2——设定表格框线宽度
border-width 322
15.1.3 案例3——设定表格框线颜色
background-color 323
15.2 美化表单样式 325
15.2.1 案例4——美化表单中的元素font 325
15.2.2 案例5——美化提交按钮transparent 327
15.2.3 案例6——美化下拉列表font 328
15.3 综合案例1——製作用户登录页面 330
15.4 综合案例2——製作用户注册页面 332
15.5 高手甜点 334
15.6 跟我练练手 335
第16章 使用CSS3美化超连结和滑鼠
16.1 使用CSS3美化超连结 338
16.1.1 案例1——改变超连结基本样式 338
16.1.2 案例2——设定带有提示信息的
超连结 339
16.1.3 案例3——设定超连结的背景图 340
16.1.4 案例4——设定超连结的按钮效果 341
16.2 使用CSS3美化滑鼠特效 343
16.2.1 案例5——使用CSS3控制滑鼠箭头 343
16.2.2 案例6——设定滑鼠变幻式超连结 344
16.2.3 案例7——设定网页页面滚动条 345
16.3 综合案例1——图片版本超连结 348
16.4 综合案例2——关于滑鼠特效实例 350
16.5 综合案例3——製作一个简单的
导航栏 352
16.6 高手甜点 354
16.7 跟我练练手 355
第17章 使用CSS3控制网页导航选单的样式
17.1 使用CSS3美化项目列表 358
17.1.1 案例1——美化无序列表 358
17.1.2 案例2——美化有序列表 360
17.1.3 案例3——美化自定义列表 362
17.1.4 案例4——製作图片列表 363
17.1.5 案例5——缩进图片列表 364
17.1.6 案例6——列表複合属性 365
17.2 使用CSS3製作网页选单 367
17.2.1 案例7——製作无序表格的选单 367
17.2.2 案例8——製作水平选单 369
17.3 综合案例1——模拟soso导航栏 371
17.4 综合案例2——将段落转变成列表 375
17.5 高手甜点 377
17.6 跟我练练手 377
第3篇 网页版式布局
第18章 CSS定位与DIV布局核心技术
18.1 了解块级元素和行内级元素 382
18.1.1 案例1——块级元素和行内级元素
的套用 382
18.1.2 案例2——div元素和span元素的区别 384
18.2 盒子模型 385
18.2.1 盒子模型的概念 385
18.2.2 案例3——定义网页border区域 386
18.2.3 案例4——定义网页padding区域 387
18.2.4 案例5——定义网页margin区域 388
18.3 CSS3新增弹性盒模型 392
18.3.1 案例6——定义盒子布局取向
（box-orient） 392
18.3.2 案例7——定义盒子布局顺序
（box-direction） 394
18.3.3 案例8——定义盒子布局位置
（box-ordinal-group） 395
18.3.4 案例9——定义盒子弹性空间
（box-flex） 397
18.3.5 案例10——管理盒子空间（box-pack和
box-align） 399
18.3.6 案例11——盒子空间的溢出管理
（box-lines） 401
18.4 综合案例1——图文排版效果 402
18.5 综合案例2——淘宝导购选单 404
18.6 高手甜点 407
18.7 跟我练练手 408
第19章 CSS+DIV盒子的浮动与定位
19.1 定义DIV 410
19.1.1 什幺是DIV 410
19.1.2 案例1——创建DIV 410
19.2 盒子的定位 411
19.2.1 案例2——静态定位static 412
19.2.2 案例3——相对定位relative 412
19.2.3 案例4——绝对定位absolute 413
19.2.4 案例5——固定定位fixed 414
19.2.5 案例6——盒子的浮动float 416
19.3 其他CSS布局定位方式 418
19.3.1 案例7——溢出（overflow）定位 418
19.3.2 案例8——隐藏（visibility）定位 419
19.3.3 案例9——z-index空间定位 421
19.4 新增CSS3多列布局 423
19.4.1 案例10——设定列宽度column-width 423
19.4.2 案例11——设定列数column-count 424
19.4.3 案例12——设定列间距column-gap 426
19.4.4 案例13——设定列框线样式
19.5 综合案例1——定位网页布局样式 429
19.6 综合案例2——製作阴影文字效果 432
19.7 高手甜点 433
19.8 跟我练练手 434
