本书对接国家对高级应用型、复合型人才的培养要求，依据课程标准和职业技能等级标准，遵循Web前端开发的工作流程编写而成。本书以红色文化资源网项目为实践载体，将Web前端开发的核心知识点有机融入页面制作全过程，并创新引入AIGC智能编程工具，生动展现AIGC在代码生成与辅助开发中的强大效能。读者通过完成红色文化资源网的建设，不仅能系统掌握Web前端开发的必备技能，更能深度体验人机协同智能编程的现代化开发范式。
本书采用HTML5+CSS3技术进行网站制作，共5个项目，主要内容包括走进Web前端开发、搭建页面主体结构、添加页面样式、设计页面动画、规划页面布局。除了项目5以外，其余的每个项目都包含若干个任务，以通关任务、晋级任务的形式让读者由浅入深地掌握初级Web前端开发工程师必备的知识和技能。
本书可以作为职业院校计算机类相关专业Web前端开发课程的教材，也可作为Web前端开发爱好者的学习参考书。

目 录
前言
二维码索引
项目1 走进Web前端开发——Web前端开发概述 001
任务 红色文化资源网欢迎页制作 002
通关任务 使用前端开发工具开发第一个网页 002
晋级任务 红色文化资源网欢迎页制作 008
任务小结 009
知识检验 010
技能检验 010
收获与反思 011
AIGC扩展应用 安装与使用CodeGeeX智能编程助手 011
项目2 搭建页面主体结构——HTML基础 014
任务 红色文化资源网结构搭建 015
通关任务1 引导页结构搭建——HTML概念及基本结构 015
通关任务2 红色资讯页面结构搭建——文本标签 021
通关任务3 红色景点页面结构搭建——图像及超链接标签 026
通关任务4 红色胜迹页面结构搭建——列表标签 033
晋级任务 红色文化资源网首页结构搭建 038
任务小结 039
知识检验 040
技能检验 041
收获与反思 041
AIGC扩展应用 HTML代码智能生成 042
项目3 添加页面样式——CSS样式基础 045
任务1 红色资讯详情页制作——使用CSS设置文字样式 047
通关任务1 制作红色资讯详情页1——认识CSS样式 047
通关任务2 制作红色资讯详情页2——CSS文本属性 063
通关任务3 制作红色资讯详情页3——CSS高级文本属性 071
晋级任务 制作韦拔群诗词详情页 079
任务小结 081
知识检验 082
技能检验 084
收获与反思 084
任务2 红色景点页面制作——盒子模型及使用CSS设置图像样式 085
通关任务1 制作“龙州起义纪念馆”页面 085
通关任务2 制作“八路军桂林办事处纪念馆”页面 088
通关任务3 制作“李明瑞、韦拔群革命烈士纪念馆”页面 097
晋级任务 制作红色景点展示页面 105
任务小结 106
知识检验 107
技能检验 108
收获与反思 108
任务3 红色胜迹页面制作——使用CSS设置列表样式 109
通关任务1 制作网站导航条 109
通关任务2 制作访问热点栏目 112
通关任务3 制作红色胜迹栏目 115
通关任务4 制作胜迹图展栏目 118
晋级任务 制作红色胜迹页面 126
任务小结 130
知识检验 130
技能检验 132
收获与反思 132
任务4 红色故事页面制作——使用CSS设置表格样式 133
通关任务1 制作红色人物页面 133
通关任务2 制作红色故事页面 136
晋级任务 广西红色故事——书籍篇搭建 143
任务小结 145
知识检验 146
技能检验 147
收获与反思 148
任务5 登录页面和用户注册页面制作——使用CSS设置表单样式 149
通关任务1 制作登录页面 149
通关任务2 制作用户注册页面 154
晋级任务 联系我们页面制作 165
任务小结 169
知识检验 170
技能检验 173
收获与反思 173
AIGC扩展应用 CSS样式智能生成 174
项目4 设计页面动画——CSS3动画 180
任务1 CSS3过渡动画制作 181
通关任务1 制作网站导航条动画 181
通关任务2 为胜迹图展栏目设置遮罩效果 184
任务2 CSS3变形动画制作 189
通关任务1 制作变形导航条 189
通关任务2 制作照片墙 194
任务3 CSS3自定义动画制作 197
通关任务1 制作加载动画 197
通关任务2 制作运动的小球 201
晋级任务 为红色胜迹页面添加动画效果 203
任务小结 204
知识检验 204
技能检验 205
收获与反思 206
AIGC扩展应用 CSS动画智能生成 206
项目5 规划页面布局（综合案例）——首页 209
任务 首页制作 210
知识检验 221
技能检验 222
收获与反思 222
参考文献 223

前 言

本书以企业级项目“红色文化资源网的制作”为载体，以职业能力培养为目标，以工作流程为导向，依据Web前端开发职业技能等级标准及要求，应用HTML5和CSS3技术，借助国产前端开发软件HBuilder X，结合国产AIGC智能编程工具（CodeGeeX），重新构建实训内容。全书分为“走进Web前端开发、搭建页面主体结构、添加页面样式、设计页面动画、规划页面布局”5个项目。每个项目包含至少一个任务，在每个任务中都融入了与之相对应的Web前端开发知识和技能。
本书以“项目贯穿、任务驱动”方式进行编排。读者在掌握本书的实训技能后可以达到初级Web前端开发工程师的水平。
本书有以下特色。
1）思政融入、立德树人：本书选取的项目为“红色文化资源网的制作”，该网站是以“发掘红色资源、弘扬红色文化”为宗旨，展示红色资讯、红色景点、红色胜迹、红色故事等资源的综合性网站。读者在进行项目制作和技能实训中，既能掌握技术，又能加深对红色文化的理解与传承。
2）项目贯穿、任务驱动：本书以完成网站项目组织教与学，以任务为导向，将理论知识融入任务中，遵循“以实践为主线，理论够用为度”的原则，帮助读者在做中学、在学中做。
3）产教融合、校企合作：本书严格按照企业真实的工作流程来编写，充分与市场接轨，书中的案例来源于企业真实案例。校企合作共同完成本书编写。书中展现的技术均为当前流行、实际应用的新技术。
4）数智赋能、提升效能：本书创新引入AIGC智能编程工具（CodeGeeX），展现其在代码自动补全、智能生成、错误检测等方面的强大辅助能力，助力读者掌握人机协同编程模式，显著提升开发效率与代码质量，适应人工智能时代对开发人员的新要求。
5）图文并茂、资源丰富：本书配套了微课视频和教学资源，视频以二维码的形式嵌入相应内容处。本书还配套在线课程平台、课程专属智能体，支持线上线下混合式教学及移动学习，便于读者随时随地开展学习与实践。
本书主要内容及参考学时如下。
项目
任务
学时
项目1 走进Web前端开发——Web前端开发概述
任务 红色文化资源网欢迎页制作
4
项目2 搭建页面主体结构——HTML基础
任务 红色文化资源网结构搭建
8

项目
任务
学时
项目3 添加页面样式——CSS样式基础
任务1 红色资讯详情页制作——使用CSS设置文字样式
8
任务2 红色景点页面制作——盒子模型及使用CSS设置图像样式
8
任务3 红色胜迹页面制作——使用CSS设置列表样式
8
任务4 红色故事页面制作——使用CSS设置表格样式
6
任务5 登录页面和用户注册页面制作——使用CSS设置表单样式
6
项目4 设计页面动画——CSS3动画
任务1 CSS3过渡动画制作
4
任务2 CSS3变形动画制作
4
任务3 CSS3自定义动画制作
4
项目5 规划页面布局（综合案例）——首页
任务 首页制作
12
合计
72
本书由省级优秀教师、正高级讲师秦红梅，市级优秀教师陈倩共同担任主编。秦红梅负责书稿体例大纲、内容规划、修改统稿工作，并完成项目1、项目2的编写；陈倩完成项目3的任务3、和项目4的编写；莫德智完成项目3的任务5和项目5的编写；黄美世完成项目3的任务2的编写；赵晓君完成项目3的任务1的编写；罗蓉完成项目3的任务4的编写。书中涉及的网站图片、视频等资源由孙雨慧、黄世芝、李楠完成；涉及的红色文化及思政融入由梁方静完成；书稿审核工作由张好完成。书中的企业案例由润建股份有限公司提供，公司副总经理杨琦及其带领的技术团队对本书涉及的行业规范、技术要点等问题进行了详细指导。
由于编者水平有限，疏漏和不足之处在所难免，恳请专家和读者批评指正。
编 者