高職網(wǎng)頁(yè)制作教學(xué)中圖片切換的CSS應(yīng)用

李燕萍 秦 勇 周 同 彭 濤

（北京青年政治學(xué)院 北京 100102）

圖片切換的通用制作方法

圖片切換在各種大型網(wǎng)站中很受青睞，幾乎每個(gè)主頁(yè)上都能看到。它們或是最近新聞，或是特色展示，這些圖片在不斷切換，我們把這種做法叫做焦點(diǎn)圖片切換（圖1為新聞圖片焦點(diǎn)切換的效果）。

圖1 新聞圖片焦點(diǎn)切換示意圖

那么，如何來(lái)實(shí)現(xiàn)圖片切換呢？在網(wǎng)頁(yè)制作中常用的方法有兩種：一是用Flash軟件制作，然后插入網(wǎng)頁(yè)中；二是用JavaScript代碼實(shí)現(xiàn)。

用Flash制作圖片切換卡 先準(zhǔn)備好做切換的素材圖片，將圖片分別導(dǎo)入到舞臺(tái)，每個(gè)圖片占一個(gè)圖層，選中后轉(zhuǎn)換為圖形元件。插入幀，轉(zhuǎn)變?yōu)殛P(guān)鍵幀，把圖形元件的Alpha值調(diào)整為0，添加補(bǔ)間動(dòng)畫(huà)，依次排列好，保存文件。插入到網(wǎng)頁(yè)中，實(shí)現(xiàn)循環(huán)播放。

用JavaScript實(shí)現(xiàn)圖片動(dòng)態(tài)切換 先創(chuàng)建SQL數(shù)據(jù)庫(kù)，引用外部CSS代碼，然后編寫(xiě)JS代碼，最后，在CSS中進(jìn)行數(shù)據(jù)庫(kù)調(diào)用。其中，圖片的寬高、切換時(shí)間差、圖片鏈接地址均可在JS代碼中進(jìn)行更改。

常用方法在高職教學(xué)中的弊端

隨著社會(huì)的發(fā)展，網(wǎng)頁(yè)制作這個(gè)工作崗位對(duì)高職畢業(yè)生提出了更高的要求：必須具有快速上手能力和獨(dú)立解決問(wèn)題的能力。但在目前的高職教學(xué)中，學(xué)生學(xué)習(xí)不夠主動(dòng)，缺乏實(shí)際開(kāi)發(fā)能力，程序設(shè)計(jì)開(kāi)發(fā)經(jīng)驗(yàn)不足，一旦操作過(guò)程中出現(xiàn)挫折就會(huì)產(chǎn)生厭學(xué)心理。

針對(duì)圖片焦點(diǎn)切換這個(gè)課題來(lái)說(shuō)，用Flash實(shí)現(xiàn)雖然制作過(guò)程比較簡(jiǎn)單，不需要代碼編寫(xiě)，但由于網(wǎng)頁(yè)中插入Flash會(huì)導(dǎo)致頁(yè)面加載速度下降，用戶(hù)體驗(yàn)不好；且后期維護(hù)需要重新制作Flash，維護(hù)網(wǎng)站的時(shí)間成本過(guò)大，導(dǎo)致網(wǎng)站維護(hù)的實(shí)時(shí)性很難保證。

用JavaScript實(shí)現(xiàn)雖然能夠自動(dòng)切換，后期維護(hù)圖片文字只需簡(jiǎn)單修改，但是JavaScript語(yǔ)言涉及邏輯編程，對(duì)于高職學(xué)生來(lái)說(shuō)比較困難，在學(xué)習(xí)過(guò)程中很容易產(chǎn)生挫敗感而導(dǎo)致放棄學(xué)習(xí)。

相比之下，用CSS技術(shù)實(shí)現(xiàn)圖片切換在高職教學(xué)中可以得到很好的應(yīng)用。文件容量偏小，代碼編寫(xiě)容易，后期維護(hù)簡(jiǎn)單；對(duì)素材圖片沒(méi)有要求，因?yàn)镃SS中已經(jīng)強(qiáng)制規(guī)定了顯示的大小，只需更改圖片地址和鏈接地址即可。

CSS技術(shù)的發(fā)展歷程及應(yīng)用優(yōu)勢(shì)

20世紀(jì)90年代初，樣式表和HTML同時(shí)被發(fā)明。最初HTML版本只含有很少的顯示屬性，而讀者用樣式表來(lái)調(diào)節(jié)網(wǎng)頁(yè)的顯示方式。但隨著HTML的成長(zhǎng)，為了滿(mǎn)足設(shè)計(jì)師的要求，HTML獲得了很多顯示功能。所以，外來(lái)定義樣式的語(yǔ)言越來(lái)越?jīng)]有意義。

1994年，哈坤·利提出了CSS，這是第一個(gè)含有“層疊”主意的樣式表。在CSS中，一個(gè)文件的樣式可以從其他的樣式表中繼承下來(lái)。讀者在有些地方可以使用他自己更喜歡的樣式，在其他地方則繼承或“層疊”作者的樣式，這種層疊的方式使作者和讀者都可以靈活地加入自己的設(shè)計(jì)，混合各人的愛(ài)好。

哈坤·利于1994年在芝加哥的一次會(huì)議上第一次展示了CSS的建議，1995年他與波斯一起再次展示這個(gè)建議。當(dāng)時(shí)，W3C剛剛建立，由于對(duì)CSS的發(fā)展很感興趣，W3C特地為此組織了一次討論會(huì)。哈坤、波斯是這個(gè)項(xiàng)目的主要技術(shù)負(fù)責(zé)人。1996年底，CSS已經(jīng)完成。1996年12月CSS要求的第一版本被出版。1997年初，W3C內(nèi)組織了專(zhuān)門(mén)管CSS的工作組，其負(fù)責(zé)人是克里斯·里雷。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及的問(wèn)題，其結(jié)果是1998年5月出版的第二版要求。到2007年為止，第三版還未完備。采用CSS技術(shù)進(jìn)行網(wǎng)頁(yè)重構(gòu)相對(duì)于傳統(tǒng)表格布局具有以下3個(gè)顯著優(yōu)勢(shì)：（1）表現(xiàn)和內(nèi)容相分離。HTML文件中只存放內(nèi)容信息，將表現(xiàn)放在一個(gè)獨(dú)立樣式文件中。搜索引擎更容易被發(fā)現(xiàn)這樣的頁(yè)面。（2）提高頁(yè)面瀏覽速度。相同的頁(yè)面視覺(jué)效果，采用CSS技術(shù)的頁(yè)面容量要比表格排版的文件容量小得多，一般只有1/2大小。瀏覽器就不用去編譯大量冗長(zhǎng)的標(biāo)簽。（3）易于維護(hù)和改版。只要加載別的CSS文件就可以重新設(shè)計(jì)網(wǎng)站的頁(yè)面。

圖片切換的CSS技術(shù)的實(shí)現(xiàn)

接下來(lái)從零開(kāi)始制作網(wǎng)頁(yè)，用CSS技術(shù)實(shí)現(xiàn)流行的圖片切換。它的原理就是巧妙利用錨鏈接來(lái)動(dòng)態(tài)控制定義列表顯示順序。在制作過(guò)程中，將面臨五個(gè)技術(shù)難題，現(xiàn)在就來(lái)一一解決。

圖片和鏈接用什么基本HTML來(lái)實(shí)現(xiàn) 定義列表通常用于術(shù)語(yǔ)解析，其中列表用DL元素來(lái)表示；術(shù)語(yǔ)名稱(chēng)用DT來(lái)表示；術(shù)語(yǔ)的解釋說(shuō)明用DD元素表示。常用結(jié)構(gòu)為

。這里可以應(yīng)用DL標(biāo)簽來(lái)制作圖片放映窗口，DT標(biāo)簽來(lái)包含切換鏈接即導(dǎo)航按鈕組，應(yīng)用DD標(biāo)簽來(lái)包含需要被切換的圖片。

如何把四個(gè)圖片捆綁起來(lái)只顯示一個(gè)窗口 我們可以將DL標(biāo)簽指示的定義列表用CSS強(qiáng)制壓縮為一張圖片的大小，即放映窗口只能顯示一張圖片，所以網(wǎng)頁(yè)瀏覽者只能看見(jiàn)DD標(biāo)簽中的某一張圖片，這樣就實(shí)現(xiàn)了切換的基礎(chǔ)。

如何讓用戶(hù)自己控制圖片切換 有些HTML基礎(chǔ)的讀者可能明白用錨鏈接實(shí)現(xiàn)頁(yè)內(nèi)跳轉(zhuǎn)的技巧，它的代碼樣式為，實(shí)際上錨鏈接就是不定義href屬性的超鏈接。在頁(yè)面某個(gè)區(qū)域內(nèi)定義一個(gè)錨鏈接，并制定一個(gè)錨記名稱(chēng)，這樣就可以用超鏈接找到它。那么就分別為四個(gè)列表項(xiàng)定義ID屬性，這個(gè)ID屬性就相當(dāng)于定義了一個(gè)錨點(diǎn)，然后定義鏈接到這些錨點(diǎn)的超鏈接。

如何實(shí)現(xiàn)導(dǎo)航按鈕組 要讓按鈕在圖片上層顯示，可以通過(guò)包含塊的定位（即父元素為相對(duì)定位，子元素為絕對(duì)定位）來(lái)實(shí)現(xiàn)。

有了上面分析的基礎(chǔ)，即可編寫(xiě)具體代碼。

XHML框架結(jié)構(gòu)代碼為：

CSS布局代碼為：

dl {position：relative；width：280px；height：220px；border：12px solid#94afd5；}

dt{position：absolute；right：5px；bottom：5px；}

dd{margin：0；width：280px；height：220px；overflow：hidden；}

img{width：280px；height：220px；}

a {display：block；float：left；margin：1px；width：20px；height：20px；line-height：20px；text-align：center；font：bold 12px；text -decoration：none；background：#999；border：1px solid#fff；color：#fff；}

a：hover{background：#023e7a；}

解決了以上的問(wèn)題，就可以實(shí)現(xiàn)自由切換的效果了。但在實(shí)際應(yīng)用中會(huì)發(fā)現(xiàn)，由于錨鏈接的特性，點(diǎn)擊鏈接，圖片所在位置會(huì)跳轉(zhuǎn)到瀏覽器的頂部，尤其是頁(yè)面較長(zhǎng)、圖片切換卡處在較下方時(shí)，網(wǎng)頁(yè)瀏覽者會(huì)產(chǎn)生不好的用戶(hù)體驗(yàn)。

如何實(shí)現(xiàn)點(diǎn)擊按鈕時(shí)頁(yè)面不發(fā)生位置跳轉(zhuǎn)？解決這個(gè)問(wèn)題的關(guān)鍵在于添加隱藏層。在DD標(biāo)簽中所包含的每個(gè)圖片上方加入一個(gè)隱藏層，然后將錨鏈接所指的位置改為隱藏層所在的位置。隱藏層我們可以用來(lái)表示，將圖片的ID移到每張圖片上方的隱藏層中，并且隱藏層的高度設(shè)置為瀏覽器頂部到圖片切換卡的距離。

>改進(jìn)后的XHML框架代碼

增設(shè)的css屬性代碼

#a，#b，#c，#d{width：280px；height：100px；}

頁(yè)面完成之后可做一下微調(diào)，例如，將DL標(biāo)簽的邊框調(diào)整為圖片的邊框；如果圖片切換卡是包含在某一個(gè)DIV模型之中的，可以增加負(fù)邊距進(jìn)行位置的調(diào)整，等等，這里不再做詳細(xì)說(shuō)明。至此，圖片切換卡的CSS制作過(guò)程已全部完成。

結(jié)語(yǔ)

在網(wǎng)頁(yè)制作教學(xué)中，其實(shí)有很多不同功能的技巧可以講授，但針對(duì)高職教學(xué)的現(xiàn)狀，真正需要教師費(fèi)心的，是如何讓學(xué)生對(duì)課程產(chǎn)生興趣，保持興趣；如何與社會(huì)工作崗位無(wú)縫銜接。筆者在教學(xué)實(shí)踐中發(fā)現(xiàn)，通過(guò)對(duì)圖片切換中CSS技術(shù)的摸索應(yīng)用，學(xué)生的自主學(xué)習(xí)能力和解決問(wèn)題能力都有較大幅度的提高。

[1]朱印宏.CSS商業(yè)網(wǎng)站布局之道[M].北京：清華大學(xué)出版社，2008.

[2]溫謙.CSS設(shè)計(jì)徹底研究[M].北京：人民郵電出版社，2009.

[3]曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2009.

[4]李慧萍.淺談網(wǎng)頁(yè)上的焦點(diǎn)圖片切換方法[J].科技信息，2010（15）.

[5]林婷婷.以DIV+CSS思想引導(dǎo)學(xué)生學(xué)習(xí)編寫(xiě)網(wǎng)頁(yè)的新教法[J].科技信息，2009（11）.

[6]林婷婷，談如何統(tǒng)籌學(xué)校外部網(wǎng)CSS文件群[J].職教新觀(guān)察，2009（7）.

[7]王育，陳炳發(fā).網(wǎng)頁(yè)交互界面中反饋替代的研究[J].中國(guó)制造業(yè)信息化，2011（3）.