謝靜波 吳亞昊

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

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

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

1對比教學法的引入

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

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

2.1 HTML、CSS與DW的對比

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

2.2 HTML與CSS語法的對比

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

長沙民政學院

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

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）標識選擇符語法： 標識符{樣式屬性：取值；樣式屬性：取值；…}

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

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

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

2.5 JAVASCRIPT與C語言與JAVA的對比

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

3對比教學法的教學成果

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