采用XHTML和CSS設(shè)計可重用可換膚的WEB站點的方法第1/4頁
XHTML 標準的目標是取代 html。按照 W3C 的說法,“XHTML 是 html 的繼承者”(http://www.w3.org/MarkUp/)。
XHTML具有兩大目標:
- 在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。
- 將 html 重新表示為 XML 的應(yīng)用程序。
使用XHTML標準的好處是:只需設(shè)計頁面一次,即可讓該頁以完全相同的方式在任何現(xiàn)代的瀏覽器中顯示和工作。例如,在按照標準生成以后,頁面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式顯示,而無需完成任何額外的工作。并且XHTML標準可以使 Web 站點更易于為智能手機、殘疾人電腦等設(shè)備訪問。
由于XHTML標準要求在在文檔結(jié)構(gòu)和表示形式之間創(chuàng)建更明顯的分離。因此使用CSS樣式表是必不可少的。CSS在網(wǎng)頁中占著極重要的地位,它的使用一直是熱門討論的話題。CSS是Cascading Style Sheet的簡寫,譯為“層疊樣式表單”。 在1997年W3C頒布HTML4標準的同時也公布了有關(guān)樣式表的第一個標準CSS1, 自CSS1的版本之后,又在1998年5月發(fā)布了CSS2版本。
CSS 的發(fā)明者的目的是除去表示性元素,即應(yīng)該根據(jù)內(nèi)容所表示的東西來標記內(nèi)容,而樣式表應(yīng)該用于美化內(nèi)容。而這一點與XHTML分離文檔結(jié)構(gòu)和表示形式的目標是一致,(在XHTML 2.0將除去b 、 i 和 img 標記(以及 big 、 small 和 tt ),甚至不贊成使用 br ,準備從將來的發(fā)行版中除去它。原因在于大多數(shù)標記都是表示性的。它們的唯一目的就是給予瀏覽器指令,規(guī)定有關(guān)其內(nèi)容應(yīng)該如何顯示,但卻完全未提供有關(guān)其內(nèi)容是什么的信息。) 因此它們成了最好的合作伙伴。更多關(guān)于XHTML2.0的資料,請參見:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
CSS過去經(jīng)常被用來定義字體的屬性,而現(xiàn)在新標準中我們將用它來控制整個頁面的顯示。然而,我們必須需要做一些不同于以往的處理來適應(yīng)這種新的變化,如:使用div來布局而不是表格,使用結(jié)構(gòu)化、語義化的標記等等。由于采用新的處理方式,我們現(xiàn)在可以輕松地設(shè)計出可重用的CSS(同一個樣式文件多個WEB站點中使用)以及可換膚的WEB站點(一個站點使用多種不同風格的樣式)。
示例請見四川省建設(shè)廳信息門戶,界面切換在右上方,如圖1所示。由于時間原因,并未通過XHTML和CSS校驗,但原理是一樣的。 
圖1:界面樣式切換
- jQuery之網(wǎng)頁換膚實現(xiàn)代碼
- JQuery 網(wǎng)站換膚功能實現(xiàn)代碼
- Javascript結(jié)合css實現(xiàn)網(wǎng)頁換膚功能
- js動態(tài)修改整個頁面樣式達到換膚效果
- javascript實現(xiàn)動態(tài)CSS換膚技術(shù)的腳本
- 使用jQuery實現(xiàn)的網(wǎng)頁版的個人簡歷(可換膚)
- js+css簡單實現(xiàn)網(wǎng)頁換膚效果
- 漂亮的widgets,支持換膚和后期開發(fā)新皮膚
- 使用jQuery實現(xiàn)Web頁面換膚功能的要點解析
- AngularJS實現(xiàn)網(wǎng)站換膚實例
相關(guān)文章
ie6,ie7,ie8完美支持position:fixed的終極解決方案
ie6對position:fixed不支持,網(wǎng)上有很多解決方法,有的在ie6,ie7上調(diào)試成功后,在ie8上又不好使,div層還是跟隨滾動條浮 動;以下總結(jié)方法,在ie6,ie7,ie8上都調(diào)試成功,且頁面滾動條滾動時,效果還挺好,div層并不會閃爍。2014-05-05
標準布局應(yīng)用:顯示/隱藏側(cè)邊欄 [附詳細注解]
標準布局應(yīng)用:顯示/隱藏側(cè)邊欄 [附詳細注解]...2006-12-12
Div CSS absolute與relative的區(qū)別小結(jié)
Div + CSS 進行網(wǎng)頁布局,適當?shù)剡\用 absolute 與 relative,能給布局帶來意想不到的效果和方便,達到事半功倍…本文介紹了關(guān)于 absolute 與 relative 的運用。2007-12-12
position:relative/absolute無法沖破的等級
position:relative/absolute無法沖破的等級...2007-03-03
div的dispaly:inline樣式 和span的區(qū)別
為什么在ie里執(zhí)行后這段代碼 兩個span標簽雖在同一行但它們之間有空隙? 但是 兩個div標簽雖然在同一行就沒有空隙?2008-07-07

