[講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列)

1. 雙欄網頁概述

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

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

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

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

---

2. 雙欄網頁，float：浮動屬性做法概述

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

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

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

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

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

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

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




HTML的架構語法如下：

<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>

CSS的設定如下：

#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; /*清除浮動設定*/ }

---

4. 雙欄網頁，float：浮動屬性做法步驟

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

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

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

3. 新增ID CSS，命名為content-L

4. Float浮動設定Left，靠左對齊；寬度設為180px

5. 設定#content-L，Padding:6px

6. 新增ID CSS，命名為content-R

7. Margin：間距，設定180px (#content-L的寬度)

8. #content-R的字型設定

9. #content-R背景設為白色

10. #content-R，Padding內距上右下設定為30px，使視覺效果更舒服

11. #content設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)

12. 於#content-L插入影像

13. 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字

14. 選取，設成清單項目

15. Back回上行Enter段落成為清單li

16. 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list

17. 新增ID CSS命名為L-list

18. #L-list的字型設定

19. 將#L-list,清單樣式設為none(無樣式)

20. 將#L-list,Margin、Padding 皆設為0，清除清單預設距離

21. 雙欄式網頁及左側的L-list,清單樣式大致設定完成

---

5. 表格設定的步驟

1. 於#content-R插入表格

2. 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題

此處改為固定寬度(約小於 650px，視整體寬度而定)

3. 將資料分別整理至表格之中

4. 將表格自行命名為monent-table

5. 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>

6. 在table下 插入表格大標題<caption></caption>

7. 新增.monent-table tr th 標題CSS樣式

8. 設定表格標題字型、設定表格標題底色

9. 新增.monent-table tr td 表格內文CSS樣式

10. .monent-table tr td 表格內文，Padding內距與邊框底線的設定

11. 新增.monent-table caption 表格大標題CSS樣式

12. .monent-table tr td 表格內文，底色與邊框底線的設定

---

6. 錨點連結設定的步驟

1. 在標題欄前，插入→命名錨點，並自行命名

2. 於每個標題前，分別命名錨點

3. 在header標題欄，插入→命名錨點，並自行命名為top

4. 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01

5. 分別設定完成

6. 插入回前一動作#top 的連結│BACK│

7. │BACK│設置靠右對齊

---

7. 左側清單列按鈕設定的步驟

1. 新增 #L-list li a 左側清單超連結CSS設定

2. 設定#L-list li a ，字型及底部邊框的設定

3. 設定#L-list li a ，的區塊為block

4. 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定

5. 設定#L-list li a:hover ，字型、底色、底部邊框的設定

6. 設定後，滑鼠移過的效果

7. 設定#L-list li a:hover ，加入底圖的設定

8. 設定#L-list li a:hover 高度

9. 設定後，滑鼠移過的底圖效果

---

8. 上課影音

以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8





(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-1035445052
(2).請回答以下問題：
1.網頁主題： 配色與風格設定:山羊先生
2.有無遇到的問題?非常難
3.製作感想 很有成就感
4.製作作業的時間 一個半小時

(1).作業網址 : http://mepopedia.com/~web104-2c/hw07/hw07-1035445075/
(2).請回答以下問題：
1.網頁主題： 配色與風格設定: 包大山
2.有無遇到的問題?雙欄的語法不太懂 雖然還是完成了
3.製作感想 很痛苦因為圖片還是出不來＝＝
4.製作作業的時間 5hr

(1).作業網址 : http://mepopedia.com/~web104-2c/hw07/hw07-1035445018
(2).請回答以下問題：
1.網頁主題： 配色與風格設定: 小王子
2.有無遇到的問題?雙欄的語法比較複雜
3.製作感想 覺得很有成就感
4.製作作業的時間 5hr

(1).作業網址 :http://mepopedia.com/~web105-2c/hw07/hw07-1045445186
(2).請回答以下問題：
1.網頁主題： 潮流藝術
2.有無遇到的問題?雙欄的語法比較複雜
3.製作感想 覺得很有成就感
4.製作作業的時間 5hr



(編輯記錄)