网页设计与网站建设混合式教学研究

导语：网页设计与网站建设混合式教学研究一文来源于网友上传，不代表本站观点，若需要原创文章可咨询客服老师，欢迎参考。

摘要：网页设计与网站建设课程借助云班课平台进行课程改革，与传统教学方式相比，教师能够更有效地把握课堂节奏，调动学生的学习主动性，做到课内课外无缝衔接，从而提高整个课程的教学效果。该文将介绍具体的云班课平台资源整合以及基于云班课平台在网页设计与网站建设课程改革中的应用。

关键词：云班课；混合教学；线上线下

网页设计与网站建设课程为计算机软件技术、计算机网络技术、计算机应用技术等专业的一门专业基础课，该课程以实践为主，面向的岗位如网页设计师、前端开发人员等，课程特点为理论与实践相结合，对学生的实践操作能力要求较高，要求学生能够独立自主完成网站的开发，做到美观、大方、富有创意、让人赏心悦目。传统的课堂教学此课程一般为48课时，对于学生能够熟练应用HTML、CSS与JavaScript完成网页设计与制作，时间远远不够，同时传统教学中，学生学习积极性不高，课堂玩手机现象严重。如何激发学生的学习兴趣，扩展学生的学习时间，使学生灵活运用所学完成网页的设计与制作，是每位网页设计与网站建设课程老师需要解决的重要问题。云班课（原蓝墨云班课）是由北京智启蓝墨信息技术有限公司在2014年开发的移动网络环境下为教学服务的一款智能教学客户端App,它能够支持移动网络环境下为教师提供教学资源、布置批改作业、与学生交流、发起多种教学活动、测试、考试、分析各项教学活动及学生成绩等，方便教师的教学活动，同时也充分利用学生的手机资源，使学生从上课玩手机到利用手机完成课堂及课后学习的有力工具，增强师生交流，有效提高教学效果。网页设计与网站建设课程借助云班课平台进行课程改革，与传统教学方式相比，教师能够更有效地把握课堂节奏，调动学生的学习主动性，做到课内课外无缝衔接，从而提高整个课程的教学效果。本文将介绍具体的云班课平台资源整合以及基于云班课平台在网页设计与网站建设课程改革中的应用。

1重构课程内容，建立完整的课程资源

网页设计与网站建设课程主要讲解HTML+CSS+JavaScript技术，将网页内容、外观样式及动态效果进行分离，从而减少页面代码，提高网速。其实践性较强，各种标签较多，学生容易混淆、遗忘。而如果不理解意思只是机械地按照书本完成实验，将达不到灵活应用的要求。因此要求学生需要在有一定的计算机基础和PHOTOSHOP基础上能够熟练应用各种标签完成具有自己特色的页面。显然，传统的课堂教学及课程内容不能满足此要求，传统课堂教学时间有限，且枯燥乏味，学生容易被手机吸引，教学效果较差。改革传统教学内容，将课程内容分为简单页面制作，咖啡店主题页制作，“珍馐阁西点”专题页制作，“志高电子”网站首页制作、“鸿潘电子科技”主页制作五个项目，以项目为导向，采用情境教学模式，通过项目将相关知识点串联起来，不同的项目有助于学生掌握不同网站的设计风格和制作技巧。教学内容重新规划设计好后，将所有的素材进行分类，并录制微课，建立完善的课程教学资源，包括教学大纲、授课计划、教学设计、PPT、讲解视频、案例素材、试题库等。云班课课程对于教师提出了更高的要求，需要教师付出几倍的努力，只有教师自己对课程有全面的了解，技术熟练，而且能够完成完整的课程素材及讲解视频，才能实现线上线下结合，学生能够随时随地学习，从而能够实现学生对知识的灵活运用。

2基于云班课的混合式教学模式设计

《网页设计与网站建设》课程旨在引导学生根据客户实际需求分析制定网站目标，确定结构和栏目，设计、采集或制作网页的素材，合理布局网页，建设完善可用的网页。根据学生学习特点、课程特点以及教学规律，尝试设计如下基于云班课的线上线下混合式教学模式，如图1所示。

2.1课前引导探究，自我摸索

课前教师首先对课程内容进行分析，完成教学设计，准备资源，将课程资源到云班课中，同时给出课前任务单，学生根据教师的课前任务单，完成课前任务。如图2所示。教师可以根据云班课中学生的完成进度，以及学生的提问了解学生的问题，及时调整教学计划与内容以及教学重难点，使其更好地帮助学生完成相关内容的学习。学生在完成课前任务单的同时，可以进行小组交流，及时记录自己遇到的问题，向教师进行反馈，对于自己遇到的问题，可以自己通过搜索得到答案，也可以向老师提出问题，教师进行解答。如图3所示。这样课前就能使师生进行充分的互动，对课程内容有充分了解。

2.2课中答疑解惑，实践操作

课中教师对课前学生反馈的问题进行答疑解惑，对一些重点及难点进行讲解，通过云班课中多种活动如“头脑风暴”“投票问卷”等活动，同时还有“抢答”“摇一摇”等方式，调动学生课堂积极性，使学生对相关知识进一步强化。学生分组讨论遇到的问题，展示作品，在讨论中不仅能够一起面对解决问题，还能加强交流沟通。网页设计与网站建设课程最重要的是实践操作，课上除了答疑解惑、分组讨论外教师可以布置一些相关的实践操作，学生分组完成，完成的作业上传到云班课，大家进行互评，学生可以在评分的过程中发现不足，从而进一步完善，同时也加深了对知识的理解。教师引导学生进行自我反思和总结，并开展自我评价，构建自己的知识体系。最后通过云班课中的“测试”了解学生的掌握情况。在这一过程中教师结合云班课及学生课堂表现，对学生存在的问题进行解答，同时不断调整自己的教学方案，适时进行教学整改，从而使教学效果最佳。

2.3课后知识拓展，灵活运用

围绕网页设计课程的特点，需要学生能够灵活运用所学，设计出精美的网页，课堂时间非常有限，因此课后需要大量的练习与学习时间，教师根据教学内容布置开放的课题，学生可以自由发挥不同主题的页面，同时通过云班课的“讨论”“消息”“私聊”模块，能够随时与教师进行沟通，实现线下与线上结合。这一环节中教师通过学生的反馈以及云班课生成的数据，可以及时了解学生的掌握情况，对于参加活动较少的同学予以重点关注，而经验值较多的同学可以布置多一些拓展任务，帮助学生进行深入学习。如图4所示。

3“珍馐阁西点”专题页标题制作混合式教学设计案例

以《网页设计与网站建设》课程的项目三“珍馐阁西点”专题页中的任务5——制作“标题”模块作为教学实施案例，遵循课前引导探究，自我摸索—课中答疑解惑，实践操作—课后知识拓展，灵活运用的模式，分为三个环节，课前探标题制作—课中话标题制作—课后拓标题制作。1）课前探标题制作课前教师准备教学素材和视频，首先对页面的标题部分进行结构分析，分解标签，对相关标签进行讲解，然后制作页面标签。视频录好后，将视频和素材都上传至云班课，同时在云班课中布置学习任务单，学生通过课前观看视频、完成学习任务单，对相关知识点及操作有了一定的了解，若存在问题则进行搜索解决或记录反馈给教师，教师根据学生的问题及时调整教学内容。2）课中话标题制作课堂教学中教师首先对学生的课前问题进行答疑解惑，如如何控制标题块的高度，如何控制字体加粗和倾斜等，通过问题的解答不仅能强化重难点，同时能够对相关内容进行拓展讲解。接着通过小组讨论、完成相似实践任务，让学生在讨论和实践中加强对知识点的理解，强化练习。最后对课堂练习进行小组互评，在相互的点评过程中发现问题，解决问题，进一步加深理解。教师巡视学生完成情况，同时通过学生上传到云班课的作业，发现问题，对存在的问题进行统一讲解。3）课后拓标题制作课后布置拓展任务，使学生能够灵活运用所学完成自定主题的标题模块。通过课后拓展，将课堂内容与具体工作实践相结合，真正做到知识的理解与运用。教师通过云班课中每位学生的经验值图表分析，能够清晰地了解每位同学的学习情况，对于经验值较低的同学给予重点关注。

4云班课教学效果分析

将基于云班课平台的线上线下混合教学与传统课堂教学进行比较，基于云班课平台的线上线下混合教学有如下优点：1)优化教学内容，适时进行教学调整利用云班课平台进行教学需要教师对教学内容进行优化，完善教学资源，通过云班课中学生的反馈及时对教学进行调整，而传统教学中，教师很难及时掌握学生存在问题，因此教学是一成不变的，不能适应新时代学生的要求。2)共享教学资源，实现随时随地学习云班课中教学资源丰富，通过网络学生可以在手机上利用碎片化的时间进行学习，同时能够进行反复学习，加深对知识的理解。而师生互动也能随时进行，通过教师及时的答疑解惑，使存在的问题一一解决，有利于学生对知识的掌握。3）调动学习积极性，灵活运用所学传统课堂教学中学生积极性不高，教师讲授枯燥无味，学生被手机吸引，而在云班课平台下，手机是学习的工具，教师通过云班课平台任务，学生通过不同的活动完成知识的内化，构建自己的知识体系，从而达到灵活运用知识的目的。

5结语

基于云班课的线上线下混合教学打破了传统教学的时间与空间限制，将教学贯穿于课前、课中、课后3个阶段。课前自学过程中，学生遇到问题可以借助云班课讨论，教师根据学生提出的问题再确定下一步的教学目标，及时进行教学诊改。课堂上通过小组合作、讨论交流、成果分享、归纳总结等教学活动，促进学生个性发展，提升学生合作能力。课后，教师通过知识点测试和作业任务，增加学生练习机会，拓展学生视野，使学生能够灵活运用所学。通过云班课平台，学生不仅在课堂上变得活跃，课后与老师互动增加，使学生的学习由被动变主动，课堂学习由原来的以教师为主变为以学生为主，教学质量得到提升。

参考文献：

[1]李春良.基于云班课的高职学前教育专业混合式教学实践——以《学前儿童游戏与指导》课程为例[J].高教论坛,2020(11):102-105.

[2]黄丹卉.基于云班课平台的高职英语混合式教学实证研究[J].宁波职业技术学院学报,2020,24(5):32-39.

[3]刁海军,罗伟,张小宇,等.基于移动学习App的混合式教学研究与实践——以云班课移动学习资源的建设与应用为例[J].太原城市职业技术学院学报,2020(11):65-67.

作者：瞿江 单位：苏州信息职业技术学院