高職《網頁設計》課程的教學模式設計

□劉 銘

高職《網頁設計》課程的教學模式設計

□劉 銘

隨著計算機技術的發展，從網站上獲取信息的應用已深入人心，由此，高技能的網頁設計與制作人才也就得到了人們更加關注。在對行業企業的需求進行深入調研的基礎上，根據《網頁設計》在人才培養中的地位和作用，結合專業教師多年的教學經驗，設計了基于“工學結合”的“全站貫穿—團隊協作”教學模式，以期培養出更多的學以致用，且能滿足網站開發與維護行業的需求的高技能應用型人才。

網頁設計；教學模式；設計；研究

一、《網頁設計》課程在計算機類專業的地位和作用

《網頁設計》課程是國家示范性高職院校建設單位——重慶工程職業技術學院計算機網絡技術專業、計算機應用技術專業和信息安全技術等三個專業平面藝術模塊方向主要針對行業企業在網絡媒體方面的網頁設計與制作員、網站開發與管理員等崗位開設的一門主干課程。通過學習 《網頁設計》，使學生掌握網頁設計和制作的基本技能，具備獨立完成企事業單位靜態網站設計、內容制作及維護、動態網站界面設計與制作、B/S模式軟件界面設計與制作等方面的能力，同時具備誠實、守信，善于溝通和合作的團隊合作的能力。

《網頁設計》是前續課程《平面設計》和《網頁設計語言》的項目應用性課程，也是后續課程《交互式網頁動畫設計》和《ASP.net》的前導課程，學生通過《網頁設計》課程的學習，可以解決《交互式網頁動畫設計》課程中對動畫網頁美術效果的設計需求，可以解決《ASP.net》課程中對網站前臺界面的設計和制作需求。

二、《網頁設計》課程的特點

《網頁設計》是技術與藝術相結合的一門實踐性課程。具有以下特點：

（一）課程具有較強的職業性。該課程的學習情景，來源于行業、企業網頁設計相關崗位的工作過程，學生的學習過程和實訓過程，就是將來在企業中的工作過程。教師在每個學習情景中，以真實項目的任務實施教學。

（二）課程具有較強的實踐性。《網頁設計》課程的教學內容實踐性較強，能極大的提高學生的學習積極性，激發學生的參與性，鍛煉學生的動手能力，培養學生的專業興趣。學習中一定要注意理論與實踐相結合，其中實踐內容是教學的主線。學生應該有較充足的動手實踐機會，較熟練地創作出實用的動態網頁來。理論教學服務于實踐教學，實踐教學反過來又作用于理論教學。

（三）課程具有較廣的開放性。《網頁設計》是近年來計算機專業領域發展最快和應用最廣泛的課程之一，當今社會急需培養掌握計算機網頁設計、面向不同應用層次的專業人才。《網頁設計》是一門既強調創造性又注重實用性的學科，它更要求學生具有務實的創意及動手能力，它涵蓋了計算機、藝術、現代教育技術等多門學科的知識。

三、教學模式設計

（一）課程內容設計與選取

《網頁設計》課程組在通過對行業企業的深入研究，與企業技術專家共同制定針對職業能力和素質培養的課程內容基礎上，確定了本課程以學習情景和學習子情景為載體的教學內容。在具體任務中說明知識要求、能力要求、任務描述與分析、相關理論知識以及任務實施的步驟和方法等，實行真實項目的任務驅動式教學模式，使教、學、做融為一體，突出工學結合，注重職業素質的培養。

《網頁設計》課程以企業真實項目作為課程內容，依據網絡媒體內容制作相關崗位群的工作過程分析設計課程方案。通過分析實際工作過程、提煉典型工作任務、轉化為學習領域、設計出學習情景。構建了“項目驅動任務引領”的課程體系，根據網頁設計崗位群的要求，把網頁設計崗位的工作任務歸納為策劃網站、繪制網頁效果圖、切割網頁效果圖、編排網頁基礎結構、制作網頁細節、制作子網頁、XHTML網頁編碼、鏈接并測試網頁等8個典型工作任務，再進一步對應典型工作任務將《網頁設計》課程并分解為網站策劃、繪制網頁效果圖、編排網頁基礎結、制作網頁細節、XHTML網頁編碼、合成與維護網頁等6個教學情景。

（二）“全站貫穿—團隊協作”的教學模式

結合靜態網站設計工作的實際流程和特點，以培養學生具備設計完整靜態網站能力為核心目標，在考慮我院實際教學條件和學生實際認知水平的前提下，構建了充分體現“以能力為本位”、“以學生為主體”和“項目驅動任務引領”三大原則，并支持過程化考核和團隊合作的教學模式：“全站貫穿——團隊協作”的教學模式。

所謂“全站貫穿”，就是在教學過程中，從頭到尾都是在完成同一個網站的設計。而這個設計過程是按照工作實際設計流程，依照：策劃網站→繪制網頁效果圖→切割網頁效果圖→編排網頁基礎結構→制作網頁細節→制作子網頁→XHTML網頁編碼→鏈接并測試網頁等這樣的順序進行，并將每個階段分成一個任務，每個任務按照“任務引領”方式組織教學。所以，從總體上看，是“項目驅動式”的教學，從局部看，是“任務引領式”的教學。

（三）教學方法設計

每個學習情景中，教師將學生分為若干個小組，形成虛擬的企業項目團隊。教師作為“項目經理”為每個小組分配真實的網頁設計項目，每完成一個學習情景任務，教師（項目經理）要對每個小組的實踐進度和成果進行考核。學生的實訓效果不僅能夠得到有效的監督，而且通過對成果的認定讓學生享受到了獲得成就感的快樂，達到進一步提高其學習興趣的目的。

在實訓環節，《網頁設計》課程建立了虛擬企業，由學生分組扮演企業中的項目制作團隊完成一套真實的網頁設計項目，由教師扮演企業中的項目經理，向每個項目制作團隊分配項目并監督制作流程，檢驗作品質量。

學生項目團隊本著自由組合的原則，6至8人為一組。具體組合崗位如下：

組長負責團隊的組織協調、產品總體設計、團隊內部的流程與質量監督等工作。各崗位的隊員必須積極參于團隊討論，并按組長要求按時按質完成自己負責的設計和制作任務。

1.組建設計制作團隊。分組原則：自由組合，順序排列或均衡分配；小組人數：一般為6-8人，方便組織團隊教學，也適應機房的布置條件；小組構成：組長（經理），組員（員工）；組長（經理）職責：負責全隊的組織協調，任務分配，提交作品，組織討論，成果演示匯報等；組員（員工）職責：聽從組長（經理）發安排，按時按質完成組長（經理）分配的任務。

2.分組實施教學。抓住教學的四個環節，即：任務明確、教師示范、學生設計、展示評價。在這個四個環節，分別把握學生應該掌握的知識和所要完成的任務，順利完成教學和對學生的訓練。

明確任務：在上課開始，教師通過明確的任務方式，使得學生知道當次課程要完成的任務和學習的內容。并且引導學生在欣賞案例作品的基礎上，確定所要完成任務的設計方法和用到的工具，以及實現的流程和思路；

教師示范：教師首先演示已經設計好的作品，然后按照上面分析的思路和方法，演示操作具體的設計過程，完成后，教師再對學生提出具體的模仿設計要求；

學生設計：學生根據教師的演示和任務的要求，由小組內部進行分析、分配、實現設計任務，并提交作品到教學服務器；

展示評價：小組進行演示，并開展師生評價，并給出本次作品的成績，作為總成績的一次考核過程。

3.考核方式設計。基于工作過程的任務考核方式，對學生的考核是以能力為本位，主要是進行過程考核，因此，《網頁設計》的課程考核分成三個部分：過程考核、任務設計、協作能力。其中：過程考核占60%、任務設計占30%、學生協作能力占10%，每一項都按100分計算，最后取平均值。每位學生在項目團隊的環境下，通過不斷的考核了解和體驗到技能應用的真實社會情況和團隊協作方式。在學生的團隊之間形成猶如行業企業之間的壓力和競爭意識，使每個團隊的學生都力爭作品做得更好，從而提高學生的學習積極性、學習效果和心理素質。

?

（四）“全站貫穿—團隊協作”教學模式的優點

《網頁設計》課程的教學與實訓真正實現了實訓內容項目化（真實項目）、制作小組團隊化（教師與學生組成團隊）、實訓結果產品化（企業項目）、評價立體化（社會、教師、學生綜合評價）。具體有以下優點：

1.全程參與，企業項目，學生作品多。通過各個教學情景的實訓，學生能參加每個任務的實訓，學生參加制作和設計，可以形成完整的作品。在教學過程中，學生直接面對客戶需求，承擔企業真實項目的設計制作，這樣，學生不斷地參與到真實的商業網站項目，學生產品多。

2.企業管理，過程考核，學習效果好。不論是理論教學，還是實訓環節，都以真實項目作為教學載體，并對學生進行分組（每組6-8人），組建網頁設計制作團隊。

使用企業在網頁制作項目過程中的管理辦法，管理學生團隊。考核過程貫穿在各學習情景教學之中，使每位學生在項目團隊的環境下，通過不斷的考核了解和體驗到技能應用的真實社會情況和團隊協作方式。讓學生經歷從策劃、設計、客戶認可、制作作品到成果驗收的全過程，學生學習有興趣，教學效果好。

3.理實結合，學以致用，滿足學生就業的需求。職業院校的學生學習《網頁設計》的主要目的是為了能夠進入社會就業，傳統的實訓項目是虛擬項目，實訓方式也與社會需要存在著一定的差距，體現不到學以致用的快樂。“全站貫穿—團隊協作”教學模式，教師引進的是企業真實項目，學生在實訓過程中，更是深入到企業一線，能夠較好地學以致用，有利于學生就業。

[1]劉銘.《網頁設計》精品課程[ED/OL].http://www.cqvie.edu.cn/jpkc/wy2009,2009-5-10.

[2]朱印宏.中文版DreamweaverCS4標準教程[M].北京:中國電力出版社.2009.

[3]姜卉.DreamweaverCS4中文版完全自學教程[M].北京:機械工業出版社，2009.

[4]涂巧霞,夏永恒,王國平.DreamweaverCS4網頁設計高手經典教程[M].北京:北京郵電大學，2009.

[5]王智強,張桂敏.中文版 FlashCS4標準教程[M].北京:中國電力出版社，2009.

[6]劉小偉,劉曉萍.FlashCS4中文版實訓教程[M].北京:電子工業出版社，2009.

[7](美)Adobe公司著.Adobe FlashCS4中文版經典教程[M].北京:人民郵電出版社，2009.

[8]王紅衛.PhotoshopCS4完全自學教程.[M].北京:機械工業出版社，2008.

[9]梵紳科技.PhotoshopCS4從入門到精通[M].北京:北京科海電子出版社，2009.

[10]李金明,李金榮.中文版PhotoshopCS4完全自學教程[M].北京:人民郵電出版社，2009

[11]中國站長站.Web標準化 DIV+CSS專題[ED/OL].http://www.chinaz.com/zt/div-css/，2008.

劉銘（1973－），男，四川儀隴人，碩士，重慶工程職業技術學院副教授，研究方向為網頁設計、計算機教育、計算機輔助設計。

G712

A

1001-7518（2010）35－0044－03

責任編輯時紅兵