基于番茄工作法的“网页设计与制作”课程教学模式探索

吴格格 张晋芳 张俊华

摘要：为了解决高职院校学生在传统教学中存在的学习专注力和自控力较差的问题，以“网页设计与制作”课程为载体，以大数据技术专业学生为授课对象，依托超星学习通信息化教学平台，将番茄工作法应用到课堂教学中，在教学模式、教学内容、评价机制等方面对线下传统授课模式进行改革创新，以便提升学生学习的主观能动性，培养学生解决问题的能力。

关键词：番茄工作法；超星学习通；网页设计与制作

一、前言

“网页设计与制作”是高等职业院校计算机相关专业的一门专业基础课，以学生能独立完成静态网站开发和维护作为学习目标，掌握HTML语言的文档结构和基本标签使用，掌握规划、开发、发布和管理静态网站的专业知识，能综合应用Web页面编辑软件、HTML5、CSS3等技术制作网页。

在科技信息时代，手机、游戏、短视频的普及，使学生的自主学习时间不断缩短，同时也使学生的专注力难以集中，更难以培养学生的独立思考能力。然而，该课程的授课模式是项目引领、任务驱动，一旦某个知识点没有掌握，将无法完成静态网站开发的项目任务，也无法满足前端工程师的专业要求。

番茄工作法由弗朗西斯科·西里洛于1992年创立，通常采用布置任务和设定番茄时间的方式，加强学生的集中力和注意力[1-2]。因此，本课程以大数据技术专业学生为授课对象，结合思政元素和超星学习通平台，将番茄工作法应用到课堂教学中。

二、“网页设计与制作”课程教学存在的问题

（一）生源结构复杂化

山西林业职业技术学院大数据技术专业的生源主要分成三个部分：单招、高考、对口升学。因生源结构多样化[3]，学生专业基础参差不齐。例如，有一小部分学生学习过网页设计，有一部分学生了解过网页设计，还有一部分学生没有接触过网页设计，甚至有的学生对电脑操作不熟悉，使得学生对该课程重难点知识的接受和理解能力不统一，很大程度上增加了授课难度。

（二）授课方式单一化

在课堂上，教师采用理实一体化的方式进行知识讲授和代码演示，使得学生习惯性按照教师所给的代码进行还原，难以深层次地对所学知识进行理解和应用，较难培养学生的独立思考能力。例如，在学习浮动和定位时，学生反映所学知识点都能理解，但在应用浮动和定位制作网页时难以达到预期效果。另外，学生在编码过程中遇到问题时，不知道如何调试代码，更不擅长利用网络资源解决所遇问题，阻碍了学生自主学习能力的提高。

（三）娱乐方式多元化

部分学生在教师的监督管理下，依然难以提高自控能力，经常在课堂上利用手机玩游戏、刷短视频、看直播等，不能全神贯注地学习授课知识，也缩短了学习时间，从而导致学生的学习效果较差。

三、基于番茄工作法的线下课程改革

（一）调整教学模式

在传统教学模式中，教师带领学生复习已学的知识点，进行课程导入[4]，所占时间约为5分钟。之后，教师对新知识进行讲解并现场演示案例，所占时间约为45分钟。学生练习和教师巡回指导，所占时间约为45分钟。最后课堂小结，所占时间约为5分钟。

针对传统教学模式，该课程将融合番茄工作法（将两节课的教学时间分为2个番茄钟）来进行全面改革。课前通过超星学习通推送本次课的微课视频和学习任务，发送课前预习、讨论和测验。课中前50分钟分为任务展示（15分钟）和重难点知识讲解（35分钟）两个部分。剩下时间分为小组讨论（10分钟）、巩固练习（15分钟）、完善页面（15分钟）、课堂小结（5分钟）、课后拓展（5分钟）五个部分，时间分配情况如图1所示。

（二）融合课程思政

在传统授课当中，对思想政治教育元素的融入较少，更注重知识的传授。然而，在该课程的教学过程中，精选唐诗赏析网、生态文明网等课程案例，将思政元素潜移默化地融入课堂中。例如，在练习盒子模型知识时，同学们出现了图片和文字样式不美观、盒子内的元素超出盒子自身大小等很多问题，教师通过引用攀登者等例子，培养学生锲而不舍、精益求精的精神。

（三）完善评价机制

课程考核机制一般由平时成绩（40%）和期末试卷（60%）组成[5]，平时成绩由考勤、课堂表现、作业组成，占比为1：1：2。期末试卷只能折射出学生的学习情况，但不能体现学生的实践操作能力和职业素养。基于此，该课程将期末机考调整成项目汇报与展示的形式。例如，学生在课程结束后，以小组为单位，自选主题，收集和整理材料，在规定时间内，制作相应的PPT进行展示，并附加项目代码，现场运行项目。企业教师、教师、学生根据各组项目情况，进行评分，占比为4：3：3。

（四）对接“1+X”证书

在教学过程中，融合“1+X”Web 前端开发初级职业技能等级的标准，涉及的知识点包括HTML基础知识、CSS样式、盒子模型、网页布局等，促进学生考取Web前端开发技能初级证书，为从事静态网页制作、网页编程等工作打下坚实的基础。

四、案例分析——唐诗赏析页面文字样式的设计

该课程采用番茄工作法进行授课，现以唐诗赏析页面文字样式为案例进行讲解。教学过程分为三个阶段：课前导学、课中学练、课后拓展。教学设计如图2所示。

课前，教师通过超星学习通推送“CSS文本样式属性”的微课视频，发布“完成唐诗赏析页面文字样式”的学习任务、讨论和测验。根据学生的测试结果，掌握学生的预习情况，以便调整授课内容与进度。

课中，将番茄时间设为50分钟，让学生专注学习，中途不允许做任何与该任务无关的事情，直到番茄时钟响起，才进行短暂休息（10分钟），继而再开始下一个番茄。具体来说，前15分钟，小组（4至6人为一组）派代表在讲台上进行任务展示，分享本组设计成果。然后，教师根据学生展示的作品进行专业点评，并提出改进措施。在第一个番茄时间的后35分钟里，对字体样式属性、文本外观属性进行详细的案例讲解。对于字体样式属性知识点，教师展示相关网页内容，并引导学生仔细观察网页中运用的字体样式属性，比如font-size、font-family、font-weight、font-style等。之后以设置“唐诗赏析”和“游子吟”的字体样式属性为例，演示字体样式属性，设置文本字体风格、大小、粗细等样式，其代码与运行结果如图3所示。

同时，根据学生的学习情况合理安排重难点知识的讲解时间。学生提出@font-face属性这一知识点较难掌握，也不知如何熟练应用。因此，教师提出了一些专业的应用问题。例如，如果使用自己喜爱的字体（以剪纸为例），对文本进行设置，而该字体在访问者的计算机上没有安装，该如何实现？具体代码如图4所示。

对于文本外观属性这一知识点，教师也提出了“如何把文本内容居中”的问题，并通过演示文本外观属性设置文本的颜色、行间距、对齐方式等样式，使得网页文本更加美观，CSS样式、代码和运行结果如图5所示。同时使用text-shadow属性为诗句添加阴影效果。

第二个番茄时间的前10分钟，围绕所讲的字体样式属性和文本外观属性展开小组讨论，进行导学互动[6]。之后15分钟让学生动手设置诗句字体为剪纸字体，对所学知识进行巩固练习。巩固练习完成之后，用15分钟的时间对课前完成的唐诗赏析页面进行完善，培养学生精益求精的工匠精神。之后5分钟进行课堂小结，归纳总结本节课的重难点，评价学生整节课的总体表现，并收集学生的代码图和作品图。最后5分钟进行课堂的延伸，发布课后拓展任务，具体内容为实现校园新闻页面文字样式的设计，以强化本次课的知识点，做到学以致用。最后，整个课堂的教学效果由学生采用二维码或网络链接[7]的方式来评价，以优化课堂的教学模式与评价机制。

五、结语

本课程结合番茄工作法，从教学模式、融合课程思政、评价机制、对接“1+X”证书四个方面着手对线下传统授课模式进行改革。以唐诗赏析页面文字样式为例，课前推送本次课的微课视频，尝试完成唐诗赏析页面文字样式的设计。课中采用两个番茄时间，第一个番茄时间由任务展示（15分钟）和重难点知识讲解（35分钟）两个部分组成。第二个番茄时间由小组讨论（10分钟）、巩固练习（15分钟）、完善页面（15分钟）、课堂小结（5分钟）、课后拓展（5分钟）五个部分组成。相较于传统课堂，学生更能集中注意力，提高学习效率，教师也更能全面考查学生的知识与专业素养。课后进行课堂的延伸，强化本次课知识点，进一步夯实巩固知识技能。该课程的授课模式为计算机相关课程的教学改革提供参考依据。

参考文献

[1]火久元，巨涛，杨景玉.番茄工作法在混合式教学模式中的探索与实践——以Java语言程序设计课程为例[J].软件导刊，2023，22（06）：105-109.

[2][意]弗朗西斯科·西里洛.番茄工作法[M].廖梦韡，译.北京：北京联合出版公司，2019.

[3]张燕.生源多元化背景下高职院校分层分类培养[J].山西财经大学学报，2022，44（S2）：82-84.

[4]曹阳，黄秀锦，丁兴华，等.基于“云课堂”与BOPPPS教学模式的混合式教学实践[J].农业工程，2021，11（08）：116-119.

[5]罗燕，石砦，姜彦武，等.新形势下应用型工科基础课混合式教学改革[J].农业工程，2023，13（07）：123-126.

[6]何明慧，刘云鹏.高校“导学互动”模式下《网页设计与制作》课程教学改革实践[J].计算机工程与科学，2019，41（S1）：50-54.

[7]张玲，郭承育，赵琦.基于“互联网+翻转课堂”的微生物污水处理综合性实验课程改革[J].农业工程，2019，9（01）：88-91.

作者单位：山西林业职业技术学院

■ 责任编辑：王颖振、杨惠娟