<h1>[color=#990000][作業04] 網頁導覽列的製作[/color]</h1>

<h2><b>[color=#663300]一、製作說明：[/color]</b></h2>
<b>
1.請參考 <b>[url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]</b>
的步驟製作，從三種方式中，選擇其中一種製作方式。
的步驟製作，從三種方式中，選擇其中一種製作方式，目前只先教了圖片按鈕的做法可先以這個為主，也可自行嘗試其他做法。

<b>[color=#CC0099]2.請重新下載附件檔案製作，內有圖檔，index.html以及style.css檔，請將自己的期中作業內容套入附件的HTML的架構，再修改CSS設定以及導覽列的連結設定。[/color]</b>

3.每個同學記得在[color=#990033]title的部分打上『自己作業的命名』[/color]

4.記得在 ＃ＦＯＯＴＥＲ打上自己的版權聲明

<b>5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。
</b>
[color=#CC0099]5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。[/color]

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

<b>[color=#CC0066]（1 ）導覽列的製作
（2 ）製作可以互相連結的網頁
（3 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感
（4 ）如何將圖片與色彩搭配出有質感的網頁。[/color]</b>


<h2><b>[color=#663300]二、繳交作業方式[/color]</b></h2>

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100a/hw04/hw04-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.至少一個連結的頁面，如：works.html
4.images圖檔資料夾

存放在 < hw04-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間


[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]

</b>

[hr]
<b>[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　</b>
[hr]
===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================

[color=#990000][作業04] 網頁導覽列的製作[/color]

[color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]
的步驟製作，從三種方式中，選擇其中一種製作方式。
的2.可下載圖檔練習。
�作，從三種方式中，選擇其中一種製作方式，目前只先教了圖片按鈕的做法可先以這個為主，也可自行嘗試其他做法。

[color=#CC0099]2.請重新下載附件檔案5.ＨＴＭＬ及ＣＳＳ可複製或參考範例。

6.但#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，可以期末作業內容為主。

�己的期中作業內容套入附件的HTML的架構，再修改CSS設定以及導 [color=#CC0000]（1 ）導覽列的製作
（2 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感[/color]
　（3 ）如何將圖片與色彩搭配出有質感的網頁。
覽列的連結設定。[/color]

3.每個同學記得在[ （2 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感
　（3 ）如何將圖片與色彩搭配出有質感的網頁。[/color]

[color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100a/hw04/hw04-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

存放在 < hw04-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

4.請務必在下次上課前回覆，否則為遲交
b>[color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100a/hw04/hw04-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾
990033]title的部分打上『自己作業的命名』[/color]

4.記得在 ＃ＦＯＯＴＥＲ打上自己的版權聲明

5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。

[color=#CC0099]5.ＨＴＭＬ及ＣＳＳ可直接套用下載後的附件範例，修改為自己的內容。

6.#header、#button、#content及#footer內，請自行放入不同圖片與文字內容，以期末作業內容為主。[/color]

7.請每位同學依步驟完成本單元後，上傳至FTP

8.本次作業的重點在於：

[color=#CC0066]（1 ）導覽列的製作
（2 ）製作可以互相連結的網頁
（3 ）如何將導覽列設計成畫龍點睛的作用，並兼具網頁整體風格與設計質感
（4 ）如何將圖片與色彩搭配出有質感的網頁。[/color]

[color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第四個作業FTP上的資料夾為：hw04

每位同學請將自己的資料夾===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================命名為：hw04-學號
這個作業的網址則為:http://mepopedia.com/~web100a/hw04/hw04-100xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.至少一個連結的頁面，如：works.html
4.images圖檔資料夾

存放在 < hw04-學號 > 的資夾內[/color]


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 ：

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：
2.有無遇到的問題?
3.製作感想
4.製作作業的時間


[color=#CC0099]請務必在下次上課前回覆，否則為遲交[/color]



[hr]
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　
[hr]
===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================