“Web前端开发技术”课程微课设计研究

孟瑶 葛玉洁 王康 马雨琪

摘 要： 作为一种新型的教学模式和学习方法，微课已经成为了国内外信息技术教学改革的热点。微课弥补了传统课堂教学的缺陷，为其提供了一定的支撑和辅助。文章介绍了微课教学的概念和特点，以计算机专业的“Web前端开发技术”课程为例，分析了该课程的性质、教学内容和教学难点，并阐述了围绕该课程中表格这一知识点所设计和制作的视频及其应用，为提高该类课程的教学质量和效果提供了参考。

关键词： 微课； Web前端开发技术； 高等教育； 教学改革

中图分类号：TP393 文献标志码：A 文章编号：1006-8228（2019）03-82-03

Study on micro-lecture design for the "Web Front-End Developing Technology" course

Meng Yao， Ge Yujie， Wang Kang， Ma Yuqi

（School of Information Engineering， Eastern Liaoning University， Dandong， Liaoning 118000， China）

Abstract： As a new teaching mode and learning method， micro-lectures have become a popular educational reform field of information technology at home and abroad. Micro-lecture makes up for the defect of traditional classroom teaching and provides support and assistance in the conduction of traditional classroom instruction. This paper introduces the concept and characteristics of micro-lecture， analyzes the nature， content and teaching difficulties of "Web Front-End Developing Technology"， and explains the design， production and application of micro-lecture around the knowledge point of table in this course， which provides a reference for improving the teaching quality and effect in such courses.

Key words： micro-lecture； Web front-end developing technology； higher education； educational reform

0 引言

隨着信息技术的发展，学习方式的改变，创新成为教育的常态，而微课（Micro-Lecture）正是该趋势的产物之一[1]。本文介绍了微课的概念与特点，分析了高等教育中计算机专业的“Web前端开发技术”课程的特点、内容以及传统教学存在的问题，并以该课程中的表格知识点为例，探讨微课的设计、制作和应用过程。

1 微课教学

2008年美国新墨西哥州圣胡安学院的高级教学设计师David Penrose提出了现今流行的微课程概念，他把微课称为“知识脉冲”，认为微型的“知识脉冲”只要在相应的作业与讨论的支持下，就能够与传统的长时间授课一样取得相同的效果[2]。微课一般是以视频为载体，记录在教学过程中的某个学科知识点（如难点、重点、疑点等），或围绕某个环节开展教学互动（如学习活动、主题、实验、任务等）[3]。微课具有时间短、内容精、资源多等特点，支持移动学习、碎片学习、泛在学习等多种学习方式，特别适合解决现代生活节奏快、干扰多、信息而带来的影响学习持久性的缺陷。这种新的学习体验大大提高了学习者学习的兴趣和积极性[4]。

2 微课在Web前端开发技术课程教学中的应用

本节介绍了Web前端开发技术课程的教学内容与特点，以及微课在该课程中的设计、实施与应用。

2.1 课程性质

本文讨论的Web前端开发技术课程是信息管理与信息系统专业的一门专业主干课程，是一门实用性较强的实践类课程，是为满足企业对前端开发工程师知识技能的需求而设置的。该课程围绕HTML、CSS、JavaScript语言以及前端框架展开教学，市场需求量大，就业前景乐观。课程内容包括：前端开发技术的发展历程及关键技术；主流前端开发工具的功能和使用，页面的运行和调试方法；前端页面内容与样式制作的基本方法和技巧；前端脚本语言的原理和应用；主流的前端开源框架的使用；前端页面的综合设计。

该课程以实际案例为中心，旨在使学生掌握Web网页的前端制作技术及相关软件的使用，掌握网页前端制作的基本方法和技巧，培养网页前端页面设计与实现的基本能力，具备根据实际需求开发一定规模的静态网站的能力。该门课程的教学为后续动态网站开发类课程的学习提供了必要的基础，同时也为学生毕业后从事前端开发工程师等相关工作奠定扎实的理论及实践基础。

2.2 设计与实施

Web前端开发技术课程的内容繁多复杂，涵盖HTML5、CSS3、JavaScript这三个核心，以及围绕这三个核心而开发出来的大量技术框架和解决方案。此外，学生还需要了解主流浏览器的兼容性，构建/管理工具来管理依赖的大量框架，以及代码编写必须符合的规范，以保证程序的可读性。因此课程组针对该门课程的重点和难点开发了一系列的微课，作为对传统课堂教学的有益补充。下面以课程组教师指导学生开发的“Web前端设计表格”视频为例，介绍该视频的设计和实现过程。该视频使用了万彩动画大师制作动画视频，Camtasia 9软件录制视频，前端页面开发使用HBuilder开发工具编写代码。

该视频对前端页面中的表格知识点进行讲解。通过对此知识点的讲授和练习，使学生了解表格的应用形式，理解表格的基本结构，以及掌握制作表格的方法和技巧。视频设计中采用了多种教学方法，使用案例法和图像法来提出问题和明确主题，使用案例法、分解法和动画法来解决问题，讲解知识点，通过课后练习题来实际应用所学知识点。教学内容设计包括以下四个部分。

⑴ 提出问题

联系实际情况，举例介绍实际网站中常见的可以应用表格的场景，引出Web前端开发技术课程中表格这一知识点，从而提出本次视频的问题：如何在网页中实现表格，具体视频实现如图1所示。

⑵ 点明主题

以生动有趣的动画形式，来立体形象地介绍网页表格的基本结构，点明该视频的主题。具体视频实现如图2所示。

⑶ 解析原理

结合实际案例，分步骤地讲解制作表格内容和制订表格样式的过程，使用丰富的动画讲解基本原理，内嵌了程序编写的小视频来实时展示操作过程，帮助学生理论联系实际，加深对抽象程序代码的理解。视频中亦演示了代码在浏览器中解释后的页面效果，使学生能更直观地了解程序运行结果。具体视频实现如图3所示。

⑷ 总结和实践

视频的末尾总结了所学的知识点，帮助学生回顾视频内容。具体视频实现如图4所示。

视频的最后给出了相关的实践练习题目，帮助学生应用和实践所介绍的知识点。辅助材料中亦给出了例题和练习题的参考代码，以方便学生比对。具体视频实现如图5所示。

2.3 应用与效果

在Web前端开发技术课程的教学过程中，于每次课堂教学之后，通过网络教学平台发布相关视频和辅助资料，供学生课后观看和学习[5]。文中介绍的微课“Web前端设计表格”获得了2018年辽宁省普通高等学校本科大学生计算机设计竞赛一等奖和2018年（第11届）中国大学生计算机设计大赛（微课与教学辅助类）三等奖。

3 结论

本文介绍了Web前端开发技术课程的内容和特点，以网页制作中的表格知識点为例，阐述了视频的设计、制作和应用。在该课程的教学过程中，每次课堂教学之后，通过网络教学平台发布相关视频和辅助资料，供学生课后使用。下一步任务是丰富该课程的视频库，结合网络教学平台，串联和整合零碎的视频，帮助学生在课堂之外更好的自主学习和复习。

参考文献（References）：

[1] 崔晓猛.微课教学设计模式研究[D].陕西师范大学硕士学位

论文，2016.

[2] 李享梅，韩斌.《网络服务配置与管理》课程微课设计研究[J].

高教学刊，2015.20：70-71

[3] 王康.Linux服务配置与管理课程“微课”资源设计与开发[J].

中国管理信息化，2015.14：225-226

[4] 周密，蒲华秀，席凌.基于HTML5的微课Web前端设计[J].电

脑知识与技术，2016.12（17）：208-209

[5] 孟瑶.师生互动平台在高等教育领域的应用研究[J].电脑与

信息技术，2018.26（1）：74-75