基于企业项目实践的Web前端设计课程教学改革探索

章懿雯 陶硕

摘要：随着互联网的不断发展，Web前端开发的人才需求比以前有了质的飞跃。针对当前高职Web前端开发课程普遍存在的教学内容脱离岗位实际、教学方式不够丰富立体、学生学习效果参差不齐等问题，论文以真实企业项目公益网站开发为例展开课程教学改革和探索，通过校企合作引入Web开发工作流程，紧贴实际开展情景化教学，动态实施差异化教学和多元化评价，取得了良好的教学实践效果，为Web前端开发课程下一步改革和发展提供了有益的探索。

关键词： Web前端设计；企业项目实践；教学改革；校企合作

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2022）29-0165-00

1 引言

2019年1月國务院在《国家职业教育改革实施方案》[1]中指出：按照专业设置与产业需求对接、课程内容与职业标准对接、教学过程与生产过程对接的要求，完善中高等职业学校设置标准，规范职业院校设置。同年4月，教育部等四部门印发《关于在院校实施“学历证书+若干职业技能等级证书”制度试点方案》[2]，在5个领域遴选确定参与首批试点的职业技能等级证书，其中包括Web前端开发职业技能等级证书。

2 教学概况

Web前端设计课程是计算机应用技术专业核心课程，课程标准对接国家“1+X” Web前端开发职业技能标准（初级），包含Web开发岗位的两大核心要素：HTML5和CSS3，学生学习后可利用HTML、CSS等专业知识将产品UI设计稿实现成网站。本课程为专业培养目标中的“网络应用开发”奠定基础，并与PHP动态网站开发、JavaScript技术等课程相结合，培养网站设计与管理方向高素质技能人才。

随着现代信息技术的发展和职业教育的新要求，马鞍山职业技术学院开设的“Web前端设计”课程在教学中也暴露出一些问题：

一是课程内容设置上，教师多半依据自身对Web前端开发就业方向的理解和对学生学情的把握，自行设计和编排课程，课程内容多以课程的知识体系和章节顺序进行，导致教学内容脱离Web前端类岗位的实际需求；二是教学课堂上，学生多以独立实验为主，缺乏实际Web前端开发项目经验和团队工作意识，与实际岗位素质要求相差较远，不符合职业教育的培养要求，直接影响人才培养质量；三是教学目标设置上，教师过往采取统一目标，但实际学生之间知识、技能、素质不一，总有同学难以达成课堂目标。

3 基于企业项目实践的课程教学与改革

目前，Web前端开发技术已融入人们生活的方方面面。如何培养学生实践能力，使学生能够学以致用，是本课程教学改革的关键所在。针对上述问题，笔者对课程实施了有效的教学改革：

（1） 对接“Web前端开发职业技能等级标准”修订Web前端设计课程标准，梳理课程教学内容和知识体系，通过企业实际案例设置以行动导向的模块化课程；

（2） 对接Web前端开发职业技能等级证书考试大纲，实施课证融通；

（3） 采用企业项目化教学模式[3]，通过项目分析、讨论、实施及相关知识点学习，让师生共同参与到项目任务中；

（4） 实施分层分组教学，弹性设置教学目标。

3.1具体实践方案

按照Web前端开发工程师职业能力[4]要求，依据课程标准制定工作任务，下面笔者以为企业制作公益网站“关爱老人”项目为例，组织学生学习Web前端开发职业技能标准中对应的“网页布局与美化”，以岗位标准化工作流程组织教学，如图1。

3.1.1教学内容设计

本课程开始前，学生经过前期学习，已具备 HTML5+CSS3 代码编写能力，大致熟悉网站项目开发流程，具有一定团队协 作能力，但缺乏实际应用能力，设计制作的作品与用户需求有一定距离。笔者在教学内容设置上，根据学生的认知特点和知识点的递进关系，将网页布局与定位项目分解为四个典型工作任务[5]（见图2），引导学生使用CSS设计网页样式、美化网页样式、使用盒子模型等，按照实际项目开发流程，遵循软件需求分析到验收完成生命周期的规范，培养学生项目开发的能力。

3.1.2教学流程

教学流程上，笔者采取线上线下相结合的方式，按照网站制作的标准工作流程展开教学实践。教师在线发布任务书并答疑解惑，学生学习新知后结成小组，各小组自行讨论项目实施方案并合理分配任务，共同协作完成任务。

下面是四个任务的具体展开流程：

任务一“新闻动态”页面制作：课前教师发放项目任务书[6]，下发客户需求说明书，学生利用MOOC预习float属性。课中，师生利用思维导图共同安排项目任务流程，同时学生在企业导师的帮助下完成页面效果图。教师确认最终页面效果图，上传项目验收清单，下发本次课程任务清单，之后学生进行项目实践，教师根据制作过程中问题对相关知识点进行讲解，安排相关实验，强化训练。

任务二“健康管理”页面制作：学生课前MOOC复习float属性，实现多列布局并进行自测，教师根据学生学习情况，调整教学策略。课中，使用头脑风暴组织展开多列布局实现方法的讨论，安排相关实验，强化实训。之后各组接受项目任务，完成“健康管理”页面制作，最后分享、互评。课后，教师发布拓展任务，制作一个两列布局的页面。

任务三“需求大厅”页面制作：学生课前MOOC预习定位属性。课中，小组讨论确定结构，教师让学生利用自主设计的定位游戏来实现案例页面布局效果，从而掌握课程难点——绝对定位的使用。之后各小组自行进行项目实践，分享并点评作品。课后，复习巩固，完成自测，并完成下节课程的预习任务。

任务四“关爱老人”页面制作：发布任务清单，小组分配任务，学生自行制作关爱老人首页。任务完成后，由老师和企业导师引导对作品进行“冒烟”测试与完善，并根据项目验收表对项目进行验收并整理相关文档。

课堂中以“关爱老人”公益网站项目来开展教学，教师扮演业务经理[4]，指导学生项目实施；学生分成各项目小组，每组组长任项目经理，成员自主选择相匹配的任务。项目完成后，教师、企业导师、学生共同来完成项目作品评价。这种沉浸式角色扮演的项目教学让学生真正成为课堂中的主人，在项目实施过程中掌握实际技能并熟悉Web前端开发实际工作流程。

3.2  教学反思

3.2.1 建设情境化教学案例库，探索实施差异化教学、差异化辅导

学生在学习该门课程之前对于前端知识的了解程度不一，每个学生的学习能力也不同，因此笔者对于Web前端设计课程采取情景化教学模式，在教学内容上分层次设计情境教学案例。学生在自主设计网站作品时，允许他们根据自身接受能力和学习进度自主选择相应的案例进行学习和再创作，使得不同基础和能力的学生都能够学到知识，提高能力。教学实施过程中采取教师和由学生自发组成的辅导小组相结合的方式来帮助解决课堂问题，以形成良好的教学氛围，提高教学效率。

3.2.2探索多元化的校企合作模式，引入Web开发工作流程

作为计算机前端专业课教师要不间断接受企业培训，个人具备的专业技能要符合社会企业需求，教师个人技能及时更新，才能保证教学内容实时更新。同时企业要主动参与到教育中，校企深度融合。企业中对接专业教学的负责人将工作目标与学生实践相融合，以企业项目或者企业面向社会发展设立的新项目，将其分化出一部分作为学生需要完成的学业考察部分作为教学项目，对于学生自主学习前端知识有积极的作用。因此教师要积极探索实现校企合作模式的多元化[7]，企业提供实习基地、设备，参与教学计划制定，并指派专业人员参与课程教学。通过校企合作，引入实际Web开发案例，以企业标准制定工作流程，从需求分析、项目管理、架构设计、具体开发、后期测试等环节实施项目化教学，让教学过程更能贴近实际工作情景，提升学生前端实际开发的能力。

3.2.3多元评价体现教学效果

对于学生采取更为灵活的学分管理，理论与实践合理分配，同时在评价方式上可以让多种方式，校企双方共同检验学生的学习成效，例如课堂实践，教师评价，企业教师评价，小组评价等多种方式，综合评定教学效果，反映学生专业技能水平。同时鼓励学生申报前端工程师技能等级证书考核，重点突出对学生职业能力，职业情感与综合素质的培养与提升，考试不局限于课堂，毕业以后获得学历和职业能力双证的毕业生比普通高等职业教育毕业的学生更受青睐，更受企业和社会大众欢迎。

4 结语

教师根据标准Web前端开发工程师工作流程组织教学过程，学生通过角色扮演沉浸式学习，分组协作共同探究，这种教学模式可有效提升学生的岗位操作能力、合作能力。以制作網站任务驱动和小组协作方式展开课堂教学，允许学生选择学习方法和任务，使得课堂中人人有事可做，学生成为主角，教师只从旁指导，大大激发了学生学习积极性和实践主动性。同时设置弹性学习目标，引导学生对作品进行不断改进和完善，可培养学生精益求精的工匠精神。目前学生制作的多个公益网站已部署试运行。

以上实践证明，整合校企资源、利用企业项目实践教学改革这条道路，有力促进了高职前端设计人才职业技能的培养，同时也丰富了职业教育的教学手段，提升了教学效果，将成为高职职业教育改革发展的主要方向。

参考文献：

[1] 任怡平.新时期我国职业教育改革的应然转变与发展指向——基于《国家职业教育改革实施方案》的背景[J].成人教育，2020，40（10）：59-64.

[2] 李德平.1+X证书制度下Web前端开发职业技能等级考证试点的研究与实践[J].北京工业职业技术学院学报，2021，20（1）：36-40.

[3] 王健庆.项目式计算机实践教学研究[J].福建电脑，2021，37（1）：109-111.

[4] 戴勇，张铮，郭琼.职业院校实施1+X证书制度的思路与举措[J].中国职业技术教育，2019（10）：29-32.

[5] 王婷.《前端开发框架》课程项目式教学的改革与实践[J].数码世界，2020（8）：135-136.

[6] 刘德阳，刘奎，王广军.Web前端开发课程项目化教学改革与实践[J].智库时代，2019（36）：181-182.

[7] 张洪海.Web前端技术在教学应用中改革创新[J].电脑知识与技术，2018，14（18）：112-113.

【通联编辑：王力】