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

關(guān)鍵詞：網(wǎng)頁換膚；CSS；JAVAScript；效果；設(shè)計(jì)

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

1 關(guān)鍵技術(shù)

1.1 DIV+CSS

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

1.2 JavaScript

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

2 特效設(shè)計(jì)軟件

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

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

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

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

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

4 結(jié)語

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

[參考文獻(xiàn)]

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

[2]吳保文.CSS樣式表在常見網(wǎng)頁布局結(jié)構(gòu)中的實(shí)現(xiàn)[J].文山師范高等?？茖W(xué)校學(xué)報(bào)，2012，25（3）：66-69.