□劉 銘

高職《網(wǎng)頁設(shè)計(jì)》課程的教學(xué)模式設(shè)計(jì)

□劉 銘

隨著計(jì)算機(jī)技術(shù)的發(fā)展，從網(wǎng)站上獲取信息的應(yīng)用已深入人心，由此，高技能的網(wǎng)頁設(shè)計(jì)與制作人才也就得到了人們更加關(guān)注。在對(duì)行業(yè)企業(yè)的需求進(jìn)行深入調(diào)研的基礎(chǔ)上，根據(jù)《網(wǎng)頁設(shè)計(jì)》在人才培養(yǎng)中的地位和作用，結(jié)合專業(yè)教師多年的教學(xué)經(jīng)驗(yàn)，設(shè)計(jì)了基于“工學(xué)結(jié)合”的“全站貫穿—團(tuán)隊(duì)協(xié)作”教學(xué)模式，以期培養(yǎng)出更多的學(xué)以致用，且能滿足網(wǎng)站開發(fā)與維護(hù)行業(yè)的需求的高技能應(yīng)用型人才。

網(wǎng)頁設(shè)計(jì)；教學(xué)模式；設(shè)計(jì)；研究

一、《網(wǎng)頁設(shè)計(jì)》課程在計(jì)算機(jī)類專業(yè)的地位和作用

《網(wǎng)頁設(shè)計(jì)》課程是國家示范性高職院校建設(shè)單位——重慶工程職業(yè)技術(shù)學(xué)院計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)、計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)和信息安全技術(shù)等三個(gè)專業(yè)平面藝術(shù)模塊方向主要針對(duì)行業(yè)企業(yè)在網(wǎng)絡(luò)媒體方面的網(wǎng)頁設(shè)計(jì)與制作員、網(wǎng)站開發(fā)與管理員等崗位開設(shè)的一門主干課程。通過學(xué)習(xí) 《網(wǎng)頁設(shè)計(jì)》，使學(xué)生掌握網(wǎng)頁設(shè)計(jì)和制作的基本技能，具備獨(dú)立完成企事業(yè)單位靜態(tài)網(wǎng)站設(shè)計(jì)、內(nèi)容制作及維護(hù)、動(dòng)態(tài)網(wǎng)站界面設(shè)計(jì)與制作、B/S模式軟件界面設(shè)計(jì)與制作等方面的能力，同時(shí)具備誠實(shí)、守信，善于溝通和合作的團(tuán)隊(duì)合作的能力。

《網(wǎng)頁設(shè)計(jì)》是前續(xù)課程《平面設(shè)計(jì)》和《網(wǎng)頁設(shè)計(jì)語言》的項(xiàng)目應(yīng)用性課程，也是后續(xù)課程《交互式網(wǎng)頁動(dòng)畫設(shè)計(jì)》和《ASP.net》的前導(dǎo)課程，學(xué)生通過《網(wǎng)頁設(shè)計(jì)》課程的學(xué)習(xí)，可以解決《交互式網(wǎng)頁動(dòng)畫設(shè)計(jì)》課程中對(duì)動(dòng)畫網(wǎng)頁美術(shù)效果的設(shè)計(jì)需求，可以解決《ASP.net》課程中對(duì)網(wǎng)站前臺(tái)界面的設(shè)計(jì)和制作需求。

二、《網(wǎng)頁設(shè)計(jì)》課程的特點(diǎn)

《網(wǎng)頁設(shè)計(jì)》是技術(shù)與藝術(shù)相結(jié)合的一門實(shí)踐性課程。具有以下特點(diǎn)：

（一）課程具有較強(qiáng)的職業(yè)性。該課程的學(xué)習(xí)情景，來源于行業(yè)、企業(yè)網(wǎng)頁設(shè)計(jì)相關(guān)崗位的工作過程，學(xué)生的學(xué)習(xí)過程和實(shí)訓(xùn)過程，就是將來在企業(yè)中的工作過程。教師在每個(gè)學(xué)習(xí)情景中，以真實(shí)項(xiàng)目的任務(wù)實(shí)施教學(xué)。

（二）課程具有較強(qiáng)的實(shí)踐性?！毒W(wǎng)頁設(shè)計(jì)》課程的教學(xué)內(nèi)容實(shí)踐性較強(qiáng)，能極大的提高學(xué)生的學(xué)習(xí)積極性，激發(fā)學(xué)生的參與性，鍛煉學(xué)生的動(dòng)手能力，培養(yǎng)學(xué)生的專業(yè)興趣。學(xué)習(xí)中一定要注意理論與實(shí)踐相結(jié)合，其中實(shí)踐內(nèi)容是教學(xué)的主線。學(xué)生應(yīng)該有較充足的動(dòng)手實(shí)踐機(jī)會(huì)，較熟練地創(chuàng)作出實(shí)用的動(dòng)態(tài)網(wǎng)頁來。理論教學(xué)服務(wù)于實(shí)踐教學(xué)，實(shí)踐教學(xué)反過來又作用于理論教學(xué)。

（三）課程具有較廣的開放性?！毒W(wǎng)頁設(shè)計(jì)》是近年來計(jì)算機(jī)專業(yè)領(lǐng)域發(fā)展最快和應(yīng)用最廣泛的課程之一，當(dāng)今社會(huì)急需培養(yǎng)掌握計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)、面向不同應(yīng)用層次的專業(yè)人才。《網(wǎng)頁設(shè)計(jì)》是一門既強(qiáng)調(diào)創(chuàng)造性又注重實(shí)用性的學(xué)科，它更要求學(xué)生具有務(wù)實(shí)的創(chuàng)意及動(dòng)手能力，它涵蓋了計(jì)算機(jī)、藝術(shù)、現(xiàn)代教育技術(shù)等多門學(xué)科的知識(shí)。

三、教學(xué)模式設(shè)計(jì)

（一）課程內(nèi)容設(shè)計(jì)與選取

《網(wǎng)頁設(shè)計(jì)》課程組在通過對(duì)行業(yè)企業(yè)的深入研究，與企業(yè)技術(shù)專家共同制定針對(duì)職業(yè)能力和素質(zhì)培養(yǎng)的課程內(nèi)容基礎(chǔ)上，確定了本課程以學(xué)習(xí)情景和學(xué)習(xí)子情景為載體的教學(xué)內(nèi)容。在具體任務(wù)中說明知識(shí)要求、能力要求、任務(wù)描述與分析、相關(guān)理論知識(shí)以及任務(wù)實(shí)施的步驟和方法等，實(shí)行真實(shí)項(xiàng)目的任務(wù)驅(qū)動(dòng)式教學(xué)模式，使教、學(xué)、做融為一體，突出工學(xué)結(jié)合，注重職業(yè)素質(zhì)的培養(yǎng)。

《網(wǎng)頁設(shè)計(jì)》課程以企業(yè)真實(shí)項(xiàng)目作為課程內(nèi)容，依據(jù)網(wǎng)絡(luò)媒體內(nèi)容制作相關(guān)崗位群的工作過程分析設(shè)計(jì)課程方案。通過分析實(shí)際工作過程、提煉典型工作任務(wù)、轉(zhuǎn)化為學(xué)習(xí)領(lǐng)域、設(shè)計(jì)出學(xué)習(xí)情景。構(gòu)建了“項(xiàng)目驅(qū)動(dòng)任務(wù)引領(lǐng)”的課程體系，根據(jù)網(wǎng)頁設(shè)計(jì)崗位群的要求，把網(wǎng)頁設(shè)計(jì)崗位的工作任務(wù)歸納為策劃網(wǎng)站、繪制網(wǎng)頁效果圖、切割網(wǎng)頁效果圖、編排網(wǎng)頁基礎(chǔ)結(jié)構(gòu)、制作網(wǎng)頁細(xì)節(jié)、制作子網(wǎng)頁、XHTML網(wǎng)頁編碼、鏈接并測試網(wǎng)頁等8個(gè)典型工作任務(wù)，再進(jìn)一步對(duì)應(yīng)典型工作任務(wù)將《網(wǎng)頁設(shè)計(jì)》課程并分解為網(wǎng)站策劃、繪制網(wǎng)頁效果圖、編排網(wǎng)頁基礎(chǔ)結(jié)、制作網(wǎng)頁細(xì)節(jié)、XHTML網(wǎng)頁編碼、合成與維護(hù)網(wǎng)頁等6個(gè)教學(xué)情景。

（二）“全站貫穿—團(tuán)隊(duì)協(xié)作”的教學(xué)模式

結(jié)合靜態(tài)網(wǎng)站設(shè)計(jì)工作的實(shí)際流程和特點(diǎn)，以培養(yǎng)學(xué)生具備設(shè)計(jì)完整靜態(tài)網(wǎng)站能力為核心目標(biāo)，在考慮我院實(shí)際教學(xué)條件和學(xué)生實(shí)際認(rèn)知水平的前提下，構(gòu)建了充分體現(xiàn)“以能力為本位”、“以學(xué)生為主體”和“項(xiàng)目驅(qū)動(dòng)任務(wù)引領(lǐng)”三大原則，并支持過程化考核和團(tuán)隊(duì)合作的教學(xué)模式：“全站貫穿——團(tuán)隊(duì)協(xié)作”的教學(xué)模式。

所謂“全站貫穿”，就是在教學(xué)過程中，從頭到尾都是在完成同一個(gè)網(wǎng)站的設(shè)計(jì)。而這個(gè)設(shè)計(jì)過程是按照工作實(shí)際設(shè)計(jì)流程，依照：策劃網(wǎng)站→繪制網(wǎng)頁效果圖→切割網(wǎng)頁效果圖→編排網(wǎng)頁基礎(chǔ)結(jié)構(gòu)→制作網(wǎng)頁細(xì)節(jié)→制作子網(wǎng)頁→XHTML網(wǎng)頁編碼→鏈接并測試網(wǎng)頁等這樣的順序進(jìn)行，并將每個(gè)階段分成一個(gè)任務(wù)，每個(gè)任務(wù)按照“任務(wù)引領(lǐng)”方式組織教學(xué)。所以，從總體上看，是“項(xiàng)目驅(qū)動(dòng)式”的教學(xué)，從局部看，是“任務(wù)引領(lǐng)式”的教學(xué)。

（三）教學(xué)方法設(shè)計(jì)

每個(gè)學(xué)習(xí)情景中，教師將學(xué)生分為若干個(gè)小組，形成虛擬的企業(yè)項(xiàng)目團(tuán)隊(duì)。教師作為“項(xiàng)目經(jīng)理”為每個(gè)小組分配真實(shí)的網(wǎng)頁設(shè)計(jì)項(xiàng)目，每完成一個(gè)學(xué)習(xí)情景任務(wù)，教師（項(xiàng)目經(jīng)理）要對(duì)每個(gè)小組的實(shí)踐進(jìn)度和成果進(jìn)行考核。學(xué)生的實(shí)訓(xùn)效果不僅能夠得到有效的監(jiān)督，而且通過對(duì)成果的認(rèn)定讓學(xué)生享受到了獲得成就感的快樂，達(dá)到進(jìn)一步提高其學(xué)習(xí)興趣的目的。

在實(shí)訓(xùn)環(huán)節(jié)，《網(wǎng)頁設(shè)計(jì)》課程建立了虛擬企業(yè)，由學(xué)生分組扮演企業(yè)中的項(xiàng)目制作團(tuán)隊(duì)完成一套真實(shí)的網(wǎng)頁設(shè)計(jì)項(xiàng)目，由教師扮演企業(yè)中的項(xiàng)目經(jīng)理，向每個(gè)項(xiàng)目制作團(tuán)隊(duì)分配項(xiàng)目并監(jiān)督制作流程，檢驗(yàn)作品質(zhì)量。

學(xué)生項(xiàng)目團(tuán)隊(duì)本著自由組合的原則，6至8人為一組。具體組合崗位如下：

組長負(fù)責(zé)團(tuán)隊(duì)的組織協(xié)調(diào)、產(chǎn)品總體設(shè)計(jì)、團(tuán)隊(duì)內(nèi)部的流程與質(zhì)量監(jiān)督等工作。各崗位的隊(duì)員必須積極參于團(tuán)隊(duì)討論，并按組長要求按時(shí)按質(zhì)完成自己負(fù)責(zé)的設(shè)計(jì)和制作任務(wù)。

1.組建設(shè)計(jì)制作團(tuán)隊(duì)。分組原則：自由組合，順序排列或均衡分配；小組人數(shù)：一般為6-8人，方便組織團(tuán)隊(duì)教學(xué)，也適應(yīng)機(jī)房的布置條件；小組構(gòu)成：組長（經(jīng)理），組員（員工）；組長（經(jīng)理）職責(zé)：負(fù)責(zé)全隊(duì)的組織協(xié)調(diào)，任務(wù)分配，提交作品，組織討論，成果演示匯報(bào)等；組員（員工）職責(zé)：聽從組長（經(jīng)理）發(fā)安排，按時(shí)按質(zhì)完成組長（經(jīng)理）分配的任務(wù)。

2.分組實(shí)施教學(xué)。抓住教學(xué)的四個(gè)環(huán)節(jié)，即：任務(wù)明確、教師示范、學(xué)生設(shè)計(jì)、展示評(píng)價(jià)。在這個(gè)四個(gè)環(huán)節(jié)，分別把握學(xué)生應(yīng)該掌握的知識(shí)和所要完成的任務(wù)，順利完成教學(xué)和對(duì)學(xué)生的訓(xùn)練。

明確任務(wù)：在上課開始，教師通過明確的任務(wù)方式，使得學(xué)生知道當(dāng)次課程要完成的任務(wù)和學(xué)習(xí)的內(nèi)容。并且引導(dǎo)學(xué)生在欣賞案例作品的基礎(chǔ)上，確定所要完成任務(wù)的設(shè)計(jì)方法和用到的工具，以及實(shí)現(xiàn)的流程和思路；

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

學(xué)生設(shè)計(jì)：學(xué)生根據(jù)教師的演示和任務(wù)的要求，由小組內(nèi)部進(jìn)行分析、分配、實(shí)現(xiàn)設(shè)計(jì)任務(wù)，并提交作品到教學(xué)服務(wù)器；

展示評(píng)價(jià)：小組進(jìn)行演示，并開展師生評(píng)價(jià)，并給出本次作品的成績，作為總成績的一次考核過程。

3.考核方式設(shè)計(jì)?；诠ぷ鬟^程的任務(wù)考核方式，對(duì)學(xué)生的考核是以能力為本位，主要是進(jìn)行過程考核，因此，《網(wǎng)頁設(shè)計(jì)》的課程考核分成三個(gè)部分：過程考核、任務(wù)設(shè)計(jì)、協(xié)作能力。其中：過程考核占60%、任務(wù)設(shè)計(jì)占30%、學(xué)生協(xié)作能力占10%，每一項(xiàng)都按100分計(jì)算，最后取平均值。每位學(xué)生在項(xiàng)目團(tuán)隊(duì)的環(huán)境下，通過不斷的考核了解和體驗(yàn)到技能應(yīng)用的真實(shí)社會(huì)情況和團(tuán)隊(duì)協(xié)作方式。在學(xué)生的團(tuán)隊(duì)之間形成猶如行業(yè)企業(yè)之間的壓力和競爭意識(shí)，使每個(gè)團(tuán)隊(duì)的學(xué)生都力爭作品做得更好，從而提高學(xué)生的學(xué)習(xí)積極性、學(xué)習(xí)效果和心理素質(zhì)。

?

（四）“全站貫穿—團(tuán)隊(duì)協(xié)作”教學(xué)模式的優(yōu)點(diǎn)

《網(wǎng)頁設(shè)計(jì)》課程的教學(xué)與實(shí)訓(xùn)真正實(shí)現(xiàn)了實(shí)訓(xùn)內(nèi)容項(xiàng)目化（真實(shí)項(xiàng)目）、制作小組團(tuán)隊(duì)化（教師與學(xué)生組成團(tuán)隊(duì)）、實(shí)訓(xùn)結(jié)果產(chǎn)品化（企業(yè)項(xiàng)目）、評(píng)價(jià)立體化（社會(huì)、教師、學(xué)生綜合評(píng)價(jià)）。具體有以下優(yōu)點(diǎn)：

1.全程參與，企業(yè)項(xiàng)目，學(xué)生作品多。通過各個(gè)教學(xué)情景的實(shí)訓(xùn)，學(xué)生能參加每個(gè)任務(wù)的實(shí)訓(xùn)，學(xué)生參加制作和設(shè)計(jì)，可以形成完整的作品。在教學(xué)過程中，學(xué)生直接面對(duì)客戶需求，承擔(dān)企業(yè)真實(shí)項(xiàng)目的設(shè)計(jì)制作，這樣，學(xué)生不斷地參與到真實(shí)的商業(yè)網(wǎng)站項(xiàng)目，學(xué)生產(chǎn)品多。

2.企業(yè)管理，過程考核，學(xué)習(xí)效果好。不論是理論教學(xué)，還是實(shí)訓(xùn)環(huán)節(jié)，都以真實(shí)項(xiàng)目作為教學(xué)載體，并對(duì)學(xué)生進(jìn)行分組（每組6-8人），組建網(wǎng)頁設(shè)計(jì)制作團(tuán)隊(duì)。

使用企業(yè)在網(wǎng)頁制作項(xiàng)目過程中的管理辦法，管理學(xué)生團(tuán)隊(duì)?？己诉^程貫穿在各學(xué)習(xí)情景教學(xué)之中，使每位學(xué)生在項(xiàng)目團(tuán)隊(duì)的環(huán)境下，通過不斷的考核了解和體驗(yàn)到技能應(yīng)用的真實(shí)社會(huì)情況和團(tuán)隊(duì)協(xié)作方式。讓學(xué)生經(jīng)歷從策劃、設(shè)計(jì)、客戶認(rèn)可、制作作品到成果驗(yàn)收的全過程，學(xué)生學(xué)習(xí)有興趣，教學(xué)效果好。

3.理實(shí)結(jié)合，學(xué)以致用，滿足學(xué)生就業(yè)的需求。職業(yè)院校的學(xué)生學(xué)習(xí)《網(wǎng)頁設(shè)計(jì)》的主要目的是為了能夠進(jìn)入社會(huì)就業(yè)，傳統(tǒng)的實(shí)訓(xùn)項(xiàng)目是虛擬項(xiàng)目，實(shí)訓(xùn)方式也與社會(huì)需要存在著一定的差距，體現(xiàn)不到學(xué)以致用的快樂?！叭矩灤獔F(tuán)隊(duì)協(xié)作”教學(xué)模式，教師引進(jìn)的是企業(yè)真實(shí)項(xiàng)目，學(xué)生在實(shí)訓(xùn)過程中，更是深入到企業(yè)一線，能夠較好地學(xué)以致用，有利于學(xué)生就業(yè)。

[1]劉銘.《網(wǎng)頁設(shè)計(jì)》精品課程[ED/OL].http://www.cqvie.edu.cn/jpkc/wy2009,2009-5-10.

[2]朱印宏.中文版DreamweaverCS4標(biāo)準(zhǔn)教程[M].北京:中國電力出版社.2009.

[3]姜卉.DreamweaverCS4中文版完全自學(xué)教程[M].北京:機(jī)械工業(yè)出版社，2009.

[4]涂巧霞,夏永恒,王國平.DreamweaverCS4網(wǎng)頁設(shè)計(jì)高手經(jīng)典教程[M].北京:北京郵電大學(xué)，2009.

[5]王智強(qiáng),張桂敏.中文版 FlashCS4標(biāo)準(zhǔn)教程[M].北京:中國電力出版社，2009.

[6]劉小偉,劉曉萍.FlashCS4中文版實(shí)訓(xùn)教程[M].北京:電子工業(yè)出版社，2009.

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

[8]王紅衛(wèi).PhotoshopCS4完全自學(xué)教程.[M].北京:機(jī)械工業(yè)出版社，2008.

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

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

[11]中國站長站.Web標(biāo)準(zhǔn)化 DIV+CSS專題[ED/OL].http://www.chinaz.com/zt/div-css/，2008.

劉銘（1973－），男，四川儀隴人，碩士，重慶工程職業(yè)技術(shù)學(xué)院副教授，研究方向?yàn)榫W(wǎng)頁設(shè)計(jì)、計(jì)算機(jī)教育、計(jì)算機(jī)輔助設(shè)計(jì)。

G712

A

1001-7518（2010）35－0044－03

責(zé)任編輯時(shí)紅兵