遠距教學的影音原始檔
放在學校 ican系統→教材區→推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報
[hr]
本週請大家一樣將期中作業往下繼續製作
把至少其中一頁一講義做法製作成雙欄
先同樣回覆在作業06即可
後續的作業下次上課會再往下講
請大家回家務必觀看影音及講義
並製作練習
[hr]
[hr]
http://youtu.be/VG1aWLHNh7g
[hr]
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:則在右邊
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]
2. 在CSS新增插入#content-L以及#content-R (可手動加入,也可以Dreamweaver指令插入
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-03.jpg[/IMG]
3. 新增ID CSS,命名為content-L
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-04.jpg[/IMG]
4. Float浮動設定Left,靠左對齊;寬度設為180px
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-05.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-06.jpg[/IMG]
5. 設定#content-L,Padding:6px
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-24.jpg[/IMG]
6. 新增ID CSS,命名為content-R
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-07.jpg[/IMG]
7. Margin:間距,設定180px (#content-L的寬度)
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-08.jpg[/IMG]
8. #content-R的字型設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-09.jpg[/IMG]
9. #content-R背景設為白色
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]
10. #content-R,Padding內距上右下設定為30px,使視覺效果更舒服
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-11.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-12.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-13.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]
11. #content設定底圖,會顯現在#content-L,(因#content-R設為白色右邊蓋住底圖)
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-16.jpg[/IMG]
12. 於#content-L插入影像
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-17.jpg[/IMG]
13. 於#content-L,貼上記事本的清單列文字,做為左列的清單按鈕文字
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-18.jpg[/IMG]
14. 選取,設成清單項目
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-19.jpg[/IMG]
15. Back回上行Enter段落成為清單li
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-20.jpg[/IMG]
16. 將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-21.jpg[/IMG]
17. 新增ID CSS命名為L-list
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-22.jpg[/IMG]
18. #L-list的字型設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-23.jpg[/IMG]
19. 將#L-list,清單樣式設為none(無樣式)
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-27.jpg[/IMG]
20. 將#L-list,Margin、Padding 皆設為0,清除清單預設距離
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-26.jpg[/IMG]
21. 雙欄式網頁及左側的L-list,清單樣式大致設定完成
[hr]
5. 表格設定的步驟
1. 於#content-R插入表格
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-28.jpg[/IMG]
2. 插入27列1欄,無框線、100%的表格(隨著DIV寬度調整表格寬度),若設為100% ,IE6會有表格往下的問題
[color=#CC0066]此處改為固定寬度(約小於 650px,視整體寬度而定)[/color]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-29.jpg[/IMG]
3. 將資料分別整理至表格之中
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]
4. 將表格自行命名為monent-table
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]
5. 在程式碼欄,將所有表格標題,由<td></td>改為<th></th>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg[/IMG]
6. 在table下 插入表格大標題<caption></caption>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-34.jpg[/IMG]
7. 新增.monent-table tr th 標題CSS樣式
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-36.jpg[/IMG]
8. 設定表格標題字型、設定表格標題底色
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-37.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-38.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-39.jpg[/IMG]
9. 新增.monent-table tr td 表格內文CSS樣式
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg[/IMG]
10. .monent-table tr td 表格內文,Padding內距與邊框底線的設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-41.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-42.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg[/IMG]
11. 新增.monent-table caption 表格大標題CSS樣式
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg[/IMG]
12. .monent-table tr td 表格內文,底色與邊框底線的設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-45.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-46.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-47.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-48.jpg[/IMG]
[hr]
6. 錨點連結設定的步驟
1. 在標題欄前,插入→命名錨點,並自行命名
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-50.jpg[/IMG]
2. 於每個標題前,分別命名錨點
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-51.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-52.jpg[/IMG]
4. 分別選取左側清單,設定錨點超連結,錨點超連結前為#,如#m-01
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-53.jpg[/IMG]
5. 分別設定完成
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-54.jpg[/IMG]
6. 插入回前一動作#top 的連結│BACK│
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-55.jpg[/IMG]
7. │BACK│設置靠右對齊
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-56.jpg[/IMG]
[hr]
7. 左側清單列按鈕設定的步驟
1. 新增 #L-list li a 左側清單超連結CSS設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-57.jpg[/IMG]
2. 設定#L-list li a ,字型及底部邊框的設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-59.jpg[/IMG]
3. 設定#L-list li a ,的區塊為block
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-61.jpg[/IMG]
4. 新增 #L-list li a:hover 左側清單超連結,滑鼠滑入的CSS設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-62.jpg[/IMG]
5. 設定#L-list li a:hover ,字型、底色、底部邊框的設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-63.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-64.jpg[/IMG]
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-65.jpg[/IMG]
6. 設定後,滑鼠移過的效果
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-66.jpg[/IMG]
7. 設定#L-list li a:hover ,加入底圖的設定
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-67.jpg[/IMG]
8. 設定#L-list li a:hover 高度
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-68.jpg[/IMG]
9. 設定後,滑鼠移過的底圖效果
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-69.jpg[/IMG]
Edited 2 time(s). Last edit at 06/01/2012 02:30PM by JinJin.
(
編輯記錄)