CSS 部屬經驗-頁面排版

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 分析版面架構
2. 定義所需要的排版區域
3. 為需要設置寬度的區域增加外匡
   
4. 建立 HTML 架構
5. CSS 排版設定
   

如何分析版面架構
一般網頁架構都差不多，大部分都是由幾個主要的區域建構而成，只是在部屬上有些差異而已。

在下面幾個網頁排版中我們可以發現，除了兩欄或三籃的差異外，基本上整體的頁面部屬是一樣的。

天然の屋


TERRANOVA 朵拉大地


Jamboree購物網


定義所需要的排版區域
根據上面第一個版型，可以分析出以下的版面架構，要部屬這樣的架構其實不難，依照一個很直覺的方式去部屬就可以了。



為需要設置寬度的區域增加外匡
在之前的文章 寬度(width)不要與其他屬性同時設定[CSS] 有提到寬度定義的手則，所以接著要為具有寬度定義的區域增加外匡，然後在外匡上設定寬度的大小。

不管是排版或是樣式定義，除非必要的樣式，其餘請不要設置高度與寬度的樣式屬性，頁面是會隨著內容而變動的，愈是增加不必要的限制，頁面愈容易跑版。




建立 HTML 架構
依照上面的架構圖我們可以建立以下的 HTML 架構。
這裡也是一個很簡單架設觀念，只要把每個方匡都想成是 <div></div>，然後在從外到內一層一層去部屬就可以了。

對於 ContentWrapper 的結構位置建議放置在分欄區域(MainWrapper)的起始位置，這樣可以讓內容資訊有較好的 SEO。

<div id="ContainerWrapper" class="ClearIt">
 <div id="Container">

   <div id="Header" class="ClearIt">
     Header
   </div>

   <div id="Banner">
     Banner
   </div>

   <div id="MainWrapper" class="ClearIt">
     <div id="ContentWrapper">
       <div id="Content">
         Content
       </div>
     </div>

     <div id="SidebarWrapper">
       <div id="Sidebar">
         Sidebar
       </div>
     </div>
   </div>

 </div>
</div>

<div id="FooterWrapper">
 <div id="Footer">
   Footer
 </div>
</div>

CSS 排版設定
要設定 CSS 也是一個簡單的事情，先將所有的 id 取出至 CSS 檔建出以下的文件。

/* 整體頁面區域 */ 
#ContainerWrapper{}
#Container{}

/* 頁首區域 */
#Header{}

/* 橫幅區域 */
#Banner{}

/* 主要內容區域 */
#MainWrapper{}

/* 主欄區域 */
#ContentWrapper{}
#Content{}

/* 側欄 區域 */
#SidebarWrapper{}
#Sidebar{}

/* 頁尾 區域 */
#FooterWrapper{}
#Footer{}

接著為版型作位置及寬度上的配置，在設定時會很難察覺區域的情況，建議為每個區域都先設置不同的底色加以區別。

/*先定義代替 <div style="display:block;"></div> 的樣式設定*/
.ClearIt:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
/*針對 IE6 的方式*/
.ClearIt {
   _zoom: 1;
}


/* 整體頁面區域 */
#ContainerWrapper{
   /* 設定寬度並整體置中 */
   width:982px;
   margin:0 auto;
}
#Container{}


/* 頁首區域 */
#Header{}
    
    
/* 橫幅區域 */
#Banner{}
    
    
/* 主要內容區域 */
#MainWrapper{}


/* 主欄區域 */
#ContentWrapper{
   /* 設定主欄的位置 */
   float:right;

   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */
   overflow:hidden;

   /* 設定主欄的寬度 */
   width:736px;
}
#Content{
   /* 這裡建議設定最小高度，當內容高度不足時，不置於讓版面變得很奇怪。 */
   min-height:500px;

   /*IE6 最小高的設定*/
   _height:500px;
   _overflow:visible;
}

    
/* 側欄 區域 */
#SidebarWrapper{
   /* 設定側欄的位置 */
   float:left;

   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */
   overflow:hidden;

   /* 設定側欄的寬度 */
   width:202px;
}
#Sidebar{}


/* 頁尾 區域 */
#FooterWrapper{
   /* 設定寬度並整體置中 */
   width:982px;
   margin:0 auto;
}
#Footer{}

剩下的就是去調整其他區域的底圖、padding 及 margin，那些網頁美工的設定。


參考頁面：
Last.fm
Wacanai.com