本教材是一本基于课程群应用、课岗证赛合一的综合实训教材。教材以企业真实的工作项目“制作广西民族文化资源网”为载体，以职业能力培养为目标，以工作过程为导向，重新构建实训内容，分为HTML+CSS网页布局与美化（前期）、JavaScript制作网页特效（中期）、综合应用（后期）三大工作流程。本教材将各个工作流程细化为若干工作任务，每个工作任务均融入了相应的Web前端开发知识点、1+X职业技能要求及技能大赛技能要求。

秦红梅，南宁市第六职业技术学校科研处副主任，高级讲师，主要研究方向为计算机课程教学。主持或参与各级各类课题13项，主编或参编教材5部，发表学术论文9篇，获教学成果奖6项。

课程概述 1

项目一 HTML5 + CSS3 网页布局与美化 15

任务一 壮族铜鼓文化详情页制作 17

任务二 节日页面制作 48

任务三 古迹页面制作 73

任务四 服饰页面制作 94

任务五 美食页面制作 118

项目二 JavaScript 网页特效制作 145

任务一 选项卡特效制作 147

任务二 日期时间显示特效制作 162

任务三 页面头部固定特效制作 173

任务四 页面侧边栏特效制作 186

任务五 页面轮播图特效制作 193

项目三 综合应用 205

任务 首页制作及全站链接调试 207

参考文献 235

《Web 前端开发实战》是广西壮族自治区“十四五”职业教育规划教材，也是基于课程群应用、岗课赛证融通开发出来的新型“适岗”综合实训类教材。本教材以企业真实的项目“制作广西少数民族文化资源网”为载体，以职业能力培养为目标，以工作流程为导向，重新构建实训内容，分为“HTML5+CSS3网页布局与美化”（前期）、“JavaScript 网页特效制作”（中期）、“综合应用”（后期）3个工作项目，将3个工作项目细化为11个任务，每个任务融入与之相对应的 Web 前端开发知识点、“1+X”Web 前端开发职业技能等级标准及要求、广西职业院校技能大赛中职组“Web 应用开发”赛项技

术标准及要求。本教材按照任务驱动的教学策略来编写，每个任务按照任务导入—任务目标—任务描述—任务实施—知识库—课后拓展—“1+X”考证练习—收获与反思8个环节来设计。

学生在掌握本教材实训技能后可以达到初级 Web 前端开发工程师的水平。

本教材主要有以下特色：一是体现立德树人理念。本教材以精益求精、开拓创新的工匠精神为引领，深入挖掘广西少数民族本土文化中的思政元素与计算机专业知识的契合点，将其有机融入教材中，使学生受到熏陶和感染，做到德技双修。二是突出产教融合、岗课赛证融通特点。本教材有别于传统教材，紧紧围绕 Web 前端开发的最新技术（HTML5+CSS3和 JavaScript/jQuery）进行编写，以企业真实的工作项目作为教学项目，把工作内容、“1+X”职业技能等级证书考证内容及技能大赛比赛内容融入项目中，学生通过本教材的学习既能够完成考证和参加比赛的选拔，又能够适应工作岗位的技能要求。三是以工作任务为导向，按照企业真实的工作流程来重构教学内容，学生在完成课程学习后，能够掌握初级 Web 前端开发工程师的工作岗位技能。四是教材配套资源实现信息化。本教材有配套的在线开发课程，还配备微课资源，并以二维码的形式嵌入教材中，作为移动端的辅助学习。

本教材可以作为中等职业学校、高等职业院校和各类计算机教育机构的教学用书，也可以为广大网页设计爱好者提供帮助，学时建议如下所示：

项目 任务 学时

课程概述

（2学时）

课程简介 1

项目简介 1

项目一 HTML5+CSS3网页布局

与美化

（40学时）

任务一 壮族铜鼓文化详情页制作 8

任务二 节日页面制作 8

任务三 古迹页面制作 8

任务四 服饰页面制作 8

任务五 美食页面制作 8

项目二 JavaScript 网页特效制作

（20学时）

任务一 选项卡特效制作 4

任务二 日期时间显示特效制作 4

任务三 页面头部固定特效制作 4

任务四 页面侧边栏特效制作 4

任务五 页面轮播图特效制作 4

项目三 综合应用

（10学时）

任务 首页制作及全站链接调试 10

总学时 72

本教材由南宁市第六职业技术学校高级讲师、高级“双师型”教师、自治区优秀教师秦红梅担任主编，其负责书稿体例大纲、内容规划、修改统稿工作，并完成课程概述、项目一的任务一的编写；陈倩完成项目一的任务二、任务三和项目二的任务一的编写；莫德智完成项目一的任务四和项目三的编写；黄美世完成项目一的任务五和项目二的任务二的编写；谭少谋完成项目二的任务三、任务四、任务五的编写。教材中涉及的网站图片及网站 logo 设计由孙雨慧、罗蓉和郭辉完成；书稿审核工作由张好完成。教材选用的项目案例由广西塔易信息技术有限公司提供。同时，该公司技术总监颜靖对本教材涉及的许多行业规范问题进行了详细指导。本教材配有课件、案例素材、源代码文档、教案、习题答案等数字资源，读者可登录广西师范大学出版社官网“下载中心”的“职业教育”栏目下载使用。本教材配套的数字教学资源受版权保护，严禁外传。同时，本教材在超星学习通平台上配套建有在线开放课程，欢迎读者加入该课程进行同步学习。由于编者的水平有限，疏漏和不足之处在所难免，恳请专家和读者朋友批评指正。

编者

2023年3月

1.以精益求精、开拓创新的工匠精神为引领，将课程思政元素有机融入实训教学中，培养学生的职业道德，使其成长为德智体美劳全面发展的高素质技术技能人才。

2.重点突出产教融合、课岗证赛融通，以企业真实的工作项目为载体，融入工作内容、1+X考证内容及技能大赛比赛内容，使学生既能够完成考证及比赛的选拔，又能够适应岗位的技能要求。

3.严格按照企业工作流程制作工作任务单，有利于学生掌握初级Web前端开发工程师的工作岗位技能。

4.配备有教案、课件、习题、案例源代码、素材、微课等教学资源，最大限度地满足教师教学需要和学生学习需要。

二、项目简介

广西是多民族聚居的自治区，世居民族有壮族、汉族、瑶族、苗族、侗族、仫佬族、毛南族、回族、京族、彝族、水族、仡佬，另有满族、蒙古族、朝鲜族、白族、藏族、黎族、土家族等其他民族。广西少数民族文化资源网集合了广西少数民族节日、古迹、美食、服饰、文化等方面的资源，是一个综合性的网站。本教材主要以开发该网站为项目进一步学习 Web 前端开发的知识。项目开发选用 HBuilder 软件， 利用 HTML5、CSS3 和 JavaScript 技术， 实现在移动端、PC 端正常浏览网页的效果。根据知识点可将该项目划分为三个部分：HTML5+CSS3网页布局与美化，JavaScript 网页特效制作，综合应用（该部分主要完成首页制作及各分页的链接测试）。