HTML5+CSS3网页布局任务教程

第1 单元 准备工作 1
任务1.1 认识HTML5 和CSS3 1
任务1.2 搭建软件环境. 2
任务1.2.1 安装HBuilder X . 3
任务1.2.2 安装Sublime Text3 5
任务1.3 分析第一个网页 6
任务1.4 了解网页编辑和调试技巧 9
单元小结. 10
习题. 10
第2 单元 HTML5 常见元素 12
任务2.1 认识标题元素. 12
任务2.2 认识段落元素. 14
任务2.3 认识换行元素、水平线元素 15
任务2.4 认识图像元素. 16
任务2.5 认识超链接. 17
任务2.6 认识无序列表. 18
任务2.7 认识有序列表. 19
任务2.8 认识自定义列表 20
任务2.9 认识表格元素. 21
任务2.10 认识表单元素. 23
任务2.11 认识音频、视频元素 24
单元小结. 26
习题. 26
第3 单元 网页整体布局的搭建 27
任务3.1 单列布局的搭建 27
任务3.1.1 网页结构的实现. 28
任务3.1.2 网页样式的实现. 29
任务3.2 左宽右窄两列布局（F 式布局）的搭建 35
任务3.2.1 网页结构的实现. 35
任务3.2.2 网页样式的实现. 36
任务3.3 三列布局的搭建 44
目 录
2 HTML5+CSS3 网页布局任务教程
任务3.3.1 网页结构的实现. 44
任务3.3.2 网页样式的实现. 45
单元小结. 51
习题. 51
第4 单元 网页主体内容的构建1——文本的制作. 53
任务4.1 “海南岛简介”页的制作（标题+段落） 53
任务4.1.1 网页结构的实现. 54
任务4.1.2 网页基本样式的实现. 56
任务4.1.3 简介标题样式和段落样式的实现. 58
任务4.2 “学院简介”页的制作（头部+段落） . 63
任务4.2.1 网页结构的实现. 64
任务4.2.2 网页基本样式的实现. 65
任务4.2.3 简介头部的样式和正文样式的实现. 66
任务4.3 “美丽的草原”页的制作（头部+章节） 69
任务4.3.1 网页结构和基本样式的实现 70
任务4.3.2 文章头部样式和章节样式的实现. 72
任务4.4 “学院首页”两行对称栏目的制作. 73
任务4.4.1 网页结构和基本样式的实现 74
任务4.4.2 两列对称栏目样式的实现 78
任务4.5 “学院首页”三列非对称栏目的制作 81
任务4.5.1 网页结构和基本样式的实现 82
任务4.5.2 三列非对称栏目样式的实现 85
任务4.6 “专业介绍”页的制作（左窄右宽的两列布局）. 88
任务4.6.1 网页结构和基本样式的实现 89
任务4.6.2 左窄右宽的两列布局的实现 91
单元小结. 96
习题. 96
第5 单元 网页主体内容的构建2——图片的制作. 98
任务5.1 “学院首页”两行对称栏目插图. 98
任务5.2 “学院首页”三列非对称栏目插图. 101
任务5.3 F 式布局、左图右文. 106
任务5.4 两列布局、上图下文 109
任务5.5 文字环绕图片1 113
任务5.6 文字环绕图片2 116
任务5.7 多张图片紧凑排列 117
任务5.8 设置背景图像1 121
任务5.9 设置背景图像2 123
目 录3
单元小结. 125
习题. 126
第6 单元 网页主体内容的构建3——表格的制作. 127
任务6.1 典型的表格. 127
任务6.2 单元格合并. 131
任务6.3 隔行换色表格. 132
单元小结. 134
习题. 134
第7 单元 网页主体内容的构建4——表单的制作. 135
任务7.1 制作网页一角的表单 135
任务7.2 制作网页任意位置的表单 140
任务7.3 制作遮罩层上的表单 147
单元小结. 151
习题. 151
第8 单元 网页页眉的构建. 153
任务8.1 制作典型页眉1 153
任务8.2 制作典型页眉2 156
单元小结. 160
习题. 160
第9 单元 网页主导航的构建. 161
任务9.1 制作不带下拉菜单的导航 161
任务9.2 制作带下拉菜单的导航 163
单元小结. 167
习题. 167
第10 单元 网页横幅广告的构建 168
任务10.1 制作窄幅横幅广告 168
任务10.2 制作宽幅横幅广告 169
单元小结. 171
习题. 171
第11 单元 网页页脚的构建. 172
任务11.1 制作典型页脚1. 172
任务11.2 制作典型页脚2. 174
单元小结. 178
习题. 178
4 HTML5+CSS3 网页布局任务教程
第12 单元 混合布局的综合网页的构建 179
任务12.1 “旅游美食网”首页的构建. 179
任务12.2 仿“中国知网”首页的构建. 187
单元小结. 204
习题. 205
知识解读索引 206