第四節 網頁頁面布局

一、網頁的頁面布局分析

仔細觀察現在網上的各種網頁，可以看出很多網頁都是如圖2-34所示的結構。

圖2-34 網頁結構

網頁頭部（header）一般含有網站的標志、導航菜單等內容。

banner區一般是網站廣告宣傳的位置，這里放的圖片最好有很強的視覺沖擊力，網頁的活力往往來自這個地方。圖片往往做成輪播圖的形式，以增加動感。

aside區是網站正文內容的邊欄部分。

main區是網站主要內容放置的區域。

footer區是網頁腳部，記錄著網站版權所屬、聯系方式等內容。

這個布局看上去就像一張表格，所以早期做網頁經常用表格來實現頁面布局。把表格的border設置為0，讓人們看不到表格，只看到網站各區域的內容。

但用表格布局有很多缺陷，表格間的內容相互干擾，排這個單元格的內容的時候，另一個單元格的內容會跟著變，工作效率很低，這就需要另一種更好的辦法來取代表格布局。

再仔細研究這個頁面布局，發現這幾部分就是一個個矩形的組合，如果使用矩形的元素，用堆積木的方式來排版，就可以很好地解決方塊間互相干擾的問題。當然在這些方框的外面，最好有一個更大的塊作為容器（container），把它們套在里面，以便整體來調整版面布局。標簽DIV實現的就是一個矩形的樣式，使用DIV能夠很好地實現網頁布局的功能，這就是DIV+CSS布局的方法。