基于CSS+JAVAScript的網頁換膚特效的設計與實現

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

關鍵詞：網頁換膚；CSS；JAVAScript；效果；設計

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

1 關鍵技術

1.1 DIV+CSS

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

1.2 JavaScript

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

2 特效設計軟件

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

3 網頁換膚特效的實現

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

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

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

4 結語

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

[參考文獻]

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

[2]吳保文.CSS樣式表在常見網頁布局結構中的實現[J].文山師范高等?？茖W校學報，2012，25（3）：66-69.