网站设计与开发（世界技能大赛项目转化系列教材）

前言
一、世界技能大赛网站设计与开发项目简介
世界技能大赛网站设计与开发项目的前身是“网站设计（Web Design）项目”，项目名称在 2017 年第 44 届世界技能大赛上变更为“网站设计与开发（Web Design and Development）项目”。由于本项目是随着互联网技术的产生和发展而创建的新兴比赛项目，直到 2003 年才首次以展示项目的形式出现在世赛中。网站设计与开发项目是指根据需求进行站点整体风格与布局设计，并根据设计的页面，在各种终端上实现各类页面样式、交互效果和相应功能的竞赛项目。
网站设计与开发项目比赛持续四天，每天完成 1—2 个任务，具体包括 CMS 系统开发、速度竞赛、PHP 和 JS 开发、前端开发和团队挑战等内容，累计比赛时间通常超过 20 小时。网站设计与开发项目基于真实工作环境和工作需求，设置的考查内容范围广泛。每届网站设计与开发项目的技术考核范围在保持三项核心能力的基础上，还要根据互联网技术的发展而变化。具体来说，本项目要求选手具备七方面能力，即工作组织与管理、沟通与人际交流、网站设计、网站重构布局、前端开发、后端开发、内容管理系统开发。在技术方面，选手要能熟练地进行网页风格设计、制作前端交互功能和动画，通过限定框架进行前端和后端功能开发、纯手工代码开发等。同时，选手要关注站点受众群体，进而让终完成的网站更受欢迎。此外，选手还需要处理好编
写代码过程中可能遇到的各种异常状况，妥善处理终作品与常用浏览器和软硬件之间的兼容性等方面的问题。
网站设计与开发项目非常注重考查选手的思维能力和综合实践能力，它对选手的技术操作、页面设计、逻辑分析、问题判断等方面的能力要求非常严格。这不仅体现了世界技能大赛关注现代信息社会发展的现实要求，还体现了世界技能大赛在战略上重视对人才综合能力的考查和评价。因此，在专业教学中引入网站设计与开发项目的技术要求和理念，基于校企合作，深度推进产教融合，以赛促教、以赛促学、以赛促用，对提升专业建设水平和人才培养高度具有显著的帮助，为培育网站技术全栈工程师及分支领域技术技能人才指明了方向。
二、教材转化路径
本项目组通过对网站设计与开发项目历届世赛考核内容和相关标准要求的深入分析和归纳总结，梳理整合了项目技能考核要素和技术文件中的世界技能标准细则。同时，围绕本项目中权重占比的四个领域技能——网站设计、网站重构布局、前端开发、后端开发进行教材的编制，并在其中穿插、融合项目其他通用能力的培养。
针对网站设计、网站重构布局、前端开发和后端开发，按照世赛标准和行业规范要求，结合我国现有的专业教学实际，将教材内容分为两个贯穿型项目，强调技能和素养的综合培育，以“工匠精神”的培育为核心，紧贴企业工作实际，精益求精地将各子项能力细则融入整个项目制作中。在网站设计、网站页面重构模块中，本教材通过引导学生为虚构的博物馆导览组织设计和制作官网，锻炼学生的页面设计和重构能力。在前端开发、后端开发模块中，本教材先根据世赛考核内容和实际行业中的项目开发情况，讲述后台 API 开发方法；接着基于开发的 API，继续完成前端与后端的数据绑定和交互效果，实现网站功能。
经历了两个项目的学习和训练后，学生可以理解世赛相关技能操作的要求，并掌握网站项目开发的能力。通过转化世赛理念和技术要求，进一步提升学生的专业素养和开阔学生的眼界，为学生成长为契合行业和企业需求的网站技术人员奠定坚实的基础。

本书为世界技能大赛规划教材之一，由上海市jiaowei教研室牵头主编。《网站设计与开发》根据世赛项目的内容，结合专业教学实际，确定了网站设计、网站页面重构布局、网站后端功能开发、网站前端脚本技术技术四大模块，设计了符合学生学习特点和教学规律的13个任务。在网站设计、网站页面重构模块中，本教材通过引导学生为虚构的博物馆导览组织设计和制作官网，锻炼学生的页面设计和重构能力。在前端开发、后端开发模块中，本教材先根据世赛考核内容和实际行业中的项目开发情况，讲述后台API 开发方法；接着基于开发的API，继续完成前端与后端的数据绑定和交互效果，实现网站功能。

本书为世界技能大赛规划教材之一，由上海市jiaowei教研室牵头主编。《网站设计与开发》根据世赛项目的内容，结合专业教学实际，确定了网站设计、网站页面重构布局、网站后端功能开发、网站前端脚本技术技术四大模块，设计了符合学生学习特点和教学规律的13个任务。在网站设计、网站页面重构模块中，本教材通过引导学生为虚构的博物馆导览组织设计和制作官网，锻炼学生的页面设计和重构能力。在前端开发、后端开发模块中，本教材先根据世赛考核内容和实际行业中的项目开发情况，讲述后台API 开发方法；接着基于开发的API，继续完成前端与后端的数据绑定和交互效果，实现网站功能。

葛睿， 上海信息技术学校副校长。高级教师，曾任上海信息技术学校信息技术系主任兼教学运行中心副主任，2015-2019年度上海市先进工作者。赵俊卿，上海信息技术学校信息技术系讲师。曾获上海市园丁奖、两次获得上海星光计划三星金牌指导教师、全国职业院校技能大赛金牌指导教师。曾任第41、42、43届世赛网站项目中国翻译，第43、44、45届世赛网站项目中国教练组长。任健，上海信息技术学校信息技术系主任。

模块一  网站设计
任务 1 网站风格指南基础设计 ………………………………… 3
任务 2 网站首页设计 …………………………………………… 13
任务 3 网站功能页设计 ………………………………………… 31
任务 4 响应式网站设计 ………………………………………… 44
模块二  网站页面重构
任务 1 基础网站制作 …………………………………………… 67
任务 2 页面结构和内容制作 …………………………………… 78
任务 3 页面动画和交互效果制作 ……………………………… 101
任务 4 响应式网站制作 ………………………………………… 111
模块三  网站后端功能开发
任务 1 使用 PHP 开发后端功能 ………………………………… 127
任务 2 MySQL 数据库操作……………………………………… 138
任务 3 网站 API 开发 …………………………………………… 150
模块四  网站前端脚本技术
任务 1 搭建 Node.js 前端开发环境 …………………………… 185
任务 2 使用 Vue 开发 Web 单页应用程序……………………… 196
附录 1 《网站设计与开发》职业能力结构 ……………………… 239
附录 2 API 参数详情列表 ……………………………………… 243

本书为世界技能大赛规划教材之一，由上海市jiaowei教研室牵头主编。《网站设计与开发》根据世赛项目的内容，结合专业教学实际，确定了网站设计、网站页面重构布局、网站后端功能开发、网站前端脚本技术技术四大模块，设计了符合学生学习特点和教学规律的13个任务。在网站设计、网站页面重构模块中，本教材通过引导学生为虚构的博物馆导览组织设计和制作官网，锻炼学生的页面设计和重构能力。在前端开发、后端开发模块中，本教材先根据世赛考核内容和实际行业中的项目开发情况，讲述后台API 开发方法；接着基于开发的API，继续完成前端与后端的数据绑定和交互效果，实现网站功能。

葛睿， 上海信息技术学校副校长。高级教师，曾任上海信息技术学校信息技术系主任兼教学运行中心副主任，2015-2019年度上海市先进工作者。赵俊卿，上海信息技术学校信息技术系讲师。曾获上海市园丁奖、两次获得上海星光计划三星金牌指导教师、全国职业院校技能大赛金牌指导教师。曾任第41、42、43届世赛网站项目中国翻译，第43、44、45届世赛网站项目中国教练组长。任健，上海信息技术学校信息技术系主任。