教育信息化2.0背景下高职《网页制作》课堂教学设计与实践

摘要：以“相对定位与绝对定位”教学单元为例，从教学分析、教学设计、教学过程、教学评价与效果、教学特色与反思等方面对《网页制作》课程进行了信息化教学设计与实践。利用多种信息化手段、融入“课程思政”元素，突出学生的主体地位，有效突破教学重难点，提高了高职学生学习的主动性与综合应用能力。

关键词：信息化教学;课堂教学设计;网页制作课程

随着社会信息化水平的不断提升，教育信息化从1.0时代进入2.0时代，新信息时代赋予了教育信息化新的使命，“融合”和“创新”成为了高校教育发展的核心理念^[1]。但是，目前大部分学校，主流的信息化教学形式依旧停留在多媒体教学，教师直接使用电脑操作演示，或是照着演示文档讲解，学生课堂听讲，课后下载多媒体课件复习。这样的课堂教学仍然是以教师为中心，学生被动接收知识，课堂教学效果很难保障。

作为教师，提高自身信息化素养，深入探讨如何发挥“互联网+”、大数据、云计算等信息技术优势，变革传统教学模式，推进新技术与教育教学的深度融合，真正实现从融合应用阶段迈入创新发展阶段^[2]，利用信息技術和“互联网+教育”大平台进行教学设计，激励学生利用信息化环境进行学习、探索与实践，从而完成教学任务，增强学生的学习应用能力，已经成为教学改革的重要任务。以《网页制作》课程中的“相对定位与绝对定位”教学单元为例，对教育信息化2.0时代背景下创新教学设计与实践进行探索。

一、信息化教学概述

信息化教学是指教师合理、充分运用信息技术、数字资源和信息化教学环境，突出教学重点，解决教学难点，创设学习的情境，并根据实际教学情况及时调整、优化教与学的过程^[3]。教育信息化2.0时代的信息化教学，需要将信息技术和智能技术深度融入教学全过程，借助高速宽带网络和4G/5G移动网络，利用转型升级的智能化教学平台和服务应用将课堂外的研学与课堂内的讲授活动深度融合，将以传统课堂教学为主的学习模式逐渐向不受时间、空间和媒介约束的“开放式”学习模式转变。课堂教学从“信息化”拓宽到“智慧化”，学习环境从线下课堂拓宽到线下线上融合课堂，学习内容从课本拓宽到互联网大资源，学习模式从学、记、考拓宽到虚拟现实和模拟实践操作。将学生从简单的课堂学习应用能力向利用“互联网+”技术解决学习、生活中问题的信息素养能力拓展。同时，充分利用信息化技术手段和媒体资源传播优势，将符合时代特征的课程思政内容渗透到教学全过程，推进落实立德树人的教育根本任务。本次教学设计基于教育信息化2.0教学要求，结合“网页制作”课程的特点，分为教学情况分析、教学过程设计、教学评价、教学特色与反思等四个部分。

二、教学情况分析

《网页制作》是高职计算机类专业基础课程，主要是培养学生静态网页制作、维护和开发能力，为学生后续学习《动态网页开发》等课程提供有力支持。“相对定位与绝对定位”选自该课程单元三：CSS定位与布局的子任务，是该课程中的重点也是难点内容，单纯的理论讲解，学生很难理解定位的原理与区别。

为了摆脱传统教学模式时间和空间的束缚，满足学生随时随地都能学习的需要，推动从教育专用资源向教育大资源转变^[2]，实现因材施教、个性化教学，课程团队将原本需要在课堂上按部就班讲解的内容和知识点数字化、碎片化，共划分为68个知识点与技能点，每个知识点有配套微视频、PPT和学习文档，并将其嵌入到超星学习平台中去。另外，为了直观动态演示网页效果的实现过程，课程团队自主研发了“网页实验箱”，结合课程实践案例设计了16个实验模块，将一些学生难以理解的HTML属性和CSS样式的实现过程动态呈现，可以帮助学生更好的理解教学重难点。

本次课程授课对象为高职计算机类专业一年级学生。这批“数字原住民（Digital Native）”^[4]信息素养和自主获取知识的能力相对较高，他们喜欢玩电脑玩手机，喜欢学中做，做中学的课堂形式。通过一个阶段学习，学生已经具备了基本的HTML网页设计与CSS编码能力，掌握了CSS样式基本类型等基础知识。根据云平台学习参与度和学习深度等数据分析以及本次课前线上测验反馈，约30%的学生对于样式属性不够熟悉，80%的同学对于定位的理解不够深入，普遍对编码有畏惧心理，需要通过课堂反复练习或多次补充讲解才能掌握。

三、教学过程设计

依据教育信息化2.0行动计划创新发展智慧教育行动要求，在教学过程中不断融入丰富的信息化教学资源，发挥现阶段高职院校学生信息素养和自主获取知识的能力强的优势，通过情境创设、问题探究、协商学习、意义构建等形式，将传统教师课堂讲解转变为以学生为主体、多种学习形式相结合的学习模式。基于教学情况分析，本次教学选取真实网页案例“焦点图”作为教学的任务载体，以学生为主体，教师为主导，以“任务驱动”和“问题解决”作为学习和研究活动的主线^[5]，以超星学习平台和作品云平台为依托，采用“网页实验箱”模拟与实践操作相结合、自主探究与小组合作相结合、线上线下混合式教学模式，完成教学任务。教学过程分为课前准备、课堂实施、课后提升三个阶段（如图1所示）。

（一）课前准备

这一阶段教师应在课前将需要学习的资源如微课视频、PPT文档、以及课堂学习流程发布到网络学习平台，让学生明确具体的预习内容和目标，先行建构个性化知识体系，强化学生自主获取知识能力。与此同时，教师通过平台数据及时了解学生的预习情况，收集学生在学习过程中反馈的问题。本次教学具体做法是利用超星学习平台向学生布置课前学习任务：①通过网络课程平台自主学习相对定位与绝对定位知识点，明确该单元的疑点、难点。②完成在线测试。③发布课前讨论：身边有哪些大事适合通过焦点图来宣传？然后通过平台的统计数据分析了解学生的学习和讨论情况，通过讨论结果确定焦点图主题，如“教师节”，即可针对这一主题自然融入“课程思政”元素;通过统计结果确定学生参与度、学习深度、测试成绩等，进一步确定本单元教学的重难点内容，实时调整教学实施内容。

（二）课堂实施

本次课堂教学采用任务驱动法、实验法等教学方法，开展以学生为中心的行动导向教学，引导学生通过自主学习、合作学习、探究学习，将学习内容逐步分解吸收^[6]，具体分为五个环节。

环节1：教师展示分析课前预习情况，使用超星学习平台“词云”统计功能分析课前讨论的焦点图主题，并针对主题引入思政教育内容：孝敬父母，尊敬师长，感恩社会，报效祖国等，将学生德育教育及实践任务有机地融合，完成培养学生“爱国、敬业、诚信、友善”的思政目标。同时提出实践任务——制作静态焦点图。

环节2：教师通过超星学习平台发起投票，让学生根据课前预习内容，选出实现案例任务需要使用的定位方法。根据投票结果，教师引导学生分别采用自己投票选择和同学选择的方法，通过“网页实验箱”进行验证，并在操作完成后对几种定位方法的效果进行对比分析。针对不同思路产生的问题，教师利用视频动画和“网页实验箱”演示讲解相对定位和绝对定位原理，帮助学生分析问题，化解教学难点。

环节3：明确任务实现方法后，进行分组实践。各小组通过抽签小程序领取不同的网页效果焦点图，学生以小组团队的形式协作完成实践任务。实践过程中，组内讨论实施方案，教师通过超星学习平台发布讨论，收集各小组遇到的问题，引导其他小组分析解答问题，教师根据发现的问题指导学生编码，提醒注意事项。学生在边学边做的过程中有效深化了教学重点的学习。

环节4：组织各小组推荐代表上台进行展示汇报，重点讲解文字与按钮的定位样式，教师引导学生一起分析总结实现焦点图样式的一般方法。展示结束后，通过超星学习平台组间评价功能进行互评，得分最高的小组获胜。

环节5：教师引导学生一起讨论并总结实现两种定位的区别与应用场合，随后在超星学习平台发布课堂测试，检测学生知识点掌握情况，归纳解决问题的一般思路，帮助学生在不同应用场合举一反三灵活运用。

（三）课后提升

教师通过超星学习平台发布难度递增的测试和实践任务，模拟真实开发环境中可能遇到的需求调整情况，对课堂任务进行拓展，要求学生思考完成，复习和强化教学重难点内容的学习。学生将实践任务作品上传至作品云平台服务器，教师和企业导师对作品进行检查评分，学生也可以通过扫码或点击链接等方式查看同学的作品展示效果，发布评论和点赞，作品成绩自动记入平时考核评价。

四、教学评价与效果

在信息化背景下，教学评价应突出评价的多元化，充分利用信息化手段，利用各种评价方式，全方位评价学生的整个学习过程，从而激发学生的学习主动性与积极性，提高学习有效性。传统的教学考核评价形式一般以考试成绩为主，形式比较单一，学生的课堂表现往往取决于教师的主观印象。本次教学，在超星学习平台的支撑下，通过统计学生在学习过程中数据信息，对学生课前学习、课堂活动和课后作业等环节进行自动考核评价，采用线上评价与线下评价相结合的方式，将教师评价、平台评价、学生互评、企业导师评价贯穿于整个教学过程（如表1所示）。教师还可以根据实时评价结果对授课内容及时作出调整，使教学考核评价机制更加全面、客观、公正，使课程教学更具有针对性和实效性。

教学过程是教师和学生双方的互动活动过程，除了对学生的进行考核评价，同时也让学生对教师和课堂进行评价。通过学生对教师和课堂的评价，帮助教师更全面地了解学生学习情况，改进教学方法，合理利用信息技术，针对不同的学生进行精准化教学。因此，本次教学活动也安排了课后学生评价课堂的调查问卷。根据调查问卷统计结果显示，教师的授课受到学生们的一致好评，学生获得了良好的学习体验。学生普遍认为课程内容以案例教学为主、任务驱动，案例丰富，结合实际，视频教学讲课生动、有激情，知识点碎片化到位，讲述清楚，重点突出，深入浅出，有感染力，使用启发式教学，网络教学资源丰富实用、网络答疑及时、作业批改到位、网络平台有利于交流互动等，提升了学生的技能，提高了学习质量和实践能力。

五、教学特色与反思

在信息化技術应用方面，本次教学充分利用了多种信息技术手段，包括超星学习平台、网页实验箱、抽签小程序、定位动画、作品云平台等。其中，自主开发的“网页实验箱”具有交互功能，可以根据教师或学生设置的样式属性参数，动态实时呈现编码后的定位效果，让学生快速地在代码与样式效果之间建立关联，帮助学生轻松理解原理和记忆样式属性，解决了传统教学中教师只能通过逐行编写代码进行演示讲解，学生对代码抽象难理解、易混淆、难记忆等问题，具有可推广性。

在考核评价方面，学生在超星学习平台、“网页实验箱”、作品云平台三个平台的线上学习活动，均可生成对应学习过程记录，为综合评价提供了科学依据。综合评价表明，学生大都完成了学习任务要求，有效达到了教学目标。但是如何实现“网页实验箱”平台评价数据、作品云平台评价数据和超星学习平台的共享与对接，实现更高效更智能的过程性评价，需要进一步优化整合。

在课程思政方面，利用信息化手段，统计学生感兴趣的话题，并以此为主题设计教学案例，将实践任务与思政教育相结合，向学生传达孝敬父母，尊敬师长，感恩社会，报效祖国等思想，使学生在学习过程中有思想上的感悟，深入思考社会人的责任与使命，取得了较好的效果。思政教育的融入是一个日积月累过程，如何准确把握思政内容、充分挖掘课程中蕴含的思政元素、检验思政教育成效等问题，需要专业课教师不断提升自身教学c能力和思政水平。

结   语

通过“相对定位与绝对定位”教学单元的信息化教学设计与实践，探索高职《网页制作》课程的信息化教学的有效方法。在课堂教学设计过程中突出学生的主体地位，基于真实网站案例引入分析，自然融入“课程思政”元素，运用丰富的微课视频、教学动画、“网页实验箱”等信息资源和技术，将知识形象化、生动化，激发学习兴趣，便于学生理解知识点，为教师在“互联网+”时代下开展高职信息化教学设计提供一定参考。

参考文献：

[1]  李娜.教育信息化2.0时代下：高校教师信息化教学能力的培养与提升[J].建筑工程技术与设计，2018（34）：4202.

[2]  教育部.教育部关于印发《教育信息化2.0行动计划》的通知[Z].教技[2018]6号， 2018-04-18.

[3]  郑雪芳，董晓丹.高职院校《C语言程序设计》信息化教学设计研究[J].铜陵职业技术学院学报，2019，18（04）：85-87+96.

[4]  曹培杰，余胜泉.数字原住民的提出、研究现状及未来发展[J]. 电化教育研究， 2012（04）：21-27.

[5]  王欣，杨泽伟.关于职业教育信息化及信息化教学设计的探讨[J].职教论坛，2014（05）：76-78.

[6]  刘璐.《传感器应用技术》信息化教学实践——以认识温度传感器教学设计为例[J].数码世界，2020（05）：119.

收稿日期：2021-10-19

作者简介：殷兆燕（1982- ），女，常州信息职业技术学院软件与大数据学院讲师，硕士，研究方向：软件技术、web应用开发等。