採用XHTML和CSS設計可重用可換膚網頁

css|xhtml|設計|網頁

　　隨著XHTML的逐漸推廣流行，HTML 在許多場合已經顯得過時。World Wide Web Consortium (W3C) 於 2000 年 6 月 26 日發布了 XHTML 的第一個版本作為推薦標準。XHTML 標準的目標是取代 html。按照 W3C 的說法，“XHTML 是 html 的繼承者”(http://www.w3.org/MarkUp/)。

　　XHTML具有兩大目標:

• 在文檔結構和表示形式之間建立更明顯的分離。
• 將 html 重新表示為 XML 的應用程式。

　　使用XHTML標準的好處是:只需設計頁面一次，即可讓該頁以完全相同的方式在任何現代的瀏覽器中顯示和工作。例如，在按照標準產生以後，頁面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式顯示，而無需完成任何額外的工作。並且XHTML標準可以使 Web 網站更易於為智能手機、殘疾人電腦等裝置訪問。

　　由於XHTML標準要求在在文檔結構和表示形式之間建立更明顯的分離。因此使用CSS樣式表是必不可少的。CSS在網頁中佔著極重要的地位，它的使用一直是熱門討論的話題。CSS是Cascading Style Sheet的簡寫，譯為“層疊樣式表單”。 在1997年W3C頒布HTML4標準的同時也公布了有關樣式表的第一個標準CSS1, 自CSS1的版本之後，又在1998年5月發布了CSS2版本。

　　CSS 的發明者的目的是除去表示性元素，即應該根據內容所表示的東西來標記內容，而樣式表應該用於美化內容。而這一點與XHTML分離文檔結構和表示形式的目標是一致，(在XHTML 2.0將除去b 、 i 和 img 標記(以及 big 、 small 和 tt )，甚至不贊成使用 br ，準備從將來的發行版中除去它。原因在於大多數標記都是表示性的。它們的唯一目的就是給予瀏覽器指令，規定有關其內容應該如何顯示，但卻完全未提供有關其內容是什麼的資訊。) 因此它們成了最好的夥伴。更多關於XHTML2.0的資料，請參見:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html

　　CSS過去經常被用來定義字型的屬性，而現在新標準中我們將用它來控制整個頁面的顯示。然而，我們必須需要做一些不同於以往的處理來適應這種新的變化，如:使用div來布局而不是表格，使用結構化、語義化的標記等等。由於採用新的處理方式，我們現在可以輕鬆地設計出可重用的CSS(同一個樣式檔案多個WEB網站中使用)以及可換膚的WEB網站(一個網站使用多種不同風格的樣式)。

　　樣本請見四川省建設廳資訊門戶,介面切換在右上方，如圖1所示。由於時間原因，並未通過XHTML和CSS校正，但原理是一樣的。

　　

　　圖1:介面樣式切換

　　1、重新設計網站的HTML

　　首先我們要去掉網頁中有關外觀的標籤。在以前的代碼中，我們常用一個表格用來在頁面的內容中建立一個有邊框的區塊，我們還使用〈b〉來加粗文本。用來改變字型顏色等等。用

　　標籤來建立段落等。

　　而要做出能適應XHTML標準和能隨意換膚的網站，我們須要避免在頁面中使用有關外觀的標籤。使文檔結構和表示形式分離的一個最大的好處就是它使文檔在沒有CSS時，仍然可以使用和訪問。表現(就是文檔看上去的樣子)在一個支援性好的瀏覽器中也將呈現的不一樣，但是它的內容將永遠不變，大多數情況，對於訪問網站的人來說，內容實際上比表現的方式更加重要。這就是為什麼給那些支援性不好的瀏覽器發送一個沒有樣式的頁面，要比把他們排斥在外要好的原因。

　　現在比較流行的做法是使用DIV、SPAN等標籤來布局整個頁面，而TABLE,UL,PRE,CODE等標籤來顯示資料，用UL是用來顯示無序的列表資訊，而OL顯示有序的列表資訊。這將比用TABLE來顯示一個列表更有語義上的意義，同時UL和OL在瀏覽器中比TABLE標籤更快有下載速度，並且相對於TABLE，CSS對UL和OL的外觀控制更加靈活。當然對於複雜的資料，比如報表，用TABLE來顯示仍然是不二的選擇。

　　2、建立基本的通用樣式

　　由於所有的XHTML檔案都是由各種各樣的HTML標籤和標籤內的文字組成，而一些基本的標籤在每個XHTML檔案都存在的，如:body、table、td、div、h1—h6、ul、li、input等等，如果我們定義好了這些標籤的CSS樣式，如:字型，字型大小，行距，背景色，背景圖等等，我們就有了一個基本的樣式風格，就如同在Word或PowerPoint中的主題，每個主題就是一套風格樣式。 因此，我們可以根據基本的HTML標籤定義出一個通用的樣式來，例如建立一個siteComm.css檔案，定義如下:

　　/*文中的樣式表文法中的"("及")"為樣本所用,因為blog每次儲存花括弧都出現錯誤。請在使用時改為正確的符號*/

　　BODY
　　(
　　background: url(images/bg_page.jpg);
　　font: 10pt verdana,arial,;
　　margin-top: 0px;
　　margin-left: 0px;
　　margin-right: 0px;
　　margin-bottom: 0px;
　　)
　　H1, H2, H3, H4, H5, H6
　　(
　　border-bottom: solid 1px #ccc;
　　margin: 1em 0;
　　)
　　TD
　　(
　　font: 10pt;
　　)
　　A:link
　　(
　　color: #057AE0;
　　text-decoration: none;
　　)
　　A:visited
　　(
　　color: #057AE0;
　　text-decoration: none;
　　)
　　A:hover
　　(
　　color: #009900;
　　)
　　A:active
　　(
　　color: #009900;
　　)

　　這樣的一個樣式檔案，可以適用於任何一個網頁，只要添加引用我們都可以立刻看見效果。

　　由於樣式表的繼承規則是外部的標籤樣式會保留下來繼承給這個標籤所包含的其他標籤。事實上，所有在標籤中嵌套的標籤都會繼承外層標籤指定的屬性值，有時會把很多層標籤的樣式疊加在一起，例如在body標籤中定義了字型大小，那麼div、p等標籤也會繼承一樣的字型大小，如果在P標籤中又定義了字型顏色，那麼P標籤中的文字既具有body標籤的字型大小又有P標籤的字型顏色。需要注意的是，table標籤不會繼承body的字型大小設定，所以在上面的樣式表中，我們單獨來定義td的樣式。

　　3、定義好頁面的結構布局

　　很多時候，我們在製作網頁時總是從視覺出發，先用Photoshop或者Fireworks畫出來、思考頁面的配色，做一些很炫的效果，很精美的圖片，再切割成小圖。然後通過編輯HTML將所有設計變成頁面。

　　然而，有視覺的缺陷的人，不能理解這些顏色或者效果。PDA、行動電話和螢幕閱讀機上也無法解析這些效果。

　　因此外觀並不是最重要的。一個結構良好的XHTML可以通過CSS的不同定義，顯示成任何外觀，顯示在任何支援XHTML的網路裝置上。

　　通過分析我們可以發現，對於大多數WEB網站來說，頁面都是由一些類似的內容區塊所組成，如:

• 網站標題區
• 網站導覽(主菜單，次及菜單)
• 功能區(例如搜尋方塊、使用者登陸區)
• 內容區(文章本文或者文章、產品列表)
• 頁尾(著作權和有關法律聲明)

　　然後我們用DIV標籤來將這些區塊包含起來，類似這樣:

<div class="pageHeader">網站標題 
</div> 
<div class="pageNav">網站導覽 
</div> 
<div class="catalogNav">欄目導航 
</div> 
<div class="pageContent">文章本文或列表等等 
</div> 
<div class="pageSearch">查詢 
</div> 
<div class="pageBottom">頁尾 
</div>

　　通過CSS的定義，我們可以將這些DIV標籤包含的區塊放在頁面上任何位置，再指定這些塊的顏色、字型、邊框、背景以及對齊屬性等等。如:我們再建立siteLayout.css檔案，定義如下:

　　.pageHeader
　　(
　　padding: 10px;
　　border: 1px solid #666;
　　height: 100px;
　　height: 70px;
　　)
　　.pageNav
　　(
　　padding: 10px;
　　border: 1px solid #666;
　　height: 100px;
　　height: 30px;
　　)
　　.catalogNav
　　(
　　float: left;
　　top: 130px;
　　padding: 10px;
　　border: 1px solid #666;
　　width: 20%;
　　)
　　.pageSearch
　　(
　　float: left;
　　top: 130px;
　　padding: 10px;
　　border: 1px solid #666;
　　width: 20%;
　　)
　　.pageContent
　　(
　　float: left;
　　padding: 10px;
　　border: 1px solid #666;
　　height: 400px;
　　width: 60%;
　　)
　　.pageBottom
　　(
　　clear: both;
　　padding: 10px;
　　border: 1px solid #666;
　　height: 100px;
　　height: 70px;
　　)

　　如此，我們定義了一個三列的頁面配置:頂部自適應頁面寬度。中間三列自適應頁面。底部自適應頁面寬度，當然您也可以將頁面定義為中間只有兩列等等，您只需要調整layout.css檔案即可，這樣您可以靈活的修改頁面的布局，讓頁面外觀發生根本的變化，而不必動到HTML源檔案，這一點對於伺服器端產生代碼的程式尤為重要。 更多關於CSS布局的資料，請參見:http://www.w3cn.org/article/layout/2004/55.html

　　4、定義網站專屬的樣式

　　經過以上兩步之後，我們已經有了一個大概的頁面主題外觀，接下來我們要設計網站的細節，比如，對網站導覽條我們想使用與普通超連結不一樣的樣式，如:藍色、加粗、字型更大、再加上有立體效果的背景圖:

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
　　font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
　　)

　　對於欄目導航，我們想給每個欄目串連加上背景色，並且有滑鼠滑過和移出的效果。 欄目導航區的html代碼為:

<div class="catalogNav"> 
        <ul> 
            <li> 
                <A href="1">欄目1</A> 
            <li> 
                <A href="2">欄目2</A> 
            <li> 
                <A href="3">欄目3</A> 
            <li> 
                <A href="4">欄目4</A> 
            <li> 
                <A href="5">欄目5</A> 
            <li> 
                <A href="6">欄目6</A> 
            </li> 
        </ul> 
    </div> 

　　欄目導航區對應的Css代碼為:

　　.catalogNav ul
　　(
　　 margin-left: -30px;
　　 list-style: none;
　　)
　　.catalogNav li
　　(
　　 float: left;
　　 background: #CCC;
　　 line-height: 30px;
　　 border: solid 1px #black;
　　)
　　.catalogNav a
　　(
　　 width: 100%;
　　 text-align: center;
　　 height: 30px;
　　)
　　.catalogNav a:link
　　(
　　 color: #666;
　　 background: url(arrow_off.gif) #CCC no-repeat 5px 12px;
　　 text-decoration: none;
　　)
　　.catalogNav a:visited
　　(
　　 color: #666;
　　 text-decoration: underline;
　　)
　　.catalogNav a:hover
　　(
　　 color: #FFF;
　　 font-weight: bold;
　　 text-decoration: none;
　　 background: url(arrow_on.gif) #F00 no-repeat 5px 12px;
　　)　　接下來我們還需要定義其他的網站專屬的樣式，如欄目標題、文章列表、文章本文、時間、注釋、提示、錯誤等等各種樣式，而且這些樣式多以類和id來作為選擇符。這些樣式都是針對某個網站的，不適用於其他的網站，然後我們將這些樣式儲存為siteStyle.css檔案。

　　這樣我們就有了3個CSS檔案。 SiteComm.css:任何網站都可以使用的樣式檔案，定義了常用的html標籤樣式。 SiteLayout.css:網站的布局檔案，能適用於大多數的網站結構，具體細節需要調整。 siteStyle.css:網站專屬的樣式檔案，能顯示出本網站獨特的風格和適應於網站的內容。

　　然後我們採用外部調用法:將這些樣式表與頁面關聯起來。

<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet"> 
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">

　　在符合XHTML標準的設計中，我們使用外部調用法，好處不言而喻，HTML文檔會變得非常的小，CSS檔案被存在瀏覽器的緩衝中，僅僅需要下載一次即可，並且你只需要修改一個檔案就可以改變整個網站的樣式。

　　並且這樣我們才能通過用戶端指令碼，或者伺服器端代碼方便地改變樣式表的串連地址，而快捷地實現換膚功能。

　　5、根據使用者佈建換膚

　　網站樣式切換在網上已有很多現成的javascript換膚代碼，一般使用cookie來儲存使用者佈建，在請求頁面時，改變頁面的CSS檔案串連即可。

　　而伺服器端的換膚做法是根據使用者請求，動態地產生CSS檔案串連，使用者佈建一般儲存在資料庫或者cookie中。

　　由於我們使用了3個不同功能CSS樣式檔案來顯示網站，所以我們可以設計出更加靈活的換膚方案和組合，如只切換主題而保留布局，和切換布局和主題，以及各種細節等等。

　　使用3個CSS樣式檔案額外的好處是，每當我們設計一個新的系統，它的樣式風格特性幾乎都可以大部分應用到以前的系統上(因為我們採用大致相同的頁面結構模型，雖然顯示千差萬別，但主要的架構是一樣的)，這樣我們就可以積累出相當數量和相當風豐富的介面樣式庫來。

　　6、通過校正

　　整個過程的最後一個步驟就是對XHTML\CSS代碼進行驗證。有很多種的工具都可以幫你對二者進行驗證。

　　例如Dreamweaver MX即可檢查我的樣本代碼的可訪問性。你可以通過在檔案菜單中選擇Check Page然後選擇Check Accessibility來實現。任何錯誤或是警告都會顯示出來，還包括出現位置的行號以及對問題簡要的解釋。你可以在Dreamweaver MX的Reference工具中找到更多關於這些錯誤和警告的內容。

　　而Microsoft ASP.NET 2.0 具有很多有用的功能，也能協助我們設計和產生符合 XHTML 和可訪問性標準的 Web 網站。 使用 Web 標準產生 ASP.NET 2.0 Web 網站 http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx

　　此外，World Wide Web Consortium (W3C)提供了超過30個的可訪問性評估工具的連結。W3C還提供了針對HTML和CSS的基於Web的免費驗證器。

　　因此如果想要改善網站友好度，可用性，可訪問性等，可將新標準視為一個機會，而不是一個障礙。要瞭解更多關於新標準和可訪問性的內容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。