2.3 理解CSS定位與DIV布局

CSS定位與DIV布局中心思想就是要實現結構與表現分離。剛開始理解結構和表現的分離可能有點困難，特別是在還不習慣于思考文檔的語義和結構的時候。理解這點非常重要，因為，當結構和表現分離后，用CSS文檔來控制表現就是一件很容易的事了。例如，某一天發現網站的字體太小，只要簡單地修改樣式表中的一個定義就可以改變整個網站字體的大小。

大家都知道，內容是結構的基礎。內容在一定程度上體現出結構，但并不是全部結構。原始內容就相當于未經處理的數碼相片的RAW格式，但是，即使未經處理的內容，也包含一定的結構。比如通過閱讀一段文字，可能包含標題、正文、段落（這些屬性是通過閱讀而發現的，而不是從表現上）等，這就是結構。為了區分內容體現出來的結構，把它稱為內結構，也稱內容結構。

互聯網的基礎是網頁和超鏈接，超鏈接形成了頁面流。而頁面流也是結構的一部分，它是交互設計的重點，也就是對Request（請求）和Respond（響應）的處理。這里談到的結構是不可能由內容體現出來的，因此可以將其稱為外結構，也稱交互結構。

Web站點的結構就是由內結構和外結構一起形成的，這個結構是所有表現的基礎。沒有這個結構就不會有表現。結構并不是wireframe, wireframe是結構的一種可視化表現，是開發流程中的溝通工具。從內容到結構到表現，也是大部分網站設計的流程。

隨便打開一個網頁或者回想一下曾經訪問過的網頁，傳統的網站前端展現方式是把結構和表現混合在一起，而應用Web標準進行設計的方式是把結構和表現分離開。但是不管使用什么方式，它們表面看上去都差不多。

例如，下圖所示為一個商城的主頁。

當單擊主頁上的產品名稱后，轉到超級鏈接的商品詳細信息頁面，如下圖所示。

頁面上部包括導航都是一致的。如果在頁面的樣式表中更改導航字體大小，則各個頁面中導航頁面字體的大小統一被修改，即修改如下樣式表的內容。

globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px; font-size:14px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }改為．globalHead_navCenterul li{float:left; display:inline; width:auto; height:51px;font-size:16px; line-height:22px; background:url("images/newPublic_navLine.gif") right center no-repeat; }

HTML本身就是一種結構化的語言。外觀并不是最重要的，網頁的表現可以不僅僅依賴HTML來完成，完全可以使用其他CSS+DIV來完成。就像上面的例子中，使用了<DIVclass="globalHead_navCenter">和</DIV>標簽來完成字體顏色的變化。不用再像以前一樣，把裝飾的圖片、字體的大小、頁面的顏色甚至布局的代碼都堆在HTML里面，對于HTML，更多的是要考慮結構和語義。