Change History

<h2>雙欄網頁概述</h2>

本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/

多欄式的網頁配置，可以透過<b>float：浮動</b>屬性或<b>position：定位</b>屬性來處理。這兩種方法對版塊造成的影響也相當大。

<b>float：浮動</b>屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。

<b>position：定位</b>屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。

[hr]

<h2>雙欄網頁，float：浮動屬性做法概述</h2>

本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。

以float：浮動屬性製作多欄網頁的做法有很多種，分別敘述如下：

<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-01.jpg >


<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-02.jpg >


<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-03.jpg >



<h2>本單元雙欄網頁範例，float：浮動屬性做法概述</h2>

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-04.jpg >


HTML的架構語法如下：

<xmp><div id="wrapper">
<div id="header"></div>
<ul id="button"></ul>
<div id="content">
<div id="content-L"></div>
<div id="content-R"></div>
</div>
</div>
</xmp>


CSS的設定如下：

<xmp>#content-L{
width: 180px; /*#content-L的寬度*/
float: left; /*#content-L設定靠左邊浮動*/
}

#content-R{
background-color: #FFF; /*設定底色為白色*/
margin-left: 180px; /*間距設定為180px，(#content-L的寬度)*/
}

#content{
background-image: url(images/left-bg.gif); /*設定背景圖片，會顯示在#content-L*/
}

#footer{
clear:both; /*清除浮動設定*/
}
</xmp>

[hr]

<h2>雙欄網頁，float：浮動屬性做法步驟</h2>

以下則為製作雙欄浮動的圖解步驟：

<h3>在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-05.jpg >

<h3>在CSS新增插入#content-L以及#content-R (可手動加入，也可以Dreamweaver指令插入</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-06.jpg >
<img width=40% src=http://www.mepopedia.com/~jinjin/web/img/7-06.jpg >

<h3>新增ID CSS，命名為content-L</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-07.jpg >

<h3>Float浮動設定Left，靠左對齊；寬度設為180px</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-08.jpg >

<img width=30% src=http://www.mepopedia.com/~jinjin/web/img/7-09.jpg >


<h3>設定#content-L，Padding:6px</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-10.jpg >


<h3>新增ID CSS，命名為content-R</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-11.jpg >


<h3>Margin：間距，設定180px (#content-L的寬度)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-12.jpg >


<h3>#content-R的字型設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-13.jpg >


<h3>#content-R背景設為白色</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-14.jpg >


<h3>#content-R，Padding內距上右下設定為30px，使視覺效果更舒服</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-15.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-16.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-17.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-18.jpg >



<h3>#content設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-19.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-20.jpg >


<h3>於#content-L插入影像</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-21.jpg >


<h3>於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-22.jpg >

<h3>選取，設成清單項目</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-23.jpg >

<h3>Back回上行Enter段落成為清單li</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-24.jpg >


<h3>將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-25.jpg >


<h3>新增ID CSS命名為L-list</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-26.jpg >


<h3>#L-list的字型設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-27.jpg >


<h3>將#L-list,清單樣式設為none(無樣式)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-28.jpg >


<h3>將#L-list,Margin、Padding 皆設為0，清除清單預設距離</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-29.jpg >

<img width=30% src=http://www.mepopedia.com/~jinjin/web/img/7-30.jpg >



<h3>雙欄式網頁及左側的L-list,清單樣式大致設定完成</h3>

[hr]


<h2>表格設定的步驟</h2>

<h3>於#content-R插入表格</h3>

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-31.jpg >


<h3>插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題</h3>
[color=#CC0066]此處改為固定寬度(約小於 650px，視整體寬度而定)[/color]

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-32.jpg >


<h3>將資料分別整理至表格之中</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-33.jpg >


<h3>將表格自行命名為monent-table</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-34.jpg >


<h3>在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-35.jpg >

<h3>在table下 插入表格大標題&lt;caption>&lt;/caption></h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-36.jpg >

<img width=50% src=http://www.mepopedia.com/~jinjin/web/img/7-37.jpg >


<h3>新增.monent-table tr th 標題CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-38.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-39.jpg >


<h3>設定表格標題字型、設定表格標題底色</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-40.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-41.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-42.jpg >


<h3>新增.monent-table tr td 表格內文CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-43.jpg >


<h3>.monent-table tr td 表格內文，Padding內距與邊框底線的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-44.jpg >]

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-45.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-46.jpg >


<h3>新增.monent-table caption 表格大標題CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-47.jpg >


<h3>.monent-table tr td 表格內文，底色與邊框底線的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-48.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-49.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-50.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-51.jpg >

[hr]


<h2>錨點連結設定的步驟</h2>

<h3>在標題欄前，插入→命名錨點，並自行命名</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-52.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-53.jpg >


<h3>於每個標題前，分別命名錨點</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-54.jpg >


<h3>在header標題欄，插入→命名錨點，並自行命名為top</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-55.jpg >


<h3>分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-56.jpg >


<h3>分別設定完成</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-57.jpg >


<h3>插入回前一動作#top 的連結│BACK│</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-58.jpg >


<h3>│BACK│設置靠右對齊</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-59.jpg >

[hr]

<h2>左側清單列按鈕設定的步驟</h2>

<h3>新增 #L-list li a 左側清單超連結CSS設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-60.jpg >

<h3>設定#L-list li a ，字型及底部邊框的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-61.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-62.jpg >


<h3>設定#L-list li a ，的區塊為block</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-63.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-64.jpg >


<h3>新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-65.jpg >


<h3>設定#L-list li a:hover ，字型、底色、底部邊框的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-66.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-67.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-68.jpg >

<h3>設定後，滑鼠移過的效果</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-69.jpg >


<h3>設定#L-list li a:hover ，加入底圖的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-70.jpg >


<h3>設定#L-list li a:hover 高度</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-71.jpg >


<h3>設定後，滑鼠移過的底圖效果</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-72.jpg >

[hr]
<h2>上課影音</h2>
以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8

<iframe width="853" height="480" src="//www.youtube.com/embed/pj6f8GQKIu8?rel=0" frameborder="0" allowfullscreen></iframe>

<h2>雙欄網頁概述</h2>

本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/

多欄式的網頁配置，可以透過<b>float：浮動</b>屬性或<b>position：定位</b>屬性來處理。這兩種方法對版塊造成的影響也相當大。

<b>float：浮動</b>屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。

<b>position：定位</b>屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。

[hr]

<h2>雙欄網頁，float：浮動屬性做法概述</h2>

本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。

以float：浮動屬性製作多欄網頁的做法有很多種，分別敘述如下：

<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-01.jpg >


<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-02.jpg >


<h3>左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題</h3>

<img width=70% src=http://www.mepopedia.com/~jinjin/web/img/7-03.jpg >



<h2>本單元雙欄網頁範例，float：浮動屬性做法概述</h2>

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-04.jpg >


HTML的架構語法如下：

<xmp><div id="wrapper">
<div id="header"></div>
<ul id="button"></ul>
<div id="content">
<div id="content-L"></div>
<div id="content-R"></div>
</div>
</div>
</xmp>


CSS的設定如下：

<xmp>#content-L{
width: 180px; /*#content-L的寬度*/
float: left; /*#content-L設定靠左邊浮動*/
}

#content-R{
background-color: #FFF; /*設定底色為白色*/
margin-left: 180px; /*間距設定為180px，(#content-L的寬度)*/
}

#content{
background-image: url(images/left-bg.gif); /*設定背景圖片，會顯示在#content-L*/
}

#footer{
clear:both; /*清除浮動設定*/
}
</xmp>

[hr]

<h2>雙欄網頁，float：浮動屬性做法步驟</h2>

以下則為製作雙欄浮動的圖解步驟：

<h3>在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-05.jpg >

<h3>在CSS新增插入#content-L以及#content-R (可手動加入，也可以Dreamweaver指令插入</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-06.jpg >
<img width=40% src=http://www.mepopedia.com/~jinjin/web/img/7-06.jpg >

<h3>新增ID CSS，命名為content-L</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-07.jpg >

<h3>Float浮動設定Left，靠左對齊；寬度設為180px</h3>
<i<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-09.jpg >


<h3>設定#content-L，Padding:6px</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-10.jpg >


<h3>新增ID CSS，命名為content-R</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-11.jpg >


<h3>Margin：間距，設定180px (#content-L的寬度)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-12.jpg >


<h3>#content-R的字型設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-13.jpg >


<h3>#content-R背景設為白色</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-14.jpg >


<h3>#content-R，Padding內距上右下設定為30px，使視覺效果更舒服</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-15.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-16.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-17.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-18.jpg >



<h3>#content設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-19.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-20.jpg >


<h3>於#content-L插入影像</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-21.jpg >
mg width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-08.jpg >

<img width=30% src=http://www.mepopedia.com/~jinjin/web/img/7-09.jpg >


<h3>設定#content-L，Padding:6px</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-10.jpg >


<h3>新增ID CSS，命名為content-R</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-11.jpg >


<h3>Margin：間距，設定180px (#content-L的寬度)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-12.jpg >


<h3>#content-R的字型設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-13.jpg >


<h3>#content-R背景設為白色</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-14.jpg >


<h3>#content-R，Padding內距上右下設定為30px，使視覺效果更舒服</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-15.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-16.jpg<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-30.jpg >
>

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-17.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-18.jpg >



<h3>#content設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-19.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-20.jpg >


<h3>於#content-L插入影像</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-21.jpg >


<h3>於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-22.jpg >

<h3>選取，設成清單項目</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-23.jpg >

<h3>Back回上行Enter段落成為清單li</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-24.jpg >


<h3>將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/w<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-37.jpg >
eb/img/7-25.jpg >


<h3>新增ID CSS命名為L-list</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-26.jpg >


<h3>#L-list的字型設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-27.jpg >


<h3>將#L-list,清單樣式設為none(無樣式)</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-28.jpg >


<h3>將#L-list,Margin、Padding 皆設為0，清除清單預設距離</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-29.jpg >

<img width=30% src=http://www.mepopedia.com/~jinjin/web/img/7-30.jpg >



<h3>雙欄式網頁及左側的L-list,清單樣式大致設定完成</h3>

[hr]


<h2>表格設定的步驟</h2>

<h3>於#content-R插入表格</h3>

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-31.jpg >


<h3>插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題</h3>
[color=#CC0066]此處改為固定寬度(約小於 650px，視整體寬度而定)[/color]

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-32.jpg >


<h3>將資料分別整理至表格之中</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-33.jpg >


<h3>將表格自行命名為monent-table</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-34.jpg >


<h3>在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-35.jpg >

<h3>在table下 插入表格大標題&lt;caption>&lt;/caption></h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-36.jpg >

<img width=50% src=http://www.mepopedia.com/~jinjin/web/img/7-37.jpg >


<h3>新增.monent-table tr th 標題CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-38.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-39.jpg >


<h3>設定表格標題字型、設定表格標題底色</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-40.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-41.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-42.jpg >


<h3>新增.monent-table tr td 表格內文CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-43.jpg >


<h3>.monent-table tr td 表格內文，Padding內距與邊框底線的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-44.jpg >]

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-45.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-46.jpg >


<h3>新增.monent-table caption 表格大標題CSS樣式 </h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-47.jpg >


<h3>.monent-table tr td 表格內文，底色與邊框底線的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-48.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-49.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-50.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-51.jpg >

[hr]


<h2>錨點連結設定的步驟</h2>

<h3>在標題欄前，插入→命名錨點，並自行命名</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-52.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-53.jpg >


<h3>於每個標題前，分別命名錨點</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-54.jpg >


<h3>在header標題欄，插入→命名錨點，並自行命名為top</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-55.jpg >


<h3>分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-56.jpg >


<h3>分別設定完成</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-57.jpg >


<h3>插入回前一動作#top 的連結│BACK│</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-58.jpg >


<h3>│BACK│設置靠右對齊</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-59.jpg >

[hr]

<h2>左側清單列按鈕設定的步驟</h2>

<h3>新增 #L-list li a 左側清單超連結CSS設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-60.jpg >

<h3>設定#L-list li a ，字型及底部邊框的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-61.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-62.jpg >


<h3>設定#L-list li a ，的區塊為block</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-63.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-64.jpg >


<h3>新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-65.jpg >


<h3>設定#L-list li a:hover ，字型、底色、底部邊框的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-66.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-67.jpg >

<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-68.jpg >

<h3>設定後，滑鼠移過的效果</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-69.jpg >


<h3>設定#L-list li a:hover ，加入底圖的設定</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-70.jpg >


<h3>設定#L-list li a:hover 高度</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-71.jpg >


<h3>設定後，滑鼠移過的底圖效果</h3>
<img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-72.jpg >

[hr]
<h2>上課影音</h2>
以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8

<iframe width="853" height="480" src="//www.youtube.com/embed/pj6f8GQKIu8?rel=0" frameborder="0" allowfullscreen></iframe>

一、雙欄網頁概述

本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/

多欄式的網頁配置，可以透過float：浮動屬性或position：定位屬性來處理。這兩種方法對版塊造成的影響也相當大。

float：浮動屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。

position：定位屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。

[hr]

二、雙欄網頁，float：浮動屬性做法概述

本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。
�欄網頁的做法有很多種，分別敘述如下：

1.左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--01.jpg[/IMG]

2.左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--02.jpg[/IMG]

3.左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

右側欄位：設定左邊的margin(左邊間距)，不設定浮動

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--01.jpg三、[/IMG]

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--02.jpg[/IMG]

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--03.jpg[/IMG]

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

三、雙欄網頁，float：浮動屬性做法步驟
"http://i556.photobucket.com/albums/ss1/whc915/2--03.jpg" width="600px" />

本單元雙欄網頁範例，float：浮動屬性做法概述

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：


src=http://www.mepopedia.com/~jinjin/web/img/7-01.jpg >

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，

四、雙欄網頁，float：浮動屬性做法步驟

以下則為製作雙欄浮動的圖解步驟：

1.在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊

[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]

2.在CSS新增插入#content-L以及#content-R (可手動加入，也可以Dreamweaver指令插入

~jinjin/web/img/7-02.jpg >

左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不3.設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題

本單元雙欄網頁範例，float：浮動屬性做法概述

本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示：




HTML的架構語法如下：

<div id="wrapper"><br /> <div id="header"></div><br /> <ul id="button"></ul<h3>5.新增><br /> <div id="conte[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]<br /> <br /> <h3>在CSS新增插6.入#content-L以及#content-R (可手動加入，也可以Dreamweaver指令插入</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-037..jpg[/IMG]<br /> "><br /> <div id="content-L"></div[IMG]iv id="i556.photobucketdiv><br /> albums/ss1/whc915/hw08.</x4p><br /> <br /> [/IMG]<br /> S的設定如下：<br /> <br /> <xmp>#content-L{<br /> width: 180px; /*#conten[IMG]http://i556.photobucket.co9.m/albums/ss1/whc915/hw07-05.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-06.jpg[/IMG]<br /> ��底色為白色*/<br /> margin-left: 180px; /*間距設定為180px，(#content-L的寬度[IMG]ent{<br /> i556.photobucketage: albums/ss1/whc915/hw07-24if);[/IMG]<br /> *設定背景圖片，會顯示在#content-L*/<br /> }<br /> <br /> #footer{<br /> [IMG]both; /i556.photobucket設定*/<br /> }<br /> </xmalbums/ss1/whc915/hw0710.-07網頁，float[/IMG]<br /> 浮動屬性做法步驟</h2><br /> <br /> 以下則為製作雙欄浮動的圖解步驟：<br /> <br /> <h3>在#content內，加入兩個DIV：#co[IMG]ent-L：靠i556.photobuckettent-R：則在右邊albums/ss1/whc915/hw07-08% sr[/IMG]<br /> ttp://www.mepopedia.com/~jin[IMG]g/7-05.i556.photob11.ucket�CSS新增插albums/ss1/whc915/hw07-09#content-R[/IMG]<br /> ��手動加入，也可以Dreamweaver指令插入</h3><br /> <img width[I12.MG]c=http:i556.photobucketia.coalbums/ss1/whc915/hw0g/7006.j[/IMG]<br /> ><br /> <img width=40% src=http://www.mepopedia.com/~jinjin/web/img/7-06.jpg ><br /> <br /> <h3>新增ID CSS，命名為content-L</h3><br /> <img w[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-11.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07<h3>13.將ul的id命名為L-list (可自行命名)新增ID CSS命-12.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-13.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]<br /> width=100% src=http://www.mep<h3>14.#L-lisopedia.com/~jinjin/web/img/7-10.jpg ><br /> <br /> <br /> <h<h2>四、表格設定的步驟</h2><br /> <br /> <h3>1.於#content-R插入表格</h3><br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-28.jpg[/IMG]<br /> <br /> <br /> <h3>插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg[/IMG]<br /> <br /> <br /> <h3>將資料分別整理至表格之中</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]<br /> <br /> <br /> <h3>2.將表格自行命名為monent-table</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]<br /> <br /> <br /> <h3>3.在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg[/IMG]<br /> mg width=100% src=http://www.mepo[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg[/IMG]<br /> <br /> [IMG]http://i556.p<h3>插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg[/IMG]<br /> <br /> <br /> <h3>將資料分別整理至表格之中</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]<br /> <br /> <br /> <h3>2.將表格自行命名為monent-table</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]<br /> <br /> <br /> <h3>3.在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg[/IMG]<br /> <br /> <h3>4.在table下 插入表格大標題&lt;caption>&lt;/caption></h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg[/IMG]<br /> <br /> <br /> <h3>5.新增.monent-table tr th 標題CSS樣式 </h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-36.jpg[/IMG]<br /> <br /> <br /> <h3>設定表格標題字型、設定表格標題底色</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg[/IMG]<br /> <br /> <br /> <h3>6.新增.monent-table tr td 表格內文CSS樣式 </h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg[/IMG]<br /> <br /> <br /> <h3>.monent-table tr td 表格內文，Padding內距與邊框底線的設定</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/<h2>五、錨點連結設定的步驟</h2><br /> <br /> <h3>1.在標題欄前，插入→命名錨點，並自行命名</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg[/IMG]<br /> p://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg[/IMG]<br /> <br /> <br /> <h3>7.新增.monent-table caption 表格大標題CSS樣式 </h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg[/IMG]<br /> <br /> <br /> <h3>.monent-table tr td 表格內文，底色與邊框底線的設定</h3><br /> h3>15.將#L-list,Margin、ucket.com/albums/ss1/whc915/hw07-16.jpg[/IMG]<br /> g width=100% src=http://www.mepopedia.com/~jin[IMG]g/7-12.i556.photobucketcontealbums/ss1/whc915/hw07-17</h3><br /> <img wid[/IMG]<br /> 100% src=http://www.mepopedia.com/~jinjin/web/img/7-13.jp[IMG]<h2>五、表格設定的步驟</h2><br /> <br /> <h3>1.於#content-R插入表格</h3><br /> //i556.photobucket.com/albums/ss1/whc915/hw07-18ent-[/IMG]<br /> ��景設為白色</h3><br /> <img widt<h2>六、左側清單列按鈕設定的步驟</h2><br /> [IMG]100% sri556.photobucketmepopalbums/ss1/whc915/hw07-19/img[/IMG]<br /> 14.jpg ><br /> <br /> <br /> <h3>#content-R，Padding內距上右下設定為30px，使視覺[IMG]�果更舒服</h3i556.photobucket100% albums/ss1/whc915/hw0epo0edia[/IMG]<br /> m/~jinjin/web/img/7-15.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia[IMG]http://i556.photobucketin/wealbums/ss1/whc915/hw0<br /> <br /> <1mg w[/IMG]<br /> h=100% src=http:/<h3>2.將表格自行命名為monent-table</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]<br /> <br /> <br /> <h3>3.在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3><br /> hotobucketg ><br /> <br /> albums/ss1/whc915/hw0src2http[/IMG]<br /> www.mepopedia.com/~4.jinjin[IMG]-18.jpgi556.photobucketntentalbums/ss1/whc915/hw0會顯現在#content-3，(因#[/IMG]<br /> tent-R設為白色右邊蓋住底圖)</h3><br /> <img width=100% src=http://www.me[IMG]popediai556.photobucketweb/ialbums/ss1/whc9155./hw0img7widt[/IMG]<br /> 00% src=http://www.mepopedia.com/~jinjin/web/img/7-20.jpg ><br /> <br /> <br /> <h3>於#c[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-26.jpg[/IMG]<br /> http://www.mepopedia.com/~jinjin/web/img/7-08.jpg ><br /> <br /> <img width=30% src=http://www.mepopedia.com/~jinjin/web/img/7-09.jpg ><br /> <br /> <br /> <h3>設定#content-L，Padding:6px</h3><br /> <img width=100% src=http://ww<h3>6.新增.monent-table tr td 表格內文CSS樣式 edia.com/~jinjin/web/img/7-10.jpg ><br /> <br /> <br /> <h3>新增ID CSS，命名[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-28conten[/IMG]<br /> </h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-11.jpg ><br /> <br /> <br /> <h3>Margin：間距，設定180px (#content-L的寬度)</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/im[IMG]http://i556.photobucket.co<h3>7.新增.monent-table caption 表格大標題CSS樣式 07-29.jpg[/IMG]<br /> <br /> <br /> <h3>將資料分別整理至表格之中</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]<br /> h=100% src=http://www.mepopedia.com/~jinji[IMG]b/img/7i556.photobucketh3>#calbums/ss1/whc915/hw0��為白色</h31<br /> <im[/IMG]<br /> idth=100% src=http://www.mepopedia.com/~jinjin/web/img/7-14.jpg ><br /> <br /> <br /> <h3>#co[IMG]http://i556.photobucketR，Paalbums/ss1/whc915/hw0��下設定為30px，2��視覺效果[/IMG]<br /> 舒服</h3><br /> <img width=100% src=http://www.mepopedia.com/[IMG]http://i556.photobucket.<h2>六、錨點連結設定的步驟</h2><br /> <br /> <h3>1.在標題欄前，插入→命名錨點，並自行命名</h3><br /> ]http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg[/IMG]<br /> .mepopedia.com/~jinjin/web/img/7-30.jpg ><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.co<h3>2.在header標題欄，插入→命名錨點，並自行m/albums/ss1/whc915/hw07-36.jpg[/IMG]<br /> img/7-18.jpg ><br /> <br /> <br /> <br /> <h3>#content設定底圖，會顯現在#[IMG]htt3.p://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg[/<h3>4.插入回前一動作#IMG]<br /> njin/web/img/7-20.jpg ><br /> <br /> <br /> <h3>於#content-L插入影像</h3><br /> <img width=100% s[IMG]ttp://wi556.photobucketcom/~albums/ss1/whc915/hw0-210jpg [/IMG]<br /> <br /> <h3>於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字</h3><br /> <img width=<h2>七、左側清單列按鈕設定的步驟</h2><br /> <br /> <h3>1.新增 #L-list li a 左側清單超連結CSS設定</h3><br /> MG]http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-42.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg[/IMG]<br /> popedia.com/~jinjin/web/img/7-24.jpg ><br /> <br /> <br /> <h3>將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-lis[IMG]/h3><br /> <ii556.photobucket src=albums/ss1/whc915/hw0edi4.com[/IMG]<br /> injin/w<img width=100% src=http://www.mepopedia.com/~jinjin/web/im[IMG]http://i556.photobucket.com/albums/ss1/whc<h3>2.新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的C915/hw07-45.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-46.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-47.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-48.jpg[/IMG]<br /> list,清單樣式設為none(無樣式)</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-28.jpg ><br /> <br /> <br /> <h3>將#L-list,Margin、Padding 皆設為0，清除清單預設距離</h3><br /> <img width=100% src=http:/[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg[/IMG]<br /> m/~jinjin/web/img/7-30.jp[IMG]http://i556.photobucket欄式網頁及左側albums/ss1/whc915/hw0樣式大致設定完成<1h3><br /> [/IMG]<br /> r]<br /> <br /> <br /> <h2>表格設定的步驟</h2><br /> <br /> <h3>於#content-R插入表格</h3><br /> <br /> <img width=100% s[IMG]http://i556.photobucket=httpalbums/ss1/whc915/hw0.co2/~ji[/IMG]<br /> n/web/img/7-31.jpg ><br /> <br /> <br /> <h3>插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw0[colo3=#CC[/IMG]<br /> 6]此處改為固定寬度(約小於 650[IMG]整體寬度而定)[/coi556.photobucketdth=1albums/ss1/whc915/hw0ww.4epop[/IMG]<br /> a.com/~jinjin/web/img/7-32.jpg ><br /> <br /> <br /> <h3>將資料分別整[IMG]http理至表i556.photobucket><br /> <img widtalbums/ss1/whc915/hw0//w5w.me[/IMG]<br /> edia.com/~jinjin/web/img[IMG]3.jpg >i556.photobucket格自行命名為monalbums/ss1/whc915/hw0img6widt[/IMG]<br /> 00% src=http://www.mepopedia.com/~jinjin/web/img/7-34.jpg ><br /> <br /> <br /> <h3>在程式碼欄，將所有表格標題，由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-35.jpg ><br /> <br /> <h3>在table下 插入表格大標題&lt;ca[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-57</h3[/IMG]<br /> img width=100% src=http://www.mepoped[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-59.jpg[/IMG]<br /> monent-table tr th 標題CSS樣式 </h3><br /> <img wi[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-61.jpg[/IMG]<br /> .jpg ><br /> <br /> <br /> <h3>設定表格標題字型、設定表格標題底色</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web[IMG]http://i556.photobucket-40.jalbums/ss1/whc915/hw0=102% sr[/IMG]<br /> ttp://www.mepopedia.com/~jinjin/web/img/7-41.jp[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-63.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-64.jpg[/IMG]<br /> <br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-65.jpg[/IMG]<br /> njin/web/img/7-43.jpg ><br /> <br /> <br /> <h3>.monent-[IMG]httablei556.photobucket�內文，Paddialbums/ss1/whc915/hw0�底線的設定</h3><br /> <6mg w[/IMG]<br /> h=100% src=http://www.mepopedia.com/~jinjin/web/img/7-44.jpg >][IMG]<br /> <br /> <img i556.photobucketc=httalbums/ss1/whc915/hw07-67m/~j[/IMG]<br /> in/web/img/7-45.jpg ><br /> <br /> <img width=1[IMG]://www.i556.photobucket/~jinalbums/ss1/whc915/hw07-68 ><br /> <br /> [/IMG]<br /> 3>新增.monent-table caption 表格大標題C[IMG]http://i556.photobucket<br /> <img widalbums/ss1/whc915/hw07-69ww.m[/IMG]<br /> pedia.com/~jinjin/web/img/7-47.jpg ><br /> <br /> <br /> <h3>.monent-table tr td 表格內文，底色與邊框底線的設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-48.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-49.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-50.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-51.jpg ><br /> <br /> [hr]<br /> <br /> <br /> <h2>錨點連結設定的步驟</h2><br /> <br /> <h3>在標題欄前，插入→命名錨點，並自行命名</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-52.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-53.jpg ><br /> <br /> <br /> <h3>於每個標題前，分別命名錨點</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-54.jpg ><br /> <br /> <br /> <h3>在header標題欄，插入→命名錨點，並自行命名為top</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-55.jpg ><br /> <br /> <br /> <h3>分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-56.jpg ><br /> <br /> <br /> <h3>分別設定完成</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-57.jpg ><br /> <br /> <br /> <h3>插入回前一動作#top 的連結│BACK│</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-58.jpg ><br /> <br /> <br /> <h3>│BACK│設置靠右對齊</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-59.jpg ><br /> <br /> [hr]<br /> <br /> <h2>左側清單列按鈕設定的步驟</h2><br /> <br /> <h3>新增 #L-list li a 左側清單超連結CSS設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-60.jpg ><br /> <br /> <h3>設定#L-list li a ，字型及底部邊框的設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-61.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-62.jpg ><br /> <br /> <br /> <h3>設定#L-list li a ，的區塊為block</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-63.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-64.jpg ><br /> <br /> <br /> <h3>新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-65.jpg ><br /> <br /> <br /> <h3>設定#L-list li a:hover ，字型、底色、底部邊框的設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-66.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-67.jpg ><br /> <br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-68.jpg ><br /> <br /> <h3>設定後，滑鼠移過的效果</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-69.jpg ><br /> <br /> <br /> <h3>設定#L-list li a:hover ，加入底圖的設定</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-70.jpg ><br /> <br /> <br /> <h3>設定#L-list li a:hover 高度</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-71.jpg ><br /> <br /> <br /> <h3>設定後，滑鼠移過的底圖效果</h3><br /> <img width=100% src=http://www.mepopedia.com/~jinjin/web/img/7-72.jpg ><br /> <br /> [hr]<br /> <h2>上課影音</h2><br /> 以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列 <br /> http://youtu.be/pj6f8GQKIu8<br /> <br /> <iframe width="853" height="480" src="//www.youtube.com/embed/pj6f8GQKIu8?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> <!-- END TEMPLATE changes.tpl --> <!-- BEGIN TEMPLATE footer.tpl --> <div id="footer-plug"> <a href="http://mepopedia.com/forum">MEPO forum</a> is powered by <a href="http://www.phorum.org/">Phorum</a>. </div> </div> <!-- end of div id="footer-plug" --> </body> </html> <!-- END TEMPLATE footer.tpl -->