高職網頁制作教學中圖片切換的CSS應用

李燕萍 秦 勇 周 同 彭 濤

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

圖片切換的通用制作方法

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

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

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

用Flash制作圖片切換卡 先準備好做切換的素材圖片，將圖片分別導入到舞臺，每個圖片占一個圖層，選中后轉換為圖形元件。插入幀，轉變為關鍵幀，把圖形元件的Alpha值調整為0，添加補間動畫，依次排列好，保存文件。插入到網頁中，實現循環播放。

用JavaScript實現圖片動態切換 先創建SQL數據庫，引用外部CSS代碼，然后編寫JS代碼，最后，在CSS中進行數據庫調用。其中，圖片的寬高、切換時間差、圖片鏈接地址均可在JS代碼中進行更改。

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

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

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

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

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

CSS技術的發展歷程及應用優勢

20世紀90年代初，樣式表和HTML同時被發明。最初HTML版本只含有很少的顯示屬性，而讀者用樣式表來調節網頁的顯示方式。但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。所以，外來定義樣式的語言越來越沒有意義。

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

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

圖片切換的CSS技術的實現

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

圖片和鏈接用什么基本HTML來實現 定義列表通常用于術語解析，其中列表用DL元素來表示；術語名稱用DT來表示；術語的解釋說明用DD元素表示。常用結構為

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

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

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

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

XHML框架結構代碼為：

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

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

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

>改進后的XHML框架代碼

增設的css屬性代碼

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

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

結語

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

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

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

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

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

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

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

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