HTML5+CSS3网页设计基础(微课版)

第1章 HTML5网页基础 1
1.1 网页基本元素 2
1.2 网页的布局结构 3
1.3 HTML5简介 4
1.3.1 HTML5概述 4
1.3.2 HTML5开发环境 5
1.4 创建HTML5网页 5
1.4.1 教学案例 5
1.4.2 用HBuilderX编辑网页 6
1.4.3 HTML5文档结构 8
1.4.4 HTML5语句结构 9
1.4.5 HTML5语法规范 10
1.5 实践训练 10
1.6 拓展知识 11
1.7 本章小结 11
1.8 练习题 11
第2章 网页基本元素 13
2.1 文本控制标签 14
2.1.1 教学案例 14
2.1.2 标题标签 14
2.1.3 段落标签 15
2.1.4 换行标签 15
2.1.5 水平线标签 16
2.1.6 文本格式化标签 16
2.1.7 范围标签 17
2.1.8 注释标签 18
2.1.9 特殊符号 18
2.1.10 案例制作 18
2.2 图像标签 19
2.2.1 教学案例 19
2.2.2 常用图像格式 20
2.2.3 图像标签及其属性 20
2.2.4 案例制作 23
2.3 超链接标签 23
2.3.1 教学案例 23
2.3.2 超链接简介 24
2.3.3 绝对路径与相对路径 25
2.3.4 超链接的应用 25
2.3.5 案例制作 26
2.4 列表 27
2.4.1 教学案例 27
2.4.2 无序列表 27
2.4.3 有序列表 28
2.4.4 定义列表 29
2.4.5 嵌套列表 30
2.4.6 案例制作 31
2.5 表格 32
2.5.1 教学案例 32
2.5.2 表格的结构 33
2.5.3 表格的基本语法 33
2.5.4 表格的修饰 34
2.5.5 不规范表格 36
2.5.6 案例制作 37
2.6 实践训练 38
2.6.1 任务分析 38
2.6.2 任务实现 39
2.7 拓展知识 40
2.8 本章小结 40
2.9 练习题 40
第3章 CSS入门 43
3.1 CSS的定义与使用 44
3.1.1 CSS概述 44
3.1.2 CSS的定义和引用 44
3.2 CSS选择器 47
3.2.1 教学案例 47
3.2.2 CSS样式规则 48
3.2.3 CSS基础选择器 49
3.2.4 案例——制作企业简介页面 53
3.3 CSS属性单位 55
3.3.1 长度与百分比单位 55
3.3.2 色彩单位 56
3.4 CSS高级特性 57
3.4.1 教学案例 57
3.4.2 CSS的层叠性和继承性 57
3.4.3 CSS的优先级 59
3.4.4 案例——制作工程案例局部
页面 60
3.5 实践训练 61
3.5.1 任务分析 62
3.5.2 任务实现 62
3.6 拓展知识 64
3.7 本章小结 64
3.8 练习题 64
第4章 元素外观修饰 67
4.1 文本样式 68
4.1.1 教学案例 68
4.1.2 字体样式 68
4.1.3 文本外观属性 70
4.1.4 案例制作 76
4.2 图像样式 77
4.2.1 教学案例 77
4.2.2 设置图像样式 77
4.2.3 案例制作 79
4.3 列表样式 79
4.3.1 教学案例 80
4.3.2 设置列表项的标记类型 80
4.3.3 设置列表项的标记位置 82
4.3.4 案例制作 83
4.4 表格样式 84
4.4.1 教学案例 84
4.4.2 设置表格边框合并 84
4.4.3 设置单元格间距 85
4.4.4 设置表格标题的位置 86
4.4.5 案例制作 86
4.5 实践训练 88
4.5.1 任务分析 88
4.5.2 任务实现 88
4.6 拓展知识 90
4.7 本章小结 91
4.8 练习题 91
第5章 CSS盒子模型 95
5.1 盒子模型简介 96
5.2 盒子的外观属性 96
5.2.1 教学案例 96
5.2.2 盒子模型的宽和高 97
5.2.3 盒子边框属性 100
5.2.4 盒子模型的边距属性 103
5.2.5 盒子模型圆角边框设置 105
5.2.6 盒子阴影 106
5.2.7 案例制作 108
5.3 背景属性 110
5.3.1 教学案例 110
5.3.2 background属性 110
5.3.3 CSS渐变背景 116
5.3.4 背景和图像不透明度设置 118
5.3.5 案例制作 119
5.4 实践训练 120
5.4.1 任务分析 121
5.4.2 任务实现 121
5.5 拓展知识 124
5.6 本章小结 124
5.7 练习题 125
第6章 CSS3选择器 127
6.1 伪类选择器 128
6.1.1 案例分析 128
6.1.2 :first-child和:last-child
选择器 128
6.1.3 :nth-child(n)和:nth-last-child(n)
选择器 129
6.1.4 案例制作 129
6.2 伪元素选择器 131
6.2.1 教学案例 131
6.2.2 :before选择器 131
6.2.3 :after选择器 132
6.2.4 案例制作 132
6.3 链接伪类 133
6.3.1 教学案例 133
6.3.2 案例制作 134
6.4 实践训练 135
6.4.1 任务分析 135
6.4.2 任务实现 135
6.5 拓展知识 138
6.6 本章小结 138
6.7 练习题 138
第7章 网页布局设计 139
7.1 网页布局标签 140
7.1.1 布局标签 CSS布局的优点 140
7.1.2 页面分块 140
7.1.3 页面结构标签 141
7.2 浮动与定位 145
7.2.1 教学案例 145
7.2.2 元素的浮动 145
7.2.3 清除浮动 149
7.2.4 定位属性 150
7.2.5 定位方式 151
7.2.6 overflow属性 154
7.2.7 案例制作 156
7.3 典型的CSS布局 158
7.3.1 两列布局 159
7.3.2 三列布局 162
7.3.3 两列和三列混合布局 165
7.4 实践训练 169
7.4.1 任务分析 169
7.4.2 任务实现 170
7.5 拓展知识 174
7.6 本章小结 174
7.7 练习题 174
第8章 链接与导航 177
8.1 链接样式 178
8.1.1 教学案例 178
8.1.2 设置文字链接样式 178
8.1.3 设置图像链接样式 181
8.1.4 案例制作 182
8.2 纵向导航菜单的设计 184
8.2.1 教学案例 184
8.2.2 纵向导航菜单 184
8.2.3 案例制作 186
8.3 横向导航菜单的设计 188
8.3.1 教学案例 188
8.3.2 案例制作 188
8.3.3 设计分页导航按钮 190
8.3.4 下拉菜单设计 191
8.4 实践训练 192
8.4.1 任务分析 193
8.4.2 任务实现 193
8.5 拓展知识 194
8.6 本章小结 195
8.7 练习题 195
第9章 表单 197
9.1 认识表单 198
9.1.1 表单的构成 198
9.1.2 创建表单 198
9.2 表单元素 199
9.2.1 教学案例 199
9.2.2 input元素及其属性 200
9.2.3 其他表单元素 205
9.2.4 案例制作 207
9.3 用CSS控制表单样式 208
9.4 实践训练 210
9.4.1 任务分析 211
9.4.2 任务实现 211
9.5 拓展知识 215
9.6 本章小结 215
9.7 练习题 215
第10章 CSS3简单动画 217
10.1 CSS3过渡 218
10.1.1 transition-property属性 218
10.1.2 transition-duration属性 219
10.1.3 transition-timing-function
属性 220
10.1.4 transition-delay属性 220
10.1.5 transition属性 221
10.2 变形 221
10.2.1 教学案例 221
10.2.2 认识变形 222
10.2.3 2D转换 222
10.2.4 3D转换 228
10.2.5 案例实现 232
10.3 动画设计 234
10.3.1 @keyframes规则 234
10.3.2 animation属性 235
10.4 实践训练 238
10.4.1 任务分析 238
10.4.2 任务实现 239
10.5 拓展知识 242
10.6 本章小结 243
10.7 练习题 243
第11章 多媒体技术 245
11.1 HTML5多媒体特性 246
11.1.1 多媒体格式 246
11.1.2 支持多媒体的浏览器 247
11.2 嵌入视频和音频 247
11.2.1 在HTML5中嵌入视频 247
11.2.2 在HTML5中嵌入音频 249
11.2.3 音视频中的source元素 250
11.3 用CSS控制视频的宽高 252
11.4 实践训练 253
11.4.1 任务分析 254
11.4.2 任务实现 254
11.5 拓展知识 255
11.6 本章小结 255
11.7 练习题 256
第12章 Web前端开发实战 257
12.1 网站的开发流程 258
12.1.1 需求分析 258
12.1.2 站点规划 258
12.1.3 网站制作 259
12.1.4 测试发布 260
12.2 用HBuliderX创建Web项目 260
12.3 案例：设计爱德照明网站首页 261
12.4 案例：设计公司新闻页面 263
12.5 案例：设计企业优势页面 264
12.6 拓展知识 265
12.7 本章小结 265
12.8 练习题 265
参考文献 268