基於WEB標準的網站設計的核心在於如何使用眾多WEB標準中的各項技術來達到表現與內容的分離,即網站的結構、表現、行為三者分離。只有真正實現了結構分離的網頁設計,才是真正意義上的符合WEB標準的網頁設計。不排除為了達到表現與內容分離,以後將誕生更多的新技術與結構。這裡推薦使用XHTML,以更謹慎的語言編寫結構,並使用CSS來完成網頁的佈局表現,因此掌握基於CSS的網頁佈局方式,是實現WEB標準的重要環節。
傳統table佈局方式實際上是利用了HTML
table表格元素具有的無邊框特性。由於table元素可以在顯示時使得單元格格邊框和間距設置為0,即不顯示邊框,因此可以將網頁中的各個元素按版式劃分放入各個表格中,從而實現複雜的排版組合。
table佈局的核心在於設計一個能滿足版式要求的表格結構
將內容裝入每個單元格中,間距及定格則通過插入圖像進行佔位來實現,最終的結構是一個複雜的表格,不利於設計和修改。
表格佈局的代碼最常見的是在HTML標籤<>之間加入一些設計代碼,入width="100%",border="0"等,表格佈局的混合代碼就是這樣編寫的。大量樣式設計代碼混雜在表格、單元格之中,使得可讀性大大降低,維護起來成本相當高。儘管Dreamweaver這樣優秀的網頁製作軟件能幫助我們可視化的進行這些代碼的編寫,但是Dreamweaver永遠不會智能的幫助你縮減代碼或刪除重複代碼。
複雜的表格設計使得設計極為不易,修改更加複雜,最後生成的網頁代碼除了表格本身的代碼,還有許多沒有意義的圖像佔位符及其他元素,文件量龐大,最終導致瀏覽器下載及解析速度變慢。
而是用CSS佈局則可以從根本上改變這種情況。CSS佈局的重點不再放在table元素的設計中,取而代之的是HTML中的另一個元素DIV.DIV可以理解為圖層或者一個“塊”。DIV是一種比表格簡單的元素,從語法上只有DIV簡單的定義。DIV的功能僅僅是將一段信息標記出來用於後期的樣式定義,這裡將信息標記,就是我們前面所提到的頁面的“結構”部分。通過使用DIV,我們可以將網頁中的每個元素劃分到每個DIV中,成為網頁中的結構主體,而樣式表現則有CSS來完成。
DIV在使用時不需要像表格一樣通過其內容的單元格組織版式,通過CSS強大的樣式定義功能可以比表格更簡單更自由的來控制頁面版式及樣式。