李争鸣

关键词：一体化教学  慕课  网页制作  表单

根据相关研究分析，社会对网页美工、网站前端、网站维护与管理人员的需求数量还是相当大的，网页制作作为计算机网络专业的一门专业课程，具有一定的重要性。

近几年，慕课以一种开放、自由的教学模式出现，是信息时代“互联网+教育”的产物。一体化教学是适应社会和市场要求的一种全新教学模式，以典型工作任务作为引导，以企业真实工作环境为载体，将教学与实操，学校与企业完美地联系在一起。笔者应用了两种慕课方式，一种是教师提前制作好的慕课视频，主要讲解本次工作任务和实现效果的一些基本方法，可以提前发给学生在课下进行学习。一种是引导学生通过相关慕课网站选择自己合适的课程进行学习。

利用慕课方式教学具有以下几大优势。

学生通过慕课学习，不仅能进行知识的预习，也能拓宽学生的知识面，从而开阔学生的视野。有助于学生碎片化学习、移动学习，这样，学生可以更好地对自己进行时间管理。

学生进行慕课学习，比课堂更易集中注意力。学生按需学习，自主决定学习内容与学习进度，是课堂教学的良好辅助。培养了学生良好的信息素养，也提高了学生网络信息获取能力和分析能力，在慕课方式的学习中，学生能够自主地学习研究，就会养成自主探究的良好习惯。

一、网页制作课程教学分析

随着Web技术的发展，网页制作技术不断更新，各种制作软件层出不穷，而网页制作课程作为计算机网络专业的核心学科，有着一定的重要性，目前网页制作课程主要是针对各章节的内容制定相应的实操内容，缺少对学生综合职业能力的培养。并且，一味地依赖科教书，不仅跟不上时代的发展，也满足不了学生的需求，更达不到企业用人需要。这时，就需要教师及时创新教育理念、调整教学方法，针对网页制作课程教学内容，增减相应知识点，这里通过一体化教学与慕课技术来激发学生内心深处的学习需求，学习到课本外最新、最前沿的知识，如HTML5、CSS3、JavaScript 脚本、JQ等最新技术。

1.学情分析

网页制作课程是计算机网络专业第四学期开设的专业课，学生已经学习了PS、网页美工、程序设计等相关基础辅助课程，并且通过本课程前三个项目的练习，学生学习了HTML语言、DIV+CSS布局方法、还有HTML5+CSS3的部分技术。根据之前的教学成果分析，目前呈现的问题是学生理解与执行能力存在严重两极分化的情况，一部分学生能够很好很快速地完成教师布置的任务，并且能够自主学习课外延伸知识，一部分学生对基础知识的理解还存在欠缺的情况，从而出现越学习越困难的情况。

2.课程内容分析

以笔者所在学校为例，网页制作课着重介绍网页效果图设计、HTML标记和CSS层叠样式表，强调DIV+CSS布局规范和方法，同时，还要适当引导学生学习HTML5、CSS3、JavaScript脚本等最新内容。

3.课程目标分析

网页制作课要求学生熟练掌握网页效果图的设计与切片、 DIV+CSS的主流布局方法，以及HTML5、CSS3、JavaScript的灵活运用，为网站前端的职位要求打下良好的基础。

二、以表单设计学习情境为例，分析教学任务、目标、教学重难点

1.教学任务

一体化教学可以让学生从职业岗位出发，以客户需求进行研究思考，制作实践可行的工作计划。以某酒店网站用户注册页面学习情境作为本次教学任务，介绍如何通过以上几种教学方式结合来提升教学质量，培养学生职业技能。

2.教学目标

在完成这个工作任务中，学生学到的知识具有开放性，但通过四个星期的时间，学生需要掌握以下几点：能够准确定义不同的表单控件;根据客户需求设计满意的用户注册效果图;并利用DIV+CSS进行布局与美化;能够编写JavaScript脚本对本页面输入信息进行验证;适当加入HTML5与CSS3进行表单美化与优化用户体验;最后进行效果的展示与总结。

3.教学重点

一是理解每个表单控件的作用，能准确应用达到所需效果;二是掌握JavaScript的基本语法，能编写有效的与HTML传递数据的语句;三是根据表单设计效果图，能熟练地切图并运用DIV+CSS进行表单页面布局。

4.教学难点

一是能灵活运用JavaScript对HTML表单中输入的数据进行有效验证;二是掌握表单样式的控制，能够灵活运用HTML5+CSS3美化表单界面;三是能对制作时出现的问题进行分析并调试;四是代码编写时要考虑便于今后的修改与维护。

三、“一体化 + 慕课”教学模式的应用探究

1.一体化教学在本次教学中的应用

表单设计教学过程如下。

一是学生进行分组（教师注意各組需强弱搭配，每组4～5人），分发本次工作页给各小组;二是学生根据工作页，分析讨论并提取客户需求，制定工作计划;三是根据需求，组内各成员均设计该酒店用户注册页面效果图;四是组内选出一种效果图方案，并讨论完善;五是组内根据统一方案，进行分工制作，本次任务包括网页元素的布局、表单控件的合理设置、用户输入数据合理验证等;六是组长将方案组合，并将最终效果讨论完善;七是各小组将本组最终制作效果进行展示、讲解，主要说明该效果用到的布局方式、技术，学到的东西以及待完善的地方。

2.慕课在本次教学中的应用

在以往一体化教学中，每次任务开始都是直接将工作页发给各小组，但有些学生不太愿意阅读文字的东西，如果有那么一个生动、酷炫的视频能进行介绍是最好不过的。所以，在这里，教师就可以将提前制作好的慕课视频发给学生，里面用动画的效果介绍了下次的任务要求与效果，并提出本任务的几个主要问题：一是实现表单页面中圆角、阴影边框;二是实现注册部分出生日期年月日实时选择功能;三是实现头像的实时显示功能;四是几个输入文本框的实时验证功能。

提出问题之后，视频还简单讲解了实现该效果的基本方法，及要准备资料的主要方向如HTML5+CSS3、JavaScript，引导学生先自行学习这次任务的知识点，并给出几个供学习的在线慕课视频学习网址。

看完视频后，学生可以将里面的基本方法进行反复的操作练习来掌握，并记下其他需要实现的功能，这样学生带着问题去主动学习，学生在空闲时间利用电脑或手机按任务要求寻找合适的网上慕课视频进行学习，教师在此过程中，要做好监督，并适时提出问题，让学生有针对性地学习，组长适时做好讨论，将成员所学进行整合与应用。

3.一体化+慕课在本次任务中的应用过程如下

四、小结

本次任务采用线上线下混合式教学模式，缓解了传统教学中遇到的一些困境，不仅能让学生做好任务前的预习，还能在任务中学到延伸知识，提高了学生自主学习的积极性，强烈激发了学习者的学习热情，增强了学生的职业技能。学生根据个性化的学习资料进一步进行巩固复习，强化对知识的理解，完善知识体系。

通过这两种方式的结合，教师主动将课堂交给学生，教师在其中更多的是扮演主持人、引导者、顾问的角色，整个过程以企业工作流程的方式，引导学生积极发挥团队作用，自主控制学习节奏，掌握学习的主动权，自主探究学习内容。不管是一体化教学还是慕課学习，都需要学员具有一定的自觉性，所以，在本次任务中，教师要根据情况做好引导与监督，对于个别学习基础较弱的学生，目标不能定太高，并适时进行鼓励与讲解，教学方法不能硬搬，要做到因材施教、快乐学习。

参考文献：

[1]张琳.慕课视角下网页设计课程教学生态模式的构建策略研究[J].山东农业工程学院学报，2016（8）.

[2]唐琼等.慕课在网页设计课程教学中的应用——CSS定位教学案例[J].湖北第二师范学院学报，2016（7）.

[3]刘万辉.网页设计与制作实例教程[M].北京：人民邮电出版社，2013.

[4]黄涛.“项目教学 + 翻转课堂”在网页制作课程中的应用[J].信息与电脑，2018（3）.

（作者单位：揭阳市高级技工学校）