本栏目责任编辑：王力
计算机教学与教育信息化
基于创新能力培养的高职Web 前端课程教学改革探索
徐好芹，韩慧杰
（洛阳科技职业学院，河南洛阳471000）
摘要：随着互联网技术的不断更新，Web 前端课程越来越受欢迎。结合高职院校学生特点，探索了基于创新能力培养的
Web 前端课堂教学改革思路，主要分析了创新教学内容，教学模式、教学方法，创新教学环节，创新能力教师和教学反馈几个关键因素，结合教学实践，进行对比分析，这种教学改革思路有利于激发学生学习兴趣，培养学生创新能力。关键词：创新能力；Web 前端；教学改革中图分类号：G642
文献标识码：A
文章编号：1009-3044（2021）02-0086-03
开放科学（资源服务）标识码（OSID ）：
受互联网快速发展的冲击，近几年Web 前端技术发展迅速，前端工程师岗位火热并相对紧缺，受教育部地方高校转型发展的号召，高校课程建设紧跟社会需求，并在不断进行积极调整，Web 前端课程也逐渐纳入专业课程体系，但是许多高校教学内容仍然相对落后，学生在校只是掌握了一些基础的知识，核心知识比较薄弱，不重视代码规范，基础性的原理理解不深刻，导致学生毕业后不能灵活应用，无法设计出好的前端作品。
高职院校开设Web 前端课程相对较晚，课程体系设置不够合理，对口的专业教师不足，授课教师前端经验较弱，再加上人才培养方案里面课时受限、教师对教学要求较低等各种因素的影响，高职学生在校学习到的前端知识，主要是学会了一些基本的HTML 标签，基础的CSS 样式，再加上些许的JavaScript 知识，只能做出相对比较容易的前端页面，而且做出的页面效果比较粗糙简单，存在代码不规范、页面不完整、细节问题较多等问题。
另外，高职学生虽然基础相对薄弱，惰性较大，自主学习能力相对不高，但是高职学生性格相对比较活跃，心智也已经相对成熟，而且高职学生也已经具备一定的探索能力，只要方法得当，也会比较容易受到引导。Web 前端课程，学习初期见效比较快，而且难度较低，所以入门相对容易，比较容易激
发学生的学习兴趣。只要课程内容安排合理，教师引导到位，高职学生完全可以熟练掌握Web 前端相关技术技能。
1基于创新能力培养的课堂教学改革思路
1.1创新教学内容
Web 前端所涉及的课程既重视技术又兼具设计，是可以通
过代码设计出优美界面，并且可以增强用户体验的一项技能，比如学生在初步学习了HTML 就可以设计出相当美观的图文混排页面，再学一些CSS 样式，就可以设计出各种网页排版，甚至多少了解一些CSS3动画就能够设计出一些网页动态特效，
仅仅一学期下来学生就可以独立设计出一个完整的网站，获得很大的成就感，因此，教师首先在授课内容上一定要层层递进，创新教学案例和内容。
（1）精心筛选授课内容，避免泛而不精，切忌教学目标不明确，重点内容不突出。就HTML 标签来说，HTML5新增了许多，并不一定都要讲，课堂讲主要的内容，遵从“必须，够用”原则，许多不常用的标签可以作为课后学生自我学习的一个扩展。
（2）案例新颖。前端课程即便是在刚开始仅仅学习了几个HTML 标签，也是可以设计出美观的案例的，因此教师在授课过程中要精选素材，精心设置案例，多上网查看，搜寻实用且真
实的网页素材[1]
，每次案例的呈现都要让学生有耳目一新的感受，每次做完一个案例都要让学生有一定的成就感。1.2灵活的教学模式，可行的教学方法
Web 前端课程实践性强，对学生动手能力要求较高，学生只有通过多敲代码、多动手制作案例，才能真正掌握其相关技能，学生在不断的尝试和探索过程中也可以逐步获取成就感，因此教师在授课过程中要以学生为中心，应根据授课内容灵活地选择合适的授课模式和授课方法。
（1）灵活的教学模式以“教-学-做”教学模式为主。授课过程主要采用边讲边练方式，每节课连续讲授时间控制在25分钟左右，每讲一个知识点一定要让学生动手练习，通过练习，从直观上理解知识的使用，从而达到“学中做，做中学”。如果是案例，教师可以先分析演示，然后由学生进行动手练习，在规定时间内由学生独立完成案例并将作品上传至教师机或网络空间，之后教师可以在全班进行学生作品展示，展示的目的一个是鼓励学生，激发学生学习动力，另一个要对学生出现的问题及时进行反馈，对于共性问题，可以再进行集中讲解，加强学生印象，展示之后要督促学生针对自己作品的不足进行及时的更新。
以“线上线下混合式”教学模式为辅[3]。线上课程由于其不受地点、时间的限制等特点，可以成为日常教学的有益补充。
收稿日期：2020-04-20
作者简介：徐好芹（1981—），女，河南伊川人，硕士，讲师，主要研究方向为计算机应用。
86
计算机教学与教育信息化
本栏目责任编辑：王
力
Computer Knowledge and Technology 电脑知识与技术
第17卷第02期(2021年1月)
日常教学中可以让学生通过线上教学视频进行预习，而对于课堂上讲解到比较重要或者比较难的知识点时，教师可以录制补充视频，发布网上，学生可以利用课下时间，进行复习巩固。在授课过程中，
对于有些有代表性的知识点或案例，在学生具有一定相关学习经验的前提下，可以挑选部分学生进行讲解，讲解过程，鼓励学生大胆说出自己的想法，通过组织学生讲授，进一步提高学生对知识点在深度和应用的理解，同时提升学生学习自信心。
（2）可行的教学方法
日常教学以任务驱动教学法为主，前端效果在网上随处可见，教师授课过程可以直接打开浏览器一些有代表性的网站，让学生理解学习要达到的目标，并且在网上现成的案例，通过分析真实是网站效果，并利用所学的知识将其实现，可以让学生很直观的明白知识点的具体应用。教师通过美观且实用的任务案例激发学生学习兴趣，教师在讲解案例过程中注意引导学生同样的效果实现方法可以有多种，不要限制学生的思维，学生通过案例练习加强对知识点的理解和应用，鼓励学生在制作案例的过程中多进行各种尝试。
阶段复习以项目驱动教学法为主，教学进度应该张弛有度，比如学生学习完HTML 标签，学习完CSS 样式，都要分别进行一个阶段复习，复习不仅是对知识点的归纳，更应该有一个更加综合的真实项目来支撑，通过项目驱动的方式进行阶段复习，提高学生综合应用能力。1.3创新教学环节
为了检验学生的阶段学习效果，加强学生实际应用能力，因此在一门课程每个模块内容结束之后，可以布置一项由学生自我设计完成的网页作品，教师可以限定主题也可以不限定主题，根据学生已学习
内容情况给出一定的要求，向学生说明网页制作从选题、素材到制作的方法步骤，重点让学生自我发挥，将学生创新能力培养贯穿在日常教学过程中。
在一个完整的学习阶段结束后有必要组织一场与前端设计有关的大赛，让学生将所学知识转化成作品，再通过比赛的方式进行展示，在此过程不仅提高学生知识的综合运用能力，也提高学生交流沟通，以及自主学习和探究能力，最终达到提升学生创新能力和综合素养的教学目的。
下面表1是学生学习各阶段涉及前端教学的主干课程和阶段结束可以开展的比赛项目。
表1
各阶段前端设计大赛规划表
说明：上面表格主要列出了每个阶段涉及前端开发的主干课程，并不是所有课程。1.4具备创新精神和领导能力的教师
要想提高学生的创新能力，作为教学主导地位的教师首先必须具备一定的创新精神，只有教师具有创新精神，才能使得创新教学内容成为可能，才能灵活地实施教学模式。教师对教学内容的讲授应该有解构和重构的能力，另外教师不仅需要具
备创新精神，也需要具备一定的领导能力[4]，比如教师需要具备
较好的教学管理能力、教学改革能力，具备一定的专业建设能力，教师通过优秀的个人魅力感染学生，通过深厚的专业知识引领学生，以期达到最终的教学效果。1.5合理有效的教学反馈和考核机制
高职学生自制能力相对不高，为了保证学生整体学习效果，必须有合理有效的教学反馈和考核机制作保障，日常教学可根据教学情况每周或者每阶段进行小测，根据学生测试情况，及时了解学生情况，并做教学反馈。教学考核要从之前的重期末考核转变为日常的过程性考核为主[2]，重视学生日常学习表现和阶段学习效果，比如课程最终考核成绩可以考勤5%，日常作业占15%，线上学习10%，阶段自主项目20%，期末网站设计30%，期末考试20%。通过全方位的过程性考核，更加合理全面地对学生学习效果进行评价，以达到激发学生学习兴趣，激励学生不断进步的教学目的。
2Web 前端课程教学探索
为了检验创新能力教学改革的效果，本学期通过对18级计算机应用技术专业4个教学班进行了对比试验，这4个班级是平行班级，学生整体上基础相当，人数相当，在本次教学探索中，1-2班为参照班级，4-5班为试点班级，该学期学生同时开设《Web 前端设计》课程，我校《Web 前端设计》课程在中国大学MOOC 上线开放，为学生线上学习提供了有效的平台支持，两组教学班各项对比项目如表2。
表2
教学试验对比班级情况表
通过一学期的教学对比，试点班级学生对前端课程学习劲
头较大，通过线上课程也学到了一些扩展内容，表示很想继续学习后续课程，而对比班级学生表示课程太难，学不会，对后续课程没有太多期望。由教学对比结果可以得出以下几点结论。
1）教师创新能力和领导力对学生创新能力培养起关键作用
作为一个教师不仅是在课堂上传授知识，更重要的是要对学生起到一个引领作用，一个有创新意识的老师，在课堂上应该通过自己的丰富的专业知识和有效的教学方法，让学生学到扎实的专业知识，也要通过自己有意识的创新能力引导，感染学生，让学生获取创新的勇气和探索的动力。
2）线上线下混合式教学模式有利于扩展学生知识面，激发学生学习兴趣
对于学习状态较好的学生通过自主学习线上视频，可以弥补面授课程时间有限、知识点讲解有限等问题，甚至可以通过
87
本栏目责任编辑：王力
计算机教学与教育信息化
Computer Knowledge and Technology 电脑知识与技术第17卷第02期(2021年1月)学生个人网页
线上课程实现超前学习，扩展学习内容。而对于课堂教学过程中学习效果不好的学生，可以通过课后观看线上视频巩固学习内容。在采用线上教学方式时，切忌盲目，高职学生整体上自制能力有待提高[5]，所以教师要提前做好组织工作，重点内容仍然要通过面授方式对学生进行系统讲解，及时检查学生学习效果，让线上教学成为日常教学的有益补充。
3）课内自主项目及阶段综合项目是提升学生创新能力的重要手段
贯穿在课程教学中的课内自主项目，可以将学生创新能力培养渗透在日常教学中，通过不断的创新意识激励，使学生逐渐养成善于思考，敢于创新的自主学习能力。课内逐步递增的自主项目环节是课程结束进行阶段综合项目做基础，可以为综合项目的完成提供有力的阶段性支持。阶段综合项目对学生知识综合应用能力和创新能力的有更高的要求，学生在综合项目制作初期，会有非常多的问题的，所以在这个阶段，需要老师做好引导工作，给学生讲解一定的方法，先让学生进行适度的练习，再开始进行，鼓励学生有问题多和同学老师沟通交流，教师也多询问学生项目进展情况，对于他们遇到的困难及时给予回应。另一方面阶段项目最后一定要有一个学生自我展示环节。
通过教学探索，发现在阶段综合项目进行过程中，学生虽然问题和困难很多，但是每当参与一次项目制作，对学生的整体学习能力和自信心都有很大的提高，也是培养和提高学生创新能力的一次实战演练。
3结论及展望
本文通过分析当前高职院校Web 前端课程开设情况，提出了基于学生创新能力培养的前端课程改革探索思路，并在本校进行了初步试验，试验结果证明了这种改革思路的有效性。由于这种改革思路对教师要求较高，在教学的同时也要做好学生思想工作，今后会将这种教学改革方法进行扩展，扩展到其他班级和其他专业，更加全面的培养学生的创新能力，巩固学生的专业技能和职业素养。
参考文献：
[1]吴鸿韬，李智，袁玉倩.基于OBE 理念的Web 前端开发技术课程教学改革[J].计算机教育,2019(11):91-93,98.[2]颜慧佳.基于“前端工程师”岗位班的创新教学改革与实践[J].计算机教育,2018(9):160-163.[3]陈永平.“互联网+”环境下高职传统教学、MOOC 与SPOC 融合教学质量评价指标体系构建[J].职教论坛,2019(07):64-72.[4]邵建东.高职教师领导力：内涵、价值及发展路径[J].江苏高教,2018(10):72-76.[5]谭永平，钟畅武，韦柳丝，等.高职院校实施混合式教学改革的策略研究[J].中国职业技术教育,2019(2):30-33.
[6]王文轩.混合教学模式下高职学生自主学习能力培养的实证研究[J].中国职业技术教育,2018(35):10-15.
【通联编辑：光文玲】
（上接第74页）
[2]刘鹏，俞海英，陈卫卫，等.面向协作学习的计算机创新实践课程在线教学平台研究[J].计算机教育,2019(2):45-49.
[3]焦建利，周晓清，陈泽璇.疫情防控背景下"停课不停学"在线教学案例研究[J].中国电化教育,2020(3).
[4]张健.基于数据挖掘的网络学习行为分析研究[D].西安：西安电子科技大学,2017.6.
[5]王海丽.基于网络课程的大学网络学习行为研究[D].河南大学,2017.6.
【通联编辑：王力】
（上接第76页）
科生为研究对象采用对比实验的方式，分成实验班（数据18-1,2班）和对照班（数据18-3,4班）。实验
班采用反转课堂结合KM 教学法的教学模式，对照班采用传统的多媒体授课模式。在教学实践过程中，采取成绩考核、问卷调查等多种方式对学生的学习效果进行记录，从而保证实验结果的可靠性。
通过对学生的卷面成绩和上机成绩进行测评，得出以下结论：实验班（数据18-1,2班）学生的平均成绩为90.5分，而对照班（数据18-3,4班）学生的平均成绩为77分，实验班学生成绩高出对照班学生成绩很多。问卷调查结果显示，96％的学生认为反转课堂结合KM 教学法的教学模式有助于学生梳理和总结归纳知识，有利于提高学习效率。
参考文献:
[1]马志强，张然，李雷孝.Java 核心技术[M].北京：清华大学出版
社,2014.
[2]李佳静，徐慧，张帆.“操作系统”进程管理教学中的KM 教学法应用[J].科技资讯,2019,17(8):149-150,152.[3]张桃红，彭珍，杨炳儒，等.“C 程序设计”课程的KM 教学法研究[J].计算机教育,2010(2):113-115,101.[4]张帆，杨炳儒.KM 教学法在“数据结构”课程中的研究与应用[J].基础教育研究,2010(24):19-20.
[5]田毅，贾永旺.KM 教学法在离散数学中的应用[J].计算机教育,2019(1):33-35.
【通联编辑：谢媛媛】
88

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。