Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

  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:定位屬性,執行絕對配置的做法,雖沒有往下方調整的彈性,但因未完全固定在特地位置上,則容易維持版面的外觀。




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:則在右邊


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

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-03.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-04.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-05.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-06.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-24.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-07.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-08.jpg


8. #content-R的字型設定


http://i556.photobucket.com/albums/ss1/whc915/hw07-09.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-11.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-12.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-13.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg



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


http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-16.jpg


12. 於#content-L插入影像


http://i556.photobucket.com/albums/ss1/whc915/hw07-17.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-18.jpg

14. 選取,設成清單項目


http://i556.photobucket.com/albums/ss1/whc915/hw07-19.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-20.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-21.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-22.jpg


18. #L-list的字型設定


http://i556.photobucket.com/albums/ss1/whc915/hw07-23.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-27.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-26.jpg



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







5. 表格設定的步驟



1. 於#content-R插入表格



http://i556.photobucket.com/albums/ss1/whc915/hw07-28.jpg


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


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

http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-36.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-42.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-45.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-46.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-47.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-48.jpg





6. 錨點連結設定的步驟



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


http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-51.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-52.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-53.jpg


5. 分別設定完成


http://i556.photobucket.com/albums/ss1/whc915/hw07-54.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-55.jpg


7. │BACK│設置靠右對齊


http://i556.photobucket.com/albums/ss1/whc915/hw07-56.jpg




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



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


http://i556.photobucket.com/albums/ss1/whc915/hw07-57.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-59.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-61.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-62.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-63.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-64.jpg

http://i556.photobucket.com/albums/ss1/whc915/hw07-65.jpg

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


http://i556.photobucket.com/albums/ss1/whc915/hw07-66.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-67.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-68.jpg


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


http://i556.photobucket.com/albums/ss1/whc915/hw07-69.jpg



8. 上課影音


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





Edited 5 time(s). Last edit at 12/11/2011 01:14AM by HP.
(編輯記錄)

Attachments:
開啟 | 下載 - hw07-ex.rar (148.5 KB)
(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



Edited 4 time(s). Last edit at 01/11/2017 11:59AM by loveelise1021.
(編輯記錄)

Attachments:
開啟 | 下載 - works.html (3.7 KB)
開啟 | 下載 - style.css (5.3 KB)