HTML5网页设计课程混合式教学设计与实践

郦丽华

【摘要】研究是针对HTML5网页设计课程基于在线的混合式教学进行了设计，并在浙江育英职业技术学院信息技术类专业群开展了两年多的教学实践。文章对该模式下的教学进行了总结和反思。

【关键词】混合式教学;线上教学;网页设计;翻转课堂

【基金项目】本文系浙江育英职业技术学院2018年度院级课题“HTML5网页设计课程混合式教学设计与实践”的研究成果（项目编号：YYZD201808）。

混合式教学是针对结合网络端的“网络学习（e-Learning）”与课堂“面对面（Face to Face）教學”的混合式学习（Blended Learning）的学习方式而提出的，是信息化教学背景下的主流教学方式，也是能被学生广泛接受的教学方式之一。

一、课程实施对象分析

本课题课程研究与实施对象是浙江育英职业技术学院信息类专业学生，课程是学院信息类专业平台课程之一，是进行网页前端设计开发和WEB程序设计开发的基础。高职信息类专业学生在学习上大致分成两大类，一类是“学习动机不强”“学习兴趣不高”“对专业课程学习困难”，另外一类是“学习兴趣浓厚”“自我学习能力较强”，但是需要督促性学习。因此，由课堂实体教学、网络在线学习监控和引导学习者主动学习三部分组成的混合式教学设计能够充分满足学生的学习需要，它既发挥了教师引导、启发、监控教学过程的主导作用，又充分发挥了学生作为学习主体的主动性、积极性和创造性。HTML5网页设计课程教学采用混合式教学模式，实现线下实体课堂教学优势和线上网络教学优势互补，能够大幅度提高教学质量和效果。

二、“混合式教学”设计

“混合式教学”设计是线上线下教学的组合，实现在线课程资源和传统教学资源的结合应用。“混合式教学”教学模式充分实现了学习环境混合、学习资源混合、学习方式混合，从而把传统教学和在线学习两种教学方式的优势结合起来。通过线下线上课堂教学完成教学任务讲解、教学点拨、自主学习引导、职业素养培养等任务;通过使用在线资源实现教学任务，促进学生知识获取能力、自主探究能力、项目合作能力以及协调能力的发展。课题组针对浙江育英职业技术学院信息类专业学生实际情况，设计了符合他们特点的混合式教学模式，其原型如图1。

三、“混合式教学”准备

混合式教学分成课前准备（线上）、课堂教学（线上、线下）和课后提升（线上）三个阶段，课程实施必须满足高职项目化分层教学要求。首先，课题组制定了一整套的指导性资源，包括教学大纲、教学计划等，让学生能够准确定位课程在专业学习中的地位与课程教学目标。其次，遵循“项目化/模块化/层次化”的原则，课题组针对每个教学阶段所要进行的主要活动、任务、课程拓展延伸所需要的资源进行了重点设计和开发。课程内容依据“乡韵有约”（网站地址：http：//www.zjxyyy.com/）进行模块化的划分，划分成了“HTML5基础”“CSS3应用”“表格表单应用”“CSS盒子模型应用”“多媒体应用”和“实战案例”6个模块，每个模块相对独立但又是一个整体，学生完成每个独立的实验项目之后能够组合成一个网站。混合式教学课堂中的教学资源配置如图2。每个教学视频用5-15分钟呈现一个独立的知识点，可以让学生自主学习，反复演示观看。多媒体课件是教学计划中每一个模块的教学内容和教学资源，方便学生预习与教学演示。拓展资料包括与课程相关的知识案例以及JS客户端交互技术应用、网页设计技巧、经典案例分享等供学生拓展学习使用。围绕教学需要总共设计了两次讨论，讨论主题提前在网上发布，让学生提前准备，查找相关资料。课程作业通过课程的整体设计来确定，在混合式教学之后再发布，由学生完成课程后进行自我评价和复习，课程作业是考核学生学习成效的重要部分。翻转课堂教学包括“学生设计作业供同学测试”“学生作品挑刺”。

四、“混合式教学”实施

混合式教学的实施过程分为“课前准备”“课堂教学”和“课后提升”三个阶段，教学设计时把一个完整的项目拆分成若干个子项目，每个子项目是一个待完成的完整任务，实施过程按照任务驱动进行教学，“混合式教学”实施过程如图3所示。课题组借助手机app实施课堂教学。课前，教师依据教学设计发布事先录制好的视频，以任务的形式布置给学生，并且会有短信通知发送给学生。学生的主要活动是观看教学视频，进行自主学习，目的是了解和预习教学内容，为即将开展的教学活动奠定基础。课堂教学过程教师使用app和学生进行课堂互动，包括随堂教学任务布置、在线测评、问题抢答、在线点评、头脑风暴等，有效调动了学生学习的积极性和主动性，也增强了课堂的趣味性。教学任务完成之后，根据任务实施情况发布拓展性任务。课后教师借助各种平台（比如微信）和学生交流，收集优秀作品，在课程学习交流群发布，供学生学习交流。

五、“混合式教学”评价

HTML5网页设计混合式教学采用了多种评价相结合的方式，尤其注重过程性评价。学生“网络平台”的使用、课前预习情况、课堂参与情况与表现、课后学生作品评价等都是评价的重要指标。阶段性任务考核与综合性评价相结合评估学生学习质量，阶段性任务考核是对一个项目完成情况的考核，综合性考核评价是课程学习结束之后，对学生综合性课程设计的完成情况进行评价。同时，考核过程中注重对学生学习情况阶段性反馈，以便于学生掌握自己的学习情况，提高学习质量。

六、总结反思

混合式教学显著提高了教学效果，提升了学生学习质量，但是也出现了各种各样的问题，需要对存在的问题进行反思和进一步研究，以便更好地提高教学质量。

1.学生课堂学习积极性和主动性提高，但是在线上教学时部分缺乏学习积极性的学生预习质量不高，影响课堂教学进度。解决方法是督促未预的习学生，保证课前预习的有效性，同时进行多样化教学设计，参考学生课前学情数据，课中进行针对性教学。

2.学生课堂学习目的性加强，但是模仿在多数，缺乏问题意识。解决方法是进一步丰富课程资源，完善课程测试内容和题库。

3.学生实践操作能力有明显提升，但是“贫富差距”进一步拉大。解决方法是采用多样化学习资源，创建多维互动环境，有效获取学情，布置更有针对性的作业。

当代手机+实践的教学模式更能被高职院校的学生接受，面向他们的教学必须做到不受时间、空间限制，在线教学安排要循序渐进，螺旋递增，线下教学要耐心细致，不可急于求成。针对HTML5网页设计课程混合式教学虽然取得了不错的效果，但是在如何更加贴近高职学生的在线学习规律，如何满足多层次学生学习等方面，还有待于进行深入的研究。

【参考文献】

美国新媒体联盟，北京师范大学智慧学习研究院.2017新媒体联盟中国高等教育技术展望：地平线项目区域报告[R].2017-03-08.

中教新媒.如何开展混合式教学的设计与实践[EB/OL].（2017-08-07）[2020-02-07].http：//www.sohu.com/a/162827471_414933.

阮高峰.微课与混合式教学设计[EB/OL].（2017-11-06～2018-01-21）.https：//www.icourse163.org/course/detail.htm？cid=1002110006.

刘斌.基于在线课程的混合式教学设计与实践探索[J].中国教育信息化（高教职教），2016（06）：81-84.

余建波.如何开展混合式教学的设计与实践[J].中国教育网络，2017（08）：72-73.

中华人民共和国教育部.教育部关于加强高等学校在线开放课程建设应用于管理的意见（教高〔2015〕3号）[EB/OL].（2015-04-13）[2020-02-07].http：//old.moe.gov.cn/publicfiles/business/htmlfiles/moe/s7056/201504/186490.html.