高職高專“網(wǎng)頁(yè)設(shè)計(jì)”課程教學(xué)改革的研究

摘 要：當(dāng)前很多高職高專類院校的計(jì)算機(jī)專業(yè)都開設(shè)了“網(wǎng)頁(yè)設(shè)計(jì)”課程，但在教學(xué)過(guò)程中還存在著不少有待改進(jìn)的地方，這從這門課程的大量的教材的編寫中就能看得出來(lái)。為此，本文從諸多方面提出這門課程教學(xué)改革的一些思路和建議，希望能夠?yàn)槿握n教師提供一些參考。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 教學(xué)改革

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2012）11（a）-0173-01

1 對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程性質(zhì)和地位的重新認(rèn)識(shí)

對(duì)于高職高專層次的學(xué)生來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)課程是至關(guān)重要的。原因有二：第一，不少學(xué)生的畢業(yè)設(shè)計(jì)會(huì)做一個(gè)動(dòng)態(tài)網(wǎng)站，這就需要這門課程作為基礎(chǔ)。第二，網(wǎng)頁(yè)設(shè)計(jì)是綜合性很強(qiáng)的技術(shù)，除了要講授HTML，CSS，Javascript等內(nèi)容外，還要涉及到Photoshop，F(xiàn)ireworks，F(xiàn)lash，數(shù)據(jù)庫(kù)，服務(wù)器配置等多項(xiàng)技術(shù)。通過(guò)制作網(wǎng)站，可以將這些技術(shù)綜合應(yīng)用，融會(huì)貫通，較全面地提升學(xué)生的專業(yè)水平。

可是在現(xiàn)實(shí)的教學(xué)中，對(duì)這一點(diǎn)的認(rèn)識(shí)并不到位。一是安排的課時(shí)量太少。二是開課太早。我認(rèn)為應(yīng)該在Photoshop，F(xiàn)lash和一門高級(jí)語(yǔ)言（為學(xué)習(xí)Javascript做好鋪墊）開設(shè)之后，再開設(shè)網(wǎng)頁(yè)設(shè)計(jì)的課程。這樣，既可以鞏固強(qiáng)化前期課程的相關(guān)技術(shù)，又可以提升當(dāng)前制作的網(wǎng)站的水準(zhǔn)。

2 對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)內(nèi)容的改革

前已述及，當(dāng)前教學(xué)中對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程安排的課時(shí)量太少。為什么會(huì)這樣呢？因?yàn)閷?duì)這門課的教學(xué)內(nèi)容設(shè)計(jì)的不夠合理。我瀏覽過(guò)很多這門課程的教材，發(fā)現(xiàn)章節(jié)內(nèi)容很類似，都是講怎樣借助于Dreamw eaver的可視化工具制作網(wǎng)頁(yè)（比如點(diǎn)什么按鈕插入圖片、插入表格，怎樣用鼠標(biāo)拖拽的方式制作鏈接等），卻很少涉及手寫代碼。這些基本操作當(dāng)然只需要很少的課時(shí)，但這導(dǎo)致的結(jié)果是：（1）不少學(xué)生不了解網(wǎng)頁(yè)源文件的基本組成格式，在需要手動(dòng)修改代碼的時(shí)候無(wú)從下手；（2）對(duì)Dreamweaver過(guò)于依賴，在今后做動(dòng)態(tài)網(wǎng)站用到了其它編輯器時(shí)，完全不會(huì)使用。這都?xì)w因于學(xué)生對(duì)網(wǎng)頁(yè)代碼的不理解或是理解的不深入。而網(wǎng)頁(yè)代碼（靜態(tài)部分）其實(shí)涉及的是三塊內(nèi)容：HTML，CSS，Javascript。教學(xué)應(yīng)該圍繞這三塊內(nèi)容進(jìn)行，而不是圍繞Dreamweaver的若干種操作進(jìn)行。為此，我覺得可以從以下幾方面對(duì)教學(xué)內(nèi)容進(jìn)行改革。

2.1 加深學(xué)生對(duì)HTML代碼的理解，提升學(xué)生手寫代碼的能力

為了切實(shí)提高學(xué)生對(duì)HTML代碼的理解程度，建議先教學(xué)生用記事本或其它簡(jiǎn)單的純文本編輯器做一個(gè)只包含三四個(gè)頁(yè)面的微型的網(wǎng)站（無(wú)需現(xiàn)實(shí)意義，只是為了學(xué)習(xí)代碼而已）。每個(gè)頁(yè)面只需要一段文字、一個(gè)圖片，頁(yè)面之間再做上鏈接就可以了。通過(guò)這個(gè)案例，使學(xué)生理解HTML代碼的基本格式，識(shí)記最常用的一些標(biāo)記及其屬性。在這個(gè)案例結(jié)束之后，再教學(xué)生用Dreamweaver做一些相對(duì)復(fù)雜的網(wǎng)站，學(xué)生也就能理解點(diǎn)某個(gè)按鈕會(huì)生成什么代碼，也就能輕松地在代碼視圖中修改代碼了。

為什么建議教學(xué)生先手寫代碼而不是操作Dreamweaver呢？因?yàn)橐寣W(xué)生知道網(wǎng)頁(yè)核心的東西就是代碼，之后學(xué)習(xí)的Dreamweaver也只是自動(dòng)地生成一些代碼。而且，教學(xué)生用手寫代碼的方式做一個(gè)簡(jiǎn)單的網(wǎng)站，學(xué)習(xí)代碼的效率也是最高的。如果等到教會(huì)了學(xué)生操作Dreamweaver之后，再教他們代碼，學(xué)生可能會(huì)有困惑：既然Dreamweaver可以自動(dòng)生成代碼，為什么還要人工輸入？而且，講到用Dreamweaver做網(wǎng)站時(shí)，代碼量已經(jīng)很大，讓學(xué)生從這大量的代碼中去理解它的基本格式，難度也就加大了。

2.2 加大CSS內(nèi)容的比重，對(duì)CSS的講解要注重系統(tǒng)化

多數(shù)教材也會(huì)涉及到CSS的知識(shí)，但內(nèi)容少而且零散，主要講授如何在Dream weaver的“CSS規(guī)則定義”對(duì)話框中，設(shè)置文字樣式、圖片樣式、鏈接樣式等，卻沒(méi)有涉及應(yīng)用CSS進(jìn)行頁(yè)面布局的技術(shù)。由此可見，教學(xué)內(nèi)容相對(duì)于當(dāng)前實(shí)際應(yīng)用的技術(shù)，還存在著很大的滯后性。因?yàn)殡S著Web標(biāo)準(zhǔn)被越來(lái)越廣泛地接受，要求網(wǎng)頁(yè)的結(jié)構(gòu)（對(duì)應(yīng)于HTML）和表現(xiàn)（對(duì)應(yīng)于CSS）分離開來(lái)，這就要求摒棄傳統(tǒng)的表格布局而采用CSS布局。但是在學(xué)校教學(xué)中，由于還沿用傳統(tǒng)的表格布局，因此對(duì)CSS的講授，只停留在極膚淺的層次。建議教師在講授CSS的知識(shí)時(shí)，能站在Web標(biāo)準(zhǔn)的高度，系統(tǒng)的講授CSS?？梢栽谥v授表格布局之后，分析其劣勢(shì)，再引出應(yīng)用CSS布局的技術(shù)。然后，從四個(gè)層面系統(tǒng)的講授CSS的知識(shí)。

（1）CSS基本屬性（設(shè)置文本、圖像樣式等）。

（2）CSS如何定位到HTML標(biāo)記（CSS選擇器）。

（3）CSS盒子模型（理論基礎(chǔ)，重難點(diǎn)）。

（4）CSS布局（定寬度、變寬度布局）。

2.3 教會(huì)學(xué)生手寫Javascript代碼

在傳統(tǒng)的教學(xué)中，一般把網(wǎng)頁(yè)特效作為專門的一個(gè)章節(jié)來(lái)講，具體的內(nèi)容就是用Dreamweaver提供的一些按鈕生成Javascript代碼，做一些網(wǎng)頁(yè)特效（比如鼠標(biāo)交換圖像等）。其實(shí)這種方式生成的代碼可修改性不高，而且過(guò)于冗長(zhǎng)，又是和HTML代碼在同一個(gè)文件，不符合Web標(biāo)準(zhǔn)要求的結(jié)構(gòu)、表現(xiàn)、行為（對(duì)應(yīng)于Javascript）相分離的原則。因此建議教師系統(tǒng)地講授Javascript的知識(shí)，教會(huì)學(xué)生手寫Javascript代碼。當(dāng)然，這要求增加課時(shí)量，而且要有一門高級(jí)語(yǔ)言作為基礎(chǔ)。

3 對(duì)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)方法的改革

當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)方法陷入了兩個(gè)明顯的誤區(qū)：一是講授的知識(shí)點(diǎn)過(guò)于零散，缺少足夠的實(shí)戰(zhàn)項(xiàng)目將它們貫穿起來(lái)。二是從頭到尾全是實(shí)戰(zhàn)項(xiàng)目，把所有的知識(shí)全放在項(xiàng)目里講。這都是不可取的，前者會(huì)使學(xué)生學(xué)起來(lái)枯燥乏味，后者會(huì)影響知識(shí)本身的系統(tǒng)性。我建議將整個(gè)教學(xué)分成三段：第一段講授HTML（用表格布局做網(wǎng)頁(yè)，先不用CSS）；第二段開始引入CSS，第三段引入Javascript。而每一段再分為兩部分：第一部分是基本理論；第二部分是項(xiàng)目實(shí)戰(zhàn)。這樣，學(xué)生在第一部分系統(tǒng)地掌握了理論，第二部分再將這些理論靈活運(yùn)用，這既保證了知識(shí)體系不被破壞，又可以避免知識(shí)的全盤灌輸而導(dǎo)致的單調(diào)和枯燥。

4 結(jié)語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的飛速發(fā)展呼喚網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)改革。本文站在Web標(biāo)準(zhǔn)的高度，結(jié)合當(dāng)前的教學(xué)現(xiàn)狀，對(duì)教學(xué)內(nèi)容和教學(xué)方法提出了一些新的思路和建議。希望這些能為相關(guān)教師提供一點(diǎn)參考和借鑒，為這門課程的教學(xué)改革起到一定的促進(jìn)作用。

參考文獻(xiàn)

[1]溫謙.HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門到精通[M].人民郵電出版社，2008.

[2]張春曉.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)寶典[M].電子工業(yè)出版社，2012.