2009/02/10

DIV+CSS 網頁佈局

很多網頁都是採用 TABLE 元素來佈局,將頁面分成不同的功能區。現在業界提倡改用 CSS+DIV 的佈局方式。引導這個趨勢的原因有幾個: TABLE 元素,必須其內含的所有內容都下載完成,才能開始展現,所以比較慢。使用 TABLE 佈局,其標籤碼較多,而有些搜尋引擎會依據內容對標籤碼的比率,評價網頁;比率低的網頁,會給予較低評價。

CSS+DIV 的佈局方式很簡單,由下面的範例就可以看出來。範例的下方有幾個 DIV 元素構成的區塊。每一個 DIV 區塊是一個特定功能的容器,下面分成了:標題,邊欄,主文,頁底。接著就是要設定每一個區塊的位置,這就要用到 CSS 風格表。在下面的風格表中有幾個特徵用於排列位置:

  1. margin:0px auto:此一設定可以將 DIV 區塊排在水平中央。
  2. float:left:原本 DIV 區塊是上下排列,此設定可將 DIV 區塊左右並排。下例中,側欄區塊與主文區塊,就是用此特徵才能左右並排。
  3. clear:left:頁底區塊利用此特徵,排到側欄區塊的下方。

使用時,要將風格表放在 HEAD 元素的區域間。也可以針對不同的 媒體 設定不同的風格表;例如列印時可以不印側欄。