吳格格 張晉芳 張俊華

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

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

一、前言

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

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

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

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

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

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

（二）授課方式單一化

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

（三）娛樂(lè)方式多元化

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

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

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

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

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

（二）融合課程思政

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

（三）完善評(píng)價(jià)機(jī)制

課程考核機(jī)制一般由平時(shí)成績(jī)（40%）和期末試卷（60%）組成[5]，平時(shí)成績(jī)由考勤、課堂表現(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ī)定時(shí)間內(nèi)，制作相應(yīng)的PPT進(jìn)行展示，并附加項(xiàng)目代碼，現(xiàn)場(chǎng)運(yùn)行項(xiàng)目。企業(yè)教師、教師、學(xué)生根據(jù)各組項(xiàng)目情況，進(jìn)行評(píng)分，占比為4：3：3。

（四）對(duì)接“1+X”證書(shū)

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

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

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

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

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

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

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

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

五、結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

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

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

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

[6]何明慧，劉云鵬.高?！皩?dǎo)學(xué)互動(dòng)”模式下《網(wǎng)頁(yè)設(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é)任編輯：王穎振、楊惠娟