HTML5+CSS3网页设计与制作案例课堂（第2版）

目 录
第I篇 HTML 5网页设计
第1章 新一代Web前端技术 3
1.1 HTML的基本概念 4
1.1.1 HTML的发展历程 4
1.1.2 什么是HTML 4
1.1.3 HTML 5文件的基本结构 5
1.2 HTML 5的优势 5
1.2.1 解决了跨浏览器的问题 5
1.2.2 增加了多个新特性 5
1.2.3 用户优先的原则 6
1.2.4 化繁为简的优势 7
1.3 HTML 5网页的开发环境 7
1.3.1 使用记事本手工编写HTML 5 7
1.3.2 使用Dreamweaver CC编写
HTML文件 8
1.4 使用浏览器查看HTML 5文件 12
1.4.1 查看页面效果 12
1.4.2 查看源文件 13
1.5 疑难解惑 14
第2章 HTML 5网页的文档结构 15
2.1 HTML 5文件的基本结构 16
2.1.1 HTML 5页面的整体结构 16
2.1.2 HTML 5新增的结构标记 16
2.2 HTML 5基本标记详解 17
2.2.1 文档类型说明 17
2.2.2 HTML标记 17
2.2.3 头标记 18
2.2.4 网页的主体标记 20
2.2.5 页面注释标记 21
2.3 HTML 5语法的变化 22
2.3.1 标签不再区分大小写 22
2.3.2 允许属性值不使用引号 22
2.3.3 允许部分属性的属性值省略 23
2.4 综合案例——符合W3C标准的
HTML 5网页 23
2.5 跟我学上机——简单的HTML 5网页 25
2.6 疑难解惑 26
第3章 HTML 5网页中的文本、超链接
和图像 27
3.1 在网页中添加文本 28
3.1.1 普通文本的添加 28
3.1.2 特殊字符文本的添加 28
3.1.3 使用HTML 5标记添加特殊
文本 30
3.2 文本排版 32
3.2.1 换行标记 32
3.2.2 段落标记 32
3.2.3 标题标记 33
3.3 文字列表 34
3.3.1 建立无序列表 34
3.3.2 建立有序列表 36
3.3.3 建立不同类型的无序列表 36
3.3.4 建立不同类型的有序列表 37
3.3.5 建立嵌套列表 38
3.3.6 自定义列表 39
3.4 超链接标记 40
3.4.1 设置文本和图片的超链接 40
3.4.2 创建指向不同目标类型的
超链接 40
3.4.3 设置以新窗口显示超链接页面 42
3.4.4 链接到同一页面的不同位置 43
3.5 创建热点区域 44
3.6 网页中的图片 45
3.6.1 在网页中插入图像 45
3.6.2 设置图像的宽度和高度 47
3.6.3 设置图像的提示文字 48
3.6.4 将图片设置为网页背景 49
3.6.5 排列图像 50
3.7 综合案例——图文并茂的房屋装饰
装修网页 50
3.8 跟我学上机——在线购物网站的产品
展示效果 52
3.9 疑难解惑 53
第4章 使用HTML 5创建表格 55
4.1 表格的基本结构 56
4.2 创建表格 57
4.2.1 创建普通表格 57
4.2.2 创建一个带有标题的表格 58
4.3 编辑表格 59
4.3.1 定义表格的边框类型 59
4.3.2 定义表格的表头 59
4.3.3 设置表格背景 60
4.3.4 设置单元格的背景 61
4.3.5 合并单元格 62
4.3.6 排列单元格中的内容 65
4.3.7 设置单元格的行高与列宽 66
4.4 完整的表格标记 67
4.5 综合案例——制作计算机报价表 68
4.6 跟我学上机——制作学生成绩表 70
4.7 疑难解惑 74
第5章 使用HTML 5创建表单 75
5.1 表单概述 76
5.2 表单基本元素的使用 76
5.2.1 单行文本输入框 77
5.2.2 多行文本输入框 77
5.2.3 密码输入框 78
5.2.4 单选按钮 78
5.2.5 复选框 79
5.2.6 列表框 80
5.2.7 普通按钮 81
5.2.8 提交按钮 81
5.2.9 重置按钮 82
5.3 表单高级元素的使用 83
5.3.1 url属性的使用 83
5.3.2 email属性的使用 83
5.3.3 date属性和time属性的使用 84
5.3.4 number属性的使用 85
5.3.5 range属性的使用 86
5.3.6 required属性的使用 86
5.4 综合案例——创建用户反馈表单 87
5.5 跟我学上机——制作用户注册表单 88
5.6 疑难解惑 90
第6章 HTML 5中的音频和视频 91
6.1 audio标签 92
6.1.1 audio标签概述 92
6.1.2 audio标签的属性 93
6.1.3 浏览器对audio标签的支持
情况 93
6.2 在网页中添加音频文件 94
6.2.1 添加自动播放的音频文件 94
6.2.2 添加带有控件的音频文件 94
6.2.3 添加循环播放的音频文件 95
6.2.4 添加预播放的音频文件 95
6.3 video标签 96
6.3.1 video标签概述 96
6.3.2 video标签的属性 97
6.3.3 浏览器对video标签的支持
情况 98
6.4 在网页中添加视频文件 98
6.4.1 添加自动播放的视频文件 98
6.4.2 添加带有控件的视频文件 99
6.4.3 添加循环播放的视频文件 99
6.5 综合案例——设置视频文件的高度
与宽度 100
6.6 跟我学上机——添加预播放的视频
文件 101
6.7 疑难解惑 101
第7章 使用HTML 5绘制图形 103
7.1 添加canvas的步骤 104
7.2 绘制基本形状 104
7.2.1 绘制矩形 105
7.2.2 绘制圆形 105
7.2.3 使用moveTo与lineTo绘制
直线 107
7.2.4 使用bezierCurveTo绘制
贝塞尔曲线 108
7.3 绘制渐变图形 109
7.3.1 绘制线性渐变 109
7.3.2 绘制径向渐变 111
7.4 绘制变形图形 112
7.4.1 绘制平移效果的图形 112
7.4.2 绘制缩放效果的图形 113
7.4.3 绘制旋转效果的图形 114
7.4.4 绘制组合效果的图形 115
7.4.5 绘制带阴影的图形 117
7.5 使用图像 118
7.5.1 绘制图像 118
7.5.2 平铺图像 119
7.5.3 裁剪图像 121
7.5.4 图像的像素化处理 122
7.6 绘制文字 124
7.7 图形的保存与恢复 126
7.7.1 保存与恢复状态 126
7.7.2 保存文件 127
7.8 综合案例——绘制火柴棒人物 128
7.9 跟我学上机——绘制商标 132
7.10 疑难解惑 134
　　
第II篇 CSS 3美化网页
第8章 CSS 3概述与基本语法 137
8.1 CSS 3概述 138
8.1.1 CSS 3的功能 138
8.1.2 浏览器与CSS 3 138
8.1.3 CSS 3的基础语法 139
8.1.4 CSS 3的常用单位 139
8.2 编辑和浏览CSS 3 144
8.2.1 手工编写CSS 3 144
8.2.2 用Dreamweaver编写CSS 145
8.3 在HTML 5中使用CSS 3的方法 147
8.3.1 行内样式 147
8.3.2 内嵌样式 148
8.3.3 链接样式 149
8.3.4 导入样式 150
8.3.5 优先级问题 151
8.4 CSS 3的常用选择器 154
8.4.1 标签选择器 154
8.4.2 类选择器 155
8.4.3 ID选择器 155
8.4.4 全局选择器 156
8.4.5 组合选择器 157
8.4.6 继承选择器 158
8.4.7 伪类选择器 159
8.5 选择器声明 160
8.5.1 集体声明 160
8.5.2 多重嵌套声明 161
8.6 综合案例——制作炫彩网站Logo 161
8.7 跟我学上机——制作学生信息
统计表 164
8.8 疑难解惑 166
第9章 使用CSS 3美化网页字体
与段落 167
9.1 美化网页文字 168
9.1.1 设置文字的字体 168
9.1.2 设置文字的字号 169
9.1.3 设置字体风格 170
9.1.4 设置加粗字体 171
9.1.5 将小写字母转为大写字母 171
9.1.6 设置字体的复合属性 172
9.1.7 设置字体颜色 173
9.2 设置文本的高级样式 174
9.2.1 设置文本阴影效果 174
9.2.2 设置文本的溢出效果 176
9.2.3 设置文本的控制换行 177
9.2.4 保持字体尺寸不变 177
9.3 美化网页中的段落 178
9.3.1 设置单词之间的间隔 179
9.3.2 设置字符之间的间隔 179
9.3.3 设置文字的修饰效果 180
9.3.4 设置垂直对齐方式 181
9.3.5 转换文本的大小写 183
9.3.6 设置文本的水平对齐方式 183
9.3.7 设置文本的缩进效果 185
9.3.8 设置文本的行高 186
9.3.9 文本的空白处理 187
9.3.10 文本的反排 188
9.4 综合案例——设置网页标题 189
9.5 跟我学上机——制作新闻页面 191
9.6 疑难解惑 192