基于CSS+JAVAScript的網(wǎng)頁換膚特效的設計與實現(xiàn)

摘 要：網(wǎng)站的網(wǎng)頁外觀是一個網(wǎng)站的外在表現(xiàn)形式，而“換膚”的功能選擇能夠吸引大量用戶的眼球，進而提高網(wǎng)站的瀏覽量。本文基于CSS技術和JAVAScript腳本語言設計出簡單方便的網(wǎng)頁換膚效果，為用戶提供相應的換膚選擇，滿足用戶的需求。

關鍵詞：網(wǎng)頁換膚；CSS；JAVAScript；效果；設計

隨著網(wǎng)絡的普及及發(fā)展，越來越多的人通過網(wǎng)絡瀏覽網(wǎng)頁信息，而網(wǎng)站外觀是網(wǎng)站的門面，能夠給用戶直接的視覺感受，從而達到吸引用戶眼球的目的。網(wǎng)站可根據(jù)需求或時事對網(wǎng)站外觀進行更換，例如在喜慶節(jié)日里換上具有中國特色的紅色，在遇到痛苦時事時換上具有沉痛哀悼的黑色等。一些網(wǎng)站為用戶提供了相應的網(wǎng)頁外觀，用戶可根據(jù)自身喜好對網(wǎng)站外觀進行控制，也就是我們常說的“換膚”選擇。網(wǎng)頁為滿足用戶對網(wǎng)頁風格的需要，可通過多個外部樣式表文件實現(xiàn)網(wǎng)頁的換膚功能，用戶在選擇網(wǎng)頁樣式的過程中程序對樣式文件進行修改，進而實現(xiàn)網(wǎng)頁的換膚選擇。

1 關鍵技術

1.1 DIV+CSS

層疊樣式表（CSS）是一種控制網(wǎng)頁樣式的標記性語言，它能夠分離網(wǎng)頁內容和樣式信息，進而達到定義網(wǎng)頁位置、顏色和字體等外觀的目的。DIV元素主要為XHT-ML文檔內的block-level內容提供相應的背景和結構元素，DIV+CSS組合可有效實現(xiàn)網(wǎng)頁的應用布局。HTML并不只是單用DIV標簽，DIV會結合許多標簽一起使用，而合理的標簽應用及標準的Web頁面結構的相互結合才能保證站點內容的索引速率。

1.2 JavaScript

因特網(wǎng)中常用的腳本語言是JavaScript，通常利用JavaScript給XHTML網(wǎng)頁添加各項功能，以響應用戶操作。 功能十分強大，能夠有效監(jiān)測網(wǎng)頁內各項動態(tài)，并及時予以相應反應，顯示網(wǎng)頁內容。通過JavaScript功能，能夠增加網(wǎng)頁的靈活性，用戶可根據(jù)自身需求決定網(wǎng)頁的內容及外觀。CSS是設定的靜態(tài)樣式，CSS則是幫助實現(xiàn)各種動態(tài)功能，而CSS和JavaScript的聯(lián)合使用，可制定出多種效果。

2 特效設計軟件

通過Visual Studio或Dreamweave r對特效進行編輯，在Dreamweave r中，HTML代碼和CSS代碼均有良好的語法提示，編寫具體的CSS代碼時可通過回車鍵或空格鍵觸發(fā)語法提示，程序編輯者可根據(jù)語法提示選擇相應的屬性，按回車鍵選定該屬性，通過顯示出的屬性值選擇需要的選項。Visual Studio與Dreamweave r一樣具有語法提示，但在Visual Studio中，在結束輸入用到的開始標簽后，系統(tǒng)會自動添加結束標簽。

3 網(wǎng)頁換膚特效的實現(xiàn)

為需要更換皮膚效果的網(wǎng)頁設計并制作相應的外部樣式表文件，通過腳本語言切換網(wǎng)頁樣式文件，進而實現(xiàn)用戶對網(wǎng)頁的換膚效果。

制作樣式文件a.css，輸入如圖1所示樣式代碼；然后制作樣式文件b.css，輸入如圖2樣式代碼。

然后制作靜態(tài)網(wǎng)頁，用戶根據(jù)自身需求選擇不同的網(wǎng)頁效果按鈕，服務器便可以通過代碼document.all.mycss.href=“cssName.css”加載相應的CSS文件，從而實現(xiàn)網(wǎng)頁樣式的切換。

4 結語

本文分析并總結出基于CSS技術的網(wǎng)頁換膚特效設計，通過結合CSS和JavaScript技術，實現(xiàn)方便快捷的網(wǎng)頁換膚功能。網(wǎng)站構建者可通過本文介紹的方式構建出符合用戶需求的網(wǎng)站外觀設置，為用戶提供相應的換膚選擇。人性化的網(wǎng)站網(wǎng)頁設計能夠更好的吸引用戶，進而提高網(wǎng)站的瀏覽量。

[參考文獻]

[1]柳長青.一種新型網(wǎng)頁換膚技術的實現(xiàn)[J].電腦學習，2008（2）：29-30.

[2]吳保文.CSS樣式表在常見網(wǎng)頁布局結構中的實現(xiàn)[J].文山師范高等專科學校學報，2012，25（3）：66-69.