前 言
互联网的飞速发展，给我们的工作和生活方式都带来了巨大的变化，了解互联网运
作机制并掌握一些基本的网页制作技术已成为时代对目前大多数学习者的一项基本要求。
Web前端设计是以HTML5、CSS3、JavaScript等为核心的网页制作技术，其中HTML5是
网页编写工具，CSS3用于对网页内容进行修饰，而JavaScript则用于丰富网页的表现力、
增添网页的功能，三者结合才能使网页更美观、更专业，功能更强大。Web前端设计的应
用领域非常广泛，网站网页、APP页面等所具有的美观的界面、良好的体验等富有人性化
的设计多是使用Web前端设计技术实现的。
本书围绕一个网站建设项目，采用“项目→学习任务→任务”方式进行内容的组织和
编写。基于“确定网站主题→收集处理素材→搭建框架结构→填充页面内容→定义网页样
式→实现交互功能→测试发布网站”的Web前端设计工作过程，以培养实践应用能力为主
线，通过具体网站的建设项目，在完成网站策划、网页制作、网站测试与发布的过程中，
学习HTM5、CSS3、JavaScript等网站前端设计必备的基本知识、操作技术和相关规范。
本书基于Web前端设计工作过程，将网站建设项目逐步分解，提取典型任务，再将其
序化设计为4个教学项目10个教学任务41个子任务（见表1），每个教学项目又按照“基
础知识→操作技能→应用提高”三个层次安排相关内容，教学活动设计以学生为中心，通
过实践任务提升学生的综合应用能力，为其从事Web前端设计工作打下坚实基础。
表1 教材的主要内容
学习项目（4个）
学习任务（10个）
子任务（41个）
认识Web前端设计
了解Web基础知识
理解Web相关概念、了解页面元素、了解Web前端设
计技术与工具、了解网站建设流程
设计网站
设计网站形象、设计页面布局、设计网站导航及栏目、
设计网页层次及目录结构
创建及编辑Web网
页（HTML5）
创建网站首页文档
创建网站首页、理解HTML标记语法、理解HTML布
局div标记、理解HTML5结构标记
编辑网站首页内容
插入文本及列表、插入图像和媒体、设置超链接和应
用框架、应用表格和表单
续表
学习项目（4 个）学习任务（10 个）子任务（41 个）
创建网站首页样式
理解CSS 语法、应用CSS 样式、理解CSS 选择器、
理解CSS 层叠性和继承性
创建及应用Web 样
式（CSS3）
设计网站首页样式
设置CSS 字体和文本属性、设置CSS 背景和列表属性、
设置CSS 边框和表格属性、应用CSS3 效果
定位网站页面元素
理解CSS 盒子模型、应用流布局、应用浮动布局、应
用定位布局、制作移动端页面
应用Web 网页特效
（JavaScript）
理解JavaScript 语言基础
认识JavaScript、认识JavaScript 语言基础、认识
JavaScript 自定义函数、认识JavaScript 控制语句、认
识JavaScript 对象、认识JavaScript 内置对象
应用jQuery
理解jQuery 框架、利用jQuery 实现网页特效、jQuery
插件的应用
了解HTML5 高级应用
了解HTML5 画布、了解HTML5 拖放操作、了解
HTML5 地理定位
本书是中国大学 MOOC 平台慕课“Web 前端设计基础”、国家级精品资源共享课程“Web
技术应用基础”、北京市高校优质本科课程“Web 前端设计”的配套教材。本书结构合理、
语言简练、示例翔实，是课程学习很好的引导和补充。在每个学习任务中，结合关键技术
和难点，穿插了大量的示例并配有效果图，扫描二维码即可观看相应知识点示例的视频操
作和讲解。每个学习任务均设有思考题和技能操作题，以帮助读者巩固所学知识和技能，
培养读者的实际动手能力，加深读者对关键技术和难点的理解。
本书作者团队教学经验丰富，薛晓霞副教授主讲的课程“Web 技术应用基础”获评教
育部国家级精品资源共享课程，王晓红教授主讲的课程“Web 前端设计”获评北京高校“优
质本科课程”。本书的编写分工如下，北京联合大学的李丹丹副教授和李立威副教授编写
了项目1，王艳娥老师、薛晓霞副教授编写了项目2，王晓红教授编写了项目3，薛晓霞副
教授编写了项目4。
本书的编写得到了北京联合大学电子商务专业诸多老师的大力支持，在此一并表示衷
心的感谢。由于编写时间仓促，作者水平有限，书中难免有不妥之处，恳请各位读者和专
家批评指正。
本书为读者免费提供教学课件和相关教学文件，有需要的读者可以通过gltxiaoxia@
buu.edu.cn 与作者联系索取，或登录清华大学出版社网站http://www.tup.tsinghua.edu.cn 下载。
相关教材咨询与出版，可以通过1330649777@qq. com 与编辑联系。
编者
2020 年5 月
