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

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

中圖分類號：G642 文獻標識碼：A 文章編號：1672-3791（2012）11（a）-0173-01

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

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

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

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

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

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

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

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

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

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

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

（2）CSS如何定位到HTML標記（CSS選擇器）。

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

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

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

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

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

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

4 結(jié)語

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

參考文獻

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

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