本书以培养网页设计与制作开发能力为目标，采用校企双元开发，以项目为载体贯穿知识点

和技能点，借助企业一线最新任务案例，并融入“1+X”Web 前端开发职业技能等级证书所考知

识点，为考证提供支持。

按照工作系统化理念，梳理典型工作任务，结合“1+X”相应证书要求，梳理职业能力，并

将职业能力模块化，构建五个项目。项目下包含该项目涉及的职业能力，并将职业能力用具体的

任务体现，最后是该项目的实施步骤。

本书体现以学生为主体，提供每个项目实施关键代码，并设计项目任务实施记录单，鼓励学

生记录、反思，进而激发学生的创新实践能力。同时针对关键技能点，插入视频二维码，实现手

机随扫随学。

本书可作为高等职业学校“网页设计与制作”课程的教材，也可作为“1+X”Web 前端开发

职业技能等级证书的参考教材。

随着互联网技术的飞速发展，网络已遍及人们生活的每个角落，逐渐改变着人们的生活、

学习和工作方式，并进一步影响产业结构的调整。越来越多的企事业单位、行政机关或个人定

制个性化网站，并利用网站平台开展各项业务。产业结构的变化、时代的发展，呼唤越来越多

的 Web 前端开发人员加入这个前景广阔的行业中来，而“网页设计与制作”是 Web 前端开发

岗位非常重要的专业基础课。通过学习网页设计与制作，学生能够熟练掌握网页制作的基本语

法和应用场合，熟练运用 CSS 样式、元素定位、页面布局等技能，进而培养学生能够根据客

户需求，设计制作个性化网站。

本书共有五个项目。项目 1 是简单静态页面制作，主要介绍 HTML 基本标签的用法，

通过对社区主页面的制作，让读者掌握运用基本 HTML 标签制作网页的技能；项目 2 是使用

CSS 设计页面样式，主要介绍了 CSS 样式理论、CSS 样式选择器、CSS 样式美化网页，通过

对“欢乐购”网站的设计与分步骤制作，让读者深刻理解和掌握如何使用 CSS 样式选择器美

化页面；项目 3 是盒子模型和元素定位，主要介绍盒子模型理论、元素相对定位、绝对定位、

固定定位、浮动定位等，通过设计与制作“一起去旅行”登录页面，让读者理解盒子模型理论

和定位问题，并能灵活应用技能实现特效；项目 4 是网页布局，主要介绍页面布局理论以及几

种常见页面布局的用法，通过设计与制作“一起去旅行”首页和旅行详情页面，让读者熟练掌

握和应用页面布局技能；项目 5 是 CSS3 新特性灵动页面，主要简单介绍了 CSS3 的特效，通

过设计与制作“音悦 tai”网站，让读者体验到 CSS3 的灵动特性的用法。

本书按照工作系统化理念，根据典型工作任务并结合“1+X”相应证书要求，梳理职业能

力，并将职业能力模块化，构建五个项目。教学内容以常见的网页类型项目为主线，通过挖掘

完成项目所需技能，按照项目目标—项目描述—相关知识—实施项目的形式编写，同时使用微

课辅助学习。

本书由曹雁任主编，吴小燕、肖智兵、袁瑛、付金灵任副主编，胡昌杰任主审。

虽然我们对本书的内容都尽量核实，并进行多次校正，但因时间限制，可能还存在疏漏

和不足之处，恳请读者批评指正。如果读者在学习和使用本书的过程中遇到困难或疑惑，请发

邮件至 35498731@qq.com，我们会尽力解答。

编者

2022 年 2 月

项目1 简单静态页面制作   1

1 1项目目标          1

1 2项目描述          1

1 3相关知识          2

1 3 1开发工具HBuilder的使用      2

1 3 2文本、图像、超链接等标签的使用           6

1 3 3列表标签的使用         22

1 3 4表格标签的基本用法      28

1 3 5表格标签的进阶用法      35

1 3 6表单标签的使用         41

1 3 7常见表单元素的使用      44

1 4项目实施        53

1 4 1需求分析           53

1 4 2项目组织           53

1 4 3项目流程           53

习题            58

项目2 使用CSS设计页面样式    60

2 1项目目标        60

2 2项目描述        60

2 3相关知识            61

2 3 1 CSS样式理论         61

2 3 2 CSS样式基本选择器       68

2 3 3 CSS样式复合选择器       73

2 3 4使用CSS设置文本      81

2 3 5使用CSS设置图片效果   90

2 3 6使用CSS美化表格      95

2 3 7使用CSS美化表单    105

2 3 8使用CSS美化列表     115

2 3 9 Hack原理在CSS样式中的

应用            121

2 4项目实施           124

2 4 1需求分析         124

2 4 2项目组织         124

2 4 3项目流程         124

习题          129

项目3 盒子模型和元素定位      134

3 1项目目标           134

3 2项目描述           134

3 3相关知识           135

3 3 1盒子模型         135

3 3 2标准文档流          142

3 3 3元素定位         145

3 4项目实施           165

3 4 1需求分析         165

3 4 2项目组织         165

3 4 3项目流程         166

习题          167

项目4 网页布局     169

4 1项目目标           169

4 2项目描述           169

II

网页设计与制作

4 3相关知识          171

4 3 1了解DIV+CSS         171

4 3 2 DIV+CSS布局思路       172

4 3 3常见布局         174

4 3 4 DIV+CSS布局的应用   185

4 3 5使用iframe标签实现页面布局

重构            189

4 4项目实施           193

4 4 1需求分析         193

4 4 2项目组织         194

4 4 3项目流程         194

习题          199

项目5 CSS3新特性灵动页面   203

5 1项目目标           203

5 2项目描述           203

5 3相关知识           205

5 3 1 CSS3简介        205

5 3 2 CSS3新增选择器      206

5 3 3 CSS3新增背景属性       209

5 3 4 CSS3新增字体文本属性    213

5 3 5 CSS3新增盒子模型属性    216

5 3 6 CSS3动画        218

5 4项目实施           222

5 4 1需求分析         222

5 4 2项目组织         222

5 4 3项目流程         222

习题          249

附录A Web前端开发职业技能等级

 证书模拟题库    251

“1+X”Web前端初级题目     251

参考文献          261

曹雁，女，湖北职业技术学院信息技术学院教研室主任，硕士研究生学历，专业方向计算机应用、软件开发。个人经历主要有：2010.7 - 至今 湖北职业技术学院 信息技术学院 教师； 2010.7 - 2012.6 主要从事网络相关课程的教学，比如网络基础、思科路由、思科交换机配置等； 2012.9 - 2016.6 主要在校企共建专业担任专业课教师，主要负责静态网页制作、动态网页制作、程序设计语言、JavaWeb开发、JavaWeb框架开发、安卓基础、安卓进阶等课程的教学；期间，代表院系，荣获校教学课堂比赛第一名、信息化教学比赛二等奖；2017.2 - 2019.6 主要负责静态网页制作、动态网页制作、数据库、Java等相关课程的教学，同时2018年参加湖北省职业院校教学能力比赛，荣获省二等奖 2019.6 - 至今 计算机应用技术教研室主任；期间，荣获2020年湖北省职业院校教学能力比赛三等奖；2008.3 - 2009.12 中兴通信有限公司南京研发中心 业务管理部门 信令跟踪；2005.9 - 2008.3 南京航空航天大学 信息技术学院 硕士研究生 主要研究视频编码；2000.9 - 2004.6 南京信息工程大学 计算机科学与技术 本科。

本书配有丰富微课资源。可作为“1+X”Web 前端开发职业技能等级证书的参考教材。