高職院校軟件專業網頁設計課程教學改革初探

【摘 要】網頁設計是高職院校軟件技術及相關專業的一門重要的專業課程，該課程側重培養學生的前端網頁布局、設計和美工的能力和素養。本文從課程的總體定位、教學內容的選取與組織、教學過程設計、考核過程設計四大方面闡述了對該課程教學改革的一些探索和實踐的基本思路。

【關鍵詞】網頁設計；教學改革；教學過程設計

一、課程教學的總體定位

《網頁設計》是軟件技術專業一門重要的專業課，但長期以來我們的授課方式是以零散的知識點加小規模的實訓，而實訓都是以驗證性實驗為主，這與企業的用人需求及工學結合的職業教育模式脫節，學生雖然上課時能夠掌握基礎知識，并有著極大的學習興趣，但由于內容過于分散，學生很難綜合運用并做出一個實物。這樣將導致學生學習的成就感缺失，久而久之，就會對課程失去興趣。

針對職業教育的特點，在我們對眾多大中型網站開發企業進行調研分析、對專業畢業生的崗位進行調查回訪的基礎上，我們對網站的開發流程有了清晰的認識和了解。一般大中型網站企業開發分前臺美工人員和后臺程序人員。前臺美工人員的任務是使用photoshop等軟件制作網站效果圖，在用戶確認通過后，根據效果圖進行切片來生成網頁中的圖片，然后利用表格或使用DIV+CSS來對網頁進行布局，從而完成前臺靜態網頁的制作；而后臺程序人員則使用各種動態網頁技術如ASP、JSP、PHP等完成程序的編寫，利用數據庫管理軟件對數據庫進行部署，存儲網站中需要的數據。

前臺美工人員完成的工作正好是我們這門課程所要完成的目標。基于此，我們把課程定位在適應企業用人需求，提高學生使用photoshop等軟件進行網站效果圖制作、使用表格或使用DIV+CSS來對網頁進行布局上。

網頁設計面向的工作崗位主要有：前臺美工、DIV+CSS網頁布局、使用簡單JS腳本進行客戶端編程等。職業學院所培養的網頁設計開發人才主要從事靜態網頁設計，基于此思路，

我們依據崗位需求，應以培養網頁美工、前端代碼設計和布局為基本目標，通過完成學習性工作項目，培養學生能夠依據用戶需求，進行網站架構設計、網頁布局和美化設計、打包發布的能力，并通過拓展項目訓練，逐步培養學生具備網站系統分析和網頁美感、色彩搭配、網頁布局和設計的能力。

二、課程教學內容的選取與組織

在進行該課程的設計時遵循以下三個理念和原則：

（1）以崗位需求為目標、以職業能力培養為主線、以工作過程為導向建立教學體系。

（2）根據一個完整網站統領全課程，用任務驅動構建網頁設計課程知識體系。選取企業網站作為課程載體，將所有知識點、技能融于六大情境模塊中。

（3）與企業合作，完全模擬靜態網頁真實開發過程進行教學，以技能訓練為重點培養學生解決實際問題的能力、創新能力、“零距離”就業能力。實現三方面培養目標。

通過以下手段重構教學內容：

（1）走訪、調研多家網站開發企業、查詢行業標準，了解熟悉網站開發的流程。

（2）根據我所帶班級學生特點及目前就業崗位技術需求確定教學內容。

（3）以企業網站設計案例為載體重構該學科知識體系。

（4）參考網頁設計師認證考試大綱拓寬知識面。

具體教學內容分為6個模塊，列舉如下：

（1）模塊1：著名網頁效果賞析、網頁布局結構。該模塊的任務是對經典的網頁進行效果賞析，并對網頁布局結構進行學習和借鑒。涵蓋主要知識點：美感培養、色彩搭配、字體應用；網頁LOGO、頭部、菜單欄、版權欄、各欄目結構。該模塊學時分配為9學時。

（2）模塊2：HTML基礎知識。該模塊的任務是學習HTML基本標記和HTML基本語法，并對頁面美工進行學習。涵蓋主要知識點：各標記的語法應用、屬性設置；CSS樣式表。學時分配為4學時。

（3）模塊3：網站效果圖制作。該模塊的任務是學習photoshop軟件的使用、flash軟件的使用、Fireworks、Dreamweaver以及切片操作。涵蓋主要知識點：選區、圖像編輯、圖層、通道、蒙版、路徑、濾鏡等；圖形繪制工具、圖形編輯、位圖和視頻、對象編輯、元件和實例、動畫制作；動態濾鏡、圖層、通道、蒙版；文本與圖像處理、層、框架網頁等。學時分配為30學時。

（4）模塊4：HTML表格布局。該模塊的任務是學習表格嵌套和表格屬性設置。涵蓋主要知識點：表格布局。學時分配為6學時。

（5）模塊5：DIV+CSS。該模塊的任務是學習CSS語法格式、各個CSS屬性用法；并將切片后的頁面進行DIV+CSS布局。涵蓋主要知識點：表格布局。學時分配為9學時。

（6）模塊6：站點測試與發布。該模塊的任務是學習如何使用Dreamweaver上傳網站，完成發布。學時分配為3學時。

三、課程教學過程設計

我們以主頁設計模塊的任務5- 2 DIV+CSS布局為例進行說明。

該任務為6學時，具體任務包含3個子任務： DIV的布局；CSS設置屬性；浮動、絕對定位。該任務主要使用DIV布局頁面，用CSS設置DIV塊的屬性，將主頁面分為幾個部分，對應于相應的DIV，并使用浮動、定位屬性定位DIV塊。

任務目標包括知識目標和能力目標，列舉如下：

知識目標：1、掌握DIV的布局 的方法。2、掌握使用CSS設置屬性的方法。3、掌握浮動、絕對定位的方法。能力目標：1、培養學生使用DIV的布局 的能力；2、培養學生使用使用CSS設置屬性的能力。學時分配：二次課（6學時）

教學過程設計如下：

主要教學方法：多種教學方法穿插并用，整個課堂按照”做—學—教—拓—思”的步驟進行。綜合運用項目教學法（引入企業網站案例）、教—學—做合一的教學方法。

主要教學手段：多媒體課件演示；企業項目開發場景的模擬；分組討論，團隊開發；

視頻錄象的使用。

教學步驟：（1）做：教師講解、演示：布置任務，演示DIV+CSS布局的基本操作；并演示任務的最終完成結果。學生：分組，按照實訓指導書的步驟完成任務，每組學生要有組長（負責協調，帶領全組討論并完成任務）1、創建DIV塊；2、使用DIV塊嵌套；3、使用CSS設置屬性；4、浮動DIV或絕對定位。

（2）學：學生復習并回答以下問題：1、什么是浮動？2、什么是絕對定位，什么是相對定位？3、怎樣用CSS設置屬性，有幾種方法？學生可以查閱書本，或上網查找答案。

（3）教：1、2個DIV塊并列。2、主要步驟：插入DIV塊，設置邊框屬性、高度、寬度，內部包含的小DIV塊，然后對DIV塊絕對或相對定位。

（4）拓：1、使用表格布局是否也能達到同樣的效果？2、嘗試寫CSS樣式表

（5）思：課后練習：如何進行定位？

教學資源與教學評價如下：

（1）教學資源包括：網絡資源（Csdn論壇；微軟官方網站；其他主要技術論壇）；圖書資源（教材；推薦參考書）；其他資源（教師提供的一些源碼）

（2）教學評價包括：教師評價學生任務完成情況（程序界面美觀程度；CSS代碼質量；可讀性、可維護性；資料查找能力；調試能力）；學生論述、答辯（對任務重、難點的認識情況；對教師問題的回答情況）

四、課程考核過程設計

網頁設計課程的考核標準由職業素質、基礎知識和技能三部分內容組成，各部分的考核內容如下：

（1）職業素質部分：職業道德、工作態度、工作作風、團隊精神及競爭意識。

（2）基礎知識部分：網頁設計規范、HTML標記語言、網絡圖像處理、動畫制作、小型網站建設及維護的知識。

（3）技能部分：網站策劃、網絡圖像編輯與處理、動畫制作、網頁設計與制作、開發和維護小型網站的能力。

對基礎知識的考核以教學基本目標為基準；對能力與技能部分的考核以模擬公司招聘員工和網頁設計工作者的考核標準為本課程的標準。

考核的原則：以考核基礎知識和職業技能為重點。對基礎部分和職業素質在平時考核中完成，技能部分在期末上機考試中進行考核。在技能部分的考核中，要求在規定時間內（通常為2小時）利用給定素材，包括考題所需的圖片、背景和其他輔助圖片、相關考題內容的文字資料、考題要求等，學生利用授課所學軟件完成規定技術要求的網站創意設計與制作。以這種模擬公司招聘員工和網頁設計工作者工作過程的考核方式，檢測學生創意、設計、理解題材、圖像加工處理、動畫制作、色彩運用、布局、站點管理等綜合能力。

這里，我們從課程的總體定位、教學內容的選取與組織、教學過程設計、考核過程設計四大方面闡述了對該課程教學改革的一些探索和實踐的基本思路，目前，該課程教學改革正在進行中，學生反饋的結果良好，學習興趣得到了極大的提高。

參考文獻：

[1] 趙志群，職業教育與培訓新概念 [ M] . 北京：科學出版社，2003.

[2] 張潤蓮，張向利，葉進 . 案例教學法及其運用 [ J] .桂林電子工業學院學報，2004，24 （4）：102- 105.

[3] 頓祖義 . 項目化課程改革：高職院校教學工作的重要抓手 [J] .湖北民族學院學報：哲學社會科學版，2008，26（6）：61- 63.

[4] 張建國 . 我國職教課程開發模式的演變及啟示 [ J] .職教論壇，2007， （4）：4- 10.

[5] 歐陽煒昊，吳振峰，羅卓君 . 基于工作過程導向的“網頁設計與制作”課程教學改革研究 [J] .計算機教育，2010， （4）：50- 52 .

附：作者簡介：程冠琦（1978-），湖北襄樊人，碩士研究生，無錫商業職業技術學院物聯網技術學院講師，研究方向：軟件技術。