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

Advanced

Change History

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

Changed By: Hsinping Wang
Change Date: December 11, 2011 01:14AM

[講義07] 以Float:浮動,製作雙欄網頁 (雙欄Float:浮動、Table:表格、錨點、垂直導覽列)
<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]http://i556.photobucket.com/albums/ss1/whc915/2--01.jpg[/IMG]


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

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


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

[IMG]http://i556.photobucket.com/albums/ss1/whc915/2--03.jpg[/IMG]
<img src="http://i556.photobucket.com/albums/ss1/whc915/2--01.jpg" width="600px" />


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

<img src="http://i556.photobucket.com/albums/ss1/whc915/2--02.jpg" width="600px" />


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

<img src="http://i556.photobucket.com/albums/ss1/whc915/2--03.jpg" width="600px" />



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

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

<img width=100% src=http://i556.photobucket.com/albums/ss1/whc915/hw07-00.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]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]

<h3>在CSS新增插入#content-L以及#content-R (可手動加入,也可以Dreamweaver指令插入</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-03.jpg[/IMG]

<h3>新增ID CSS,命名為content-L</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-04.jpg[/IMG]

<h3>Float浮動設定Left,靠左對齊;寬度設為180px</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-05.jpg[/IMG]

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


<h3>設定#content-L,Padding:6px</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-24.jpg[/IMG]


<h3>新增ID CSS,命名為content-R</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-07.jpg[/IMG]


<h3>Margin:間距,設定180px (#content-L的寬度)</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-08.jpg[/IMG]


<h3>#content-R的字型設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-09.jpg[/IMG]


<h3>#content-R背景設為白色</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-10.jpg[/IMG]


<h3>#content-R,Padding內距上右下設定為30px,使視覺效果更舒服</h3>
[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]



<h3>#content設定底圖,會顯現在#content-L,(因#content-R設為白色右邊蓋住底圖)</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-15.jpg[/IMG]

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


<h3>於#content-L插入影像</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-17.jpg[/IMG]


<h3>於#content-L,貼上記事本的清單列文字,做為左列的清單按鈕文字</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-18.jpg[/IMG]

<h3>選取,設成清單項目</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-19.jpg[/IMG]

<h3>Back回上行Enter段落成為清單li</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-20.jpg[/IMG]


<h3>將ul的id命名為L-list (可自行命名)新增ID CSS命名為L-list</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-21.jpg[/IMG]


<h3>新增ID CSS命名為L-list</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-22.jpg[/IMG]


<h3>#L-list的字型設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-23.jpg[/IMG]


<h3>將#L-list,清單樣式設為none(無樣式)</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-27.jpg[/IMG]


<h3>將#L-list,Margin、Padding 皆設為0,清除清單預設距離</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg[/IMG]

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



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

[hr]


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

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

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


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

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


<h3>將資料分別整理至表格之中</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-30.jpg[/IMG]


<h3>將表格自行命名為monent-table</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-31.jpg[/IMG]


<h3>在程式碼欄,將所有表格標題,由&lt;td>&lt;/td>改為&lt;th>&lt;/th></h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-32.jpg[/IMG]

<h3>在table下 插入表格大標題&lt;caption>&lt;/caption></h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-33.jpg[/IMG]

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


<h3>新增.monent-table tr th 標題CSS樣式 </h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-35.jpg[/IMG]

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


<h3>設定表格標題字型、設定表格標題底色</h3>
[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]


<h3>新增.monent-table tr td 表格內文CSS樣式 </h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-40.jpg[/IMG]


<h3>.monent-table tr td 表格內文,Padding內距與邊框底線的設定</h3>
[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]


<h3>新增.monent-table caption 表格大標題CSS樣式 </h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-44.jpg[/IMG]


<h3>.monent-table tr td 表格內文,底色與邊框底線的設定</h3>
[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]


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

<h3>在標題欄前,插入→命名錨點,並自行命名</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]

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


<h3>於每個標題前,分別命名錨點</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-51.jpg[/IMG]


<h3>在header標題欄,插入→命名錨點,並自行命名為top</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-52.jpg[/IMG]


<h3>分別選取左側清單,設定錨點超連結,錨點超連結前為#,如#m-01</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-53.jpg[/IMG]


<h3>分別設定完成</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-54.jpg[/IMG]


<h3>插入回前一動作#top 的連結│BACK│</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-55.jpg[/IMG]


<h3>│BACK│設置靠右對齊</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-56.jpg[/IMG]

[hr]

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

<h3>新增 #L-list li a 左側清單超連結CSS設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-57.jpg[/IMG]

<h3>設定#L-list li a ,字型及底部邊框的設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-58.jpg[/IMG]

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


<h3>設定#L-list li a ,的區塊為block</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-60.jpg[/IMG]

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


<h3>新增 #L-list li a:hover 左側清單超連結,滑鼠滑入的CSS設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-62.jpg[/IMG]


<h3>設定#L-list li a:hover ,字型、底色、底部邊框的設定</h3>
[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]

<h3>設定後,滑鼠移過的效果</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-66.jpg[/IMG]


<h3>設定#L-list li a:hover ,加入底圖的設定</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-67.jpg[/IMG]


<h3>設定#L-list li a:hover 高度</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-68.jpg[/IMG]


<h3>設定後,滑鼠移過的底圖效果</h3>
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-69.jpg[/IMG]

[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>
Changed By: Hsinping Wang
Change Date: December 11, 2011 01:09AM

[講義07] 以Float:浮動,製作雙欄網頁 (雙欄Float:浮動、Table:表格、錨點、垂直導覽列)
Changed By: JinJin
Change Date: December 07, 2011 08:24AM

[講義07] 以Float:浮動,製作雙欄網頁 (雙欄Float:浮動、Table:表格、錨點、垂直導覽列)
Changed By: JinJin
Change Date: November 30, 2011 08:35AM

[講義07] 以Float:浮動,製作雙欄網頁 (雙欄Float:浮動、Table:表格、錨點、垂直導覽列)
Changed By: JinJin
Change Date: November 30, 2011 08:32AM

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

Original Message

作者: JinJin
Date: November 30, 2011 01:34AM

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

一、雙欄網頁概述



本單元範例網頁: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:則在右邊,如圖所示:




HTML的架構語法如下:

<div id="wrapper"><br /> <div id="header"></div><br /> <ul id="button"></ul><br /> <div id="content"><br /> <div i<h2>四、雙欄網頁,float:浮動屬性做法步驟</h2><br /> <br /> 以下則為製作雙欄浮動的圖解步驟:<br /> <br /> <h3>1.在#content內,加入兩個DIV:#content-L:靠左邊,#content-R:則在右邊</h3><br /> [IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-001.jpg[/IMG]<br /> <br /> <h3>2.在CSS新增插入#content-L以及#content-R (可手動加入,也可以Dreamweaver指令插入</h3><br /> #content-L{<br /> width: 180px; /*#content-L的寬度*/3.<br /> float: left; /*#content-L設定靠左邊浮動*/<br /> }<br /> <br /> #content-R{<br /> background-color: #FFF; /*設定底色為白色*/<br /> marg4.in-left: 180px; /*間距設定為180px,(#content-L的寬度)*/<br /> }<br /> <br /> #content{<br /> background-image: url(images/left-bg.gif); /*設定背景圖片,會顯示在#content-L*/<br /> }<br /> <br /> #footer{<br /> clear:both; /*清除浮動設定*/<br /> }<br />

[hr]

雙欄網頁,float:浮動屬性做法步驟



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

在#content內,加入兩個DIV:#content-L:靠左邊,#co

5.新增ntent-R:則在右邊


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

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


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

新增ID CSS,命名為content-L


[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw08.7-04.jpg[/IMG]

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


[IMG]http://i556.photobucket.com/albums/ss19./whc915/hw07-05.jpg[/IMG]

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


設定#content-L,Padding:6px


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


新增ID CSS,命名為content-R


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


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


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


#content-R的字型設定


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


#content-R背景設為白色

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


#content-R,Padding內距12.上右下設定為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

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



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


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

[IMG]http://i556.photobucket.com/albums/ss1/wh

14.#L-lisc915/hw07-16.jpg[/IMG]


於#content-L插入影像


[IMG]http://i55

四、表格設定的步驟



1.於#content-R插入表格



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


插入27列1欄,無框線、100%的表格(隨著DIV寬度調整表格寬度),


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


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


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


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


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


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


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


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


[IMG]http://i556.photobucket.com

15.將#L-list,Mar

插入27列1欄,無框線、100%的表格(隨著DIV寬度調整表格寬度),


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


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


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


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


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


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


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

4.在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]


5.新增.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]


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


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


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


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


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


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

[IMG]http://i556.photobucket.com/albums/ss1/

五、錨點連結設定的步驟



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]
p://i556.photobucket.com/albums/ss1/whc915/hw07-43.jpg[/IMG]


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


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


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


/albums/ss1/whc915/hw07-18.jpg[/IMG]

選取,設成清單項目


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

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


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


五、表格設定的步驟

1.於#content-R插入表格


l的id命名為L-list (可自行命名)新增ID CSS命名為L-list
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-21.

六、左側清單列按鈕設定的步驟


jpg[/IMG]


新增ID CSS命名為L-list


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


#L-list的字型設定


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


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


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


將#L-list,Margi

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


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


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


清單預設距離
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-25.jpg[/IMG]

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



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



[hr]


表格設定的步驟



於#content-R插入表格



[IMG]http://i556.photobucket.com5./albums/ss1/whc915/hw07-28.jpg[/IMG]


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


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

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


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


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


將表格自行命名為monent-table


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

6.新增.monent-table tr td 表格內文CSS樣式 h3>在程式碼欄,將所有表格標題,由<td></td>改為<th></th>


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

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


新增.monent-table

7.新增.monent-table caption 表格大標題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]


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


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


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


[IMG]http://i556.photobucket.com/albums/s

六、錨點連結設定的步驟



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


le 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.co

2.在header標題欄,插入→命名錨點,並自行m/albums/ss1/whc915/hw07-43.jpg[/IMG]


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


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


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


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

[IMG]http:

4.插入回前一動作#//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]

七、左側清單列按鈕設定的步驟



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


入→命名錨點,並自行命名
[IMG]http://i556.photobucket.com/albums/ss1/whc915/hw07-49.jpg[/IMG]

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


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


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


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


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


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


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


分別設定完成


[IMG]http://

2.新增 #L-list li a:hover 左側清單超連結,滑鼠滑入的Ci556.photobucket.com/albums/ss1/whc915/hw07-54.jpg[/IMG]


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


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


│BACK│設置靠右對齊


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

[hr]

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



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


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

設定#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]


設定#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]


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


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


設定#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]

設定後,滑鼠移過的效果


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


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


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


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


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


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


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

[hr]

上課影音


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