基于番茄工作法的“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)模式探索

吳格格 張晉芳 張俊華

摘要：為了解決高職院校學(xué)生在傳統(tǒng)教學(xué)中存在的學(xué)習(xí)專注力和自控力較差的問題，以“網(wǎng)頁設(shè)計(jì)與制作”課程為載體，以大數(shù)據(jù)技術(shù)專業(yè)學(xué)生為授課對象，依托超星學(xué)習(xí)通信息化教學(xué)平臺，將番茄工作法應(yīng)用到課堂教學(xué)中，在教學(xué)模式、教學(xué)內(nèi)容、評價機(jī)制等方面對線下傳統(tǒng)授課模式進(jìn)行改革創(chuàng)新，以便提升學(xué)生學(xué)習(xí)的主觀能動性，培養(yǎng)學(xué)生解決問題的能力。

關(guān)鍵詞：番茄工作法；超星學(xué)習(xí)通；網(wǎng)頁設(shè)計(jì)與制作

一、前言

“網(wǎng)頁設(shè)計(jì)與制作”是高等職業(yè)院校計(jì)算機(jī)相關(guān)專業(yè)的一門專業(yè)基礎(chǔ)課，以學(xué)生能獨(dú)立完成靜態(tài)網(wǎng)站開發(fā)和維護(hù)作為學(xué)習(xí)目標(biāo)，掌握HTML語言的文檔結(jié)構(gòu)和基本標(biāo)簽使用，掌握規(guī)劃、開發(fā)、發(fā)布和管理靜態(tài)網(wǎng)站的專業(yè)知識，能綜合應(yīng)用Web頁面編輯軟件、HTML5、CSS3等技術(shù)制作網(wǎng)頁。

在科技信息時代，手機(jī)、游戲、短視頻的普及，使學(xué)生的自主學(xué)習(xí)時間不斷縮短，同時也使學(xué)生的專注力難以集中，更難以培養(yǎng)學(xué)生的獨(dú)立思考能力。然而，該課程的授課模式是項(xiàng)目引領(lǐng)、任務(wù)驅(qū)動，一旦某個知識點(diǎn)沒有掌握，將無法完成靜態(tài)網(wǎng)站開發(fā)的項(xiàng)目任務(wù)，也無法滿足前端工程師的專業(yè)要求。

番茄工作法由弗朗西斯科·西里洛于1992年創(chuàng)立，通常采用布置任務(wù)和設(shè)定番茄時間的方式，加強(qiáng)學(xué)生的集中力和注意力[1-2]。因此，本課程以大數(shù)據(jù)技術(shù)專業(yè)學(xué)生為授課對象，結(jié)合思政元素和超星學(xué)習(xí)通平臺，將番茄工作法應(yīng)用到課堂教學(xué)中。

二、“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)存在的問題

（一）生源結(jié)構(gòu)復(fù)雜化

山西林業(yè)職業(yè)技術(shù)學(xué)院大數(shù)據(jù)技術(shù)專業(yè)的生源主要分成三個部分：單招、高考、對口升學(xué)。因生源結(jié)構(gòu)多樣化[3]，學(xué)生專業(yè)基礎(chǔ)參差不齊。例如，有一小部分學(xué)生學(xué)習(xí)過網(wǎng)頁設(shè)計(jì)，有一部分學(xué)生了解過網(wǎng)頁設(shè)計(jì)，還有一部分學(xué)生沒有接觸過網(wǎng)頁設(shè)計(jì)，甚至有的學(xué)生對電腦操作不熟悉，使得學(xué)生對該課程重難點(diǎn)知識的接受和理解能力不統(tǒng)一，很大程度上增加了授課難度。

（二）授課方式單一化

在課堂上，教師采用理實(shí)一體化的方式進(jìn)行知識講授和代碼演示，使得學(xué)生習(xí)慣性按照教師所給的代碼進(jìn)行還原，難以深層次地對所學(xué)知識進(jìn)行理解和應(yīng)用，較難培養(yǎng)學(xué)生的獨(dú)立思考能力。例如，在學(xué)習(xí)浮動和定位時，學(xué)生反映所學(xué)知識點(diǎn)都能理解，但在應(yīng)用浮動和定位制作網(wǎng)頁時難以達(dá)到預(yù)期效果。另外，學(xué)生在編碼過程中遇到問題時，不知道如何調(diào)試代碼，更不擅長利用網(wǎng)絡(luò)資源解決所遇問題，阻礙了學(xué)生自主學(xué)習(xí)能力的提高。

（三）娛樂方式多元化

部分學(xué)生在教師的監(jiān)督管理下，依然難以提高自控能力，經(jīng)常在課堂上利用手機(jī)玩游戲、刷短視頻、看直播等，不能全神貫注地學(xué)習(xí)授課知識，也縮短了學(xué)習(xí)時間，從而導(dǎo)致學(xué)生的學(xué)習(xí)效果較差。

三、基于番茄工作法的線下課程改革

（一）調(diào)整教學(xué)模式

在傳統(tǒng)教學(xué)模式中，教師帶領(lǐng)學(xué)生復(fù)習(xí)已學(xué)的知識點(diǎn)，進(jìn)行課程導(dǎo)入[4]，所占時間約為5分鐘。之后，教師對新知識進(jìn)行講解并現(xiàn)場演示案例，所占時間約為45分鐘。學(xué)生練習(xí)和教師巡回指導(dǎo)，所占時間約為45分鐘。最后課堂小結(jié)，所占時間約為5分鐘。

針對傳統(tǒng)教學(xué)模式，該課程將融合番茄工作法（將兩節(jié)課的教學(xué)時間分為2個番茄鐘）來進(jìn)行全面改革。課前通過超星學(xué)習(xí)通推送本次課的微課視頻和學(xué)習(xí)任務(wù)，發(fā)送課前預(yù)習(xí)、討論和測驗(yàn)。課中前50分鐘分為任務(wù)展示（15分鐘）和重難點(diǎn)知識講解（35分鐘）兩個部分。剩下時間分為小組討論（10分鐘）、鞏固練習(xí)（15分鐘）、完善頁面（15分鐘）、課堂小結(jié)（5分鐘）、課后拓展（5分鐘）五個部分，時間分配情況如圖1所示。

（二）融合課程思政

在傳統(tǒng)授課當(dāng)中，對思想政治教育元素的融入較少，更注重知識的傳授。然而，在該課程的教學(xué)過程中，精選唐詩賞析網(wǎng)、生態(tài)文明網(wǎng)等課程案例，將思政元素潛移默化地融入課堂中。例如，在練習(xí)盒子模型知識時，同學(xué)們出現(xiàn)了圖片和文字樣式不美觀、盒子內(nèi)的元素超出盒子自身大小等很多問題，教師通過引用攀登者等例子，培養(yǎng)學(xué)生鍥而不舍、精益求精的精神。

（三）完善評價機(jī)制

課程考核機(jī)制一般由平時成績（40%）和期末試卷（60%）組成[5]，平時成績由考勤、課堂表現(xiàn)、作業(yè)組成，占比為1：1：2。期末試卷只能折射出學(xué)生的學(xué)習(xí)情況，但不能體現(xiàn)學(xué)生的實(shí)踐操作能力和職業(yè)素養(yǎng)。基于此，該課程將期末機(jī)考調(diào)整成項(xiàng)目匯報(bào)與展示的形式。例如，學(xué)生在課程結(jié)束后，以小組為單位，自選主題，收集和整理材料，在規(guī)定時間內(nèi)，制作相應(yīng)的PPT進(jìn)行展示，并附加項(xiàng)目代碼，現(xiàn)場運(yùn)行項(xiàng)目。企業(yè)教師、教師、學(xué)生根據(jù)各組項(xiàng)目情況，進(jìn)行評分，占比為4：3：3。

（四）對接“1+X”證書

在教學(xué)過程中，融合“1+X”Web 前端開發(fā)初級職業(yè)技能等級的標(biāo)準(zhǔn)，涉及的知識點(diǎn)包括HTML基礎(chǔ)知識、CSS樣式、盒子模型、網(wǎng)頁布局等，促進(jìn)學(xué)生考取Web前端開發(fā)技能初級證書，為從事靜態(tài)網(wǎng)頁制作、網(wǎng)頁編程等工作打下堅(jiān)實(shí)的基礎(chǔ)。

四、案例分析——唐詩賞析頁面文字樣式的設(shè)計(jì)

該課程采用番茄工作法進(jìn)行授課，現(xiàn)以唐詩賞析頁面文字樣式為案例進(jìn)行講解。教學(xué)過程分為三個階段：課前導(dǎo)學(xué)、課中學(xué)練、課后拓展。教學(xué)設(shè)計(jì)如圖2所示。

課前，教師通過超星學(xué)習(xí)通推送“CSS文本樣式屬性”的微課視頻，發(fā)布“完成唐詩賞析頁面文字樣式”的學(xué)習(xí)任務(wù)、討論和測驗(yàn)。根據(jù)學(xué)生的測試結(jié)果，掌握學(xué)生的預(yù)習(xí)情況，以便調(diào)整授課內(nèi)容與進(jìn)度。

課中，將番茄時間設(shè)為50分鐘，讓學(xué)生專注學(xué)習(xí)，中途不允許做任何與該任務(wù)無關(guān)的事情，直到番茄時鐘響起，才進(jìn)行短暫休息（10分鐘），繼而再開始下一個番茄。具體來說，前15分鐘，小組（4至6人為一組）派代表在講臺上進(jìn)行任務(wù)展示，分享本組設(shè)計(jì)成果。然后，教師根據(jù)學(xué)生展示的作品進(jìn)行專業(yè)點(diǎn)評，并提出改進(jìn)措施。在第一個番茄時間的后35分鐘里，對字體樣式屬性、文本外觀屬性進(jìn)行詳細(xì)的案例講解。對于字體樣式屬性知識點(diǎn)，教師展示相關(guān)網(wǎng)頁內(nèi)容，并引導(dǎo)學(xué)生仔細(xì)觀察網(wǎng)頁中運(yùn)用的字體樣式屬性，比如font-size、font-family、font-weight、font-style等。之后以設(shè)置“唐詩賞析”和“游子吟”的字體樣式屬性為例，演示字體樣式屬性，設(shè)置文本字體風(fēng)格、大小、粗細(xì)等樣式，其代碼與運(yùn)行結(jié)果如圖3所示。

同時，根據(jù)學(xué)生的學(xué)習(xí)情況合理安排重難點(diǎn)知識的講解時間。學(xué)生提出@font-face屬性這一知識點(diǎn)較難掌握，也不知如何熟練應(yīng)用。因此，教師提出了一些專業(yè)的應(yīng)用問題。例如，如果使用自己喜愛的字體（以剪紙為例），對文本進(jìn)行設(shè)置，而該字體在訪問者的計(jì)算機(jī)上沒有安裝，該如何實(shí)現(xiàn)？具體代碼如圖4所示。

對于文本外觀屬性這一知識點(diǎn)，教師也提出了“如何把文本內(nèi)容居中”的問題，并通過演示文本外觀屬性設(shè)置文本的顏色、行間距、對齊方式等樣式，使得網(wǎng)頁文本更加美觀，CSS樣式、代碼和運(yùn)行結(jié)果如圖5所示。同時使用text-shadow屬性為詩句添加陰影效果。

第二個番茄時間的前10分鐘，圍繞所講的字體樣式屬性和文本外觀屬性展開小組討論，進(jìn)行導(dǎo)學(xué)互動[6]。之后15分鐘讓學(xué)生動手設(shè)置詩句字體為剪紙字體，對所學(xué)知識進(jìn)行鞏固練習(xí)。鞏固練習(xí)完成之后，用15分鐘的時間對課前完成的唐詩賞析頁面進(jìn)行完善，培養(yǎng)學(xué)生精益求精的工匠精神。之后5分鐘進(jìn)行課堂小結(jié)，歸納總結(jié)本節(jié)課的重難點(diǎn)，評價學(xué)生整節(jié)課的總體表現(xiàn)，并收集學(xué)生的代碼圖和作品圖。最后5分鐘進(jìn)行課堂的延伸，發(fā)布課后拓展任務(wù)，具體內(nèi)容為實(shí)現(xiàn)校園新聞頁面文字樣式的設(shè)計(jì)，以強(qiáng)化本次課的知識點(diǎn)，做到學(xué)以致用。最后，整個課堂的教學(xué)效果由學(xué)生采用二維碼或網(wǎng)絡(luò)鏈接[7]的方式來評價，以優(yōu)化課堂的教學(xué)模式與評價機(jī)制。

五、結(jié)語

本課程結(jié)合番茄工作法，從教學(xué)模式、融合課程思政、評價機(jī)制、對接“1+X”證書四個方面著手對線下傳統(tǒng)授課模式進(jìn)行改革。以唐詩賞析頁面文字樣式為例，課前推送本次課的微課視頻，嘗試完成唐詩賞析頁面文字樣式的設(shè)計(jì)。課中采用兩個番茄時間，第一個番茄時間由任務(wù)展示（15分鐘）和重難點(diǎn)知識講解（35分鐘）兩個部分組成。第二個番茄時間由小組討論（10分鐘）、鞏固練習(xí)（15分鐘）、完善頁面（15分鐘）、課堂小結(jié)（5分鐘）、課后拓展（5分鐘）五個部分組成。相較于傳統(tǒng)課堂，學(xué)生更能集中注意力，提高學(xué)習(xí)效率，教師也更能全面考查學(xué)生的知識與專業(yè)素養(yǎng)。課后進(jìn)行課堂的延伸，強(qiáng)化本次課知識點(diǎn)，進(jìn)一步夯實(shí)鞏固知識技能。該課程的授課模式為計(jì)算機(jī)相關(guān)課程的教學(xué)改革提供參考依據(jù)。

參考文獻(xiàn)

[1]火久元，巨濤，楊景玉.番茄工作法在混合式教學(xué)模式中的探索與實(shí)踐——以Java語言程序設(shè)計(jì)課程為例[J].軟件導(dǎo)刊，2023，22（06）：105-109.

[2][意]弗朗西斯科·西里洛.番茄工作法[M].廖夢韡，譯.北京：北京聯(lián)合出版公司，2019.

[3]張燕.生源多元化背景下高職院校分層分類培養(yǎng)[J].山西財(cái)經(jīng)大學(xué)學(xué)報(bào)，2022，44（S2）：82-84.

[4]曹陽，黃秀錦，丁興華，等.基于“云課堂”與BOPPPS教學(xué)模式的混合式教學(xué)實(shí)踐[J].農(nóng)業(yè)工程，2021，11（08）：116-119.

[5]羅燕，石砦，姜彥武，等.新形勢下應(yīng)用型工科基礎(chǔ)課混合式教學(xué)改革[J].農(nóng)業(yè)工程，2023，13（07）：123-126.

[6]何明慧，劉云鵬.高校“導(dǎo)學(xué)互動”模式下《網(wǎng)頁設(shè)計(jì)與制作》課程教學(xué)改革實(shí)踐[J].計(jì)算機(jī)工程與科學(xué)，2019，41（S1）：50-54.

[7]張玲，郭承育，趙琦.基于“互聯(lián)網(wǎng)+翻轉(zhuǎn)課堂”的微生物污水處理綜合性實(shí)驗(yàn)課程改革[J].農(nóng)業(yè)工程，2019，9（01）：88-91.

作者單位：山西林業(yè)職業(yè)技術(shù)學(xué)院

■ 責(zé)任編輯：王穎振、楊惠娟