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

本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代码，而不是用Dreamweaver的可视化操作来生成代码。

HTML5 和CSS3 是HTML 和CSS 的较新标准。HTML 和CSS 是Web 前端开发基础技术，分别
用于实现网页的结构和表现，是学习后续前端脚本语言JavaScript 和前端开发框架（Bootstrap、
jQuery 等）的重要基础。
作者将长期的高职教学实践所得精心提炼到了本书中，充分考虑了高职学生的学情，按照初
学者的认知规律循循善诱，按照开发者的思考路线分步讲解，在精心编排的50 多个网页制作任
务中渗透了实际网站开发中常用的方法、经验，覆盖了从无到有地制作一个完整的网页所需的知
识和技术。
本书共分12 个单元，单元内的任务之间互补强化，单元之间衔接连贯。
第1 单元 准备工作，介绍HTML5 和CSS3 是什么，如何搭建网页制作环境，如何使用网页
编辑器的编辑和调试功能。
第2 单元 HTML5 常见元素，介绍制作一个完整的网页一般需要哪些HTML5 元素，如何使
用这些元素。
第3 单元 网页整体布局的搭建，介绍典型的网页布局有哪些，搭建网页结构用到哪些盒
子，实现这些布局设置哪些样式。
第4 单元 网页主体内容的构建1文本的制作，介绍典型的网页布局中主体内容区的文本
内容的制作方法。
第5 单元 网页主体内容的构建2图片的制作，介绍典型的网页布局中主体内容区的图片
内容的制作方法。
第6 单元 网页主体内容的构建3表格的制作，介绍典型的网页布局中主体内容区的表格
内容的制作方法。
第7 单元 网页主体内容的构建4表单的制作，介绍典型的网页布局中主体内容区的表单
内容的制作方法。
第8 单元 网页页眉的构建，介绍典型的网页布局中页眉的制作方法。
第9 单元 网页主导航的构建，介绍典型的网页布局中主导航的制作方法。
第10 单元 网页横幅广告的构建，介绍典型的网页布局中横幅广告的制作方法。
第11 单元 网页页脚的构建，介绍典型的网页布局中页脚的制作方法。
第12 单元 混合布局的综合网页的构建，介绍复杂网页的制作方法。
本书主要特色：
① 与Web 前端开发工作岗位接轨，教学生直接写HTML5 和CSS3 代码，而不是教可视化
操作。
② 教学生基于网页设计稿（或效果图）制作完整的网页，而不是仅仅会做网页一角。
③ 归纳和强化常用的方法，让学生熟练掌握方法，而不仅仅是知识点。
④ 每个实训任务都有详尽的步骤和逻辑，而不是直接粘贴成片的代码。
课时数及选用建议（仅供参考）：
前 言
单 元 任 务 课时数建议 选 用 建 议
任务1.1~1.2 2
第1单元
任务1.3~1.4 2
任务2.1~2.2 2
任务2.3~2.4 2
任务2.5~2.6 2
任务2.7~2.8 2
任务2.9~2.10 2
第2单元
任务2.11 2
理实一体化课程：
选用所有任务。
集中实训课程：
省略
任务3.1 4
第3 单元 任务3.2 4
任务3.3 2
理实一体化课程：
选用所有任务。
集中实训课程：
选用所有任务
任务4.1 2
任务4.2 2
任务4.3 2
任务4.4 2
任务4.5 4
第4单元
任务4.6 4
理实一体化课程：
任务4.2、4.5、4.6 或全部。
集中实训课程：
任选
任务5.1~5.2 2
任务5.3 2
任务5.4 2
任务5.5~5.6 2
任务5.7 2
第5单元
任务5.8~5.9 2
理实一体化课程：
任务5.2、5.3、5.4、5.5、5.7 或全部。
集中实训课程：
任选
任务6.1 2
第6单元
任务6.2~6.3 2
任务7.1 2
第7 单元 任务7.2 2
任务7.3 2
任务8.1 2
第8单元
任务8.2 2
任务9.1 2
第9单元
任务9.2 2
任务10.1 2
第10 单元
任务10.2 2
任务11.1 2
第11 单元
任务11.2 2
理实一体化课程：
任选。
集中实训课程：
任选
任务12.1 8
第12 单元
任务12.2 12
理实一体化课程：
省略。
集中实训课程：
任选
合 计 100
本书由斯琴高娃任主编，孟清、谭海中、雷琳任副主编。其中：斯琴高娃编写第3~5 单元、
第12单元，孟清编写第6~8 单元、谭海中编写第1、2 单元，雷琳编写第9~11 单元。
由于时间仓促，编者水平有限，书中难免存在疏漏和不足之处，敬请广大读者批评指正，联
系方式：378083015@qq.com。
编 者
2020 年6 月

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

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