優(yōu)化網(wǎng)頁(yè)制作與設(shè)計(jì)課程課堂教學(xué)的幾點(diǎn)做法

朱曉

[摘? ? ? ? ? ?要]? 中等職業(yè)教育是國(guó)家教育體系的重要組成部分，怎樣提高教學(xué)質(zhì)量，使教學(xué)更有效，這是當(dāng)前國(guó)內(nèi)很多中等職業(yè)學(xué)校教師關(guān)注的問(wèn)題。隨著互聯(lián)網(wǎng)的飛速發(fā)展，計(jì)算機(jī)應(yīng)用專業(yè)存在行業(yè)技術(shù)更新?lián)Q代快、課堂教學(xué)相對(duì)滯后等問(wèn)題。以中職計(jì)算機(jī)專業(yè)“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程為例，通過(guò)引入企業(yè)真實(shí)項(xiàng)目、引入世界技能大賽的最新技術(shù)和編寫(xiě)校本教材等方式，讓學(xué)生承接真實(shí)的企業(yè)項(xiàng)目、接觸最新的網(wǎng)站技術(shù)。通過(guò)優(yōu)化課堂教學(xué)，提升中職生的專業(yè)技能和職業(yè)素養(yǎng)。

[關(guān)? ? 鍵? ?詞]? 課程標(biāo)準(zhǔn);職業(yè)能力;真實(shí)項(xiàng)目;網(wǎng)頁(yè)制作

[中圖分類號(hào)]? G712? ? ? ? ? ? ? ? ?[文獻(xiàn)標(biāo)志碼]? A? ? ? ? ? ? ? [文章編號(hào)]? 2096-0603（2019）06-0188-02

一、網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)的困惑

（一）課標(biāo)的改動(dòng)與相關(guān)教材的缺失

網(wǎng)頁(yè)設(shè)計(jì)與制作課程，是中職計(jì)算機(jī)應(yīng)用專業(yè)的一門專業(yè)核心課程，其教學(xué)目標(biāo)主要是讓中職學(xué)生學(xué)會(huì)使用網(wǎng)頁(yè)制作工具軟件，掌握良好的網(wǎng)頁(yè)制作知識(shí)與技巧，能夠從事靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作的相關(guān)工作。上海市中等職業(yè)教育課程教材改革辦公室對(duì)2006年5月編制的《上海市中等職業(yè)教育專業(yè)教學(xué)標(biāo)準(zhǔn)開(kāi)發(fā)指導(dǎo)手冊(cè)》進(jìn)行了研究和修改。其中網(wǎng)頁(yè)設(shè)計(jì)與制作課程新增了兩項(xiàng)培養(yǎng)目標(biāo)，即能制作交互式網(wǎng)頁(yè)和能制作移動(dòng)端網(wǎng)頁(yè)。但目前的教學(xué)參考用書(shū)并沒(méi)有涵蓋這方面最新的知識(shí)和技能，教師需要通過(guò)其他載體完成新技能的傳授。

（二）職業(yè)資格考試的滯后性

網(wǎng)頁(yè)設(shè)計(jì)與制作的課程標(biāo)準(zhǔn)是以職業(yè)標(biāo)準(zhǔn)為參照，教學(xué)過(guò)程圍繞上海市職業(yè)技能鑒定中心的《網(wǎng)頁(yè)設(shè)計(jì)制作員》四級(jí)的考核內(nèi)容與要求，這是檢驗(yàn)中職學(xué)生掌握網(wǎng)頁(yè)技術(shù)的一個(gè)有效途徑。但是近幾年網(wǎng)頁(yè)制作新技術(shù)的涌現(xiàn)，使職業(yè)資格考試的內(nèi)容已經(jīng)無(wú)法滿足目前職業(yè)崗位的需求。以網(wǎng)頁(yè)布局方式為例，《網(wǎng)頁(yè)設(shè)計(jì)制作員》四級(jí)考核要求中是運(yùn)用表格進(jìn)行網(wǎng)頁(yè)布局，而目前主流的網(wǎng)頁(yè)布局方式是基于CSS層疊樣式表和DIV容器。如何讓學(xué)生在完成職業(yè)資格考試的前提下，盡可能多地了解網(wǎng)頁(yè)制作的最新技術(shù)，是我們面對(duì)的一個(gè)新問(wèn)題。

二、優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)與制作課程的實(shí)踐嘗試

網(wǎng)頁(yè)設(shè)計(jì)與制作課程是“課程內(nèi)容的相對(duì)滯后”和“學(xué)用不一致”導(dǎo)致職業(yè)技能考核與實(shí)際職業(yè)能力無(wú)法完全契合。本人針對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作新課標(biāo)，以典型網(wǎng)站為載體，開(kāi)展了優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)與制作課程教學(xué)的實(shí)踐嘗試，總結(jié)出了幾條行之有效的做法。

（一）在課程中引入企業(yè)真實(shí)項(xiàng)目

基于企業(yè)真實(shí)項(xiàng)目的網(wǎng)頁(yè)設(shè)計(jì)和制作，使本課程教學(xué)更貼近行業(yè)實(shí)際，要求學(xué)生做到如下幾點(diǎn)。

1.以客戶需求為先

以網(wǎng)頁(yè)Banner制作為例，在傳統(tǒng)的教學(xué)中，要求使用Flash動(dòng)畫(huà)技術(shù)實(shí)現(xiàn)多個(gè)圖片的輪轉(zhuǎn)展示。但是，客戶提出網(wǎng)頁(yè)要在智能手機(jī)等移動(dòng)端合理的展示。目前移動(dòng)端的IOS和安卓系統(tǒng)都不再支持Flash。因此，在網(wǎng)站的制作過(guò)程中需采用Javascript網(wǎng)頁(yè)腳本替代傳統(tǒng)的Flash動(dòng)畫(huà)來(lái)實(shí)現(xiàn)圖片輪轉(zhuǎn)效果，而這也正是網(wǎng)頁(yè)設(shè)計(jì)與制作新課標(biāo)的培養(yǎng)目標(biāo)之一——制作移動(dòng)端網(wǎng)頁(yè)。

中職生通過(guò)了解客戶需求，知道不同網(wǎng)頁(yè)制作技術(shù)的應(yīng)用場(chǎng)合，并能合理地運(yùn)用到網(wǎng)站項(xiàng)目中去。

2.以崗位分工進(jìn)行角色代入

把學(xué)生分成若干小組，每個(gè)學(xué)生根據(jù)自身特長(zhǎng)擔(dān)任網(wǎng)站設(shè)計(jì)師、前端工程師、網(wǎng)頁(yè)腳本工程師、網(wǎng)站測(cè)試員等，從而讓每個(gè)學(xué)生參與進(jìn)來(lái)，了解各個(gè)崗位的不同要求。網(wǎng)站設(shè)計(jì)師除了需要運(yùn)用平面設(shè)計(jì)軟件制作網(wǎng)頁(yè)設(shè)計(jì)稿以外，還需要有良好的溝通能力，需要客戶明確告知自己網(wǎng)站的整體框架、企業(yè)的宣傳形象和理念、網(wǎng)站內(nèi)容的主次（比如經(jīng)典案例或企業(yè)榮譽(yù)）等。網(wǎng)站設(shè)計(jì)的過(guò)程中需要與客戶的多次溝通才能盡量減少后期的修改。前端工程師需要把網(wǎng)站設(shè)計(jì)師完成的網(wǎng)頁(yè)設(shè)計(jì)稿利用切片等方式把平面設(shè)計(jì)圖轉(zhuǎn)換成網(wǎng)頁(yè)文件。網(wǎng)頁(yè)腳本工程師需要在前端工程師完成的基礎(chǔ)上編寫(xiě)網(wǎng)頁(yè)腳本，比如網(wǎng)頁(yè)表單的驗(yàn)證、圖片的輪轉(zhuǎn)等。網(wǎng)站制作完成后，網(wǎng)站測(cè)試員需要對(duì)網(wǎng)站的完成質(zhì)量進(jìn)行系統(tǒng)測(cè)試。檢查網(wǎng)頁(yè)呈現(xiàn)效果與設(shè)計(jì)稿的差距;檢查表單驗(yàn)證效果是否達(dá)到;檢查網(wǎng)頁(yè)動(dòng)態(tài)效果是否符合預(yù)期;檢查網(wǎng)站在各類終端的呈現(xiàn)效果是否合理等。網(wǎng)站測(cè)試員需要把以上情況記錄下來(lái)，并反饋給相應(yīng)崗位的網(wǎng)站開(kāi)發(fā)人員。

通過(guò)每個(gè)崗位的思考和感悟，中職生的判斷力、表達(dá)力、思考力隨之得到提高，自信心和職業(yè)成就感也在悄然提升。

3.以行業(yè)標(biāo)準(zhǔn)衡量作品

不論是課堂中教師的評(píng)價(jià)，還是職業(yè)資格考試中鑒定中心的評(píng)價(jià)，其最終目的都是為了評(píng)價(jià)學(xué)生能否具有良好的網(wǎng)頁(yè)制作能力。學(xué)校通過(guò)校企合作平臺(tái)把行業(yè)資深的網(wǎng)站項(xiàng)目經(jīng)理請(qǐng)進(jìn)課堂，參與評(píng)價(jià)學(xué)生網(wǎng)站作品，指出學(xué)生作品與行業(yè)標(biāo)準(zhǔn)間的差距并提出修改意見(jiàn)。例如，學(xué)生平時(shí)在書(shū)寫(xiě)HTML和CSS代碼時(shí)，比較隨意，沒(méi)有遵循W3C規(guī)范。項(xiàng)目經(jīng)理就此提出了批評(píng)，要求完成的網(wǎng)頁(yè)文件要上傳至W3C官網(wǎng)，在線檢測(cè)其規(guī)范性，為以后的網(wǎng)站維護(hù)提供方便。最后，項(xiàng)目經(jīng)理從若干小組的完成作品中選出符合客戶需求和行業(yè)標(biāo)準(zhǔn)的網(wǎng)站，并予以肯定和展示。再如，在課堂中引入行業(yè)專家，激發(fā)了學(xué)生的學(xué)習(xí)熱情。中職生通過(guò)熟悉行業(yè)標(biāo)準(zhǔn)，逐步養(yǎng)成嚴(yán)謹(jǐn)?shù)膶W(xué)習(xí)作風(fēng)，提高了職業(yè)素養(yǎng)。

（二）引入世界技能大賽的最新技術(shù)

世界技能大賽網(wǎng)站設(shè)計(jì)項(xiàng)目代表著網(wǎng)頁(yè)技術(shù)發(fā)展的方向，代表了行業(yè)的最高水平。世界技能大賽網(wǎng)站設(shè)計(jì)項(xiàng)目可以分為四個(gè)模塊，包括制作網(wǎng)頁(yè)設(shè)計(jì)稿、響應(yīng)式網(wǎng)頁(yè)制作、Javascript網(wǎng)頁(yè)腳本制作和PHP網(wǎng)站后臺(tái)制作。在模塊二響應(yīng)式網(wǎng)頁(yè)的制作要求中，網(wǎng)頁(yè)的布局是基于CSS技術(shù)和DIV容器，與傳統(tǒng)的表格布局有相當(dāng)大的差距。為此，筆者嘗試在授課過(guò)程中把典型網(wǎng)頁(yè)實(shí)行一題多做。在部分課程中分別運(yùn)用表格布局和CSS布局，讓學(xué)生了解兩種布局方式的優(yōu)缺點(diǎn)。以網(wǎng)頁(yè)設(shè)計(jì)與制作四級(jí)考核內(nèi)容制作“卡內(nèi)基信息科技有限公司”網(wǎng)站首頁(yè)為例，網(wǎng)頁(yè)內(nèi)包含了大量DIV容器，需運(yùn)用CSS技術(shù)對(duì)這些DIV容器定義樣式，此項(xiàng)網(wǎng)頁(yè)技術(shù)在傳統(tǒng)的網(wǎng)頁(yè)課程中并未涉及。但學(xué)生通過(guò)世界技能大賽中學(xué)到的CSS網(wǎng)頁(yè)布局技術(shù)可以很好地解決這個(gè)問(wèn)題。于是，筆者讓學(xué)生用兩種方式完成該網(wǎng)站的制作，并通過(guò)加載速度、樣式變化、后期維護(hù)等方面進(jìn)行比較，了解到兩種布局的不同之處。

在2017年世界技能大賽上海市選拔賽中，需要在網(wǎng)頁(yè)中做一個(gè)交互式的圖片庫(kù)動(dòng)畫(huà)效果。當(dāng)展示效果時(shí)，學(xué)生反響強(qiáng)烈，有學(xué)生說(shuō)：“哇！好酷炫哦！老師快教我們。”這時(shí)，我也有些感動(dòng)，原來(lái)中職生并沒(méi)有那么厭學(xué)，只是缺少能激發(fā)起他們學(xué)習(xí)熱情的載體。學(xué)習(xí)有了熱情，課堂教學(xué)就有了一個(gè)很好的開(kāi)始。在教學(xué)設(shè)計(jì)中，把這個(gè)交互動(dòng)畫(huà)按照難度分成三個(gè)任務(wù)：（1）頁(yè)面載入完成后自動(dòng)播放圖片庫(kù)動(dòng)畫(huà)。（2）鼠標(biāo)懸停在圖片庫(kù)上時(shí)，動(dòng)畫(huà)暫停;鼠標(biāo)移開(kāi)圖片庫(kù)區(qū)域后動(dòng)畫(huà)繼續(xù)播放。（3）通過(guò)自定義元素進(jìn)行前一張和后一張的切換。教師引導(dǎo)學(xué)生通過(guò)小組協(xié)作，由易到難得完成了交互式網(wǎng)頁(yè)的制作，符合新課標(biāo)對(duì)中職生制作網(wǎng)頁(yè)的技能培養(yǎng)目標(biāo)。

中職生通過(guò)世界技能大賽所涉及相關(guān)網(wǎng)頁(yè)知識(shí)的學(xué)習(xí)，可以了解最新的網(wǎng)頁(yè)技術(shù)，形成完整的知識(shí)體系，為以后能成為專業(yè)的網(wǎng)頁(yè)制作人員打下基礎(chǔ)。

（三）編寫(xiě)符合中職生現(xiàn)狀的校本教材

企業(yè)真實(shí)項(xiàng)目?jī)?nèi)容繁多，所涉及的知識(shí)面廣。世界技能大賽題目難度偏高，不適合所有中職生。這些雖然都是課堂教學(xué)的優(yōu)秀載體，但需要專業(yè)教師完成對(duì)項(xiàng)目的分解、對(duì)賽題的分析和對(duì)學(xué)情的把控。將這些項(xiàng)目和賽題資源加以分析梳理，形式適合中職生個(gè)性特長(zhǎng)的校本教材。以企業(yè)真實(shí)項(xiàng)目和技能大賽為載體，把每個(gè)項(xiàng)目制作成獨(dú)立的案例。每個(gè)案例配有相應(yīng)的圖文素材，分成若干任務(wù)。每個(gè)任務(wù)分成教學(xué)目標(biāo)、任務(wù)書(shū)、任務(wù)描述、任務(wù)要求、評(píng)分表等。

三、探索的成效與反思

（一）探索成效

1.以實(shí)際項(xiàng)目為載體，激發(fā)學(xué)習(xí)熱情，提升綜合職業(yè)能力

興趣是構(gòu)成學(xué)習(xí)心理的動(dòng)力系統(tǒng)中最活躍的因素，選用企業(yè)真實(shí)項(xiàng)目和代表職業(yè)技能最高水平的世界技能大賽作為課堂教學(xué)的載體，能激發(fā)學(xué)生強(qiáng)烈的求知欲和職業(yè)成就感，啟發(fā)中職生進(jìn)行自主探索。通過(guò)真實(shí)企業(yè)項(xiàng)目的檢驗(yàn)，中職生學(xué)會(huì)了綜合運(yùn)用各類知識(shí)技能，懂得遵循行業(yè)標(biāo)準(zhǔn)的重要性，能以最合理的網(wǎng)頁(yè)制作技術(shù)滿足客戶需求。把企業(yè)項(xiàng)目引入課堂不僅提升了中職生的網(wǎng)站專業(yè)技能，而且溝通能力和問(wèn)題分析能力也得到了有效鍛煉，職業(yè)素養(yǎng)得到了有效提高。

2.與行業(yè)最新技術(shù)接軌，提升課堂效率，促進(jìn)學(xué)生發(fā)展

計(jì)算機(jī)應(yīng)用專業(yè)的特殊性在于計(jì)算機(jī)技術(shù)的飛速發(fā)展，以網(wǎng)頁(yè)設(shè)計(jì)與制作課程為例的中職計(jì)算機(jī)課程最突出的問(wèn)題主要是課程內(nèi)容的相對(duì)滯后。通過(guò)世界技能大賽和中職星光大賽的錘煉，中職生能了解和掌握最新的網(wǎng)頁(yè)制作技術(shù)。第42屆世界技能大賽上海選拔賽中獲得團(tuán)體金獎(jiǎng)、個(gè)人一等獎(jiǎng)。在上海市中等職業(yè)學(xué)校第七屆星光大賽中獲得個(gè)人一等獎(jiǎng)和團(tuán)體二等獎(jiǎng)。

（二）反思

1.教學(xué)載體的選擇必須符合中職生的實(shí)際水平

課堂引入的真實(shí)項(xiàng)目需要教師進(jìn)行合理的教學(xué)設(shè)計(jì)，形成規(guī)范的校本教材，才可以更有利于中職生的學(xué)習(xí)。在此過(guò)程中，多觀察、多發(fā)現(xiàn)，積極深入校企合作企業(yè)，不斷充實(shí)企業(yè)項(xiàng)目，逐步形成校本教材。隨著新的校企合作企業(yè)的加入，引入更多新的項(xiàng)目，選擇合適的項(xiàng)目充實(shí)校本教材，用新的項(xiàng)目替換已經(jīng)相對(duì)落后的項(xiàng)目。世界技能大賽難度偏高，學(xué)生對(duì)知識(shí)的掌握程度存在較大的差異性，這就需要根據(jù)不同學(xué)生實(shí)際情況確定不同層次學(xué)生的項(xiàng)目完成要求，既要讓每個(gè)學(xué)生在其能力范圍內(nèi)完成學(xué)習(xí)任務(wù)，又要激發(fā)學(xué)有余力的學(xué)生的探究欲望。

2.課堂探索過(guò)程中碰到的一些問(wèn)題

在優(yōu)化課堂教學(xué)的實(shí)踐探索中，也會(huì)遇到一些問(wèn)題。學(xué)生在網(wǎng)頁(yè)制作中引出新問(wèn)題的有些是教師課前沒(méi)有料想到的，需要在課后查閱相關(guān)資料才能回答學(xué)生。網(wǎng)頁(yè)制作的評(píng)價(jià)環(huán)節(jié)因?yàn)榛?dòng)較多，教師要隨機(jī)應(yīng)變，充分討論其網(wǎng)站作品的優(yōu)缺點(diǎn)，以便達(dá)成學(xué)生自主感悟生成知識(shí)和技能的教學(xué)目標(biāo)。

參考文獻(xiàn)：

[1]洪新軍.計(jì)算機(jī)網(wǎng)頁(yè)制作教學(xué)過(guò)程中應(yīng)該如何培養(yǎng)學(xué)生的創(chuàng)新能力[J].信息記錄材料，2018（11）.

[2]劉芳.多元化教學(xué)方法在計(jì)算機(jī)技術(shù)綜合實(shí)驗(yàn)課中的探索：以“網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)”為例[J].科教導(dǎo)刊，2018（9）.

[3]桂婷.項(xiàng)目教學(xué)法在中職《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程中應(yīng)用的探討[J].信息與電腦，2018（9）.

[4]陳青云.HTML5與CSS3技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用及發(fā)展前景[J].信息與電腦，2018（8）.

[5]吳琳.以職業(yè)能力培養(yǎng)為核心的《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)改革探索[J].計(jì)算機(jī)產(chǎn)品與流通，2018（8）.

[6]黃秀茵.中職《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)方法的探索與應(yīng)用[J].課程教育研究，2018（5）.

[7]武海艷，王倩，李林超.網(wǎng)頁(yè)設(shè)計(jì)與制作[J].項(xiàng)目驅(qū)動(dòng)教學(xué)方法探索，2018（2）.

◎編輯 陳鮮艷