本书为“十四五”高等职业教育计算机类专业新形态一体化系列教材之一，根据职业院校计算机相关专业Web前端开发方向课程体系编写，同时结合企业Web前端开发岗位能力模型，对接《1+X证书Web前端开发职业技能等级标准》，形成了三位一体的Web前端开发知识地图。本书以实践能力为导向，遵循企业软件工程标准和技术，以项目任务为驱动，阐述了HTML5、CSS3、JavaScript等Web前端开发相关技术和知识。全书共分七个项目，包括认识Web前端开发、Web前端页面结构搭建、Web前端页面美化、响应式Web页面移动端设计、Web前端页面交互效果设计、微信小程序开发、Web前端新技术等。

本书适合作为高等职业院校计算机及相关专业Web前端开发方向课程的实训教材，也适合作为《Web前端开发职业技能等级标准》的实践参考用书，还可作为对移动Web前端开发感兴趣的读者的参考书。

？

       本书全面贯彻落实党的二十大报告对职业教育发展提出的新的部署要求，依据《国家职业教育改革实施方案》（国发〔2019〕4号）和《职业院校教材管理办法》的精神，秉承立德树人和高职学生职业发展的需求，深化校企融合创设真实项目情境，突出实践技能培养，采用项目任务体例设计全书内容结构。
       本书内容涵盖了HTML5、CSS3、JavaScript、微信小程序开发相关知识，对接《1+X证书Web前端开发职业技能等级标准》，教材中所有应用技术的项目代码均在主流浏览器中运行通过。
       本书共分七个项目。前三个项目讲解了Web前端开发技术中开发环境、HTML5和CSS3的相关知识；项目四讲解了Web前端页面在移动端的技术应用；项目五讲解了Web前端交互技术；项目六在Web前端开发的基础上，讲解了微信小程序开发；项目七讲解了在人工智能环境下Web前端技术的相关应用。各项目内容环环相扣，层层递进。
       本书编写特色如下：
       1．校企合作，突出实践。针对学习的重点、难点，学校与河南八六三软件股份有限公司合作，将企业一线真实项目引入教材。遵循学生学习规律，创设学习情景，将项目划分成一个个任务，在完成任务的同时，让学生体验从需求分析、界面设计、页面架构、页面美化到交互效果设计等完整的项目实践过程，从而掌握项目调研、需求分析、UI设计、HTML5、CSS3、JavaScript等企业一线前沿最新技术，实现理论与实践的有机融合。
       2．融入课程思政。聚焦学生全面发展，结合时代发展需求，以任务、活动等为载体，拓宽课程时空，设计课后拓展训练模块中国古诗词欣赏网站，使学生在巩固训练的同时接受传统文化的熏陶，打造计算机专业课程“大思政”。
       3．对接1+X证书。本书对接《1+X证书Web前端开发职业技能等级标准》证书，围绕岗位技能需求和职业教育改革要求，将《1+X证书 Web前端开发初级职业技能标准》融入教材，打造“岗课赛证”融通的学习资源。
       4．配套资源丰富。本书包含项目案例资源、PPT课件、微视频等丰富的配套资源，读者可以在中国铁道出版社有限公司教育资源数字化平台（http://www.tdpress.com/51eds/）下载。
       本书由郑州信息科技职业学院组织编写，由鹤壁职业技术学院、漯河职业技术学院、焦作工贸职业学院和河南八六三软件股份有限公司参与编写。郑州信息科技职业学院赵恒、邹丽霞、邹香玲担任主编；郑州信息科技职业学院贾博文、鹤壁职业技术学院李苗在担任副主编；郑州信息科技职业学院尹立航、张欣宇、焦方方，漯河职业技术学院王鸿飞，焦作工贸职业学院郎沁争参与编写。具体编写分工如下：贾博文、邹香玲共同编写项目一，李苗在编写项目二，张欣宇、赵恒共同编写项目三，焦方方编写项目四，邹丽霞、邹香玲共同编写项目五，尹立航编写项目六，贾博文、邹丽霞共同编写项目七，王鸿飞、郎沁争负责案例的搜集和整理工作。编写成员既有教学经验丰富的一线教师，又有实践经验丰富的企业导师。本书的编写得到了院校和公司领导的大力支持，在此表示感谢。
       由于编者水平有限，书中难免存在不足之处，敬请读者批评和指正。
       编者
       2023年9月

？

项目一？认识Web前端开发 1
任务1.1？初识Web前端 3
任务1.2？安装IDE 7
任务1.3？熟悉开发流程与规范 12
拓展训练 17
项目小结 19
习题 19
项目二？Web前端页面结构搭建——好物商城网站首页页面结构搭建 20
任务2.1？学习HTML基础知识 23
任务2.2？探究HTML常用标签和Web标准 27
任务2.3？跟踪HTML5 37
任务2.4？搭建好物商城首页顶部功能区 42
任务2.5？搭建好物商城首页banner区域 44
任务2.6？搭建好物商城首页限时秒杀区域 46
任务2.7？搭建好物商城首页网站栏目区域 48
任务2.8？搭建好物商城首页底部区域 50
拓展训练 52
项目小结 53
习题 53
项目三？Web前端页面美化——好物商城网站页面美化 54
任务3.1？认识CSS3 56
任务3.2？实现好物商城网页公共样式 76
任务3.3？头部及导航区域美化 79
任务3.4？轮播快报区域美化 86
任务3.5？限时秒杀区域美化 91
任务3.6？网站栏目区域美化 95
任务3.7？网页底部区域美化 100
拓展训练 103
项目小结 103
习题 104
项目四？响应式Web页面移动端设计 105
任务4.1？了解视口 107
任务4.2？媒体查询 110
任务4.3？网页移动端设计 112
拓展训练 114
项目小结 115
习题 115
项目五？Web前端页面交互效果设计——好物商城网站首页交互效果设计 116
任务5.1？学习JavaScript基础知识 118
任务5.2？面向对象编程 131
任务5.3？导航菜单交互效果设计 143
任务5.4？banner广告区域交互效果设计 147
拓展训练 152
项目小结 154
习题 154
项目六？微信小程序开发——心灵方舟-大学生心理健康服务小程序 155
任务6.1？初识微信小程序 157
任务6.2？微信小程序开发环境搭建 162
任务6.3？心灵方舟小程序开发 170
任务6.4？心灵方舟小程序部署与上线 183
拓展训练 186
项目小结 186
习题 186
项目七？Web前端新技术 187
任务7.1？认识Web VR 189
任务7.2？认识数据大屏可视化 194
任务7.3？认识可视化网页构建器 201
任务7.4？认识人工智能建站 205
拓展训练 209
项目小结 209
习题 209
？

赵恒，副教授，研究方向为物联网应用技术。主授软件测试技术、操作系统原理、计算机组成原理等专业核心课程。荣获河南省优秀党务工作者、河南省教育厅学术技术带头人、河南省教育厅青年骨干教师等荣誉，主持多门省级精品在线开放课程和省级课程思政示范课程，参编教材4部，发表论文20余篇。
邹丽霞，副教授，研究方向为数据挖掘；主讲Web前端交互设计、网页设计与制作、HTML5应用、软件测试技术、数据库应用技术、数据结构、计算机网络等课程；研究成果，主持完成省级项目一项，作为主要完成人参与多项，主持完成厅级项目多项，发表论文多篇，获教育信息化成果奖多项。

邹香玲，讲师，研究方向为深度学习、图像处理；主讲软件测试技术、网页设计与制作、HTML5应用、数据库应用技术、程序设计基础等课程；主持完成省级项目多项，作为主要完成人参与多项，主持完成厅级项目多项，发表论文多篇；获教育信息化成果奖。



？

1．校企合作，突出实践。将企业一线真实项目引入教材，让学生体验从需求分析、界面设计、页面架构、页面美化到交互效果设计等完整的项目实践过程，实现理论与实践的有机融合。
2．融入课程思政。聚焦学生全面发展，结合时代发展需求，设计课后拓展训练模块中国古诗词欣赏网站，使学生在巩固训练的同时接受传统文化的熏陶，打造计算机专业课程“大思政”。
3．对接1+X证书。本书对接《1+X证书Web前端开发职业技能等级标准》证书，围绕岗位技能需求和职业教育改革要求，将《1+X证书 Web前端开发初级职业技能标准》融入教材，打造“岗课赛证”融通的学习资源。
4．配套资源丰富。本书包含项目案例资源、PPT课件、微视频等丰富的配套资源。

？