“Web前端开发”混合教学模式探索与实践

摘要：本文探索了线上线下混合教学模式，并以“Web前端开发”课程为例，从课程资源建设、教学方式、实验与实训及考核四个方面进行线上线下融合改革，以期能够提升学生学习的参与感与成就感。

关键词：Web前端开发;混合式教学;教学内容;教学方式;实践

中图分类号：G717  文献标识码：A  论文编号：1674-2117（2021）22-0104-05

随着互联网技术的发展，Web开发分工越来越细，出现了Web前端开发、移动开发、后端开发等岗位，它们分工明确且紧密配合。从当前互联网公司的就职要求来看，除了必须掌握HTML5、CSS3和JavaScript等的基础技能外，还需要熟悉vue、react等前端框架，熟悉后台管理系统的开发全流程。针对Web前端开发人才的需求，笔者所在学院计算机科学与技术专业开设了“Web前端开发”课程，但课程内容总体比较滞后，教学方法比较单一，因此，笔者结合自身的教学实践，提出了线上线下混合式教学模式，从课程的教学内容、教学方法、课程实践、课程考核方式四个方面进行改革与实践，以提升学生的学习兴趣和动手能力。[1]

● 课程设计

1.教学中引入思政元素

立德树人是永恒的主题，教师需在教学中加入思政元素，如前端技术涉及界面设计，可以美育先行;一种界面效果有多种实现方法，需要培养学生多角度思考和分析问题的能力;代码的设计与调试过程需要培养学生的工匠精神，注入家国情怀，培养正确的世界观、人生观、价值观以及勇于挑战困难的精神。[2]

2.教学内容改革

Web前端开发技术所包含的内容较多，目前主要以HTML+CSS+JavaScript为基础课程，其知识面相对较广，因而教学设计需要注重整体性，让学生掌握多方面的知识，从而取得较好的教学质量。同时，基于混合式的教学模式，建设多层次可扩展的教学资源库尤其重要。教学资源包括教学课件、上机指导手册、实验库、案例库、试题库、项目库、教学视频等，这些资源又分为基础知识和提高知识。根据学生的不同基础，逐级提高学生的水平。需要注意的是，课程内容要与时俱进、由浅入深，可以考虑将主流Web前端开发技术引入课堂，要求学生至少掌握一种前端框架的使用方法，重点培养学生的实践应用、规范代码编写等能力。[3]

3.教学方式的改革

（1）课前充分预习

课前学生通过视频教程、PPT了解学习目标，知道学习任务，记录不懂的问题，写下学习心得。教师端可以通过雨课堂记录学生出勤情况，还可通过在线习题，了解学生自学后的知识掌握情况。

（2）课中交流讨论

课中是对学生预习的检验，教师提前审阅学生的心得体会，收集问题，并把学生不理解的内容在课堂上讨论解决。教师可针对典型问题提出最基本的解决方案，然后由学生讨论，找到最佳解决方案。尤其在项目实践过程中，定期开展交流活动，将编码中典型的错误或学生都困惑的知识点，通过界面效果、代码展示开展编程思路讨论，为学生创造相互学习和交流的机会。

（3）课中问题启发

启发式教学是教师经常使用的教学方法之一，即由教师提出问题引导学生思考，问题要具备典型性和实际性。例如，在Web前端开发中，教师展示表单的应用场景，如去银行柜台填写开卡申请单，填写网站注册信息等，再提出问题“如何在网页中实现表单？”，并以各大网站的登录页面为例，引出页面中的控件、表单的命名、数据传送方式等知识点。由此可见，与实际相关联的知识，可以让学习服务于实际应用，从应用角度出发学习知识，学生也更有兴趣。[4]

（4）课中案例讲解

Web开发离不开对各种案例的讲解，案例教学可引导学生将知识转变为能力。案例的设置要具有典型性和通用性，突出知识的重点和知识的应用。例如，在讲解JavaScript语法时，教师可以给出带有错误的完整代码，要求学生找出错误，引导学生注意语法细节。又如，导航栏是现在的主流网站都具有的功能，学生拿到案例后，先要进行分析，再经过小组讨论，提出解决问题的方案。教师再根据学生不同的理解，通过案例分析、知识点的分解、动画演示等一系列方法，消除学生的疑惑，让学生掌握Web前端开发相关技术，这样才能将知识内化，提升学习效率。

（5）课中原理剖析

教学中，教师围绕问题要点解析背后原理，并在讲解JavaScript中的变量时引出问题：直接输出一个a的值，为什么会出错？如果后面再用var来声明变量a，为什么没有出错？在学生讨论之后再讲解JavaScript引擎的工作机制。在进行原理讲解前，教师可以使用程序编辑器现场展示具体操作过程及相关代码运行后的具体效果。需要注意的是，在进行原理讲解的过程中，需要与提出的问题高度关联，结合所提出问题的具体情况进行教学，分步骤讲解，最后还需要进行知识的归纳总结，给出参考代码等辅助学生的后续实践操作。

（6）课后在线作业答疑及成果展示

教师通过雨课堂可查看课后作业，客观题可以要求学生在线回答提交，程序题可将源代码或截图发布到班级QQ群。另外，学生遇到的问题也可通过雨课堂提出评论反馈，或通过QQ群、微信群等即时通信工具进行交流和答疑。最后，把每次作业中的优秀作品放到教学平台上展示，方便学生浏览学习，提升学生的成就感。

4.实验与实训改革

“Web前端开发”课程的实践性非常强，学生需要通过写代码，调试代码，不断地总结才能获取技术的积累。但学院里规定这门课程的上机课仅16课时，学生要在短时间内做到熟练开发项目是有难度，鉴于学生动手能力参差不齐、个人的就业方向不同等因素，笔者采取了因材施教的方式开展实践教学。

（1）课内实验

从培养学生基本动手能力的角度出发，实验设置由易到难，以下要求是每个学生都必须达到的：①能看懂课件、教材中的示例代码;②分析以上示例代码，明白代码设计的逻辑性，参照所给示例代码上机调试;③独立思考完成单一效果的编码工作，如导航栏;④用不同的方式实现这单一效果，如同一个布局效果，可以用表格展示，也可以用Div+CSS布局来展示商品信息，又如輪播图可以用CSS实现，也可以用JavaScript实现，进而达到训练学生不同角度思考问题和解决问题的能力;⑤完成一个复杂的效果，如用Javascript操作DOM在前端进行增删改，在交互编程训练中培养学生的编程思维;⑥模拟现实作品的实验，将现实中网站的网页截图，先引导学生分析页面结构——如何用盒子模型及定位进行页面整体布局、每个盒子中用到哪些样式整个页面有响应事件、有哪些交互的效果，并按照分析的结果自己写页面代码，完成后再参照其源码，通过代码对比，分析哪部分可以用不同的方法来实现，哪些地方原版的设计更好或自己的代码比原版的更好，在前端开发学习前期鼓励学生模仿优秀的作品，实现创作、吸收、改进、创新;⑦模拟现实问题的实验，如需要开发一个学生管理系统，给出功能列表，鼓励学生先做出初型框架，然后循序渐进，逐步完善样式和交互部分，在完善的过程中，依次加入任务的难度和复杂度，训练学生调试和查错的能力，使其在完善任务的过程中掌握所学的知识，提升学生Web前端开发技术动手能力。

模拟现实问题的实验，学生除了要提交源码，还需要提交书面形式的问题描述、解决方法及编码时的心得体会。教师可要求对学生进行答辩，让学生尝试分解复杂问题，然后寻找方法解决。教师从界面设计的合理性和代码编写的逻辑性方面来进行作业点评。

（2）实验室训练营

学院实验室利用平时或寒暑假时间开设训练营，根据学生的基础课程成绩及训练营的笔试、面试结果，选拔优秀本科生入营。学院将课程分为不同的等级（如表1），对课内所学的基础知识进行拓展和延伸。实验室有专业的教师开展培训讲座、重点竞赛指导等，还会有一些前沿的项目或实际的工程实践课题。在训练营中，学生自由组合并推选组长，在项目实践过程中，组长主要负责组内各类学习事务安排、学习检查、实验考核等工作。在合作过程中，组长相当于项目经理，负责项目分工及进度跟踪汇报等工作，这样能模拟企业的项目开发，加深学生对专业知识的理解和巩固，激发学生利用学到的知识解决实际问题。

（3）以赛促学

学院重视为学生参加各类比赛的机会，促使学生通过参赛发现自己知识储备的不足，进而不断完善，这样既巩固了基础知识又拓展了前沿技术。另外，依照比赛的等级及获奖级别和名次，给予学生对应的奖金和创新学分，使学生更有成就感。

（4）校外实训

学校的上机实验任务设置相对比较简单，学生所学与企业所需略微有些脱节。因此，学院里开设了为期2周的企业实训课，让学生走进企业，了解当前最新的技术，跟着实践经验丰富的技术人员学习，这样就培养了学生发现问题和分析问题的能力。校企合作有利于把企业先进技术和学校理论相结合，实现全方位协同育人的实践平台，使学生毕业后能尽快融入工作中，胜任行业发展需求。[5]

● 考核改革

课程传统的考核方式是平时成绩+期末成绩，但在混合式教学模式中，这种评价体系显然是片面的。因此，需要改革考核方式，保证合理且公平地反映学生各方面的学习情况。考核方式直接作用于教学效果，教师通过考核发现问题，在此基础上改进、优化教学方式，不断提升学习效率和质量，这是一个良性发展的过程。

笔者对原有考核内容进行了修改（如表2），考核成绩主要分为四大块，即平时成绩+企业实训+期末大作业+竞赛附加分，平时成绩又分为课前、课中、课后及过程性考核四个方面。期末大作业会提前2周发布题目及详细功能要求，学生可以自由结合成小组（不超过3人）。个人和小组均需在规定的时间内完成项目要求的所有功能，个人完成项目以项目分数为个人最终成绩，小组共同完成项目用小组平均分作为个人基础分，根据贡献程度的不同确定权重，基础分和加权分之和为个人最终成绩。实验室训练营是为感兴趣的学生进行延伸拓展服务的，为他们参加竞赛奠定了技术基础，这里实验室训练营不作为考核项，而将竞赛获奖作为一个加分项。[6]

● 教学效果

“Web前端开发”课程混合式教学实施对象是笔者所在学院计算机科学与技术专业20190231的学生，与计算机科学与技术专业20180231采用传统教学方法进行对比，平均成绩总体提高5.9%，不及格率为0，教学效果明显。混合式教学模式更能督促学生努力学习。

● 结语

混合式教学给学生提供了更多的线上交流机会，需要学生提前预习相关知识、思考页面实现方法、准备交流的问题和资料，学生的学习主动性和积极性明显提高。在解决问题和技术交流的过程中，学生对Web页面开发知识掌握得更加准确、扎实、系统化。混合式教学给学生留出了更多的自我思考和实际操作时间，小组合作方式更好地模拟了企业中Web网站开发的工作流程和环境。企业实训、实验室训练营及竞赛提前做了职业分流，让毕业后有志于从事Web开发的学生提前了解了公司的工作环境、Web开发流程、所需要的知识技能，锻炼了他们的合作能力，提高了他们的自学能力和解决问题能力，为以后的正式工作打下了良好的基础。

参考文献：

[1]刘竞遥，陈一笑，赵欢欢，等.基于泛雅平台的Web前端开发技术课程混合教学模式的分析[J]，辽宁科技学院学报，2019，21（06）：47-48，40.

[2]张芳，邹俊.后MOOC时代SPOC线上线下混合教学模式的实践与探索[J].湖北经济学院学报：人文社会科学版，2018，15（11）：148-151.

[3]刘雅君，袁婷，谢国，等.新工科背景下《Web前端开发技术》的PBL教学改革与实践[J].電脑知识与技术，2021，17（07）：127-128.

[4]王毅，张沪寅，黄建忠，等.基于“四类型六环节”实验教学体系建设物联网工程专业实验案例库[J].实验技术与管理，2019，36（07）：174-178.

[5]刘渝妍，何俊，王亚宁，等.校企协同育人模式探索与实践[J].福建电脑，2021，37（02）：37-41.

[6]刘雅君，李爱民，谢国，等.延期返校背景下编程实践类课程考核工作改革和实践——以Web 前端开发技术课程为例[J].计算机教育，2021（02）：9-12.

作者简介：黄欢（1982.12—），女，助教，主要研究方向为模式识别与智能控制。