五星教学法在网页设计与网站建设课程中的应用探讨

谭生龙（湖北经济学院法商学院，湖北 武汉 430205，湖北经济学院，湖北 武汉 430205）

李周娜，胡清华（湖北经济学院，湖北 武汉 430205）

一、引言

《网页设计与网站建设》课程是计算机专业、电子商务专业、大数据专业、人工智能专业的一门专业选修课，也是很多高校面向本科生开设的一门应用性公共选修课。该课程一般为2 个学分，课时安排包括理论教学和实验教学，其计划总学时一般为34 课时，该课程讲授的知识点多且面向不同专业背景的学生开设，学生的编程基础参差不齐，而且该课程培养学生设计网页、编写代码、调试程序并维护网站的能力，实践性较强，要求学生在学好理论知识的同时还需使用网页编程软件进行编程开发，将设计好的多张网页设计图用源代码编程实现，并从整体上把握多张网页外观布局的一致性，将多张网页共同组成一个风格一致的网站。因此，学好本课程对学生具有一定的挑战性，本文探讨了通过使用“五星教学法”改革教学模式，变更教学方法，帮助学生高效学好本课程的一些教学方法。

二、五星教学法概述

五星教学法，又称“首要教学原理”[1]，是美国当代教育家梅里尔（David Merrill）提出的以“聚焦解决问题”为核心的教学方法，该方法强调师生共同参与教学过程[2]、注重教学效果，适合培养学生的编程能力。五星教学法包括五个步骤[3]：第一、聚焦问题，即课堂讲授的内容应该以解决现实生活中的实际问题作为出发点；第二、激活旧知，即讲授的新知识应该与学生已掌握的旧知识（学生已熟悉的知识）相联系，以学生先前已掌握的知识作为桥梁引入新知识，逐步过渡到将讲授的新知识；第三、示证新知，即展示、论证新知识，教师从多角度讲授新知识并应用多个实例展示新知识的应用场景；第四、应用新知，即通过给出多个紧扣新知识的习题、案例和项目让学生进行练习，强化学生对所学知识的掌握和理解；第五、融会贯通，即新知识的迁移学习，此阶段重点培养学生灵活应用所学新知识的能力，并引导学生应用新知识进行创新和创造。

三、网页设计与网站建设课程的教学现状

目前，网页设计与网站建设课程主要的教学模式为“教师讲授、学生模仿并编程实现”，该模式不利于培养学生灵活应用所学新知识的能力，也不利于培养学生开发项目的编程实践能力。首先，教师在课堂上讲授网页设计与网站建设的理论知识，然后教师再安排多个独立的验证性实验对所学知识进行巩固练习，实验课的内容主要通过让学生编写代码重现课本上的例子程序或者重现教师所讲授相关章节知识点的验证性实验代码，学生偏重于学习网页设计与网站建设课程的理论知识，比如HTML 语言中标签的语法、CSS 层叠样式的语法、JavaScript 语言中的语法，缺乏对所学知识的深层次理解，较少关注学生对所学知识的灵活应用，也没有培养学生开发项目的实战技能。

四、五星教学法在网页设计与网站建设课程中的应用

本文将五星教学法的五个步骤贯彻到教学过程中，实现对教学过程的改革。具体而言，“聚焦问题”是在每一次课前，教师向学生介绍本次课将要讲授的知识点，该知识与之前所学知识点间的关联关系，为什么要学这些知识点，这些知识点的应用场景在哪里，这些知识点在《网页设计与网站建设》课程的整个知识体系中所处的位置和作用。比如在讲授本课程的页面布局技术CSS+DIV 页面布局时，首先，介绍网页设计与网站建设中常用的页面布局技术，包括表格布局、CSS+DIV 布局、Flex 布局和Grid 布局等，并介绍它们的应用场景和优缺点；然后，引入本次课将讲授的CSS+DIV 页面布局概述，并列举国内一些综合门户网站的页面布局实例进行分析和讲解；比如，展示门户网站之一的网易首页的源代码并分析该页面的布局模块及怎样实现该页面的布局，讲授使用层叠样式CSS 和DIV 标签可方便实现网易首页的页面分块布局，如果不使用该技术布局而使用HTML 的表格布局则会使页面布局复杂且网页在浏览器中的显示性能会下降，并进一步讲解使用CSS+DIV 进行页面布局的优势。

“激活旧知”就是将准备讲授的新知识与学生已掌握的知识进行关联，让“旧知”成为掌握“新知”的跳板，通过回忆、关联、类比和应用“旧知”，将其作为接受“新知”的基础，从“旧知”逐步过渡到对“新知”的理解和掌握。比如，在课程《网页设计与网站建设》的课堂教学过程中，在讲授层叠样式CSS 时，把通过设置HTML 标签的属性来改变文字格式和使用层叠样式CSS 设置文字格式进行比较，让学生从通过设置标签属性设置文字格式转换到通过设置标签的CSS 层叠样式来修改其格式/样式。

“示证新知”就是在教学过程中讲清楚“新知识”的概念、知识点之间的逻辑关系，并使用关键案例来示范概念和知识点之间的关联关系；教学过程中要使用图示、知识导图等手段清晰呈现知识点间的结构关系或者知识点的应用场景，让学生在观察和模仿中掌握“新知”。根据该原则，结合具体案例讲解知识点的多个应用场景。比如在讲授层叠样式的“盒子模型”这一节时，使用一个在页面中显示多段文本，将文本格式放置为页面居中对齐，设置多段文本的上下左右内外边距、边框等属性的例子，分别讲解层叠样式CSS 的“盒子模型”中相关的属性设置，即块元素标签的宽度width 属性、高度height 属性、外边距margin 属性、边框border 属性、内边距padding等，并运用这些属性来设置一个排版整齐美观的多段文本且将文本显示在页面中央的案例，详细讲解各CSS 属性的语法格式和计算盒子的总宽度和总高度的方法。

“应用新知”就是在掌握“新知识”之后的练习过程，由此巩固学生掌握“新知”的程度，通过练习“新知”、巩固概念并获得实践编程技能；逐步过渡到应用“新知”解决具体问题。应用该原则，并结合上一原则，通过多个实验案例讲解同一知识点的不同应用场景。例如，从不同角度应用“盒子模型”的属性，比如对块元素外边距margin 属性的讲解，通过案例展示多段文本可以使用margin 属性实现上下左右外边距的设置、使用margin 属性实现文本的页面居中、使用margin 属性实现块元素的上下左右平移和当设置多个块元素的margin 属性后，相邻元素间上下margin 属性的自动融合等。

“融会贯通”是指学生对所学“新知识”的融会贯通，对“新知”进行总结、简化和概念化，并让学生在课堂上参与教师主导的翻转教学，将所学“新知”应用到《网页设计与网站建设》课程的具体案例中去。在此环节，一般通过实际项目案例或者选用来源于学科竞赛的综合案例来训练学生掌握新知识、应用新知识的能力，让学生在独立设计网站的页面时能灵活应用所学知识点来实现自己的设计思想。结合前一原则的案例，通过将“盒子模型”的设计理念整合到一个章节的综合大作业中，实现灵活应用该页面布局模式，实现在页面中不同区域满足特定尺寸的页面布局格式设置，比如在案例“CSS+DIV 布局”中，使用“盒子模型”实现logo 分区、header 分区、menu分区、多个混排content 分区和footer 分区以及分区内嵌套的子分区的复杂布局样式；在案例“CSS 的Flex布局”中，设置弹性布局各个小块的边框、内边距、外边距等属性来实现伸缩灵活的自适应页面布局样式；在案例“CSS 的Grid 布局”中，通过比较网格布局中各个小块的长宽设置、间距设置、对齐设置及配合使用“盒子模型”中的属性实现Grid 页面格式。

为了更好地将五星教学法应用到《网页设计与网站建设》课程的教学改革过程中，引入信息化辅助教学手段可显著提高授课效率。应用学习通和微助教，将多种成绩评价方式[4]引入课堂，比如在微助教平台下每次课前可快速实施学生签到，在微助教中以选择题形式实现简短的课前测试，了解学生对上一次课所讲授内容的掌握程度，借助这些平台，教师可在讲授完几个知识点后在课堂上引入课堂小测验来了解学生是否已经掌握所授知识点，在微助教中实现分小组陈述课程项目并进行组间相互评分等；基于学习通了解学生在每次课前自学微课视频的情况，并将课外自学微课视频的时长作为平时成绩之一纳入课程期末成绩评定，在学习通平台上布置课后作业、评阅作业并评分，基于学习通的题库建设和在课堂、期中和期末从题库中抽题组卷实现在线考试，基于微助教的分组翻转课堂，每组由3～5 位学生组成，让该组完成对本课程某个重要知识模块的小组陈述并由教师和其他小组共同对该组进行评分，通过完成课程大作业及课程实验报告来检查学生对本课程知识灵活应用的情况，基于微助教的课程讨论、课程互动、天天快答等实现学生积极参与教学，从而实现本课程的全过程成绩评定。

任务驱动[5]主要是以多个与知识点紧密相关的项目任务为载体，需综合运用所学的知识点完成网页设计与网站建设的项目；通过完成项目让学生在开发项目的过程中逐步掌握所学知识并提高编程技能。构建有难度梯度的项目库，按照不同的难度设置每次作业，让学生完成基础项目后、有机会完成挑战性项目。可以将项目分成实验课中的项目和课后项目两部分，在实验课上的项目可以单次实验课作为评分单元，设置成任务驱动竞赛模式，让学生必须在一次实验课内完成该项目并限时提交，并根据实验项目的完成情况在全班进行评分并排名，同时计入期末总评成绩，让学生在竞争中来提升和超越自己。

以小组为单位完成一个较综合的课程大作业[6]，小组人数一般控制在3～4 人为宜，课程大作业的计分为按时提交、项目完成情况和项目展示并陈述三部分构成，通过小组间的匿名相互评分和教师评分相结合的成绩评定方式来给定课程大作业的成绩。

以赛促教也是一项让所学知识“融合贯通”的有效途径。《网页设计与网站建设》课程通过引导学生参加“蓝桥杯Web 应用开发”竞赛，实现课堂内基础知识和课堂外的扩展知识结合起来。学生为了能在“蓝桥杯Web 应用开发”竞赛中获奖，必须按照竞赛大纲进行全面学习和训练，而竞赛大纲所要求考查的知识点远多于课程大纲所要求的基础知识点，且该竞赛是以完成项目作为考试方式，考试内容面向综合应用，因此引导学生参赛可以培养学生的综合应用能力，因此将学科竞赛引入课堂，可以有效促进学生学习本课程高阶知识的积极性，让学生在自学中实现对本课程知识的拓展，也有助于提升学生的项目开发能力，是实现所学新知“融会贯通”的另一有效途径；另外，将竞赛的历次考试题目经过分类、精选、修改后融入各次课程讨论和各次作业的挑战题目列表中也是一种拓展学生知识范围的方法。

大学生就业是学生较为关心的事宜，根据就业岗位的需求更新教学内容有助于提升学生的就业竞争力。《网页设计与网站建设》课程所面向的就业岗位是“前端开发”，因此，本课程在制定教学大纲时，参考一些就业招聘网站如BOSS 直聘、智联招聘等网站上的“Web 前端开发”岗位的招聘条件，根据这些条件引入一些岗位所需的前端框架作为本课程的拓展学习内容，引导学生进一步学好本课程的主流开发技术，并在课程大作业中也引入紧扣主流新技术的挑战题供学生们选做，引导学生自主学习本门课程的拓展学习模块，为他们毕业后的就业储备竞争技能，引导感兴趣的学生以“Web 前端开发”作为本科毕业论文的选题方向，进一步帮助学生掌握“Web 前端开发”的新技术，有效提升学生的就业竞争力。

五、小结

本文探讨了将五星教学法的理念应用于《网页设计与网站建设》课程的教学改革过程中，将五星教学法的五个步骤贯穿到课堂教学、实验教学、成绩评定等各个教学环节中，从而实现教学质量的提升。同时还借助学习通和微助教等信息化手段辅助教学改革的实施，显著提高本课程的教学效果，并能促进学生积极参与教学过程，提升学生的学习主动性和学习效率，有助于提升学生的编程技能。因此，在《网页设计与网站建设》课程的教学过程中采用五星教学法是一种提高教学质量的可选途径。