斯琴高娃，海南职业技术学院

单元 准备工作.......................................................................................... 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习题............................................................................................................................... ........ 1670 单元 网页横幅广告的构建.................................................................. 168任务10.1 制作窄幅横幅广告.............................................................................................. 168任务10.2 制作宽幅横幅广告.............................................................................................. 169单元小结............................................................................................................................... 171习题............................................................................................................................... ........ 1711 单元 网页页脚的构建......................................................................... 172任务11.1 制作典型页脚1................................................................................................... 172任务11.2 制作典型页脚2................................................................................................... 174单元小结............................................................................................................................... 178习题............................................................................................................................... ........ 1784 HTML5+CSS3 网页布局任务教程2 单元 混合布局的综合网页的构建........................................................ 179任务12.1 “旅游美食网”首页的构建................................................................................. 179任务12.2 仿“中国知网”首页的构建............................................................................... 187单元小结............................................................................................................................... 204习题............................................................................................................................... ........ 205知识解读索引................................................................................................ 206

本书根据HTML5和CSS3标准详细讲解了网页的布局和制作方法。全书共分12个单元，内容包括：准备工作、HTML5 常见元素、网页整体布局的搭建、网页主体内容的构建、网页页眉的构建、网页航的构建、网页横幅广告的构建、网页页脚的构建，以及混合布局的综合网页的构建。每个单元包含若干个任务，各任务之间有连贯性，强化和覆盖相关知识点。本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代码，而不是用Dreamweaver的可视化操作来生成代码。本书适合作为高职高专院校HTML5+CSS3 集中实训课程或理实一体化课程的教材，也可作为网页设计与制作爱好者的自学读物