纪怀猛 赵妍 张海歆

摘 要：针对传统教学的弊端，以HTML5技术与应用课程为例，从教学模式、教学方法和评价体系三个方面进行“以学生为中心”的改革探索。数据表明，该教学模式能充分调动学生学习的主动性与积极性，取得较好的教学效果。

关键词：新工科;教学模式;以学生为中心;HTML5技术与应用;项目式

中图分类号：G642 文献标识码：A DOI：10.3969/j.issn.1003-6970.2021.03.007

本文著录格式：纪怀猛，赵妍，张海歆.以学生为中心的教学模式与教学方法改革探索——以《HTML5技術与应用》课程为例[J].软件，2021，42（03）：026-028

The Reform of Student-centered Teaching Mode and Teaching Method： A Case Study of "HTML5 Technology and Application" Course

JI Huaimeng， ZHAO Yan， ZHANG Haixin

（ College of Artificial Intelligence， Yango University ， Fuzhou  Fujian  350015）

【Abstract】：Aiming at the disadvantages of traditional teaching， this paper explores the "student-centered" reform from four aspects： teaching mode and teaching method， online and offline mixed teaching， dual teachers in the classroom and evaluation system.Data show that this teaching mode can fully mobilize students initiative and enthusiasm in learning， and achieve good teaching results.

【Key words】：new engineering;teaching mode;student-centered;HTML5 technology and applications;project type

0 引言

随着科学技术的进步和我国素质教育的发展，我国高等教育已经从发展的阶段逐步进入了提高质量阶段，“以学生为中心”的教育理念[1]也受到了中国教育界专家和学者的关注。国内许多学者对此进行了非常深入的探索，如钟登华院士提出，要加快制定适应工科学生终身发展和社会需要的核心素养体系和学业标准体系[2]，完善学生、老师、雇主、校友等共同参与的“以学生为中心”学生培养质量持续改进体系。曹艳春等人从学生在课堂的积极性、教师在课堂中的作用、学生在课堂中对于知识的吸收情况及学生对课堂教育模式的认知等方面做了详尽的调查[3]。左青卉等人从教学内容、教学方法和评价体系三个方面进行了探索和实践[4]。黄蓉曾对研究和探索闯关式的翻转课堂教学方法[5]等。

近年来，HTML5 Web前端开发在产品开发环节中的作用变得越来越重要，我校计算机类专业在大三上学期开设该课程，由于该课程既有知识面比较广，又有实践性强的特点，仅仅通过教师的课堂讲授和练习就能完成创新型人才培养目标是不切实际的。因此在HTML5技术与应用课程教学中进行教学模式和方法改革就显得尤为迫切和重要。

1 《HTML5技术与应用》课程教学现状分析

传统的教学模式是“以教材为中心、以教师为中心”的教学，本质是以教师为中心、以传递书本知识为核心，重“教”轻“学”的教学模式。

（1）传统《HTML5技术与应用》课堂教学常以教材为中心。教师根据开课之前选定的教材，但有些老师仅仅为了备课和教学的方便，选用的教材多年不变，完全不顾技术的更新，这就会造成教学内容与实际应用技术的脱节，严重打击了学生的学习积极性。

（2）传统的《HTML5技术与应用》课堂教学过程中常以教师为中心。将学生视为信息的被动接受者，教师在讲课时为顾及到大多数学生的接受能力，常常重视课程基本概念、知识和技术的讲解，虽以课程案例的方式进行课堂教学，但缺乏对课程整体的理解和完整系统开发过程的实战演练。

但是，《HTML5技术与应用》课程是一门实践性和工程性很强的Web前端开发课程，采用以教师为中心的传统灌输式教学，因为没有注重引导学生思考、理解相关的知识点，往往会造成学生仅从字面含义死记硬背的现象，不仅难以达到培养学生工程意识的教学目的，而且无法激发学生的学习兴趣，使学生感觉理论知识枯燥无味、甚至厌烦上理论课，更会严重打击优秀学生的创新激情，因此，我们进行了“以教师为中心”转换成“以学生为中心”的教学模式和教学方法改革。

2“以学生为中心”的教学模式与教学方法改革探索

（1）教师角色由单纯的“讲师”转变为“导师”。脑科学研究表明，大脑的发展遵循“用进废退”原则，挑战可以激发学生的潜能和学习动力。因此，“以学生为中心”教学模式的教学设计中，教师在授课时要给学生留出实践的探索空间，留出需要进一步探究的问题，让学生在听课的基础上，进一步思考、讨论和实践，从而实现教师角色由单纯的“讲授者”演变为“导师”， 实现学生在听讲基础上的思考和讨论，并展开项目开发实践。

（2）教学环节设计由“教师如何教”转变为“学生如何学”。在教学设计环节中，“教师如何教”与“学生如何学”是两个紧密联系又有重要区别的两个问题。因此，“以学生为中心”的教学模式要求教师充分了解学生，从关注如何教，转变为从学生理性发展的需要出发，引导学生有效学习。因此“以学生为中心”教学模式通过多重教学环节设计，组织学生分成多个团队，将每个模块要完成中的设计任务分给每个团队独立完成，学生们以团队为单位进行知识学习，讨论解决问题的方法以及解决问题的最终方案，课堂上让学生到讲台进行成果展示，然后根据学生设计过程中出现的问题进行有针对性的讲解，从而培养学生“会学、会做、会讲”，并通过“学、做、讲”三个环节实现学生的和有效学习。

（3）学生角色由“教学对象”转化为“教学主体”。大学教学是帮助学生在头脑中构建特定的专业认知模型，“学”是指学生在自己头脑中构建认知模型，“教”是指老师帮助学生构建专业认知模型，而且，只能由学生构建自己的专业认知模型，别人无法代替。因此，“以学生为中心”的教学模式，应该让学生成为教与学的主体，把学习的责任归还给学生，并且设计一系列活动让学生动起来，通过活动促进学生的有效学习。

3“以学生为中心”教学模式在《HTML5技术与应用》课程中的实施

3.1“线上线下”混合教学模式改革

为了节约课堂教学时间和更好地激发学生的学習积极性和探索热情，我们利用超星学习通平台在线上扩充课堂知识。每次课前2～3d，我们把需要学生学习的知识点内容发布到平台上，并根据课堂教学进度发布一些练习素材、案例、课堂小测和作业。这样既可以让学生提前预习课堂内容，又可以让学生及时提交在线作业，提高作业批改的效率和及时性。如果学生对要学习的知识点有任何疑惑都可以在线咨询老师，但我们建议将问题发布在评论区里，同学们都可以解答，看到问题后能解答的同学可以直接进行解答，对于同学们解答不了或者没有及时解答的，教师会及时解答，进一步促进了学生间和师生间的学习交流。这样经过线上的学习和交流，同学们对本次课要学习知识点基本都已掌握，在课堂的教学时，就可以将更多的时间分配给小组讨论、代码设计、成果展示和点评环节，更好地开展以成果导向的课堂教学了。

3.2基于OBE教学理念的教学模式探索

课程采用了从入门到实战的项目案例开发式教材，由深入浅出地介绍Web前端设计技术的基础知识，分为HTML5、CSS3和JavaScript三大模块探讨HTML5 Web前端设计的基本规律，教材注重基础知识、结合整体项目模块的设计分析，易于学生理解和接受。同时，任课教师还向学生推荐一些比较经典的国外教材和比较好的案例资源，加深和拓宽学生的知识面。

在课程的第一次课上，我们首先展示上届学生设计的一些优秀案例，先不做任何评论，让同学们投票评出认为最好的作品，然后讲述该作品的网站构成、页面的布局结构和用到的模块知识。以此引出课程教学的主要知识模块、学时分布、要学习的特效，强调课程期末考核的要求等内容，并特别强调不只是期末作品考核，而是对整个学习过程进行考核。

对每次课的教学，我们采用了“成果展示+知识讲授+案例实现+探索提高”的模式。先展示设计好的案例吸引学生的注意力和学习兴趣;然后介绍本次课的教学知识点，对案例中用的重要知识点进行重点介绍;接着带领学生进行案例实现，对设计过程中比较难理解的地方重点强调;案例实现完以后给学生留2～3分钟的时间按学习小组进行讨论，重点讨论该案例还可用哪种方法实现，或者在哪些地方还存在设计上可改进的地方，再用3～5分钟的时间进行小组发言抢答交流，最后老师做适当的点评。例如在进行表单验证部分的教学时，先给学生展示完成的案例，让学生看到确实可以对不正确的输入进行验证的效果，然后开始讲解本次课的知识点，重点介绍正则表达式的构成和规则。在案例实现时先带领学生在HTML5的Input标签中直接构造表达式的方式实现这个案例，然后以“你认为这种方式完美吗？如果不完美，还有其它方法可以实现表单验证吗？”为题开展小组讨论。讨论完成后，让各小组的代表进行抢答式发言（代表可以每次课轮流，以锻炼所有同学的表达能力）。最后，老师在学生发言的基础上进行简单总结，引导学生完成在JavaScript代码中完成正则表达式的构建和相应的代码修改，接着再抛出“HTML5已经能在行内实现Email验证了，但是我们不仅要知其然，而且要知其所以然，如果让你在JavaScript代码中实现，应该注意哪些问题呢？”再次展开小组讨论，然后进行小组代表发言，在代表发言的基础上总结出Email表单验证需要解决只能有1个‘@、1个‘.，且这两个字符的前后至少要有1个其它字符的问题，让学生们带着这些建议去编写代码并验证代码的正确性。在用HTML5及相关技术进行前端开发中还有很多非常有趣和挑战性的案例，我们在课堂教学中根据案例的难以程度和花费时间的多少进行不同的区分，对能在课堂中完成的就直接实现，对一些难度较大需要花费较多时间的案例，在课堂上会给出适当的思路，推荐学生在课下查找相关资料，结合自己的实际能力进行学习。

3.3“双师同堂”教学模式的探索

除了常规的教学模式外，为了使教学更加贴近公司生产实际，我们还特别安排4～6学时的“双师同堂”教学，将企业技术骨干引进课堂，让他从企业的角度结合本次课的教学内容讲解这部分内容在企业生产中时怎样设计实现、怎样迭代、优化修改的，然后指导学生进行实现。借助“双师同堂”的教学，让学生有机会在课堂中与企业技术骨干进行面对面的学习交流，了解企业生产的工作模式，极大提高了学生的学习兴趣和积极性。

3.4 评价体系的改革探索

此项改革在我校计算机科学与技术专业2018级的学生中开展实践，考核时由平台上导出在线视频学习、课堂小测、作业、评论、签到等数据作为平时成绩、对学生期末作品的考核，我们以小组为单位进行考核，考核小组由二位任课教师和一位企业技术骨干组成，从整体规划、代码设计和新颖性等三个方面上进行打分，再由小组间互评得出本设计的互评分数，再按照总成绩=平时成绩×40%+答辩成绩×50%+互评成绩×10%的公式求出该小组的总体成绩，进一步结合各成员的贡献度得出每位同学的期末成绩。该年级的平均分比前一年级提升了11.9%，由74.94分增加到83.83分，答辩老师对本次考核的总体评价是学生的团队协作能力和项目开发能力比上一年级有了较大的提升。

4 结语

以“学生为中心”的教学模式和教学方法从根本上改变了传统的“以教师为主导”知识灌输式教学模式，本文以“HTML5技术与应用”课程为例，开展“以学生为中心”教学模式设计与教学方法改革实践，充分调动了学生学习的积极性和主动性，提高了学生对课程教学的满意度。但是，我们也同时看到，该课程教学模式距离“让学生真正地成为课堂教学主导者”的目标还较遥远，在实现目标的过程中还需要我们不断地进行探索和完善。

参考文献

[1] 赵炬明.打开黑箱：学习与发展的科学基础：美国“以学生为中心”的本科教学改革研究之二[J].高等工程教育研究，2017 （3）：31-52.

[2] 钟登华. 新工科建设的内涵与行动[J].高等工程教育研究， 2017（3）：1-6.

[3] 曹艳春，郑泽爽.基于学生为中心的教学模式改革研究[J].集宁师范学院学报，2019（5）：88-94.

[4] 左青卉，韩东来，司振君.以学生为中心教学模式在课堂教学中的探索：以“有机电致发光材料与技术”课程为例[J].教育教学论坛，2017（38）：196-198.

[5] 黄蓉.基于闯关式的翻转课堂教学方法的研究与实践：以《Web前端技术》课程为例[J].教育教学论坛，2017（12）：164-165.