優化網頁制作與設計課程課堂教學的幾點做法

朱曉

[摘? ? ? ? ? ?要]? 中等職業教育是國家教育體系的重要組成部分，怎樣提高教學質量，使教學更有效，這是當前國內很多中等職業學校教師關注的問題。隨著互聯網的飛速發展，計算機應用專業存在行業技術更新換代快、課堂教學相對滯后等問題。以中職計算機專業“網頁設計與制作”課程為例，通過引入企業真實項目、引入世界技能大賽的最新技術和編寫校本教材等方式，讓學生承接真實的企業項目、接觸最新的網站技術。通過優化課堂教學，提升中職生的專業技能和職業素養。

[關? ? 鍵? ?詞]? 課程標準;職業能力;真實項目;網頁制作

[中圖分類號]? G712? ? ? ? ? ? ? ? ?[文獻標志碼]? A? ? ? ? ? ? ? [文章編號]? 2096-0603（2019）06-0188-02

一、網頁設計與制作課程教學的困惑

（一）課標的改動與相關教材的缺失

網頁設計與制作課程，是中職計算機應用專業的一門專業核心課程，其教學目標主要是讓中職學生學會使用網頁制作工具軟件，掌握良好的網頁制作知識與技巧，能夠從事靜態網頁設計與制作的相關工作。上海市中等職業教育課程教材改革辦公室對2006年5月編制的《上海市中等職業教育專業教學標準開發指導手冊》進行了研究和修改。其中網頁設計與制作課程新增了兩項培養目標，即能制作交互式網頁和能制作移動端網頁。但目前的教學參考用書并沒有涵蓋這方面最新的知識和技能，教師需要通過其他載體完成新技能的傳授。

（二）職業資格考試的滯后性

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

二、優化網頁設計與制作課程的實踐嘗試

網頁設計與制作課程是“課程內容的相對滯后”和“學用不一致”導致職業技能考核與實際職業能力無法完全契合。本人針對網頁設計與制作新課標，以典型網站為載體，開展了優化網頁設計與制作課程教學的實踐嘗試，總結出了幾條行之有效的做法。

（一）在課程中引入企業真實項目

基于企業真實項目的網頁設計和制作，使本課程教學更貼近行業實際，要求學生做到如下幾點。

1.以客戶需求為先

以網頁Banner制作為例，在傳統的教學中，要求使用Flash動畫技術實現多個圖片的輪轉展示。但是，客戶提出網頁要在智能手機等移動端合理的展示。目前移動端的IOS和安卓系統都不再支持Flash。因此，在網站的制作過程中需采用Javascript網頁腳本替代傳統的Flash動畫來實現圖片輪轉效果，而這也正是網頁設計與制作新課標的培養目標之一——制作移動端網頁。

中職生通過了解客戶需求，知道不同網頁制作技術的應用場合，并能合理地運用到網站項目中去。

2.以崗位分工進行角色代入

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

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

3.以行業標準衡量作品

不論是課堂中教師的評價，還是職業資格考試中鑒定中心的評價，其最終目的都是為了評價學生能否具有良好的網頁制作能力。學校通過校企合作平臺把行業資深的網站項目經理請進課堂，參與評價學生網站作品，指出學生作品與行業標準間的差距并提出修改意見。例如，學生平時在書寫HTML和CSS代碼時，比較隨意，沒有遵循W3C規范。項目經理就此提出了批評，要求完成的網頁文件要上傳至W3C官網，在線檢測其規范性，為以后的網站維護提供方便。最后，項目經理從若干小組的完成作品中選出符合客戶需求和行業標準的網站，并予以肯定和展示。再如，在課堂中引入行業專家，激發了學生的學習熱情。中職生通過熟悉行業標準，逐步養成嚴謹的學習作風，提高了職業素養。

（二）引入世界技能大賽的最新技術

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

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

中職生通過世界技能大賽所涉及相關網頁知識的學習，可以了解最新的網頁技術，形成完整的知識體系，為以后能成為專業的網頁制作人員打下基礎。

（三）編寫符合中職生現狀的校本教材

企業真實項目內容繁多，所涉及的知識面廣。世界技能大賽題目難度偏高，不適合所有中職生。這些雖然都是課堂教學的優秀載體，但需要專業教師完成對項目的分解、對賽題的分析和對學情的把控。將這些項目和賽題資源加以分析梳理，形式適合中職生個性特長的校本教材。以企業真實項目和技能大賽為載體，把每個項目制作成獨立的案例。每個案例配有相應的圖文素材，分成若干任務。每個任務分成教學目標、任務書、任務描述、任務要求、評分表等。

三、探索的成效與反思

（一）探索成效

1.以實際項目為載體，激發學習熱情，提升綜合職業能力

興趣是構成學習心理的動力系統中最活躍的因素，選用企業真實項目和代表職業技能最高水平的世界技能大賽作為課堂教學的載體，能激發學生強烈的求知欲和職業成就感，啟發中職生進行自主探索。通過真實企業項目的檢驗，中職生學會了綜合運用各類知識技能，懂得遵循行業標準的重要性，能以最合理的網頁制作技術滿足客戶需求。把企業項目引入課堂不僅提升了中職生的網站專業技能，而且溝通能力和問題分析能力也得到了有效鍛煉，職業素養得到了有效提高。

2.與行業最新技術接軌，提升課堂效率，促進學生發展

計算機應用專業的特殊性在于計算機技術的飛速發展，以網頁設計與制作課程為例的中職計算機課程最突出的問題主要是課程內容的相對滯后。通過世界技能大賽和中職星光大賽的錘煉，中職生能了解和掌握最新的網頁制作技術。第42屆世界技能大賽上海選拔賽中獲得團體金獎、個人一等獎。在上海市中等職業學校第七屆星光大賽中獲得個人一等獎和團體二等獎。

（二）反思

1.教學載體的選擇必須符合中職生的實際水平

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

2.課堂探索過程中碰到的一些問題

在優化課堂教學的實踐探索中，也會遇到一些問題。學生在網頁制作中引出新問題的有些是教師課前沒有料想到的，需要在課后查閱相關資料才能回答學生。網頁制作的評價環節因為互動較多，教師要隨機應變，充分討論其網站作品的優缺點，以便達成學生自主感悟生成知識和技能的教學目標。

參考文獻：

[1]洪新軍.計算機網頁制作教學過程中應該如何培養學生的創新能力[J].信息記錄材料，2018（11）.

[2]劉芳.多元化教學方法在計算機技術綜合實驗課中的探索：以“網頁制作與網站建設”為例[J].科教導刊，2018（9）.

[3]桂婷.項目教學法在中職《網頁設計與制作》課程中應用的探討[J].信息與電腦，2018（9）.

[4]陳青云.HTML5與CSS3技術在網頁制作中的應用及發展前景[J].信息與電腦，2018（8）.

[5]吳琳.以職業能力培養為核心的《網頁設計與制作》教學改革探索[J].計算機產品與流通，2018（8）.

[6]黃秀茵.中職《網頁設計與制作》教學方法的探索與應用[J].課程教育研究，2018（5）.

[7]武海艷，王倩，李林超.網頁設計與制作[J].項目驅動教學方法探索，2018（2）.

◎編輯 陳鮮艷