本书以培养网页设计与制作开发能力为目标，采用校企双元开发，以项目为载体贯穿知识点和技能点，借助企业一线全新任务案例，并融入“1+X”Web前端开发职业技能等级证书所考知识点，为考证提供支持。按照工作系统化理念，梳理典型工作任务，结合“1+X”相应证书要求，梳理职业能力，并将职业能力模块化，构建五个项目。项目下包含该项目涉及的职业能力，并将职业能力用具体的任务体现，zui后是该项目的实施步骤。本书体现以学生为主体，提供每个项目实施关键代码，并设计项目任务实施记录单，鼓励学生记录、反思，进而激发学生的创新实践能力。同时针对关键技能点，插入视频二维码，实现手机随扫随学。本书可作为高等职业学校“网页设计与制作”课程的教材，也可作为“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简单静态页面制作111项目目标112项目描述113相关知识2131开发工具HBuilder的使用2132文本、图像、超链接等标签的使用6133列表标签的使用22134表格标签的基本用法28135表格标签的进阶用法35136表单标签的使用41137常见表单元素的使用4414项目实施53141需求分析53142项目组织53143项目流程53习题58项目2使用CSS设计页面样式6021项目目标6022项目描述6023相关知识61231CSS样式理论61232CSS样式基本选择器68233CSS样式复合选择器73234使用CSS设置

曹雁，女，湖北职业技术学院信息技术学院教研室主任，硕士研究生学历，专业方向计算机应用、软件开发。个人经历主要有：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

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