Change History

首先，補充幾個原作者 style.css 少漏或疏乎的地方：

1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。

2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。


接下來說明 index.tpl 與 style.css 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。

<b>學習重點：指定寬度的雙欄式佈局－DIV float 的運用</b>

1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 container 作簡要的介紹。
<xmp>div#container {
width: 850px;
background: #342b22 url('{TEMPLATE_PATH}images/bg_body.jpg') repeat-y;
margin: 0 auto;
overflow: auto;
}
</xmp>這裡的 <b>margin: 0 auto;</b> 的意思是，上下margin是 0px，左右是置中(auto在margin中的效果就是置中)。在CSS的 margin 或 padding 簡寫中，若是遇到margin後接兩組數字，就是指上下margin共用第一個值，左右margin共同第二個值。所以，例如 margin:10px 15px; 意思就是上下各是10px margin，左右各是15px margin。

另外，<b>overflow: auto;</b> 是指若 container 裡面的內容左右或上下超過了原本的寬度或高度，要超出欄位呈現、只顯示欄位寬高的內窩，或是產生左右或上下的scroll bar以供捲動。這裡的 auto 的意思就是若左右超過了原有寬度就會在左右方向出現 scroll bar 可以捲動，若上下高度超過亦然(若設定為 scroll 則會左右和上下的捲軸同時出現)。

這個 div 最後要注意的是寬度設定為 850px，一般指定寬度(相對於width: 100%的全幅寬度)的雙欄式佈局可以以底下會介紹的 float: left 和 float: right 作佈局設定，若是全幅寬度的雙欄佈局，若用 float 在一些特殊情況會遇到問題。

2. #logo 與 #ad_space
這二個 div 可以視為一組，仔細觀察可發現裡面分別運用了 float: left 與 float: right，目的就是讓這二個 div 平行地並列，一個置左，一個置右，可以算是對後面 div#left 和 div#right 的雙欄佈局的預習。

float 就是「飄浮」，可以想成是咖啡的飄浮冰淇淋，設成了 float 了之後就會像飄浮冰淇淋一樣飄了起來，不會和其他的冰塊擠在一起。你要它向左它就向左，你要它向右它就向右。而且，很重要的是，它不會像巧克力分層或牛奶分層，一個人就占了一整層 (就像DIV一樣，一個 DIV 就占了100%的寬度，使得其他 DIV 就要換行，排在下面)，如果向老闆加錢的話，他是會給你二個「並排」的 DIV 的（冰淇淋）。

<img src="http://pcf.orsir.tw/photo/sep12.jpg" height=350>
<small>層次分明的冰咖啡剛好體現了 DIV 在設定為「飄浮 float」前層層獨立的特性（而且這張居然剛好是我常去的 ORSiR咖啡的教學網頁）</small>

不過言歸正傳，以比較專業的角度來說，當一個 div 設定為 float 之後，它的「呈現屬性」(display)就會從占據整行的 display: block，轉變為只占據「內容寬度」的 display: inline。inline 的意思也就是如果 div 裡面只有「飄浮冰咖啡」五個字的話，這個 div 的寬度就只有五個字的寬度，如果後面再接了也是 inline 的「鮮奶油也很好吃」的話，這二個 div 就會接再一起，不會換行。

例如：
原始碼：<xmp><div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div></xmp>結結果：<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div><div style="clear:both"></div>
我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。
<xmp>div#logo {
width: 374px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;
float: left;
}

div#ad_space {
width: 476px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;
float: right;
}
</xmp>原始碼：<xmp><div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div></xmp>結果：
<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div><div style="clear:both"></div>

我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。

(續)
<xmp>div#logo {
width: 374px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;
float: left;
}

div#ad_space {
width: 476px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;
float: right;
}
</xmp>

補充幾個原作者 style.css 少漏或疏乎的地方：

1. 第15行 body{} 裡面的 color 少打了冒號 (:)。
首先，補充幾個原作者 style.css 少漏或疏乎的地方：

1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。

2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。

<b>學習重點：指定寬度的雙欄式佈局－DIV float 的運用</b>

1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 container 作簡要的介紹。
<xmp>div#container {
width: 850px;
background: #342b22 url('{TEMPLATE_PATH}images/bg_body.jpg') repeat-y;
margin: 0 auto;
overflow: auto;
}
</xmp>這裡的 <b>margin: 0 auto;</b> 的意思是，上下margin是 0px，左右是置中(auto在margin中的效果就是置中)。在CSS的 margin 或 padding 簡寫中，若是遇到margin後接兩組數字，就是指上下margin共用第一個值，左右margin共同第二個值。所以，例如 margin:10px 15px; 意思就是上下各是10px margin，左右各是15px margin。

另外，<b>overflow: auto;</b> 是指若 container 裡面的內容左右或上下超過了原本的寬度或高度，要超出欄位呈現、只顯示欄位寬高的內窩，或是產生左右或上下的scroll bar以供捲動。這裡的 auto 的意思就是若左右超過了原有寬度就會在左右方向出現 scroll bar 可以捲動，若上下高度超過亦然(若設定為 scroll 則會左右和上下的捲軸同時出現)。

這個 div 最後要注意的是寬度設定為 850px，一般指定寬度(相對於width: 100%的全幅寬度)的雙欄式佈局可以以底下會介紹的 float: left 和 float: right 作佈局設定，若是全幅寬度的雙欄佈局，若用 float 在一些特殊情況會遇到問題。

2. #logo 與 #ad_space
這二個 div 可以視為一組，仔細觀察可發現裡面分別運用了 float: left 與 float: right，目的就是讓這二個 div 平行地並列，一個置左，一個置右，可以算是對後面 div#left 和 div#right 的雙欄佈局的預習。

float 就是「飄浮」，可以想成是咖啡的飄浮冰淇淋，設成了 float 了之後就會像飄浮冰淇淋一樣飄了起來，不會和其他的冰塊擠在一起。你要它向左它就向左，你要它向右它就向右。而且，很重要的是，它不會像巧克力分層或牛奶分層，一個人就占了一整層 (就像DIV一樣，一個 DIV 就占了100%的寬度，使得其他 DIV 就要換行，排在下面)，如果向老闆加錢的話，他是會給你二個「並排」的 DIV 的（冰淇淋）。

<img src="http://pcf.orsir.tw/photo/sep12.jpg" height=350>
<small>層次分明的冰咖啡剛好體現了 DIV 在設定為「飄浮 float」前層層獨立的特性（而且這張居然剛好是我常去的 ORSiR咖啡的教學網頁）</small>

不過言歸正傳，以比較專業的角度來說，當一個 div 設定為 float 之後，它的「呈現屬性」(display)就會從占據整行的 display: block，轉變為只占據「內容寬度」的 display: inline。inline 的意思也就是如果 div 裡面只有「飄浮冰咖啡」五個字的話，這個 div 的寬度就只有五個字的寬度，如果後面再接了也是 inline 的「鮮奶油也很好吃」的話，這二個 div 就會接再一起，不會換行。

例如：
原始碼：<xmp><div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div></xmp>結結果：<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div><div style="clear:both"></div>
我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。
<xmp>div#logo {
width: 374px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;
float: left;
}

div#ad_space {
width: 476px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;
float: right;
}
</xmp>if') no-repeat;
float: right;
}
</xmp>原始碼：<xmp><div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div></xmp>結果：
<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div><div style="clear:both"></div>

我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。

(續)
<xmp>div#logo {
width: 374px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;
float: left;
}

div#ad_space {
width: 476px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;
float: right;
}
</xmp>

補充幾個原作者 style.css 少漏或疏乎的地方：

1. 第15行 body{} 裡面的 color 少打了冒號 (:)。

2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。if') no-repeat;
float: right;
}
原始碼：<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div>結果：


我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。

(續)
div#logo {<br /> width: 374px;<br /> height: 90px;<br /> background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;<br /> float: left;<br /> }<br /> <br /> div#ad_space {<br /> width: 476px;<br /> height: 90px;<br /> background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;<br /> float: right;<br /> }<br />