謝靜波 吳亞昊

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

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

中圖分類(lèi)號(hào)：G71 文獻(xiàn)標(biāo)識(shí)碼：A

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

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

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

2.1 HTML、CSS與DW的對(duì)比

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

2.2 HTML與CSS語(yǔ)法的對(duì)比

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

長(zhǎng)沙民政學(xué)院

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

2.3 CSS中選擇器用法對(duì)比

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

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

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

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

（4）偽類(lèi)選擇符語(yǔ)法： a：link a：visited a：hover a：active

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

第一種調(diào)用方法：；第二種調(diào)用方法：；第三種調(diào)用方法：用到無(wú)序列表時(shí)時(shí)自動(dòng)調(diào)用了；第四種調(diào)用方法：鏈接狀態(tài)就自動(dòng)調(diào)用了；第五種調(diào)用方法：直接用標(biāo)識(shí)符就自動(dòng)調(diào)用了。一個(gè)網(wǎng)站設(shè)計(jì)關(guān)鍵是首頁(yè)設(shè)計(jì)，而首頁(yè)設(shè)計(jì)的關(guān)鍵是導(dǎo)航欄設(shè)計(jì)，因此我教學(xué)生用代碼寫(xiě)出各種導(dǎo)航菜單的代碼，對(duì)比修改這樣學(xué)生理解起來(lái)就容易多了，學(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é)生自己寫(xiě)。菜單用到了id選擇符、偽類(lèi)選擇符、偽類(lèi)選擇符，在網(wǎng)頁(yè)主體中只要調(diào)用就行了。

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

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

2.5 JAVASCRIPT與C語(yǔ)言與JAVA的對(duì)比

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

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

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