浅谈基于翻转课堂的html5+css3网页设计教学模式的实践研究

摘要：随着5G技术的成熟运用，Web前端开发工程师仍是各大软件企业追逐和猎取的人才对象，而html5+css3作为Web前端开发的核心课程，对软件工程专业前端工程师的培养尤为重要。本文针对“html5+css3网页设计”这门实践性极强的课程做翻转课堂的教学方法改革研究，通过对课堂教学模式的设计与分析，构建出适合教学的共享体系，进行相应的教学改革实践。

关键词：翻转课堂;html5+css3;网页设计教学;教学实践

引言

传统的html5+css3网页设计教学的课堂教学中，是从教师备课、准备教学内容开始，对知识内容进行编码，教师在课堂里以声音、画面、文字等作为传播介质，学生再以听觉、视觉等感官接收信息，通过理解、整合等方式对信息进行加工、解码，最后将知识进行记忆储存。在这一教学方式里，优质的教师资源稀缺或者分配不均、学生因个体差异学习进度不能统一、良好的知识传播环境缺乏等问题难以得到根本解决，导致知识传播效果不佳，学生学习进展缓慢。要达到良好的教学效果，学生在上网页设计课程之前，就需要能拥有相当量的实践和教学沟通辅助学习。基于此，结合笔者的实践经验，本文提出了基于翻转课堂的html5+css3网页设计教学的研究与实践，使用教学平台将前期教学转移到课堂之外，教师采用课外的时间或资源来创建和不断更新所使用平台的视频内容。

1 基于翻转课堂的html5+css3网页设计教学背景

Html5+css3网页设计课程作为一门实践性较强的课程，教学目标要求学生学习后能够具备网页开发的能力，对于学生的自我学习能力具有一定要求。翻转课堂的教学模式能为学生提供更多主动参与学习的机会，能够达到学生个性化需求的满足与自主学习能力的培养。作为本次教学改革首选的实验方法，本文通过选用博学谷（传智播客旗下高校教辅平台）这个学习管理系统作为研究平台，对翻转课堂教学模式进行实践应用。博学谷是一个被广泛使用的传智播客旗下的高校教辅平台，不仅是在教育设计方面提供了的翻转课堂教学模型模板，而且在课程或教育场景方面也提供了良好的教学资源。

2 基于翻转课堂的html5+css3网页设计教学的理论研究

基于当前高校课堂教学环境下，有两种广泛被应用于的翻转课堂教学模式，即探究式教学模式和基于问题的教学模式。本文选定的教学模式是以探究为基础的教学模式和以问题为基础的教学模式，它们已被确定为适合于满足翻转课堂教育新出现的需求的教学模式。基于问题和探究的教学方式在其教学环节中以学生为中心，该教学方法实践的第一步即在广泛使用的教学模式的基础上，设计两个翻转课堂的教学模型。教学模型旨在为教师提供两方面的便利：第一，在两个教学模式的具体阶段内，提供教学、学习和评估活动类型的“通用”、结构化和适应性蓝图。第二，在教学、学习和评估活动在教师之间的分布方面，他们采纳了翻转课堂模式的要点。

翻转课堂模式是一种混合教学模式，它提出的关键概念，是教师支持的面对面演讲不应用于授课，而应用于让学生参与教师制定的动手或协作活动，以促进活动参与、互动搭建和反馈。在翻转课堂强化课程或教育情景中，教学、学习和评估活动分配的基本原则是，基础内容教学不需要教师在课堂提供，教师可以通过适当设计选定的教学和评估资源，如教学视频和预习题代替教师在课堂教授基础知识，学生可以自主地利用这些资源，从而在学习速度和时间方面享有更大的自由。

3 基于翻转课堂的html5+css3网页设计教学的教学模式设计与实践

此次研究以html5+css3网页设计课程的教学为例展开分析与设计，该翻转课堂教学模式将从课前、课中及课后三个阶段进行设计。

阶段一：课前预习

翻转课堂作为一种以学生为中心的教学模式，学生对于整个学习过程具备极大的自主性，可以根据自己的学习情况安排以及控制整个课前学习过程。教师将课堂知识点发布于博学谷平台，学生使用手机或电脑随时随地登录学习，完成预习任务，该平台可以自动统计学生预习数据。

阶段二：课中交流

通过课前预习阶段，学生能掌握一定的基础知识，并记录下自己无法准确理解或者存在理解难度的知识点。由于课前预习是自我完成的过程，因而每个人都可以提出自己存疑的问题，教师可以一一进行解答。具体按照以下六个环节开展课堂教学：

（1）预习反馈：授课教师登录云平台，展示学生预习数据及学生存疑的知识点问题，针对这些数据，对学生的预习情况进行介绍，对于完成情况较好及以上的同学提出鼓励并让其继续保持，对于完成情况较差的同学，问清楚原因后，督促学生课前要认真预习。

（2）任务展示：根据基于问题导向教学这一方法的要求，教师课前展示页面效果，即提出这堂课需要解决的教学任务，然后与学生进行互动，通过分析、提问等环节在对旧课复习基础上，导入新课。

（3）任务分解：根据环节二提出的课堂任务，对该任务页面进行分解，形成若干新的知识点，如：CSS 基础可以直接看教材，应用可以学习所采用的云平台上的教学视频，CSS渐变语法可以登录CSDN博客参与专题讨论，创建CSS漸变可以通过上网来百度搜索学习。

（4）任务实现：环节三中的任务分解部分，设定任务完成时间，学生以组为单位，自我进行任务安排。该环节可以培养学生的团队协作能力及解决问题的能力。学生的工作是做目标任务、问问题、学知识点、参与小组讨论;老师的工作是巡视督学、答疑解惑，把控教学进度。教师可以针对每组学生的教学进度及情况进行答疑解惑，一定程度上实现因材施教。

（5）任务展演：任务完成时间截止后，每个小组需要对该组最优的作品进行展示，首先一定程度上会培养学生的积极性，打破传统小组学习中的多项工作都交由某个或部分同学，保证了大家的参与度。其他组的学生在观看的过程中，找出该组的优点及问题，并发现自己的作业中存在的不足。学生在对比中寻找不足和获得荣誉感。

（6）任务点评：各组对作品展示完毕后，教师依次回顾每一组的作业，让同学们提出问题，并尝试找出自认为可行的解决办法。最后教师进行总结，提出下次预期的目标等。

阶段三：课后巩固

教师可以根据预习阶段统计的数据，以及记录课堂教学开展的情况，合理并有效的安排下一次的预习任务以及课堂教学中可以调整的地方。课后可以在平台发布一定作业，对该堂课的教学知识点进行巩固。

4 结束语

翻转课堂教育一直与培养学生探究和解决问题能力的联系在一起，是以学生为中心的教学方法。本文基于博学谷这一教学平台，对网页设计课程进行翻转课堂的教学改革实践，提供了一种基于翻转课堂的混合教学模式，通过重新分配学生学习活动的分布，使学生的参与度最大化，增强翻转课堂教学方法在教学中的应用效果。

参考文献

[1]缪静敏，汪琼.高校翻转课堂：现状、成效与挑战——基于实践一线教师的调查[J].开放教育研究，2015，（05）.

[2]刘鑫，周润苗，聂作财， 等.基于云课堂的应用型本科院校"网页设计与制作"课程的翻转课堂教学模式探索[J].教育教学论坛，2020，（3）：174-175.

[3]荣艳冬.翻转课堂教学模式下数字化教学资源库建设——以网页设计与制作课程为例[J].软件，2018，39（9）：213-215. DOI：10.3969/j.issn.1003-6970.2018.09.044.

[4]陈画，杨孟莹.基于微信平台的翻转课堂教学改革与实践——以《网页设计与制作》课程为例[J].电子商务，2018，（5）：69-70，87.

课题编号

GZMDBXYSC1910，课题名：数字化“翻转课堂”教学平台开发——数字艺术实践课程教学改革研究。

作者简介

陈妍（1987.9—），女，汉族，贵州遵义人，硕士学历，贵州民族大学，讲师，研究方向：软件前端开发、数据分析与可视化。