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

李燕萍 秦 勇 周 同 彭 濤

（北京青年政治學院 北京 100102）

圖片切換的通用制作方法

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

圖1 新聞圖片焦點切換示意圖

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

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

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

常用方法在高職教學中的弊端

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

針對圖片焦點切換這個課題來說，用Flash實現(xiàn)雖然制作過程比較簡單，不需要代碼編寫，但由于網(wǎng)頁中插入Flash會導致頁面加載速度下降，用戶體驗不好；且后期維護需要重新制作Flash，維護網(wǎng)站的時間成本過大，導致網(wǎng)站維護的實時性很難保證。

用JavaScript實現(xiàn)雖然能夠自動切換，后期維護圖片文字只需簡單修改，但是JavaScript語言涉及邏輯編程，對于高職學生來說比較困難，在學習過程中很容易產(chǎn)生挫敗感而導致放棄學習。

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

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

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

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

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

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

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

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

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

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

如何實現(xiàn)導航按鈕組 要讓按鈕在圖片上層顯示，可以通過包含塊的定位（即父元素為相對定位，子元素為絕對定位）來實現(xiàn)。

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

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；}

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

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

>改進后的XHML框架代碼

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

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

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

結(jié)語

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

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

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

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

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

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

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

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