本书根据职业院校计算机相关专业Web前端开发方向课程体系编写，同时结合企业Web前端开发岗位能力模型，对接《Web前端开发职业技能等级标准》，采用项目任务式编写体例，精选了六个不同类型且具有代表性的Web前端项目，涵盖了HTML、CSS和JavaScript的基础知识及应用。项目一介绍Web相关基础知识，项目二介绍HTML相关知识，项目三～项目五涵盖CSS以及响应式布局等知识，项目六涵盖了JavaScript相关知识。
本书所有知识点都围绕项目展开，让读者在做中学、学中做；项目难度逐层递增，帮助读者稳步提高；所选项目涉及不同的主题，有助于读者掌握不同类型的网站风格设计和开发技巧。
本书可以作为高等职业院校相关专业或有关IT培训机构的Web前端开发、网页设计与制作等课程的入门教材，也适合作为“Web前端开发”1+X技能考证用书，还可以作为广大网页制作初学者、爱好者的自学参考书。

在信息技术飞速发展的今天，Web前端开发作为连接用户与互联网世界的桥梁，其重要性日益凸显。《Web前端开发职业技能等级标准》中对“Web前端开发”职业技能的定义是：利用 HTML、CSS、JavaScript、网页开发框架等专业知识、方法和工具将产品UI设计稿实现成网站的技能。随着智能手机和移动设备的普及，Web前端技术的应用范围不断扩大，从传统的PC端网站到移动应用界面，再到各种交互式Web应用，前端开发已成为计算机类专业课程中不可或缺的一部分。本书正是为了满足这一职业技能需求而编写，旨在为高职高专院校计算机类专业的学生提供一套系统、实用的学习材料，帮助他们掌握前端开发的核心技能，为未来的职业生涯打下坚实的基础。
本书全面贯彻党的二十大精神，秉承立德树人的根本任务，深化产教融合，旨在培养高素质技术技能人才。在内容设计上严格按照《国家职业教育改革实施方案》（国发〔2019〕4号）和《职业院校教材管理办法》的要求，并结合现代职业教育体系建设改革的要求,突出实践技能培养。本书采用项目任务式编写体例，紧密结合当前Web前端开发的新趋势和新标准，将理论知识与实践操作紧密结合，同时融入课程思政，注重培养学生的职业道德和责任感。内容的编排充分考虑了学生的学习认知规律，从基础到高级，循序渐进，确保学生能够在掌握必要理论知识的同时，通过项目实践加深理解和应用。
本书的特色在于超强的实战性、螺旋式的递进性、对接1+X证书、校企合作编写以及思政教育的融入等。具体如下：
（1）教材通过精选的六个具有代表性的Web前端项目，将知识点融入项目任务中，使学生在完成项目的过程中学习和应用相关知识。每个项目都设计有明确的学习目标，确保学生能够有目的地学习。
（2）融入课程思政。本书在传授Web前端开发技能的同时，还在项目实践中融入思政教育，增强学生对中华文化的认同和自信；培养学生与他人合作的态度；教育学生在使用技术时应遵守法律法规；培养批判性思维能力、逻辑思维能力和解决复杂问题的能力。
（3）对接1+X证书。《Web前端开发职业技能等级标准》由工业和信息化部教育与考试中心组织编写，将Web前端开发职业技能分为初级、中级和高级三个等级。初级前端工程师需要掌握HTML、CSS和JavaScript的基本知识，能够独立完成基本的页面布局和功能实现。本书内容对应Web前端开发1+X职业技能等级（初级）的技能考核点，确保学生在学习过程中能够掌握必要的职业技能。本书编者有丰富的课程教学经验，并多次在“网站设计与开发”技能竞赛项目中担任裁判和指导教师，辅导过“Web前端开发”1+X技能考证。本书结合技能竞赛和1+X证书（Web前端开发）的要求，将技能竞赛项目部分内容和职业技能等级标准有关内容及要求有机地融入，力争打造“岗课证赛”一体化教程。
（4）校企合作编写。与企业合作，深入了解行业发展趋势和岗位技能需求，确保教材内容与企业实际需求相符合，并邀请企业专家参与教材的编写工作，将企业的实际案例和最新技术动态融入教材内容。在本书编写的各个阶段，邀请企业专家进行评审，提供反馈和建议，确保教材内容的实用性和前瞻性。
（5）配套资源丰富。本书包含项目案例资源、PPT课件、微视频等丰富的配套资源，读者可以在中国铁道出版社有限公司教育资源数字化平台（https://www.tdpress.com/51eds）下载。
全书共分为六个项目，每个项目都围绕实际的Web前端开发任务展开。项目一简易音乐播放网介绍了Web基础知识及网页开发流程；项目二个人工作室网涵盖了HTML语法及各种标签的使用；项目三经典古诗网进一步探讨了CSS基础样式与选择器；项目四天夏新闻网讲解了CSS盒模型、字体图标与浮动布局等；项目五品牌企业网涵盖了CSS弹性布局和响应式实现等；项目六城市旅游网综合运用了HTML、CSS与JavaScript，实现了网页交互动效功能。
为确保教学内容的全面覆盖和深入理解，本书建议安排的总学时数为80学时，编者根据自己的教学经验进行了学时分配，供广大教师和学员参考，各个项目的参考学时数如下表所示。
项  目 主？要？内？容 参？考？学？时
项目一 简易音乐播放网 Web基础知识及网页开发流程 6
项目二 个人工作室网 HTML语法及各种标签的使用 16
项目三 经典古诗网 CSS基础样式与选择器 12
项目四 天夏新闻网 CSS盒模型、字体图标与浮动布局 12
项目五 品牌企业网 CSS弹性布局与响应式实现 14
项目六 城市旅游网 使用JavaScript操作网页元素 20
总  计 80

本书由上海出版印刷高等专科学校的老师与上海寻梦信息技术有限公司、上海镜殊数据服务有限公司等企业的技术专家合作编写，由陈小红任主编，杨晟炜、王之双任副主编，
陈媛媛和郜玉金参与编写。本书在编写过程中，得到了许多专家、同行以及企业技术专家的帮助，在此特别感谢李素敏、彭敏军两位老师以及上海寻梦信息技术有限公司的陈进博等，也特别感谢参与审校和提供宝贵意见的各位老师和学生，他们的努力使得本书更加完善。
本书得到“上海市高水平高职学校建设经费”的支持。
尽管编者在编写过程中力求准确和全面，但由于时间和能力的限制，书中可能仍存在不足之处，希望广大读者提出宝贵的意见和建议，以便不断改进和完善。


编 者
2024年9月

项目一 简易音乐播放网 1
任务一 打开一个网站 2
任务二 搭建开发环境 8
任务三 创建站点 16
任务四 编辑主页内容与样式 19
任务五 编辑主页功能并测试 23
项目小结 26
课后练习 27
项目二 个人工作室网 30
任务一 制作头部信息模块 33
任务二 制作“个人简介”模块 38
任务三 制作“背景经历”模块 42
任务四 制作“作品展示”模块 46
任务五 制作“服务介绍”模块 51
任务六 制作“与我联系”模块与尾部信息 54
任务七 制作register.html注册页面 58
项目小结 75
课后练习 75
项目三 经典古诗网 79
任务一 页面布局与基础样式定义 81
任务二 制作头部信息和“感悟之言”模块 92
任务三 制作“经典诗画”模块 109
任务四 制作“全文赏析”模块 117
任务五 制作“名句集锦”和尾部信息模块 123
项目小结 128
课后练习 128
项目四 天夏新闻网 133
任务一 页面布局与基础样式定义 135
任务二 制作头部信息和导航栏模块 142
任务三 制作“热点推荐”模块 153
任务四 制作“实时报道”模块 160
任务五 制作“推荐栏目”和尾部信息模块 165
项目小结 169
课后练习 169
项目五 品牌企业网 175
任务一 页面布局与基础样式定义 177
任务二 制作头部信息模块 185
任务三 制作“条幅广告”模块 194
任务四 制作“导航栏”模块 198
任务五 制作“主体内容”模块 199
任务六 制作尾部信息模块 202
任务七 实现响应式布局 204
项目小结 209
课后练习 210
项目六 城市旅游网 214
任务一 页面布局与头部信息模块 216
任务二 制作“条幅广告”模块 245
任务三 制作“现在时间”模块 253
任务四 制作“历史文化”模块 257
任务五 制作“中共一大纪念馆”模块 258
任务六 制作“旅游景点”模块 260
任务七 制作“美食集锦”模块 262
任务八 制作尾部信息模块与实现响应式布局 265
项目小结 267
课后练习 267

陈小红，上海出版印刷高等专科学校副教授，专业方向为数字媒体技术，主授Web前端开发、网页特效设计与制作，面向对象程序设计等课程。多次在“网站设计与开发”技能竞赛项目中担任裁判和指导教师，具备“Web前端开发”1X技能考证辅导经验。

（1）教材通过精选的六个具有代表性的Web前端项目，将知识点融入项目任务中，使学生在完成项目的过程中学习和应用相关知识。每个项目都设计有明确的学习目标，确保学生能够有目的地学习。
（2）融入课程思政。本书在传授Web前端开发技能的同时，还在项目实践中融入思政教育，增强学生对中华文化的认同和自信；培养学生与他人合作的态度；教育学生在使用技术时应遵守法律法规；培养批判性思维能力、逻辑思维能力和解决复杂问题的能力。
（3）对接1+X证书。《Web前端开发职业技能等级标准》由工业和信息化部教育与考试中心组织编写，将Web前端开发职业技能分为初级、中级和高级三个等级。初级前端工程师需要掌握HTML、CSS和JavaScript的基本知识，能够独立完成基本的页面布局和功能实现。本书内容对应Web前端开发1+X职业技能等级（初级）的技能考核点，确保学生在学习过程中能够掌握必要的职业技能。本书编者有丰富的课程教学经验，并多次在“网站设计与开发”技能竞赛项目中担任裁判和指导教师，辅导过“Web前端开发”1+X技能考证。本书结合技能竞赛和1+X证书（Web前端开发）的要求，将技能竞赛项目部分内容和职业技能等级标准有关内容及要求有机地融入，力争打造“岗课证赛”一体化教程。
（4）校企合作编写。与企业合作，深入了解行业发展趋势和岗位技能需求，确保教材内容与企业实际需求相符合，并邀请企业专家参与教材的编写工作，将企业的实际案例和最新技术动态融入教材内容。在本书编写的各个阶段，邀请企业专家进行评审，提供反馈和建议，确保教材内容的实用性和前瞻性。
（5）配套资源丰富。本书包含项目案例资源、PPT课件、微视频等丰富的配套资源，读者可以在中国铁道出版社有限公司教育资源数字化平台（https://www.tdpress.com/51eds）下载。