謝靜波 吳亞昊

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

關(guān)鍵詞 HTML/CSS/JavaScript 網(wǎng)頁程序設(shè)計(jì) 對比教學(xué)法

中圖分類號：G71 文獻(xiàn)標(biāo)識碼：A

1對比教學(xué)法的引入

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

2對比教學(xué)法的具體幾種對比方法

2.1 HTML、CSS與DW的對比

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

2.2 HTML與CSS語法的對比

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

長沙民政學(xué)院

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

2.3 CSS中選擇器用法對比

CSS基本語法： selector {property： value； property： value ……property： value }看起來很簡單，用起來千變?nèi)f化，因?yàn)檫x擇器太多，調(diào)用方法也不盡相同。

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

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

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

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

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

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

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

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

2.5 JAVASCRIPT與C語言與JAVA的對比

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

3對比教學(xué)法的教學(xué)成果

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