參考講義 [講義04] 以CSS製作網頁導覽列 http://mepopedia.com/forum/read.php?804,17032 製作說明 1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作，以及使用以下的語法完成。 2.可以以期末作業主題製作完整的一頁，也可以只做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。 3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-104xxxxxxx 資料夾中 4.請每位同學依步驟完成本單元後，上傳至FTP 5.本次作業的重點在於： （1 ）以清單方式 ＜ul＞及＜li＞利用CSS製作導覽列 （3 ）熟悉以清單方式 ＜ul＞及＜li＞製作導覽列的語法，自行修改成設定的風格 （4 ）如何將圖片與色彩搭配出有質感的導覽列。 參考語法 新增index.html檔案，貼上以下語法 About Works Video Links Story 完整語法（含header) 網頁導覽列 About Works Video Links Story [hr] 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可 [hr] 第一種置中型 #wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; font-size: 14px; margin: 0px; padding:0px; } #button li { width:178px; text-align:center; list-style-type:none; background-color:#6E6E6E; float:left; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; margin-right:1px; } #button li a { display: block; line-height: 22px; color: #FFF; text-decoration: none; } #button li a:hover{ background-color:#39919F } [hr] 第二種靠左型 #wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; padding-bottom: 2px; height: 20px; padding-top: 2px; font-size: 14px; margin: 0px; } #button a { display: block; float: left; width: 150px; color: #FFF; text-decoration: none; } #button a:hover{ color: #7CCBDC; } #button li { float: left; list-style-type: none; letter-spacing: 2px; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; padding-left: 10px; } [hr] 繳交方式 1.製作完成後，檔案命名方式： 第四個作業FTP上的資料夾為：hw04 每位同學請將自己的資料夾命名為：hw04-學號 這個作業的網址則為:http://mepopedia.com/~web105-2b/hw04/hw04-1045445XXX 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾(非必要) 存放在 < hw04-學號 > 的資夾內 2.上傳至FTP 3.回覆本篇文章 (1).作業網址 ：http://mepopedia.com/~web105-2b/hw04/hw04-1045445XXX (2).請回答以下問題： 1.導覽列配色與風格設定： 2.有無遇到的問題? 3.製作感想(你認為導覽列的意義為何？） 4.製作作業的時間 [hr] 參考範例 http://mepopedia.com/forum/read.php?2023,67216 http://mepopedia.com/forum/read.php?2024,67217 http://mepopedia.com/forum/read.php?1173,27953 作業參考 [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/　 (1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/ (2) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/ (3) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/ (4) http://mepopedia.com/~web101c/hw04/hw04-1015445243/ http://mepopedia.com/~web104-2b/hw04/hw04-1035445218/ http://mepopedia.com/~web104-2b/hw04/hw04-1035445104/ http://mepopedia.com/~web104-2b/hw04/hw04-1035445041/ http://mepopedia.com/~web104-2b/hw04/hw04-1035445059/ http://mepopedia.com/~web104-2b/hw04/hw04-1035445053/ http://mepopedia.com/forum/read.php?2602,83096,83096#msg-83096 Sat, 24 Oct 2026 01:51:17 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2602,83096,83839#msg-83839 http://mepopedia.com/forum/read.php?2602,83096,83839#msg-83839
(2).請回答以下問題：
1.導覽列配色與風格設定： 冷酷風格
2.有無遇到的問題 N
3.製作感想 N
4.製作作業的時間 2hr]]> 1045445173 105-1《中國》竹視傳二B-網頁設計 Sat, 14 Jan 2017 16:54:16 +0800 http://mepopedia.com/forum/read.php?2602,83096,83837#msg-83837 http://mepopedia.com/forum/read.php?2602,83096,83837#msg-83837
(2).請回答以下問題：
1.導覽列配色與風格設定 冷酷風格
2.有無遇到的問題 N
3.製作感想 N
4.製作作業的時間 2hr]]> 1045445173 105-1《中國》竹視傳二B-網頁設計 Sat, 14 Jan 2017 16:35:14 +0800 http://mepopedia.com/forum/read.php?2602,83096,83836#msg-83836 http://mepopedia.com/forum/read.php?2602,83096,83836#msg-83836
(2).請回答以下問題：
1.導覽列配色與風格設定： 冷酷風格
2.有無遇到的問題: N
3.製作感想: N
4.製作作業的時間 2hr]]> 1045445173 105-1《中國》竹視傳二B-網頁設計 Sat, 14 Jan 2017 16:17:51 +0800 http://mepopedia.com/forum/read.php?2602,83096,83806#msg-83806 http://mepopedia.com/forum/read.php?2602,83096,83806#msg-83806
(2).請回答以下問題：
1.導覽列配色與風格設定：低調，簡約
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）導覽列就是要輕清楚明瞭
4.製作作業的時間 2個小時]]> 1045445122 105-1《中國》竹視傳二B-網頁設計 Thu, 12 Jan 2017 22:01:55 +0800 http://mepopedia.com/forum/read.php?2602,83096,83793#msg-83793 http://mepopedia.com/forum/read.php?2602,83096,83793#msg-83793
(2).請回答以下問題：
1.導覽列配色與風格設定：宇宙
2.有無遇到的問題? 無
3.製作感想？老師資訊明確
4.製作作業的時間 2d]]> 1045445065 105-1《中國》竹視傳二B-網頁設計 Thu, 12 Jan 2017 12:28:21 +0800 http://mepopedia.com/forum/read.php?2602,83096,83780#msg-83780 http://mepopedia.com/forum/read.php?2602,83096,83780#msg-83780
導覽列配色與風格設定： 用綠色去調整配色
有無遇到的問題：好像沒調整得很好
製作感想：方便瀏覽和整理
製作作業的時間：一兩小時]]> 1025445119 105-1《中國》竹視傳二B-網頁設計 Thu, 12 Jan 2017 11:28:33 +0800 http://mepopedia.com/forum/read.php?2602,83096,83776#msg-83776 http://mepopedia.com/forum/read.php?2602,83096,83776#msg-83776
(2).請回答以下問題：
1.導覽列配色與風格設定：為了配合柯南故事 所以不使用鮮豔色ㄉㄧㄠ
2.有無遇到的問題? 按鈕的底色設定不出來，只跑出一小塊色塊的背景
3.製作感想(你認為導覽列的意義為何？）能更清楚了解的知道一些東西, 覺得之前用ps切片工具比較方便也比較快速
但用css導覽列來設定雖然按鈕面複雜了些,但很有趣。
4.製作作業的時間：3~4小時]]> 1045445104 105-1《中國》竹視傳二B-網頁設計 Thu, 12 Jan 2017 11:21:55 +0800 http://mepopedia.com/forum/read.php?2602,83096,83671#msg-83671 http://mepopedia.com/forum/read.php?2602,83096,83671#msg-83671 (2).請回答以下問題：

1.導覽列配色與風格設定：活潑色系
2.有無遇到的問題? :有時候圖片會對不齊導覽列所以有花時間對齊


3.製作感想 :覺得兩種導覽列的製作方式都很有意思，製作上有很多方式可以選擇


4.製作作業的時間 :3小時]]> 1045445077 105-1《中國》竹視傳二B-網頁設計 Tue, 10 Jan 2017 17:55:33 +0800 http://mepopedia.com/forum/read.php?2602,83096,83658#msg-83658 http://mepopedia.com/forum/read.php?2602,83096,83658#msg-83658
(2).請回答以下問題：
1.導覽列配色與風格設定：粉色系.想走可愛的路線
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 讓網頁的架構更成熟
4.製作作業的時間 2小時]]> kiki2007810 105-1《中國》竹視傳二B-網頁設計 Tue, 10 Jan 2017 11:57:42 +0800 http://mepopedia.com/forum/read.php?2602,83096,83632#msg-83632 http://mepopedia.com/forum/read.php?2602,83096,83632#msg-83632
請回答以下問題：
1.導覽列配色與風格設定：活潑撞色
2.有無遇到的問題? 圖片大小對不好
3.製作感想(你認為導覽列的意義為何？）清楚分辨
4.製作作業的時間 2小時]]> 芮薇珊 105-1《中國》竹視傳二B-網頁設計 Tue, 10 Jan 2017 01:12:29 +0800 http://mepopedia.com/forum/read.php?2602,83096,83616#msg-83616 http://mepopedia.com/forum/read.php?2602,83096,83616#msg-83616
(2).請回答以下問題：
1.導覽列配色與風格設定：紅 黃
2.有無遇到的問題? 沒
3.製作感想(你認為導覽列的意義為何？）帥
4.製作作業的時間 :不要問]]> 陳柏叡1045445137 105-1《中國》竹視傳二B-網頁設計 Mon, 09 Jan 2017 04:16:50 +0800 http://mepopedia.com/forum/read.php?2602,83096,83610#msg-83610 http://mepopedia.com/forum/read.php?2602,83096,83610#msg-83610
(2).請回答以下問題：
1.導覽列配色與風格設定：暗黑
2.有無遇到的問題? 沒
3.製作感想(你認為導覽列的意義為何？）方便尋找
4.製作作業的時間 1個小時]]> 徐夢蔆1045445071 105-1《中國》竹視傳二B-網頁設計 Mon, 09 Jan 2017 00:56:56 +0800 http://mepopedia.com/forum/read.php?2602,83096,83532#msg-83532 http://mepopedia.com/forum/read.php?2602,83096,83532#msg-83532
請回答以下問題：

1.導覽列配色與風格設定：

以可樂的紅白調為主色調，有歡樂活潑暢快的感覺。

2.有無遇到的問題?
無
3.製作感想(你認為導覽列的意義為何？）

增加趣味性，不單調，讓人想繼續瀏覽這個網站

4.製作作業的時間

0.5hr]]> abcdefg12345678 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 15:16:07 +0800 http://mepopedia.com/forum/read.php?2602,83096,83517#msg-83517 http://mepopedia.com/forum/read.php?2602,83096,83517#msg-83517
1.網頁主題：ONE PIECE
配色與風格設定： 神秘
2.有無遇到的問題? 沒有
3.製作感想 但很有趣
4.製作作業的時間 1小時]]> 1045445050 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 13:20:47 +0800 http://mepopedia.com/forum/read.php?2602,83096,83514#msg-83514 http://mepopedia.com/forum/read.php?2602,83096,83514#msg-83514
1.網頁主題： 草間彌生
配色與風格設定： 黃色配色
2.有無遇到的問題? 沒
3.製作感想 雖然製作過程中很困難但很有趣
4.製作作業的時間 2小時]]> 1045445155 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 13:16:55 +0800 http://mepopedia.com/forum/read.php?2602,83096,83509#msg-83509 http://mepopedia.com/forum/read.php?2602,83096,83509#msg-83509
1.網頁主題： 慢慢說樂團
配色與風格設定： 簡潔文青
2.有無遇到的問題? 有 繞圖排文放兩張照片會跑掉,還有語法很複雜研究了很久
3.製作感想 雖然製作過程中很困難但很有趣
4.製作作業的時間 2小時]]> 黃書俞 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 12:34:34 +0800 http://mepopedia.com/forum/read.php?2602,83096,83506#msg-83506 http://mepopedia.com/forum/read.php?2602,83096,83506#msg-83506
1.網頁主題： mazda 2
配色與風格設定： 簡潔風
2.有無遇到的問題? 無
3.製作感想 挺有趣
4.製作作業的時間 2小時]]> 1045445059 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 12:21:49 +0800 http://mepopedia.com/forum/read.php?2602,83096,83502#msg-83502 http://mepopedia.com/forum/read.php?2602,83096,83502#msg-83502
(2).請回答以下問題：
1.導覽列配色與風格設定：黃色、紅色，較為活潑亮麗
2.有無遇到的問題? 還好
3.製作感想(你認為導覽列的意義為何？）
成就感
4.製作作業的時間：1小時]]> 1045445077 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 11:08:37 +0800 http://mepopedia.com/forum/read.php?2602,83096,83496#msg-83496 http://mepopedia.com/forum/read.php?2602,83096,83496#msg-83496
(2).請回答以下問題：
1.導覽列配色與風格設定：淡紫色 迷幻風
2.有無遇到的問題? 一開始顏色改不了 但後來可以了
3.製作感想(你認為導覽列的意義為何？）
設定雖然複雜了些,但很有成就感。
4.製作作業的時間：2~4小時]]> 1045445068 105-1《中國》竹視傳二B-網頁設計 Thu, 05 Jan 2017 10:45:16 +0800 http://mepopedia.com/forum/read.php?2602,83096,83343#msg-83343 http://mepopedia.com/forum/read.php?2602,83096,83343#msg-83343
(2).請回答以下問題：

1.導覽列配色與風格設定：暗色系~

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


3.製作感想 :不用再PS另外再做按鈕方便許多。


4.製作作業的時間 :1小時]]> 1045445131 105-1《中國》竹視傳二B-網頁設計 Mon, 26 Dec 2016 14:39:41 +0800 http://mepopedia.com/forum/read.php?2602,83096,83334#msg-83334 http://mepopedia.com/forum/read.php?2602,83096,83334#msg-83334
(2).請回答以下問題：
1.導覽列配色與風格設定：監獄兔監獄的顏色以及他們皮膚的顏色
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何？） 導覽列的意義應該就跟海報的主視覺一樣，可以是整個網站的一個重點
4.製作作業的時間 30分鐘左右]]> 1035443110 105-1《中國》竹視傳二B-網頁設計 Thu, 22 Dec 2016 15:59:37 +0800 http://mepopedia.com/forum/read.php?2602,83096,83324#msg-83324 http://mepopedia.com/forum/read.php?2602,83096,83324#msg-83324
(2)
1.導覽列配色與風格設定：黑白 ..時尚的...
2.有無遇到的問題 : 沒什麼問題
3.製作感想(你認為導覽列的意義為何？:因為之前期中有做過的關係，現在再做導覽列會比較熟悉。意義是好分類吧XD
4.製作作業的時間 :1小時]]> 1045445053 105-1《中國》竹視傳二B-網頁設計 Thu, 22 Dec 2016 10:33:17 +0800 http://mepopedia.com/forum/read.php?2602,83096,83320#msg-83320 http://mepopedia.com/forum/read.php?2602,83096,83320#msg-83320
1.網頁主題：美國歌手selena gomaz
配色與風格設定： 暖色調
2.有無遇到的問題? 還沒有
3.製作感想 覺得課以直接做導覽列很方便
4.製作作業的時間 1-2小時]]> 1045445095 105-1《中國》竹視傳二B-網頁設計 Thu, 22 Dec 2016 09:18:35 +0800 http://mepopedia.com/forum/read.php?2602,83096,83298#msg-83298 http://mepopedia.com/forum/read.php?2602,83096,83298#msg-83298
(2).請回答以下問題：

1.導覽列配色與風格設定：
以灰色色調、並且與RWBY代表色作為風格。

2.有無遇到的問題?
版權頁離家出走

3.製作感想(你認為導覽列的意義為何？）
雖然主題自由，但就像中午要決定吃什麼午餐一樣困難。


4.製作作業的時間
1~2小時]]> dj520136 105-1《中國》竹視傳二B-網頁設計 Wed, 21 Dec 2016 00:15:11 +0800 http://mepopedia.com/forum/read.php?2602,83096,83272#msg-83272 http://mepopedia.com/forum/read.php?2602,83096,83272#msg-83272
(2).請回答以下問題：
1.導覽列配色與風格設定：櫻桃小丸子 粉紅可愛
2.有無遇到的問題? 按鈕用很久
3.製作感想(你認為導覽列的意義為何？） 可以讓大家選擇
4.製作作業的時間 3小時]]> 1045445044 105-1《中國》竹視傳二B-網頁設計 Mon, 19 Dec 2016 01:16:25 +0800 http://mepopedia.com/forum/read.php?2602,83096,83248#msg-83248 http://mepopedia.com/forum/read.php?2602,83096,83248#msg-83248
(2).請回答以下問題：
1.導覽列配色與風格設定：
可愛的風格及配色
2.有無遇到的問題?
只有一點點，意外的自己做的出來~
3.製作感想(你認為導覽列的意義為何？）
方便點進你所想了解的地方，覺得做出來心情很好哈哈哈
4.製作作業的時間
1~2小時]]> 1045445119 105-1《中國》竹視傳二B-網頁設計 Thu, 15 Dec 2016 10:06:08 +0800 http://mepopedia.com/forum/read.php?2602,83096,83244#msg-83244 http://mepopedia.com/forum/read.php?2602,83096,83244#msg-83244
(2).請回答以下問題：
1.導覽列配色與風格設定：主題是哈士奇，因為牠是寒帶雪橇犬，所以風格以較寒色系為主，搭配寒帶溫暖的陽光讓畫面可以看起來更舒服。
2.有無遇到的問題? 有，css的按鈕地方我看不太懂...
3.製作感想(你認為導覽列的意義為何？）
製作期間遇到很多困難，雖然最後有弄完可是還是有很多地方不熟(真的要來複習一下了...)
導覽列的意義就是為了有更完整的規劃分類，讓人可以更加清楚
4.製作作業的時間
10小時]]> 1045445188 105-1《中國》竹視傳二B-網頁設計 Thu, 15 Dec 2016 03:28:08 +0800 http://mepopedia.com/forum/read.php?2602,83096,83242#msg-83242 http://mepopedia.com/forum/read.php?2602,83096,83242#msg-83242
(2).請回答以下問題：
1.導覽列配色與風格設定：神秘感
2.有無遇到的問題? 按鈕的底色設定不出來，只跑出一小塊色塊的背景
3.製作感想(你認為導覽列的意義為何？）能更清楚了解的知道一些東西, 覺得之前用ps切片工具比較方便也比較快速
但用css導覽列來設定雖然按鈕面複雜了些,但很有趣。
4.製作作業的時間：3~4小時]]> 1045445074 105-1《中國》竹視傳二B-網頁設計 Thu, 15 Dec 2016 01:54:00 +0800 http://mepopedia.com/forum/read.php?2602,83096,83238#msg-83238 http://mepopedia.com/forum/read.php?2602,83096,83238#msg-83238
(2).請回答以下問題：
1.導覽列配色與風格設定：神秘、奇幻
2.有無遇到的問題? 還沒有
3.製作感想(你認為導覽列的意義為何？）
製作按鈕部分的程式碼稍微複雜了一點。
4.製作作業的時間
2~3小時]]> 1045445092 105-1《中國》竹視傳二B-網頁設計 Thu, 15 Dec 2016 00:06:31 +0800 http://mepopedia.com/forum/read.php?2602,83096,83236#msg-83236 http://mepopedia.com/forum/read.php?2602,83096,83236#msg-83236
(2)請回答以下問題：
1.導覽列配色與風格設定：暗紅，復古風
2.有無遇到的問題？
暫時沒有太大的問題，只是偶爾會失去記憶忘記應該做些什麼
3.製作感想
我覺得用css來做導覽列好像有點麻煩，感覺做成圖片再利用Ps切片工具比較方便也比較快速
(你認為導覽列的意義為何？）跳轉至其他頁面，經過分類後頁面也不會過於凌亂
4.製作作業的時間：一至兩小時]]> smile103520 105-1《中國》竹視傳二B-網頁設計 Wed, 14 Dec 2016 23:13:22 +0800