Change History
Message: [作業07] 以Float:浮動,製作雙欄網頁
Changed By: JinJin
Change Date: December 17, 2015 08:26PM
[作業07] 以Float:浮動,製作雙欄網頁
請參考
<b>[color=#CC3300][講義07] 以Float:浮動,製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]</b>
<b>[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]
</b>
的步驟製作,並符合以下條件:
<h2>一、製作步驟</h2>
<b>1.下載附件的練習檔(或直接由期末作業方式製作,但必須是全新的內容的一頁,不要與範例內容相同)
2.找文字及圖片資料,並設定#header的標題與副標題
3.重新設定#content及#footer的CSS
4.在#content中插入#content-L及#content-R利用Float:浮動屬性,製作雙欄網頁。
5.在#content-L放入垂直檔覽列。
6.將#content-R的資料以表格整理,複習表格的做法。
[hr]
7.在[color=#990033]title的部分打上『自己作業的命名』[/color]
8.在#footer打上自己的版權聲明
9.請每位同學依步驟完成本單元後,上傳至FTP
10.本次作業的重點在於:
<b>[color=#CC0066](1 )認識多欄網頁。
(2 )雙欄網頁製作
(3 )製作垂直導覽列
(4 )複習表格的做法
(5 )利用CSS,做更細緻的網頁美化設定。 ([/color]</b>
[hr]
<h2>二、繳交作業方式</h2>
1.製作完成後,檔案命名方式:
[color=#669900]第七個平時作業FTP上的資料夾為:hw07
每位同學請將自己的資料夾命名為:hw07-學號
這個作業的網址則為:http://mepopedia.com/~web104-2a/hw07/hw07-103xxxxxxx
資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾
存放在 < hw07-學號 > 的資夾內[/color]
2.上傳至FTP
3.回覆本篇文章
(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-103xxxxxxx
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間
</b>
[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>
2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
com/~web103-a/hw07/hw07-1005445193/
epopedia.com/~web104-2c/hw07/hw07-103xxxxxxx
資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾
存放在 < hw07-學號 > 的資夾內[/color]
2.上傳至FTP
3.回覆本篇文章
(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-103xxxxxxx
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間
</b>
[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>
2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
(3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html
(4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
(5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html
(6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/
Original Message
作者: JinJin
Date: December 16, 2015 10:47PM
[作業07] 以Float:浮動,製作雙欄網頁
請參考
[color=#CC3300][講義07] 以Float:浮動,製作雙欄網頁
http://mepopedia.com/forum/read.php?804,18255[/color]
[color=#CC0066]本講義範例網址
http://mepopedia.com/~jinjin/web/hw07/[/color]
的步驟製作,並符合以下條件:
一、製作步驟
1.下載附件的練習檔(或直接由期末作業方式製作,但必須是全新的內容的一頁,不要與範例內容相同)
2.找文字及圖片資料,並設定#header的標題與副標題
3.重新設定#content及#footer的CSS
4.在#content中插入#content-L及#content-R利用Float:浮動屬性,製作雙欄網頁。
5.在#content-L放入垂直檔覽列。
6.將#content-R的資料以表格整理,複習表格的做法。
[hr]
7.在[color=#990033]title的部分打上『自己作業的命名』[/color]
8.在#footer打上自己的版權聲明
9.請每位同學依步驟完成本單元後,上傳至FTP
10.本次作業的重點在於:
[color=#CC0066](1 )認識多欄網頁。
(2 )雙欄網頁製作
(3 )製作垂直導覽列
(4 )複習表格的做法
(5 )利用CSS,做更細緻的網頁美化設定。 ([/color]
[hr]
二、繳交作業方式
1.製作完成後,檔案命名方式:
[color=#669900]第七個平時作業FTP上的資料夾為:hw07
每位同學請將自己的資料夾命名為:hw07-學號
這個作業的網址則為:http://mepopedia.com/~web104-2a/hw07/hw07-103xxxxxxx
資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾
存放在 < hw07-學號 > 的資夾內[/color]
2.上傳至FTP
3.回覆本篇文章
(1).作業網址 :http://mepopedia.com/~web104-2a/hw07/hw07-103xxxxxxx
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間
[hr]
上課影音
以Float:浮動,製作雙欄網頁 雙欄Float:浮動、Table:表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8
2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
epopedia.com/~web104-2c/hw07/hw07-103xxxxxxx
資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾
存放在 < hw07-學號 > 的資夾內[/color]
2.上傳至FTP
3.回覆本篇文章
(1).作業網址 :http://mepopedia.com/~web104-2c/hw07/hw07-103xxxxxxx
(2).請回答以下問題:
1.網頁主題: 配色與風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間
[hr]
上課影音
以Float:浮動,製作雙欄網頁 雙欄Float:浮動、Table:表格、錨點、垂直導覽列
http://youtu.be/pj6f8GQKIu8
2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
(3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html
(4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
(5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html
(6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/