[color=#990000][作業04] 網頁導覽列的製作[/color] [color=#663300]一、製作說明：[/color] 1.請參考 [url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url] 的步驟製作，從三種方式中，選擇其中一種製作方式，目前只先教了圖片按鈕的做法可先以這個為主，也可自行嘗試其他做法。 [color=#CC0099]2.請下載附件檔案製作，內有圖檔，index.html以及style.css檔，請將自己的期中作業內容套入附件的HTML的架構，再修改CSS設定以及導覽列的連結設定。[/color] 3.每個同學記得在[color=#990033]title的部分打上『自己作業的命名』[/color] 4.記得在 ＃ＦＯＯＴＥＲ打上自己的版權聲明 [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 每位同學請將自己的資料夾命名為：hw04-學號 這個作業的網址則為:http://mepopedia.com/~web100b/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] =========================================== http://mepopedia.com/forum/read.php?855,17038,17038#msg-17038 Sun, 28 Jun 2026 04:14:16 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?855,17038,19733#msg-19733 http://mepopedia.com/forum/read.php?855,17038,19733#msg-19733 1.網頁與導覽列配色與風格設定：利用PS設計圖片製作成導覽列
2.有無遇到的問題? 無
3.製作感想 看到到覽列套上自己挑選和設計的圖片 感覺很有成就感
4.製作作業的時間 2hr]]> 1001445079 100-1《中國》北視傳一B-網頁設計 Sat, 07 Jan 2012 10:59:24 +0800 http://mepopedia.com/forum/read.php?855,17038,19726#msg-19726 http://mepopedia.com/forum/read.php?855,17038,19726#msg-19726

1.網頁與導覽列配色與風格設定： 紫色和綠色還有點點!!

2.有無遇到的問題? 我的botten不會變換到我設的圖片

3.製作感想 我還是覺得我有很多地方不太會，還事需要多多練習

4.製作作業的時間 3小時]]> 1441005065 100-1《中國》北視傳一B-網頁設計 Fri, 06 Jan 2012 22:36:36 +0800 http://mepopedia.com/forum/read.php?855,17038,19715#msg-19715 http://mepopedia.com/forum/read.php?855,17038,19715#msg-19715
(2).請回答以下問題：
1.網頁與導覽列配色與風格設定： 簡單黑白
2.有無遇到的問題 調整頁面時有點麻煩
3.製作感想 我覺得我做得不錯哈哈
4.製作作業的時間 兩天]]> 016 100-1《中國》北視傳一B-網頁設計 Fri, 06 Jan 2012 16:21:54 +0800 http://mepopedia.com/forum/read.php?855,17038,19566#msg-19566 http://mepopedia.com/forum/read.php?855,17038,19566#msg-19566 eva221022 100-1《中國》北視傳一B-網頁設計 Wed, 04 Jan 2012 14:56:57 +0800 http://mepopedia.com/forum/read.php?855,17038,19338#msg-19338 http://mepopedia.com/forum/read.php?855,17038,19338#msg-19338

(2).請回答以下問題：
1.網頁主題： 星空
配色與風格設定： 幾米憂鬱藍
2.有無遇到的問題? 還好
3.製作感想 很累但完成很有成就感
4.製作作業的時間 3.4天]]> 1001445002 100-1《中國》北視傳一B-網頁設計 Sun, 01 Jan 2012 18:23:05 +0800 http://mepopedia.com/forum/read.php?855,17038,18562#msg-18562 http://mepopedia.com/forum/read.php?855,17038,18562#msg-18562
(2).請回答以下問題：

1.網頁與導覽列配色與風格設定： 韓國團體但以拼色為主

2.有無遇到的問題? 沒有

3.製作感想 我覺得做這個很有去 雖然某些CSS還是看不懂因為我英文很爛=_=

4.製作作業的時間 2hr]]> wei_80628 100-1《中國》北視傳一B-網頁設計 Tue, 13 Dec 2011 19:24:18 +0800 http://mepopedia.com/forum/read.php?855,17038,17669#msg-17669 http://mepopedia.com/forum/read.php?855,17038,17669#msg-17669
1. 紫色神話森林

2. 發現有打置中的指令，卻沒有反應，但後來重打的時候有成功。

3. 有種想就想讓她更好的衝動，就會很努力地想點子，讓他進入我的畫面中。

4. 5H，光按鍵就用了好久，還要加上思考時間，真是費盡心思-口-!!]]> 貝珼 100-1《中國》北視傳一B-網頁設計 Wed, 09 Nov 2011 10:07:41 +0800 http://mepopedia.com/forum/read.php?855,17038,17646#msg-17646 http://mepopedia.com/forum/read.php?855,17038,17646#msg-17646

1.網頁與導覽列配色與風格設定:黑色
2.有無遇到的問題:無
3.製作感想:無
4.製作作業的時間:30分鐘]]> Alley 100-1《中國》北視傳一B-網頁設計 Wed, 09 Nov 2011 00:34:00 +0800 http://mepopedia.com/forum/read.php?855,17038,17622#msg-17622 http://mepopedia.com/forum/read.php?855,17038,17622#msg-17622 1.網頁與導覽列配色與風格設定:亮色調展現活潑感
2.有無遇到的問題?無
3.製作感想:終於有點知道該怎麼做了~
4.製作作業的時間:大慨三小時]]> s930335w 100-1《中國》北視傳一B-網頁設計 Tue, 08 Nov 2011 23:21:05 +0800 http://mepopedia.com/forum/read.php?855,17038,17609#msg-17609 http://mepopedia.com/forum/read.php?855,17038,17609#msg-17609 1.網頁與導覽列配色與風格設定:幾米-淡淡的色調.那種感覺
2.有無遇到的問題?還好囉
3.製作感想:製作整個完整網頁不容易 利用老師給的樣本去慢慢改 才跟著了解:)
4.製作作業的時間:三小時]]> J1001445091 100-1《中國》北視傳一B-網頁設計 Tue, 08 Nov 2011 22:22:39 +0800 http://mepopedia.com/forum/read.php?855,17038,17592#msg-17592 http://mepopedia.com/forum/read.php?855,17038,17592#msg-17592 1.網頁與導覽列配色與風格設定： 我走比較活潑俏皮的風格
2.有無遇到的問題? 目前還好
3.製作感想 剛開始做有些困難之後回去看講義才慢慢了解
4.製作作業的時間 大約三小時]]> Ping-yun 100-1《中國》北視傳一B-網頁設計 Tue, 08 Nov 2011 17:37:46 +0800 http://mepopedia.com/forum/read.php?855,17038,17585#msg-17585 http://mepopedia.com/forum/read.php?855,17038,17585#msg-17585

works的表格不會做，語法也不太懂，所以摸了很久，但最後結果還是有點不像！]]> 9711443098 100-1《中國》北視傳一B-網頁設計 Tue, 08 Nov 2011 16:08:57 +0800 http://mepopedia.com/forum/read.php?855,17038,17564#msg-17564 http://mepopedia.com/forum/read.php?855,17038,17564#msg-17564 http://mepopedia.com/~web100b/hw04/hw04-1001445024
(2).請回答以下問題：
1.網頁與導覽列配色與風格設定：深藍
2.有無遇到的問題? 無
3.製作感想 對於連結有初步了解
4.製作作業的時間 2小時]]> nhong 100-1《中國》北視傳一B-網頁設計 Tue, 08 Nov 2011 00:32:18 +0800 http://mepopedia.com/forum/read.php?855,17038,17409#msg-17409 http://mepopedia.com/forum/read.php?855,17038,17409#msg-17409
1.網頁與導覽列配色與風格設定： 喜歡的韓國女子團體2ne1
風格:粉紅高彩度
2.有無遇到的問題 沒有
3.製作感想 有點複雜
4.製作作業的時間再上課2小時
不知道為什麼照片無法顯示??]]> 李佳玟 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 21:27:23 +0800 http://mepopedia.com/forum/read.php?855,17038,17404#msg-17404 http://mepopedia.com/forum/read.php?855,17038,17404#msg-17404
你犯了一個很典型的錯誤：檔名不能有大寫（尤其是 index.html 主頁）。你現在寫的是 index.HTML，伺服器是認不得的，所以你的網頁現在出不來。要改成 index.html。

我針對你的問題整理出二點，放在這篇文章中（目前的第一點與第二點就是以你目前的問題寫的）：

http://mepopedia.com/forum/read.php?804,17300

主頁寫成大寫（index.HTML）的話就會出現下面的畫面：

]]> HP 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 19:33:50 +0800 http://mepopedia.com/forum/read.php?855,17038,17397#msg-17397 http://mepopedia.com/forum/read.php?855,17038,17397#msg-17397 1.網頁與導覽列配色與風格設定：利用老師給的作業4的圖檔做。
2.有無遇到的問題?header那邊怪怪的不知道為什麼
3.製作感想-要參考之前的講義做不然會有點忘記
4.製作作業的時間-上課2節]]> 1001445036 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 17:20:37 +0800 http://mepopedia.com/forum/read.php?855,17038,17379#msg-17379 http://mepopedia.com/forum/read.php?855,17038,17379#msg-17379

(2).請回答以下問題：
1.網頁與導覽列配色與風格設定： 黑白ˊ黑暗詭異>:D<
2.有無遇到的問題? (:D還好
3.製作感想 :(得多多練習才是 不過越碰越熟悉了
4.製作作業的時間 四五小時((因為摸很久(:P)]]> 倩倩倩* 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 09:20:33 +0800 http://mepopedia.com/forum/read.php?855,17038,17371#msg-17371 http://mepopedia.com/forum/read.php?855,17038,17371#msg-17371 改成粉紅系的梵谷的網站
恩......問題不大
花約3小時]]> 1001445032 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 01:57:32 +0800 http://mepopedia.com/forum/read.php?855,17038,17366#msg-17366 http://mepopedia.com/forum/read.php?855,17038,17366#msg-17366

1.網頁與導覽列配色與風格設定：復古風
2.有無遇到的問題? 大致上沒有
3.製作感想 希望能趕快完成完整的網頁 !!
4.製作作業的時間 製圖設計＋網頁製作 大約4小時]]> 小多比 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 01:26:55 +0800 http://mepopedia.com/forum/read.php?855,17038,17364#msg-17364 http://mepopedia.com/forum/read.php?855,17038,17364#msg-17364 　　http://mepopedia.com/~web100b/hw04/hw04-1001445057

(2).請回答以下問題：

　1. 網頁與導覽列配色與風格設定：
　　　粉紅色系,讓整體搭配起來感到俏皮可愛

　2. 有無遇到的問題：
　　　檢視上好像發生問題了 QQ
IE和GOOGLE有點不太一樣....

　3. 製作感想：
　　　覺得還是有點不太熟練


　4. 製作作業的時間：
　　　四個小時]]> Lovry 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 01:20:34 +0800 http://mepopedia.com/forum/read.php?855,17038,17362#msg-17362 http://mepopedia.com/forum/read.php?855,17038,17362#msg-17362 我改好了 ((倒]]> part2 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 01:08:51 +0800 http://mepopedia.com/forum/read.php?855,17038,17361#msg-17361 http://mepopedia.com/forum/read.php?855,17038,17361#msg-17361 part2 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 01:06:14 +0800 http://mepopedia.com/forum/read.php?855,17038,17343#msg-17343 http://mepopedia.com/forum/read.php?855,17038,17343#msg-17343
1.以藍色為主!想呈現自然、輕鬆的感覺!讓人在閱讀起來比較不會沉重
2.英文還是很不熟練!字體大小還沒抓到感覺!要不停調整!
3.photoshop不熟練，修圖剪裁花較長的時間!已有試著用works連結第一個按鈕!成功!但works還沒製作
目前嘗試用更多不同的樣式做搭配!內文的部分也再努力當中!
4.四小時整]]> 陳醬子 100-1《中國》北視傳一B-網頁設計 Wed, 02 Nov 2011 00:00:06 +0800 http://mepopedia.com/forum/read.php?855,17038,17339#msg-17339 http://mepopedia.com/forum/read.php?855,17038,17339#msg-17339
以薰衣草為主軸概念做整體配色，加強北海道及薰衣草的印象結合。

照片使用align="middle"仍無置中效果，最後只能用空白鍵推到接近置中。

不是一步驟的跟著做網頁時，會有點手足無措，很多設定要注意的地方會漏、會忘。

約4天。]]> lilac 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 23:51:16 +0800 http://mepopedia.com/forum/read.php?855,17038,17338#msg-17338 http://mepopedia.com/forum/read.php?855,17038,17338#msg-17338
以"墨"為主題，想呈現較沉穩的風格。


2.有無遇到的問題?

我家的FTP一直出現錯誤...


3.製作感想

...按鈕沒有DW不知道該怎麼做
...要切割圖片換PS鬧脾氣...！
((仰天長歎


4.製作作業的時間

3H到4H]]> 傀 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 23:51:12 +0800 http://mepopedia.com/forum/read.php?855,17038,17331#msg-17331 http://mepopedia.com/forum/read.php?855,17038,17331#msg-17331
1.網頁與導覽列配色與風格設定： 藍色

2.有無遇到的問題? 弄了好久,不知道為什麼上面會多ㄧ截

3.製作感想

真的越來越複雜..需要再好好鑽研 ...

4.製作作業的時間

4hr]]> 1001445008 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 22:32:14 +0800 http://mepopedia.com/forum/read.php?855,17038,17328#msg-17328 http://mepopedia.com/forum/read.php?855,17038,17328#msg-17328
1.網頁與導覽列配色與風格設定：一樣是藍色~~~
2.有無遇到的問題? 目前沒有
3.製作感想 不夠熟練
4.製作作業的時間 約三小時]]> moenkk8 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 22:13:38 +0800 http://mepopedia.com/forum/read.php?855,17038,17327#msg-17327 http://mepopedia.com/forum/read.php?855,17038,17327#msg-17327 1.網頁與導覽列配色與風格設定： 搭配主題的畫風選用較不搶走作品風采的配色
2.有無遇到的問題? 上課太趕了很多東西都沒能聽仔細
3.製作感想 剛開始做有些困難之後回去看以前的作業跟講義才慢慢找回感覺
4.製作作業的時間 大約三小時]]> 大內密探 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 22:13:11 +0800 http://mepopedia.com/forum/read.php?855,17038,17314#msg-17314 http://mepopedia.com/forum/read.php?855,17038,17314#msg-17314

1.用自己攝影照片當網站，顏色就已攝影照片顏色為主
2.用老師的來改，可是我無法置中。
想放照片也放不進去，想明天問老師。
3.語法還有英文的意思還是忘光光了，要看老師講義才會想起來
4.一小時半，語法好難懂]]> 1001445026 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 20:46:05 +0800 http://mepopedia.com/forum/read.php?855,17038,17312#msg-17312 http://mepopedia.com/forum/read.php?855,17038,17312#msg-17312
1.跟生態有關，我用綠色森林風格 (:D

2.照老師講義做，沒甚麼問題~~

3.自己還不夠熟練，感覺蠻複雜@@，但很開心學會如何放圖片!

4.製作時間約3小時多~]]> sintp23 100-1《中國》北視傳一B-網頁設計 Tue, 01 Nov 2011 18:42:56 +0800