第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 ...................................................................