[講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) 1. 雙欄網頁概述2. 雙欄網頁，float：浮動屬性做法概述2.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動2.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題2.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題3. 本單元雙欄網頁範例，float：浮動屬性做法概述4. 雙欄網頁，float：浮動屬性做法步驟4.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊4.2 在CSS新增插入#content-L以及#content-R (可手動加入，也可以Dreamweaver指令插入4.3 新增ID CSS，命名為content-L4.4 Float浮動設定Left，靠左對齊；寬度設為180px4.5 設定#content-L，Padding:6px4.6 新增ID CSS，命名為content-R4.7 Margin：間距，設定180px (#content-L的寬度)4.8 #content-R的字型設定4.9 #content-R背景設為白色4.10 #content-R，Padding內距上右下設定為30px，使視覺效果更舒服4.11 #content設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)4.12 於#content-L插入影像4.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字4.14 選取，設成清單項目4.15 Back回上行Enter段落成為清單li4.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list4.17 新增ID CSS命名為L-list4.18 #L-list的字型設定4.19 將#L-list,清單樣式設為none(無樣式)4.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離4.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成5. 表格設定的步驟5.1 於#content-R插入表格5.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題5.3 將資料分別整理至表格之中5.4 將表格自行命名為monent-table5.5 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>5.6 在table下 插入表格大標題<caption></caption>5.7 新增.monent-table tr th 標題CSS樣式 5.8 設定表格標題字型、設定表格標題底色5.9 新增.monent-table tr td 表格內文CSS樣式 5.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定5.11 新增.monent-table caption 表格大標題CSS樣式 5.12 .monent-table tr td 表格內文，底色與邊框底線的設定6. 錨點連結設定的步驟6.1 在標題欄前，插入→命名錨點，並自行命名6.2 於每個標題前，分別命名錨點6.3 在header標題欄，插入→命名錨點，並自行命名為top6.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-016.5 分別設定完成6.6 插入回前一動作#top 的連結│BACK│6.7 │BACK│設置靠右對齊7. 左側清單列按鈕設定的步驟7.1 新增 #L-list li a 左側清單超連結CSS設定7.2 設定#L-list li a ，字型及底部邊框的設定7.3 設定#L-list li a ，的區塊為block7.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定7.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定7.6 設定後，滑鼠移過的效果7.7 設定#L-list li a:hover ，加入底圖的設定7.8 設定#L-list li a:hover 高度7.9 設定後，滑鼠移過的底圖效果8. 上課影音1. 雙欄網頁概述 本單元範例網頁：http://mepopedia.com/~jinjin/web/hw07/ 多欄式的網頁配置，可以透過float：浮動屬性或position：定位屬性來處理。這兩種方法對版塊造成的影響也相當大。 float：浮動屬性，使區塊浮動的做法，優點是可以依照內容改變區塊的高度，缺點是較容易引起「欄位崩壞」等重大版面顯示的問題。 position：定位屬性，執行絕對配置的做法，雖沒有往下方調整的彈性，但因未完全固定在特地位置上，則容易維持版面的外觀。 [hr] 2. 雙欄網頁，float：浮動屬性做法概述 本單元則要以要float：浮動屬性的做法，來講解製作多欄(雙欄)網頁的方法。 以float：浮動屬性製作多欄網頁的做法有很多種，分別敘述如下： 1. 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動 2. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題 3. 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題 3. 本單元雙欄網頁範例，float：浮動屬性做法概述 本範例是以先前的範例#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊，如圖所示： HTML的架構語法如下： 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; /*清除浮動設定*/ } [hr] 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,清單樣式大致設定完成 [hr] 5. 表格設定的步驟 1. 於#content-R插入表格 2. 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題 [color=#CC0066]此處改為固定寬度(約小於 650px，視整體寬度而定)[/color] 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 表格內文，底色與邊框底線的設定 [hr] 6. 錨點連結設定的步驟 1. 在標題欄前，插入→命名錨點，並自行命名 2. 於每個標題前，分別命名錨點 3. 在header標題欄，插入→命名錨點，並自行命名為top 4. 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01 5. 分別設定完成 6. 插入回前一動作#top 的連結│BACK│ 7. │BACK│設置靠右對齊 [hr] 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. 設定後，滑鼠移過的底圖效果 [hr] 8. 上課影音 以Float：浮動，製作雙欄網頁 雙欄Float：浮動、Table：表格、錨點、垂直導覽列 http://youtu.be/pj6f8GQKIu8 http://mepopedia.com/forum/read.php?804,18255,18255#msg-18255 Mon, 27 Jul 2026 05:51:21 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,18255,87519#msg-87519 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,87519#msg-87519 (2).請回答以下問題：
1.網頁主題： 配色與風格設定: 簡單的
2.有無遇到的問題?網頁好難但好玩，要冷靜下來才能做的好，頭腦還要清楚
3.製作感想 好像是上面的答案
4.製作作業的時間 從不懂到懂大概2hr吧]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 17 Jan 2018 15:15:43 +0800 http://mepopedia.com/forum/read.php?804,18255,83717#msg-83717 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,83717#msg-83717 (2).請回答以下問題：
1.網頁主題： 潮流藝術
2.有無遇到的問題?雙欄的語法比較複雜
3.製作感想 覺得很有成就感
4.製作作業的時間 5hr]]> loveelise1021 網頁設計與語法（HTML/CSS） Wed, 11 Jan 2017 04:43:36 +0800 http://mepopedia.com/forum/read.php?804,18255,79754#msg-79754 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,79754#msg-79754 (2).請回答以下問題：
1.網頁主題： 配色與風格設定: 小王子
2.有無遇到的問題?雙欄的語法比較複雜
3.製作感想 覺得很有成就感
4.製作作業的時間 5hr]]> 廖慧伃0908 網頁設計與語法（HTML/CSS） Sun, 10 Jan 2016 22:12:27 +0800 http://mepopedia.com/forum/read.php?804,18255,79747#msg-79747 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,79747#msg-79747 (2).請回答以下問題：
1.網頁主題： 配色與風格設定: 包大山
2.有無遇到的問題?雙欄的語法不太懂 雖然還是完成了
3.製作感想 很痛苦因為圖片還是出不來＝＝
4.製作作業的時間 5hr]]> 1035445075 網頁設計與語法（HTML/CSS） Sun, 10 Jan 2016 17:19:18 +0800 http://mepopedia.com/forum/read.php?804,18255,79388#msg-79388 Re: [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,79388#msg-79388 (2).請回答以下問題：
1.網頁主題： 配色與風格設定:山羊先生
2.有無遇到的問題?非常難
3.製作感想 很有成就感
4.製作作業的時間 一個半小時]]> 1035445052 網頁設計與語法（HTML/CSS） Mon, 04 Jan 2016 21:18:16 +0800 http://mepopedia.com/forum/read.php?804,18255,18255#msg-18255 [講義07] 以Float：浮動，製作雙欄網頁 (雙欄Float：浮動、Table：表格、錨點、垂直導覽列) http://mepopedia.com/forum/read.php?804,18255,18255#msg-18255
  1. 1. 雙欄網頁概述
  2. 2. 雙欄網頁，float：浮動屬性做法概述
  3. 2.1 左側欄位：固定寬度，靠左浮動；右側欄位：設定左邊的margin(左邊間距)，不設定浮動
  4. 2.2 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠左浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
  5. 2.3 左側欄位：固定寬度，靠左浮動；右側欄位：設定靠右浮動，寬度可以設定也可以不設定，但寬度不可大於總寬度減左側欄位的寬度，建議更小一點，以免造成欄位崩壞的問題
  6. 3. 本單元雙欄網頁範例，float：浮動屬性做法概述
  7. 4. 雙欄網頁，float：浮動屬性做法步驟
  8. 4.1 在#content內，加入兩個DIV：#content-L：靠左邊，#content-R：則在右邊
  9. 4.2 在CSS新增插入#content-L?以及#content-R (可手動加入，也可以Dreamweaver指令插入
  10. 4.3 新增ID CSS，命名為content-L
  11. 4.4 Float浮動設定Left，靠左對齊；寬度設為?180px
  12. 4.5 設定#content-L，Padding:6px
  13. 4.6 新增ID CSS，命名為content-R
  14. 4.7 Margin：間距，設定180px (#content-L的寬度)
  15. 4.8 #content-R?的字型設定
  16. 4.9 #content-R?背景設為白色
  17. 4.10 #content-R?，Padding內距?上右下設定為30px，使視覺效果更舒服
  18. 4.11 #content?設定底圖，會顯現在#content-L，(因#content-R設為白色右邊蓋住底圖)
  19. 4.12 於#content-L?插入影像
  20. 4.13 於#content-L，貼上記事本的清單列文字，做為左列的清單按鈕文字
  21. 4.14 選取，設成清單項目
  22. 4.15 Back回上行?Enter段落?成為清單li
  23. 4.16 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
  24. 4.17 新增ID CSS命名為L-list
  25. 4.18 #L-list?的字型設定
  26. 4.19 將#L-list,清單樣式設為none(無樣式)
  27. 4.20 將#L-list,Margin、Padding 皆設為0，清除清單預設距離
  28. 4.21 雙欄式網頁及左側的L-list,清單樣式大致設定完成
  29. 5. 表格設定的步驟
  30. 5.1 於#content-R插入表格
  31. 5.2 插入27列1欄，無框線、100%的表格(隨著DIV寬度調整表格寬度)，若設為100% ,IE6會有表格往下的問題
  32. 5.3 將資料分別整理至表格之中
  33. 5.4 將表格自行命名為monent-table
  34. 5.5 在程式碼欄，將所有表格標題，由<td></td>改為<th></th>
  35. 5.6 在table下 插入表格大標題<caption></caption>
  36. 5.7 新增.monent-table tr th 標題CSS樣式
  37. 5.8 設定表格標題字型、設定表格標題底色
  38. 5.9 新增.monent-table tr td 表格內文CSS樣式
  39. 5.10 .monent-table tr td 表格內文，Padding內距與邊框底線的設定
  40. 5.11 新增.monent-table caption 表格大標題CSS樣式
  41. 5.12 .monent-table tr td 表格內文，底色與邊框底線的設定
  42. 6. 錨點連結設定的步驟
  43. 6.1 在標題欄前，插入→命名錨點，並自行命名
  44. 6.2 於每個標題前，分別命名錨點
  45. 6.3 在header標題欄，插入→命名錨點，並自行命名為top
  46. 6.4 分別選取左側清單，設定錨點超連結，錨點超連結前為#，如#m-01
  47. 6.5 分別設定完成
  48. 6.6 插入回前一動作#top 的連結│BACK│
  49. 6.7 │BACK│設置靠右對齊
  50. 7. 左側清單列按鈕設定的步驟
  51. 7.1 新增 #L-list li a 左側清單超連結CSS設定
  52. 7.2 設定#L-list li a ，字型及底部邊框的設定
  53. 7.3 設定#L-list li a ，的區塊為block
  54. 7.4 新增 #L-list li a:hover 左側清單超連結，滑鼠滑入的CSS設定
  55. 7.5 設定#L-list li a:hover ，字型、底色、底部邊框的設定
  56. 7.6 設定後，滑鼠移過的效果
  57. 7.7 設定#L-list li a:hover ，加入底圖的設定
  58. 7.8 設定#L-list li a:hover 高度
  59. 7.9 設定後，滑鼠移過的底圖效果
  60. 8. 上課影音

1. 雙欄網頁概述



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

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

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

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

[hr]

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

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,清單樣式大致設定完成



[hr]


5. 表格設定的步驟



1. 於#content-R插入表格






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


[color=#CC0066]此處改為固定寬度(約小於 650px，視整體寬度而定)[/color]




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 表格內文，底色與邊框底線的設定










[hr]


6. 錨點連結設定的步驟



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







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





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





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





5. 分別設定完成





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





7. │BACK│設置靠右對齊




[hr]

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. 設定後，滑鼠移過的底圖效果




[hr]

8. 上課影音


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

]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 30 Nov 2011 01:34:45 +0800