Web標準設計技巧之三布局深入_Div+CSS教程

　　在“布局漫談”中只是大概的說了一下布局的相關知識，在本文中就從實際的應用角度來說說布局。“布局漫談”中就有提到網頁的布局有一個基本型（上下、上中下、左右、左中右），通過基本型可以擴展出更多的布局形式。下圖就是布局四種基本型與十二種簡單混合布局。


　　通過上面的十六個布局我們可以擴展出更多的布局形式。通過增加區塊、通過不同的區塊比例關系，來產生不同的布局應用。而布局絕對影響網站的整體效果，而最重要的因素就在于布局這些區塊的比例上。我在上次的“布局漫談”談到“黃金分割比”、“九宮格”通常黃金分割計算起來比較麻煩，我個人是比較喜歡用九宮格，因為只要基本符合九宮的四個核心點就可以了，不必要深究。所以我們看，上圖的左右布局假如是平分的話很顯然就不明重心，而我們通常的做法是一邊大一邊小，而這個大小的比例一般是不超過1：3的，一般是在1：1.5以上與1：3之間。在內容頁的布局中比例一般都比較大，為的就是讓內容閱讀更輕易，但是內容的寬度也應該有一個度，不能很寬，一般在25~30個漢字或是40~45個字母為比較合適。過寬或是過過窄都會讓閱讀者產生視覺疲憊。假如是左中右的結構那么這個比例關系就更為有意思，在大布局中一般不會采用三等份的布局，而在于小布局中會經常使用，用等寬來表示內容是同級的或是相似的。那么在大布局中，隨著1024分辨率的普及，左中右結構也可以擴展成為四欄甚至是五欄。在多欄的布局中，可以使用一個大欄二到三個同寬小欄的布局方式，這里的同寬小欄的總寬要可以比大欄的寬度大一點或是小一點，或是等寬。當然也會有一些其它的布局比例，大家可以在具體的形式可以在實踐中自行的調整看一下感覺。

　　而上下或是上中下的比例就比較非凡，與左右或是左中右的有很大的不同。上下的比例需要考慮到第一屏的顯示效果問題，現在1024分辨率的普及使得網站的高度顯示被拉長。原來800下的顯示高度大約在450PX左右，而現在已經可以達到620PX左右。所以我們需要在第一屏顯示什么樣的內容？一般最重要，最想要瀏覽者注重的當然要在第一屏顯示出來。而一般來講上中下的比例就是在這么長的屏中的比例。在大布局中的下面基本上是版權信息之類的，而上面主要是標志與導航或是BANNER所以上下的所占的比重不應很大，而重點是在頁面的中間。

　　布局并不單是在圖紙上畫上幾條線分出幾個區這么簡單，需要充分考慮每個區的內容形式，比如上面所提到的文本的寬度是否適合閱讀等問題就會直接影響到布局的形式。而在首頁的布局上，也會有很多不同的內容來影響布局。比如圖片的分布是否過于集中，或是過于松散。還有就是上面所提到的通過等比的方式來表示內容是同級或是相似。下面來幾個大牌網站的布局設計來實際看一下：