翻转课堂模式下的网页制作课程教学改革研究

马歌 楚志刚

【摘要】 针对网页制作课程知识点琐碎、“学得快，忘得也快”的特点，采用传统教学模式不利于学生个性化的培养，本文提出应用翻转课堂教学模式对网页制作课程进行教学改革。通过两个班级应用效果的对比，能够看出翻转课堂教学模式有助于提高网页制作课程的教学质量、促进学生学习的积极性、提升学生的创造性。

【关键词】 翻转课堂 网页制作课程 微课 协作学习

一、翻转课堂简介

在当今互联网时代，学生不必一定要到学校接受教师讲授，就能通过互联网学习丰富的在线课程。互联网尤其是移动互联网催生了“翻转课堂”这种教学模式[1]。翻转课堂（Flipped Classroom）也称颠倒课堂[2]，就是把“教师白天在教室上课，学生晚上自习做作业”的教学结构翻转过来，构建“学生白天在教室完成知识吸收与掌握的知识内化过程，晚上自习学习新知识”的教学结构。翻转课堂教学模式需要学生重新调整课堂内外的时间，将学习的决定权从教师转移给学生。

二、网页制作课程教学现状

目前，网页制作课程属于高校开设的应用型人才培养的课程。对于我校的计算机科学与技术、软件工程专业都是必开课程。传统的网页制作课程教学存在以下问题：

2.1 知识点琐碎，“学得快，忘得也快”

HTML和CSS的知识点琐碎，一个学期学时有限，不可能在课堂上将所有标记、属性都讲一遍。即时都放在课堂上讲解，一个一个讲解会让学生觉得枯燥无味、重难点不突出，很难让学生掌握重点问题，到动手制作网页时，往往已经忘掉了部分内容。

2.2 不能进行个性化教学

课前，学生只是通过看教材进行简单预习。课上，教师在45分钟时间内要讲授多个知识点，课堂上班级内的学生接受的都是一样的信息、一样的进度，教师很难注意到每个学生掌握的进度不同。课后，完成作业时，有的学生已经完全掌握课上讲授的知识，能够很快完成作业；而有的学生则不太明白，需要通过帮助才能勉强完成作业；而有些学生既不理解又羞于寻求帮助，遇到的问题越积越多，到了学期末，根本无法完成课程设计。

2.3 局限了学生的创造性

网页制作这门课相对于其他编程课程来说，知识点不难理解，在课堂上学生根据教师的演示，容易完成实验任务。但是对于没有任何美工基础的计算机专业学生来说，构思网页布局、美化页面较难，制作出个性化的网页受到了限制。

因此，我们需要对现有的网页制作课程的教学模式进行改革，本文提出了在该课程中应用翻转课堂教学模式来提高课程的教学质量。

三、翻转课堂模式在网页制作课程中的实施过程

3.1 课前准备过程

翻转课堂的一个重要载体就是微课。因为翻转课堂需要有效地促进学生对新学知识的消化吸收，在有限的时间内使自主学习任务发挥最大作用。所以，每次上课前教师需要花费大量的时间针对学生的个性化进行备课，确定本节课学习目标，精心设计出学生愿意做、喜欢做的自主学习任务，针对一个明确的问题录制时长在10分钟以内的短小精悍的教学视频，并把视频通过网络上传到微信群、qq群、微博等为学生提供自主学习、交流反思、协作讨论的平台。

例如第10章CSS层叠样式表的内容是为了让学生学会使用DIV+CSS进行网页元素布局，但是CSS的属性较多，需要将这一章的内容分解，抽取出“CSS的样式定义”、“CSS的选择器”、“盒子模型”、“文本样式”、“段落样式”、“列表样式”、“超链接样式”等知识点录制教学视频。

微课教学视频是为了下一次课堂学习服务的，学生必须严格按照教师布置的学习任务进行学习。学生能够在课下使用自己的任何设备，比如电脑、平板、智能手机等，在任何时间、任何地点都能观看微课视频，进行自主学习，并且当学习中间遇到问题时可以选择暂停播放视频，能在任何时候去查阅需要的材料，还能在网络平台上与教师、同学进行在线讨论，或者回放视频重复多次学习。根据视频最后提出的几个任务进行在线测试，检查自主探究学习的情况，并将疑难问题记录下来，课上提交给教师。

3.2 课上实施过程

翻转课堂要求课上教师要因材施教开展教学活动，课堂的注意力集中在帮助学生掌握在课前学到的新知识，运用新技能。

（1）确定问题。通过课前预习，教师既能够引导学生学习，又可以及时了解学生学习任务的掌握情况。教师收集学生课前自主探究过程中遇到的问题，归纳共性问题，确定课上需要解决的问题。比如学生看过“盒子模型”的微课视频后，会对“盒子模型”的抽象理解、如何使用DIV+CSS技术有效定位网页元素提出疑惑。

（2）协作学习。在课堂上，教师将班级内的学生分成若干个小组，以小组的形式进行协作学习，有效达成学习目标。课堂上教师与学生之间，学生与学生之间，集中讨论、交流、合作学习，在做网页中，女生往往比男生更细心，但是没有男生思维灵活，根据男女生的差异，形成比较和互补，共同解决问题。

（3）有效激励。为了更好的激励学生完成学习任务，教师对课堂上学生的学习任务完成情况进行排名，实时更新排名，让学生能及时的看到在整个班级的学习过程中自己的进度。通过学生的好奇心、好胜心激励学生将注意力集中到课堂上，积极参与小组讨论、班级讨论中。

（4）答疑解惑。教师不仅仅是站在讲台上讲授课程，而是更多的走进学生，穿梭于学生之间，参与到学生学习过程中，提供针对性地指导，能够了解每个学生的掌握情况。对共性问题进行统一的答疑解惑。

（5）成果交流。教师选出2个优秀作品，让该小组的学生在全班进行展示，向其他小组讲解该作品的设计思路，本节课学习的知识点，比如“盒子模型”在本作品中的作用，以及制作过程出现的困难。在交流的过程中教师要引导学生总结，提升所学内容。

（6）反馈评价。翻转课堂要建立一种以学生为中心的多角度、多方式的评价机制。教师除了对学生的学习成果进行评价外，还需要对学生的学习过程、参与合作的表现等进行评价。学生可以进行作品评价，既能提出自己认为有效的或喜欢的方面，也应提出改善建议。

3.3 课后总结提高

课后，教师要进行教学反思，考虑本次课是否能够让学生有较大的收获，让课堂真正有益于学生发展。教师将学生的小组作品放到网络平台，供班级内共享，让学生在线投票，将投票结果进行排名。学生自主进行个性化复习，进行下节课预习。

四、翻转课堂模式实施效果

本学期，对大二的计算机科学与技术班的网页制作课堂仍然采用传统教学模式，将大二的计算机科学与技术（信息技术教育方向）班作为试点班级，应用翻转课堂教学模式，两个班级人数相同。学期期末，对试验的两个班级进行问卷调查，并根据结果对比实施效果，如下表1所示，翻转课堂教学模式更受学生欢迎，有助于提高学生学习能力以及动手实践的能力。

五、结语

针对现有网页制作课程教学模式的不足进行改革，使用翻转课堂模式锻炼学生分析问题、解决问题的能力，提升学生的创造力、团队合作能力，提高了学生学习的积极性，更好地培养了创新型的web前端开发人才。

参 考 文 献

[1]陈佳玉. 国内外关于翻转课堂的研究与启示[J].教育，2015（38）：35-35.

[2]张金磊 王颖 张宝辉.翻转课堂教学模式研究[J].远程教育杂志，2012：30（4）.