曾娜

[摘? ? ? ? ? ?要]? 傳統(tǒng)的網(wǎng)頁設(shè)計與制作課程教學(xué)存在許多弊端，已不能滿足培養(yǎng)學(xué)生全新技能的要求。探討通過依托世界技能大賽標(biāo)準(zhǔn)改革教材、開發(fā)教學(xué)資源，使用項目教學(xué)、微課教學(xué)、目標(biāo)導(dǎo)向等方法與手段提升教學(xué)質(zhì)量。

[關(guān)? ? 鍵? ?詞]? 世賽標(biāo)準(zhǔn);網(wǎng)頁設(shè)計與制作;教學(xué)改革

[中圖分類號]? G712? ? ? ? ? ? ? ? ? ?[文獻(xiàn)標(biāo)志碼]? A? ? ? ? ? ? ? ? ? ?[文章編號]? 2096-0603（2022）11-0013-03

一、網(wǎng)頁設(shè)計與制作傳統(tǒng)課程教學(xué)存在的問題

（一）教學(xué)內(nèi)容脫離實際

目前許多學(xué)校所使用的《網(wǎng)頁設(shè)計與制作》教材出版的時間是四五年前的，甚至是十多年前的，教學(xué)內(nèi)容太陳舊，已經(jīng)跟不上時代的需要。教學(xué)目標(biāo)的實現(xiàn)需要以教材為本，要培養(yǎng)學(xué)生與時俱進(jìn)，教材需要更新，但是許多學(xué)校為了一時的便利，往往采用舊版材，課程內(nèi)容選擇隨意，教學(xué)內(nèi)容的選擇沒有考慮時代的發(fā)展、科技的進(jìn)步，影響了學(xué)生培養(yǎng)的質(zhì)量。

（二）教學(xué)手段和教學(xué)方法單一

傳統(tǒng)課程教學(xué)的教學(xué)手段和教學(xué)方法單一，教師主要通過講授法、練習(xí)法完成教學(xué)任務(wù)。學(xué)生參與教學(xué)活動的興趣不高，導(dǎo)致課堂氣氛沉悶，教學(xué)脫離實踐，學(xué)生很難理解理論知識，產(chǎn)生畏學(xué)的思想，久而久之失去學(xué)習(xí)興趣。

（三）課堂教學(xué)時空受限

傳統(tǒng)的課堂最大特點(diǎn)是三個“固定”、三個“中心”和“三件套”。三個“固定”是指教室、時間和師生固定，三個“中心”是指以教室為中心、以教師為中心、以課本為中心，“三件套”指教師使用教材、黑板、粉筆來教學(xué)。這個特點(diǎn)存在的“弊端”是輔導(dǎo)時空限制，學(xué)生學(xué)習(xí)效果差，教師有心無力，“抓”不住學(xué)生。

二、依托世界技能大賽標(biāo)準(zhǔn)改革教材

2012年以來我院多次組織師生參加世界技能大賽相關(guān)工作，2018年我院承辦了世界技能大賽網(wǎng)站設(shè)計與開發(fā)賽項廣西選拔賽，并派教師參與網(wǎng)站設(shè)計與開發(fā)項目全國選拔賽的裁判工作。通過認(rèn)真總結(jié)和反思，認(rèn)識到世界技能大賽項目標(biāo)準(zhǔn)代表了世界技能人才的培養(yǎng)標(biāo)準(zhǔn)和方向，世界技能大賽是職業(yè)教育改革的導(dǎo)向標(biāo)，作為職業(yè)院校教師，要打破傳統(tǒng)教學(xué)理念，對接世賽標(biāo)準(zhǔn)，提高教師的專業(yè)技術(shù)技能水平，將世賽標(biāo)準(zhǔn)融入人才培養(yǎng)方案和專業(yè)課程教學(xué)改革中去，促進(jìn)學(xué)生技術(shù)技能水平的提升。

（一）對世界技能大賽標(biāo)準(zhǔn)及行業(yè)企業(yè)需求進(jìn)行調(diào)研

2020年1月，我系選派專業(yè)教師到上海信息技術(shù)學(xué)校開展調(diào)研。上海信息技術(shù)學(xué)校是世界技能大賽“網(wǎng)站設(shè)計與開發(fā)”項目全國集訓(xùn)基地。通過調(diào)研教師了解到“網(wǎng)站設(shè)計與開發(fā)”賽項涉及的專業(yè)知識、技術(shù)技能、綜合能力培養(yǎng)等方面內(nèi)容。同年3月，專業(yè)組教師到與網(wǎng)站開發(fā)相關(guān)的企業(yè)調(diào)研，通過與行業(yè)企業(yè)專家深入交流學(xué)習(xí)了解至當(dāng)前企業(yè)做網(wǎng)頁所需的技術(shù)及常做的一些項目。通過對世賽標(biāo)準(zhǔn)及行業(yè)企業(yè)調(diào)研，根據(jù)本專業(yè)及師資的情況，專業(yè)組成員開發(fā)《網(wǎng)頁設(shè)計與制作教程》教材由北京理工大學(xué)出版社出版。該教材使用項目教學(xué)法將“網(wǎng)站設(shè)計與開發(fā)”賽項的響應(yīng)式單頁設(shè)計、響應(yīng)式頁面重構(gòu)兩個部分所涉及的部分知識點(diǎn)及行業(yè)、企業(yè)的一些項目融合起來。學(xué)生通過學(xué)習(xí)掌握最新前沿知識及技能的同時融入企業(yè)實戰(zhàn)項目，實現(xiàn)以“工作任務(wù)為導(dǎo)向”課程體系，為今后的實習(xí)及就業(yè)打下良好的基礎(chǔ)。

（二）根據(jù)課程目標(biāo)確定教學(xué)內(nèi)容與教學(xué)項目

課程堅持以工作過程為導(dǎo)向，以能力為目標(biāo)，以學(xué)生為主體，以實際工作崗位的項目為載體。它分為12個學(xué)習(xí)項目，每個項目均由項目描述、項目目標(biāo)、項目分析、知識引入、項目實施、項目總結(jié)、項目拓展7個環(huán)節(jié)組成，每個環(huán)節(jié)環(huán)環(huán)相扣。項目編排的原則是由易到難、循序漸進(jìn)，遵循學(xué)生的認(rèn)知規(guī)律，每個項目中含有若干個子任務(wù)，每個子任務(wù)是項目中新的知識點(diǎn)，學(xué)生輕松獲取知識及技能，便于教學(xué)的實施。

（三）教材的特色

1.科學(xué)性。教材打破傳統(tǒng)的以知識為結(jié)構(gòu)的課程體系，力求建立基于真實工作過程的全新教學(xué)理念。體現(xiàn)“做中學(xué)，學(xué)中做”的理念，基于行動導(dǎo)向的教學(xué)觀，以項目為引領(lǐng)，以任務(wù)為驅(qū)動的教學(xué)方式。

2.靈活性。教材每個項目的知識點(diǎn)，由多個子任務(wù)組成，教師可以根據(jù)實際課時數(shù)講解子任務(wù)，每個項目及大部分子任務(wù)都配有二維碼，師生通過手機(jī)掃描即可看到相關(guān)視頻，學(xué)生可以在課前、課后自主完成學(xué)習(xí)。

3.先進(jìn)性。教材使用的開發(fā)平臺是Visual Studio Code編輯器，Visual Studio Code （簡稱 VS Code / VSC） 是一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言。

在傳統(tǒng)的CSS+DIV網(wǎng)頁布局基礎(chǔ)上，添加HTML 5的頁眉、頁腳、導(dǎo)航、文章內(nèi)容等與結(jié)構(gòu)相關(guān)的結(jié)構(gòu)元素標(biāo)簽。

增加了響應(yīng)式頁面的制作內(nèi)容，響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。目前世賽技能大賽網(wǎng)站設(shè)計與開發(fā)項目對響應(yīng)式頁面作為一項重要考核內(nèi)容。

4.教材落實立德樹人。項目中融入中華優(yōu)秀傳統(tǒng)文化如教材融入春節(jié)、清明節(jié)等我國傳統(tǒng)的節(jié)日，同時還引入了一些歌頌道德品質(zhì)的詩如《陋室銘》，加強(qiáng)愛國主義、集體主義、社會主義教育;教材引入“端午節(jié)由來與傳說”將屈原愛國精神融入課堂。書中的項目11來源于企業(yè)真實的工作任務(wù)，項目12源于世界技能競賽“網(wǎng)站設(shè)計與開發(fā)”的網(wǎng)頁重構(gòu)模塊。同時本教材可以作為考取1+X Web前端開發(fā)（初級、中級）證書的參考教材，真正實現(xiàn)“崗課賽證”融通人才培養(yǎng)模式。

（四）教學(xué)資源的開發(fā)與建設(shè)

經(jīng)過一年多的努力，專業(yè)組成員完成了76個子任務(wù)12個教學(xué)項目教學(xué)視頻的開發(fā)，完成76個子任務(wù)微課件的制作，完成12個項目的12份教學(xué)課件制作，同時完成了12個項目活頁工單的開發(fā)，通過學(xué)習(xí)通平臺將這些教學(xué)資源發(fā)布到平臺上，方便教師及學(xué)生的學(xué)習(xí)，能有效提高學(xué)生的學(xué)習(xí)興趣及教學(xué)質(zhì)量。

三、教學(xué)方法與手段的創(chuàng)新

本課程的教學(xué)主要采用項目教學(xué)法，項目教學(xué)法是一種以學(xué)生為中心的教學(xué)方法，是指在一個真實或接近真實場景的學(xué)習(xí)任務(wù)中，學(xué)生相對獨(dú)立地完成確定項目目標(biāo)、項目分析、項目實施、項目總結(jié)、展示和評價、項目拓展的整個過程，整個項目教學(xué)通過課前、課中、課后來完成。

課前教師將項目及子任務(wù)內(nèi)容中的重點(diǎn)操作技巧制作成微課，借助網(wǎng)絡(luò)平臺成為共用資源，上傳到網(wǎng)站，讓學(xué)生課前上網(wǎng)觀看自主學(xué)習(xí)，進(jìn)行簡單的預(yù)習(xí)和思考，這一滿足學(xué)生熱衷網(wǎng)絡(luò)的特點(diǎn)，激發(fā)了學(xué)生的學(xué)習(xí)興趣，突破了傳統(tǒng)的教學(xué)模式，使課堂更加高效。

課中將微課導(dǎo)入課程，微課其豐富多彩的視頻畫面容易吸引學(xué)生的注意力，使課程內(nèi)容被迅速導(dǎo)入課堂。在簡單、趣味的藝術(shù)形式表現(xiàn)形式下，學(xué)生能夠輕松學(xué)習(xí)課堂教學(xué)的重點(diǎn)和難點(diǎn)，網(wǎng)頁設(shè)計與制作課程項目內(nèi)容較為繁瑣，項目的代碼長，如果按照以往的教學(xué)模式，往往會使學(xué)生學(xué)了后面，忘了前面。因此，在一些項目操作中，在內(nèi)容較多時，教師將每一個重點(diǎn)、難點(diǎn)分割，并制作成微課，使學(xué)習(xí)較差的學(xué)生重復(fù)播放相應(yīng)的微課，通過重復(fù)學(xué)習(xí)掌握學(xué)習(xí)難點(diǎn)，掌握完整的教學(xué)內(nèi)容，并且有助于系統(tǒng)掌握知識。

課后使用微課進(jìn)行復(fù)習(xí)，對所學(xué)知識進(jìn)行鞏固。網(wǎng)頁設(shè)計與制作課程子任務(wù)多，項目的內(nèi)容難度大，學(xué)生難以將所有子任務(wù)中的重點(diǎn)內(nèi)容系統(tǒng)地聯(lián)系在一起，在課后教師布置項目拓展，學(xué)生在沒有教師的指導(dǎo)下無法獨(dú)立完成，更無法提高制作效果，因此制作積極性受挫。借助視頻化微課，鞏固學(xué)習(xí)知識，將知識進(jìn)行重構(gòu)，提高主動探究、深入學(xué)習(xí)的能力。

本課程使用學(xué)習(xí)通網(wǎng)絡(luò)平臺將難以學(xué)習(xí)的程序代碼，通過信息技術(shù)呈現(xiàn)給學(xué)生，學(xué)生可以在平臺上觀看教材中所有項目及大部分子任務(wù)的視頻教學(xué)，增強(qiáng)學(xué)生運(yùn)用網(wǎng)絡(luò)資源自主學(xué)習(xí)的能力，滿足學(xué)生的學(xué)習(xí)之需。同時網(wǎng)絡(luò)資源包含教學(xué)課件、項目教學(xué)視頻、子任務(wù)教學(xué)視頻、活頁工單等，大大提高了課程的學(xué)習(xí)效率。

四、課堂教學(xué)的改革與實踐

（一）強(qiáng)化目標(biāo)意識，以目標(biāo)為導(dǎo)向

教學(xué)過程中讓學(xué)生明白本項目的完成目標(biāo)，學(xué)生根據(jù)自我已經(jīng)掌握的知識、能力的薄弱環(huán)節(jié)及項目的目標(biāo)來確定自己最終的目標(biāo)。這種以目標(biāo)為導(dǎo)向的教學(xué)方式能使學(xué)生學(xué)習(xí)具有更強(qiáng)的針對性及目標(biāo)性。

（二）注重師生互動，活躍課堂

師生良好的互動會讓整個課堂活起來，為此，我們在網(wǎng)頁設(shè)計與制作中采用頭腦風(fēng)暴法、角色扮演法、演示法、練習(xí)法以及項目驅(qū)動法等方法開展教學(xué)。

利用圖片、實物、聲音、圖像和互聯(lián)網(wǎng)絡(luò)等元素制作多媒體課件，提高學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)效果。在教學(xué)中教師要突出學(xué)生在教學(xué)活動中的主體地位，讓他們自己發(fā)現(xiàn)問題、探索問題、討論問題和解決問題。教師在課堂教學(xué)中充當(dāng)“主導(dǎo)”的角色，引導(dǎo)學(xué)生參與其中。

（三）使用情境教學(xué)，創(chuàng)設(shè)真實情境

在項目教學(xué)中，首先要強(qiáng)調(diào)的就是情境創(chuàng)設(shè)，是指在教學(xué)過程中，教師有目的地引入或創(chuàng)設(shè)具有一定情緒色彩的、以形象為主體的生動具體的場景，以引起學(xué)生一定的態(tài)度體驗，從而幫助學(xué)生理解教材，并使學(xué)生的心理機(jī)能得到發(fā)展。比如在講解正航科技企業(yè)網(wǎng)制作時，讓學(xué)生使用角色扮演法以企業(yè)員工的身份對企業(yè)網(wǎng)的制作提出要求。這種方式充分調(diào)動了學(xué)生學(xué)習(xí)的積極性，訓(xùn)練了學(xué)生的思維能力，收到了很好的教學(xué)效果。

（四）分層協(xié)作，追求“合作學(xué)習(xí)”

課堂中除了倡導(dǎo)學(xué)生通過“目標(biāo)導(dǎo)向”和“情境教學(xué)”之外，重點(diǎn)讓學(xué)生“合作學(xué)習(xí)”，按學(xué)生操作能力強(qiáng)弱把他們分組，鼓勵操作能力強(qiáng)的學(xué)生能更好地進(jìn)行知識拓展，并讓這些學(xué)生幫助操作稍弱的學(xué)生，從而讓學(xué)生全面完成對知識的掌握。

（五）注重教學(xué)技巧，提高學(xué)習(xí)效果

網(wǎng)頁設(shè)計與制作這門課程的特點(diǎn)是“標(biāo)簽”和“屬性”很多，且它們由英文組成，對于中職學(xué)生來說死記硬背學(xué)起來困難，這就要求學(xué)生一定要多動手，多敲代碼，通過運(yùn)行代碼理解屬性及其不同值所表現(xiàn)出來的效果，才能做到融會貫通。本門課程教學(xué)所用的是Visual Studio Code編輯器，教師在教學(xué)中教會學(xué)生使用一些快捷輸入法，如輸入“！”按“回車鍵”即可出現(xiàn)HTML 5的基本結(jié)構(gòu)，P*5即完成五對標(biāo)簽的輸入等，這些快捷輸入方法能加快學(xué)生編寫代碼的速度。

（六）使用項目拓展，實現(xiàn)知識遷移

每學(xué)完一個項目的時候，給學(xué)生布置一項本章的內(nèi)容項目拓展。項目拓展中一般包括本章中的多個知識點(diǎn)和重點(diǎn)操作內(nèi)容，有利于學(xué)生對新知識的接受和遷移，促使學(xué)生對其進(jìn)行思考并進(jìn)行實踐操作，有利于學(xué)生形成自主思考、實踐和創(chuàng)新的過程，在教學(xué)中收到較好的效果。

（七）幫助學(xué)生構(gòu)建自主性學(xué)習(xí)

為促進(jìn)學(xué)生的自主性學(xué)習(xí)，根據(jù)學(xué)生不同的心理特點(diǎn)和層次，設(shè)置各種課堂教學(xué)活動，滿足學(xué)生的學(xué)習(xí)需要，激發(fā)他們的學(xué)習(xí)興趣，調(diào)動他們的學(xué)習(xí)積極性，把“要我學(xué)”變成“我要學(xué)”。

在構(gòu)建自主學(xué)習(xí)的過程中，教師首先幫助學(xué)生制訂學(xué)習(xí)目標(biāo)，使用能調(diào)控自己的學(xué)習(xí)行為和策略，了解每一學(xué)習(xí)階段的學(xué)習(xí)特點(diǎn)和規(guī)律，掌握有效的學(xué)習(xí)方法，從而學(xué)會自主學(xué)習(xí)。

（八）加強(qiáng)思政教育，實現(xiàn)立德樹人

在網(wǎng)頁設(shè)計與制作這門課程的項目教學(xué)過程中，融入了一些中華民族的傳統(tǒng)節(jié)目，如“端午節(jié)由來與傳說”作為圖文排版的項目，通過本項目的學(xué)習(xí)學(xué)生能使用HTML 5+CSS 3對網(wǎng)頁圖文進(jìn)行排版，同時加強(qiáng)了愛國主義教育。 在項目教學(xué)過程中引入《陋室銘》詩歌，要求學(xué)生使用

---

標(biāo)簽對每行詩添加水平線，教師把安于陋室，高潔傲岸的節(jié)操和安貧樂道的生活樂趣，不慕名利、不與權(quán)貴同流合污的品德和精神追求教誨到每位學(xué)生，實現(xiàn)了立德樹人。

五、課程的實施效果

本門課程實施于2020級計算機(jī)網(wǎng)絡(luò)1、2、3班，通過一個學(xué)期的實施，學(xué)生完成的作品有了很大的變化，課程實施前學(xué)生只能完成單頁的PC端網(wǎng)頁，課程實施后學(xué)生能完成靜態(tài)網(wǎng)站的開發(fā)，能完成單頁響應(yīng)PC、手機(jī)、iPad端的網(wǎng)頁效果，我們看到學(xué)生的技能水平有了很大的提高，同時該門課程通過多種教學(xué)方法與手段培養(yǎng)了學(xué)生的綜合素質(zhì)，讓學(xué)生形成了發(fā)現(xiàn)問題、探索問題、解決問題的能力，大大提高了學(xué)生對網(wǎng)頁設(shè)計與制作的興趣。2021年12月初，本系舉行了2022年廣西職業(yè)院校技能大賽的Web設(shè)計與開發(fā)項目的選拔賽，共30多名學(xué)生踴躍報名參與該項目的選拔，也有些學(xué)生開始研究世界技能大賽網(wǎng)站設(shè)計與開發(fā)項目的題目，力爭在下一屆區(qū)內(nèi)選拔賽中取得好的成績。課程實施過程中還引入了世賽的評價標(biāo)準(zhǔn)，確保學(xué)生完成作品的質(zhì)量。如“所有網(wǎng)頁文字內(nèi)容在頁面中可以索引”“代碼擁有良好的結(jié)構(gòu)”“網(wǎng)頁至少有兩個以上互動效果”等。

“路漫漫其修遠(yuǎn)兮，吾將上下而求索?！痹趯邮澜缂寄艽筚悩?biāo)準(zhǔn)，提升教學(xué)質(zhì)量對教學(xué)改革的探索，還有一段很長的路，我們需不斷加強(qiáng)理論和技能的學(xué)習(xí)，將世界技能大賽的標(biāo)準(zhǔn)融入更多的課堂，為培養(yǎng)更多的技能型人才而努力。

參考文獻(xiàn)：

[1]劉艷麗.高職計算機(jī)文化基礎(chǔ)課程教學(xué)方法的改革與實踐[J].職業(yè)，2015（3）.

[2]曹頻.以項目教學(xué)構(gòu)建中職語文教學(xué)新模式的實踐研究[J].職業(yè)，2014（11）.

[3]許可芳.借助“微課”創(chuàng)建高效中職課堂的探索：以動畫制作課程教學(xué)為例[J].職業(yè)，2015（3）.

編輯 馬燕萍