杨彦聪

摘要：文章分析了HTML5+CSS3网页基础课程在教学中存在的问题，运用线上线下模式理论对该课程课前、课中、课后三个环节进行教学设计。文章从线上线下混合式教学的教学过程和考核方式两方面着手，细致地讨论了“HTML5+CSS3网页基础”课程教学过程中如何有效地进行线上线下教学。

关键词：线上线下;“HTML5+CSS3网页基础”;教学模式

一、绪论

“HTML5+CSS3网页基礎”是计算机应用技术专业的一门专业必修课，是一门实用性极强的课程，在课程体系中占有重要的地位，本课程主要培养学生掌握制作网页、建立网站的能力。目前，很多职业院校的“HTML5+CSS3网页基础”课程都是采用“以教为主”的传统教学模式，通常的课时安排是一周两次共4节课，笔者近几年一直从事这门课程的教学，对此也进行了深入思考，结合该课程的特点及学生的学习现状，尝试进行了线上线下教学法，即“HTML5+CSS3网页基础”课程教学活动，学生学习的积极性有所提高，教学效果也有进步。

二、“HTML5+CSS3网页基础”教学中线上线下教学法的教学过程

利用智慧职教MOOC平台开展“HTML5+CSS3网页基础”课程的线上教学。本课题组承担的“HTML5+CSS3网页基础”在线开放课程经过1年的精心筹备和制作，2022年8月正式上线，实现了本校计算机应用技术专业课程的线上教学。

在教学内容的设定上，笔者根据在线课程的特点，将各章节内容分割成多个独立的知识点，每个知识点录制成1～3个视频，每个视频时长不超过15分钟，这些视频形式上独立，但知识点之间又互相贯穿。经过精心设计，本课程共录制了百余个小视频，涵盖了网页规范、HTML5标签、CSS3基础、CSS3选择器、盒子模型、网页布局和表单七章节的大部分知识点，平台上还设置了讨论、小测、阶段测验等板块，可以实现生生、师生间的实时互动。这种线上教学模式变换了教师与学生在课堂教学中的角色，真正形成了以学生为中心的教学方式;通过重构学习流程、学生在线参与、自主学习、互动讨论与协作、课堂讨论、即时测试等形式，激发了学生参与课程学习的热情[1]。

1课前-线上预习

自主学习内容，并完成相关知识点小测。教师通过网络教育资源平台（比如智慧职教）为载体，发布单次教学内容的小视频，该视频是对知识点的微型化处理，学生自主学习完成后，需要通过知识点的测验才能进行下一个知识点的学习。这就要求教师熟练的掌握制作教学视频和课件的方法，这一步骤我们在在线精品开放课中完成。

下面以实际案例说明课前线上预习的详细步骤，例如，盒子模型是“HTML5+CSS3网页基础”课程的一个重点，教师在线上发布关于盒子模型的相关视频，学生可以有选择地进行观看和思考，然后解答视频后面的小测，才能结束本次预习，这样不仅加深了学生对该知识点的认识和理解，还培养了学生主动学习和解决问题的能力。针对学生相关知识点的小测结果，在线下课堂教师可以更加明确、更加有针对性的开展教学。

由于本门课程开设第一学期，教学学时有所减少，但是课程内容并没有缩减，那么我们的教学就不得不拓展到线下课堂教学以外了，所以课前的线上预习活动就显得不可或缺了，相应的，为了提高课前线上预习质量，任课教师或者教学活动设计者需要千方百计的调动学生的学习兴趣，例如在视频学习的开端，设计游戏闯关的环节，由浅到深，层层递进，调动学习兴趣，促进预习质量。[2]

2课中-线下课堂教学

“HTML5+CSS3网页基础”课程的主要内容是按照规范和设计要求制作符合标准的网页。单纯对知识的照本宣科和对代码的机械背诵都不能给学生带来构建知识的成就感，只有教师对相应的代码举一反三、总结、对比，才能让学生体会到网页的奥秘，将外在的网页构成知识升华为内在的学识，所以“HTML5+CSS3网页基础”课堂对任教者有更高的要求，需要任教者设计更加巧妙的课堂教学设计，实施独具特色的多元化教学模式，如任务导向式教学、探究式教学等。

根据线上预习小测的完成情况，可以了解学生对本次教学内容的掌握情况，在课堂上教师可以有的放矢，精准施教，进而提高教学效率。[3]通常情况下，线上预习时视频是独立精炼的，而“HTML5+CSS3网页基础”大部分的任务都是综合性质的，需要若干个知识点来完成。这时候，课堂上我们不可能再将这些涉及到的知识点一一讲解了，只需要将涉及到相关知识点的视频放到网络平台上供学生有选择的学习。例如，制作一个注册页面，首先分析完成整个任务需要的知识点，也就是知识点的拆分，然后将其所需要的input控件的type属性的相关视频、css控制表单样式的相关视频上传到网络平台（比如智慧职教），学生可以根据自己已有的认知结构，对给定的知识点视频进行重新组合进而完成注册页面。

3课后-线上巩固

课堂学习完成之后，学生对本次内容有了更深入、系统的认识，教师在网络平台（比如智慧职教）发布相对应测试，学生完成后可以在平台看到具体数据，这个数据可以非常准确的了解学生对知识的掌握情况。另外，每章节学内容结束后可进入阶段案例测试环节，测试成绩可以作为学生平时成绩的一部分，通过这种方式可以提高学生学习的积极性。

三、课程考核方式

为了线上线下教学的高效进行，充分提高学生自主学习和解决问题的能力，“HTML5+CSS3网页基础”课程的评价由两部分组成，平时成绩和期末考试，其中平时成绩是由网络教学平台上的相关数据组成的，例如视频观看时长、讨论、小测、阶段测试等等。这样减轻了学生期末考试的压力，加大了学生平时学习的参与度，鼓励学生养成良好的学习习惯。

综上所述，线上线下教学模式的运用主要分为课前线上预习、课中课堂教学、课后线上巩固这三个具体的阶段，当然这种划分方式只是为了让应用者明晰其具体构成情况，在实际过程中，三者之间相互交织和影响，联系非常紧密。“HTML5+CSS3网页基础”课程是系统复杂的工程，笔者应当在实际教学过程中对该教学模式进行不断的探索和改进，使其能够在教学中发挥越来越大的作用。

参考文献：

[1]徐晓飞.抓住 MOOC 之机遇促进计算机与软件工程专业教学改革[J].中国大学教学，2014（1）：29-33.

[2]刘镇.混合式教学模式在高职建筑工程计量与计价课程中的应用[J].现代职业教育，2016（31）：78-79

[3]黄晓亚线上线下混合式教学方法研究---以“量子力学”课程为例.[J].江苏科技信息，2022（3：48-50）

课题项目：高职院校线上线下教学相互融合的方法研究;

项目编号：20220375。