2009-07-22

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

0 回應: