嵌套DIV布局似乎與“布局結構與內容相分離”的原則衝突！
為了合理實現XHTML+CSS格式的布局，似乎免不了在網頁內容的HTML檔案中寫入嵌套的<div>標記，以實現那些常用的布局形式。比如：
...
<body>
<div id="header">this is header</div>
<div id="main">
<div id="navigater">this is navigater</div>
<div id="content">this is content</div>
</div>
<div id="footer">this is footer</div>
</body>
...
然後在CSS檔案定義各個div的風格屬性。顯然，其中名為"main"的<div>標籤純粹是為了控制"navigater"與"content"兩個<div>的布局而加入的。這樣一來，就形成了嵌套<div>的HTML代碼。
問題是，將來如果更改網頁布局，需要把navigater放到別的地方，例如"header"的上面。恐怕在修改CSS檔案的同時，還必須修改體現內容的HTML檔案以去掉那個嵌套的<div>形式。因為那個嵌套<div>結構其實是為了布局而寫入HTML內容中的。
這樣一來，就違背了XHTML+CSS標準提倡的“布局與內容分離”的原則！
我想，如果把文檔結構看作是反映內容的邏輯結構，文檔結構就應該是內容的邏輯架構，體現的是內容各個部分之間的邏輯關係，自然是屬於內容的一部分。而布局結構應該看作是內容表現形式的物理結構，體現內容之間的排版與顯示關係。
文檔邏輯結構自然會有存在嵌套，比如，“聯絡資訊”一項內容可以由“電話”與“Email”兩項內容組成。可是，在表現內容時也許常常把“電話”與“Email”顯示在頁面不同的地區。如果，那些<div>標籤完全根據文檔的邏輯嵌套而形成對應嵌套的話，那麼將“電話”與“Email”就會匡在一個<div>標籤中，分開顯示將非常困難。原因在於，<div>標籤的嵌套更多關注的是布局結構，也就是表現形式的物理結構。
而用<div>標籤來布局網頁事實上是XHTML+CSS最推薦的布局方式。而且，為了控制布局快之間的結構，嵌套<div>隨處可見，有的還是網頁設計大師推崇的經驗。
但，事實上嵌套<div>的確會把布局關係與內容綁在了一起。但不用嵌套<div>標籤，恐怕只有在CSS檔案中採用絕對位置和絕對尺寸等方法，才能把布局的位置定義好。不過，這樣做對於那些需要根據內容來自適應位置和大小的地區又成了問題！
從哲學上看，XHTML+CSS是沒法跳出布局與內容的連環陣的。似乎要做到真正的“內容”－“布局”－“表現”之間的分離，只有用XML+XSL+CSS才能做到！但那是最終的目標。 目前，XHTML+CSS方式的可視化開發工具非常罕見，頂多用些CSS設計工具來編寫式樣表，然後預覽調試。因此，XHTML+CSS的開發效率往往比較低。
而XSL的編寫是純手工工藝活兒，其更趨向於編寫程式的思維。對於那些不熟悉編程的設計師來說，從視覺化檢視轉到純編碼的思維方式有點難度。難說將來會出現CSS甚至XSL的可視化開發工具，但就目前來說，XML+XSL+CSS開發效率會很低！
未來是美好的，但過渡是痛苦的，熬吧......
李戰(leadzen).深圳 2004-12-29
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
