謝靜波 吳亞昊

摘 要 通過教學實踐，就如何提高我院高職計算機專業的學生對網頁程序設計的興趣與水平。提出了新的教學方法“對比教學法”，取得了良好的教學效果。

關鍵詞 HTML/CSS/JavaScript 網頁程序設計 對比教學法

中圖分類號：G71 文獻標識碼：A

1對比教學法的引入

網頁程序設計是頁面前端技術的開發，即常說“HTML+CSS+JavaScript”。現在的Web標準設計就是DIV+CSS，JavaScript是目前最流行的頁面腳本語言。學好這些語言不僅是著眼于今天最流行、最成熟的技術，更是把握明天頁面開發的趨勢。這幾門語言程序代碼多、語法容易混淆，過久了容易忘，學生看到代碼比較頭痛。針對這些問題本人在多年的教學實踐中除采用了案例教學法、項目驅動教學外，摸索出了一種新的教學方法“對比教學法”，取得了良好的教學效果。

2對比教學法的具體幾種對比方法

2.1 HTML、CSS與DW的對比

HTML語言是網頁程序設計最基本的語言，有100多個標識符，每個標識符又有很多的屬性，CSS語言的語法有100多項屬性，死記不僅記不牢而且是沒有意義的。為了提高學生的學習興趣，讓學生看到自己的成果，采用Dreamweaver網頁開發工具，先將書上的例題與習題教學生用DW中做一個頁面出來，然后教學生在代碼窗口中讀懂代碼。然后再讓教學生自己手寫代碼。這樣一對比，學生所見之所得，有非常大的成就感，興趣也就提高了。長期通過這種基本功的鍛煉，學生不僅不害怕寫代碼了而且喜歡上了寫代碼。語法自然就掌握好了。

2.2 HTML與CSS語法的對比

在描術一個網頁元素的特性時可以用html來寫也可以用CSS來寫，但有的代碼是有區別。例如：在HTML中描述一個文本的格式：長沙民政學院，在CSS中嵌入式樣式表中就是：

長沙民政學院

。另外在HTML中： bgcolor 表示背景顏色background表示背景圖片。在CSS中： Background-color背景顏色Background-image背景圖片。這樣的區別在這兩門語言中還有很多，老師講完課后都要學生自己找出區別，歸納總結，不至于混淆語法。

2.3 CSS中選擇器用法對比

CSS基本語法： selector {property： value； property： value ……property： value }看起來很簡單，用起來千變萬化，因為選擇器太多，調用方法也不盡相同。

（1）類選擇符語法：標記名.類名{樣式屬性：取值；樣式屬性：取值；…}

（2）id選擇符語法：標記名#標識名{樣式屬性：取值；樣式屬性：取值；…}

（3）包含選擇符語法：#menu ul { color：#fff；}

（4）偽類選擇符語法： a：link a：visited a：hover a：active

（5）標識選擇符語法： 標識符{樣式屬性：取值；樣式屬性：取值；…}

第一種調用方法：；第二種調用方法：；第三種調用方法：用到無序列表時時自動調用了；第四種調用方法：鏈接狀態就自動調用了；第五種調用方法：直接用標識符就自動調用了。一個網站設計關鍵是首頁設計，而首頁設計的關鍵是導航欄設計，因此我教學生用代碼寫出各種導航菜單的代碼，對比修改這樣學生理解起來就容易多了，學生自己設計出了很多優秀的導航菜單，效果非常好。比如一個導航菜單#menu{} –>#menu ul {}–>#menu ul li {} –>#menu ul li a {} –>#menu ul li a：hover {}花括弧里的屬性要學生自己寫。菜單用到了id選擇符、偽類選擇符、偽類選擇符，在網頁主體中只要調用就行了。

2.4 CSS屬性設置中邊框、邊界、填充的對比

在CSS屬性設置中最難設置的是邊框、邊界、填充屬性的設置。因為它們都有上、下、左、右四邊要設置。首先要搞清楚這幾個概念的區別。本人將它們用了一個CSS盒模型來對比：邊框相當于盒子的厚度，內容相對于盒子中所裝物體的空間，而填充呢，相當于為防震而在盒子內填充的泡沫，邊界呢相當于在這個盒子周圍要留出一定的空間，方便取出。這樣就很容易理解盒模型了。邊框中有三項style width corlor要設置；style中有九種屬性供你用。然后再教學生設置它們的屬性。通過反復的練習，學生對CSS的屬性設置掌握得相當好。

2.5 JAVASCRIPT與C語言與JAVA的對比

JavaScript程序是由若干語句組成的，語句是編寫程序的指令。JavaScript提供了完整的基本編程語句，基本語句、變量、函數與C語言基本相同；而對象與事件與JAVA比較接近。這些相同或相近的知識對比起來講解，學生理解起來容易，本人用了很少的時間就講清楚這些語法。對于一個高職學生，學JavaScript，重點不要于編寫程序，而在于看懂程序，應用程序。給學生提供了很多優秀的網頁制作的網站，比如：《網頁制作大寶庫》與《懶人圖庫》《加網》提供了大量優秀的JS代碼，在這樣一個信息社會，資源共享，是作好網站一個非常好的方法。看懂它，然后為自己的網站所用。這樣一來，學生上網查資料的興趣濃了，學習較果非常好。學生自己的網站用了大量的優秀的JS代碼（圖片特效、菜單特效、聯動特效……）對我都是一個大的促進。

3對比教學法的教學成果

有對比才有區別，對比教學法的成功在于將各種網頁編程知識起來對比起來，掌握它們的基本用法，精通它們的語法，達到在快樂中記住這些代碼。通過這幾年的教學方法的改進，學生對網頁代碼的編寫不再感到困難，而且對網頁設計、上網查資料、下載代碼都產生了濃厚的興趣，學生們設計出的網站越來越優秀。在民政學院、軟件學院的空間網頁比賽中取得一等獎、二等獎的好成績。學生畢業后很多從事網站設計、網站維護等工作并在工作中取得很好的成績與經濟效益。