1、重新設(shè)計站點的HTML

首先我們要去掉網(wǎng)頁中有關(guān)外觀的標(biāo)簽。在以前的代碼中，我們常用一個表格用來在頁面的內(nèi)容中創(chuàng)建一個有邊框的區(qū)塊，我們還使用〈b〉來加粗文本。用<font color=red>來改變字體顏色等等。用<br>標(biāo)簽來創(chuàng)建段落等。

而要做出能適應(yīng)XHTML標(biāo)準(zhǔn)和能隨意換膚的網(wǎng)站，我們須要避免在頁面中使用有關(guān)外觀的標(biāo)簽。使文檔結(jié)構(gòu)和表示形式分離的一個最大的好處就是它使文檔在沒有CSS時，仍然可以使用和訪問。表現(xiàn)（就是文檔看上去的樣子）在一個支持性好的瀏覽器中也將呈現(xiàn)的不一樣，但是它的內(nèi)容將永遠(yuǎn)不變，大多數(shù)情況，對于訪問網(wǎng)站的人來說，內(nèi)容實際上比表現(xiàn)的方式更加重要。這就是為什么給那些支持性不好的瀏覽器發(fā)送一個沒有樣式的頁面，要比把他們排斥在外要好的原因。

現(xiàn)在比較流行的做法是使用DIV、SPAN等標(biāo)簽來布局整個頁面，而TABLE,UL,PRE,CODE等標(biāo)簽來顯示數(shù)據(jù)，用UL是用來顯示無序的列表信息，而OL顯示有序的列表信息。這將比用TABLE來顯示一個列表更有語義上的意義，同時UL和OL在瀏覽器中比TABLE標(biāo)簽更快有下載速度，并且相對于TABLE，CSS對UL和OL的外觀控制更加靈活。當(dāng)然對于復(fù)雜的數(shù)據(jù)，比如報表，用TABLE來顯示仍然是不二的選擇。

2、建立基本的通用樣式

由于所有的XHTML文件都是由各種各樣的HTML標(biāo)簽和標(biāo)簽內(nèi)的文字組成，而一些基本的標(biāo)簽在每個XHTML文件都存在的，如：body、table、td、div、h1—h6、ul、li、input等等，如果我們定義好了這些標(biāo)簽的CSS樣式，如：字體，字號，行距，背景色，背景圖等等，我們就有了一個基本的樣式風(fēng)格，就如同在Word或PowerPoint中的主題，每個主題就是一套風(fēng)格樣式。 因此，我們可以根據(jù)基本的HTML標(biāo)簽定義出一個通用的樣式來，例如建立一個siteComm.css文件，定義如下：

這樣的一個樣式文件，可以適用于任何一個網(wǎng)頁，只要添加引用我們都可以立刻看見效果。

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

3、定義好頁面的結(jié)構(gòu)布局

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

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

因此外觀并不是最重要的。一個結(jié)構(gòu)良好的XHTML可以通過CSS的不同定義，顯示成任何外觀，顯示在任何支持XHTML的網(wǎng)絡(luò)設(shè)備上。

通過分析我們可以發(fā)現(xiàn)，對于大多數(shù)WEB網(wǎng)站來說，頁面都是由一些類似的內(nèi)容區(qū)塊所組成，如：

• 站點標(biāo)題區(qū)
• 站點導(dǎo)航(主菜單，次及菜單)
• 功能區(qū)(例如搜索框、用戶登陸區(qū))
• 內(nèi)容區(qū)(文章正文或者文章、產(chǎn)品列表)
• 頁腳(版權(quán)和有關(guān)法律聲明)

然后我們用DIV標(biāo)簽來將這些區(qū)塊包含起來，類似這樣：

<div class="pageHeader">站點標(biāo)題
</div>
<div class="pageNav">站點導(dǎo)航
</div>
<div class="catalogNav">欄目導(dǎo)航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查詢
</div>
<div class="pageBottom">頁腳
</div>