基于Web前端设计课程教学在高职院校中的探索研究

邓慈云 胡柳 吴瑶

摘要：大数据时代，高等职业院校对大数据技术与应用专业的相关课程正在不断尝试改革创新，试图找到适合高职学生的教学方法和手段。本文分析了《Web前端设计》课程中存在的不足，提出了结合多种创新型教学模式的解决方案。通过实践证明，该方法能够有效提高教学水平。

关键词：前端技术;高职院校;教学改革;课程教学

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

文章编号：1009-3044（2021）13-0102-02

Abstract： Big data， higher vocational colleges are constantly trying to reform and innovate courses related to Big data technology and application， trying to find teaching methods and means suitable for the college students. This article analyzes the deficiencies in the "Web Front-end Design" course， and proposes a solution combining a variety of innovative teaching modes. Practice has proved that this method can effectively improve the teaching level.

Key words：front-end technology;high vocational colleges; teaching reform; course; teaching

1引言

Web前端是创建Web页面或App等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。《Web前端设计》是我院大数据技术与应用专业中专业基础课程之一，通过该门课程的教学，让学生具备网页设计与制作的能力，为后续数据采集和数据可视化的学习打下基础。

2 教学现状分析

我院在Web前端技术的教学过程中，主要存在三个方面的问题：1）教学模式单一;2）课堂教学时间固定;3）学生自制能力不足。

1） 教学模式单一

目前，我院大多数教师仍主要采用课堂教学，教学模式单一。出现这种现状的原因是：首先，教师习惯于传统的教学模式，思想固定。其次，Web前端设计课程是一门实践性较强的课程。传统教学模式下，在课堂上花费了大量的时间讲授理论知识和实例演示。导致学生实践的时间不足，编程能力提高速度慢。最后，教师的线上教学经验不足，还处于积累阶段。

2） 线上和线下教学结合度不够

信息时代，线上和线下教学各有优劣。将两者相结合的混合式教学模式，能够很好地解决彼此带来的不足。但是，在实际的教学过程中，存在线上和线下混合教学结合程度不够。如何将线上教学和线下课堂有效的结合，而非简单地将线上线下教学简单的组合起来，直接影响到Web前端技术课程的教学质量。

3） 学生自制能力不足

学生在线上教学的过程中，教师缺乏对学生的有效管控，无法及时掌握学生的学习状态。部分学生出现思想开小差或受到网络等外界的影响，导致学习效率低下。造成这些现象的主要原因是：学生自制力不足，部分学生自身的专业基础差，学习能力不强。

3 创新教学模式在教学中的应用

针对Web前端课程在教学过程中存在的问题，本文提出了采用“线上任务驱动教学+线下案例教学”的混合模式。首先，以市场需求为导向，通过对地方产业链和岗位技能需求进行分析。然后，针对高职学生的认知特点，重构课程内容。以企业的典型案例为载体，形成从简单实例到复杂案例的系统化学习。最后，让学生在递进式案例教学过程中培养网页设计与制作的综合职业技能和职业素养。

1）构建思路

基于“线上任务驱动，线下案例教学”的混合模式中，整个课程教学分成三个阶段：课前、课中和课后。（1）课前，线上让学生提前了解项目模块的划分情况，模块任务和所需技能，同时完成理论知识的自主学习。（2）课中，线下教师重点讲解项目模块中技术的重点难点，以及提升学生灵活运用知识的能力。（3）课后，下达模块任务，让学生自行完成实践任务，巩固所学的知识和技能。

2）课程设计思路

在Web前端技术课程中，采用线上任务驱动教学+线下案例教学的教学模式。首先，根据课程标准中知识点选取合适的案例来进行任务分解并组织线下教学。如专业学习网站，该网站的设计与实现囊括了本课程所学的所有知识：网页基础，图文混排，表格和表单的应用，CSS美化页面，多媒体页面的制作，使用JavaScript实现页面动态效果和交互性和使用 bootstrap框架开发快速建站的等内容。其次，教师对案例进行解剖，以知识点为基础，进行模块设计。同时，根据划分的模块，完成线上学生的实践任务清单。案例模块分解如表1所示。

3） 课程实施过程

整个教学实施过程中，首先，教师利用学习通等线上平台提前建设课程资源，并向学生推送。然后，以小组为单位，每个小组设置一名组长。教师课堂上重点讲解项目模块中技术的重点难点。组长负责汇报小组学习和任务完成情况以及碰到的问题。针对这些问题开展讨论、探讨如何处理解决，以培养他们解决问题的能力。接下来，以小组为单位，线上下达模块任务，任务下达后，组长完成任务分配、组织讨论交流，让学生自行完成实践任务，巩固所学的知识和技能。通过组员之间的相互督促，相互协助，培养他们的自主学习能力和团队合作能力等技能。

4） 课程评价体系

在设计Web前端技术课程的考核标准中，减少了期末考试的比重，从原来的40%减少到30%;增加了平时成绩的考核比重，从原来的60%增加到70%。平时成绩包括线上完成学习、模块任务和线下课堂成绩两个部分，各占一半。其中，线上成绩包括线上课程学习10%，线上测评10%，模块任务完成情况15%。线下成绩包括课堂参与讨论15%，随堂测试10%，学生互评成绩10%。成绩比例的分布注重学生在模块中任务的完成情况和自主学习的程度，同时还注重學生的自评和互评。

4 结束语

目前Web前端技术课程存在教学模式单一，线上和线下教学结合度不够以及学生自制能力不足等问题。针对上述问题，提出了一种“线上任务驱动教学+线下案例教学”的混合模式教学模式。在该模式下，学生通过完成模块任务，将理论知识用于实践，专业技能得到了巩固和强化，也给他们带来了学习的成就感和满足感。从而学生的学习自主性和积极性也有了明显提高。

参考文献：

[1] 马睿.“互联网+”背景下的Web前端开发课程教学模式的探讨[J].计算机产品与流通，2020（10）：202.

[2] 李永锋.应用型本科院校软件技术类课程的教学实践研究[J].计算机教育，2019（12）：117-121.

[3] 吴鸿韬，李智，袁玉倩.基于OBE理念的Web前端开发技术课程教学改革[J].计算机教育，2019（11）：91-93，98.

[4]孟瑶，葛玉洁，王康，马雨琪.“Web前端开发技术”课程微课设计研究[J].计算机时代，2019（3）：82-84.

【通联编辑：王力】