參考講義 [講義04] 以CSS製作網頁導覽列 http://mepopedia.com/forum/read.php?804,17032 製作說明 1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作，以及使用以下的語法完成。 2.可以以期末作業主題製作完整的一頁，也可以只做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。 3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-105xxxxxxx 資料夾中 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/~css106-2a/hw04/hw04-1055445XXX 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾(非必要) 存放在 < hw04-學號 > 的資夾內 2.上傳至FTP 3.回覆本篇文章 (1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055445XXX (2).請回答以下問題： 1.導覽列配色與風格設定： 2.有無遇到的問題? 3.製作感想(你認為導覽列的意義為何？） 4.製作作業的時間 [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/　 (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/~web105-2c/hw04/hw04-1045445045/ http://mepopedia.com/~web105-2c/hw04/hw04-1045445189/ 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?2689,86443,86443#msg-86443 Sun, 25 Oct 2026 03:08:17 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2689,86443,87609#msg-87609 http://mepopedia.com/forum/read.php?2689,86443,87609#msg-87609
(2).請回答以下問題：
1.網頁主題： 海賊王
2.配色與風格設定： 黑白灰
2.有無遇到的問題? 無
3.製作感想 難
4.製作作業的時間 忘了]]> aok15958 106-1《中國》竹視傳二A-網頁設計 Sat, 20 Jan 2018 01:07:51 +0800 http://mepopedia.com/forum/read.php?2689,86443,87479#msg-87479 http://mepopedia.com/forum/read.php?2689,86443,87479#msg-87479
(2).請回答以下問題：
1.導覽列配色與風格設定: 粉紅色
2.有無遇到的問題:
3.製作感想:還不錯
4.製作作業的時間:忘了]]> 1055445181 106-1《中國》竹視傳二A-網頁設計 Wed, 17 Jan 2018 00:40:13 +0800 http://mepopedia.com/forum/read.php?2689,86443,87422#msg-87422 http://mepopedia.com/forum/read.php?2689,86443,87422#msg-87422
(2).請回答以下問題：
1.導覽列配色與風格設定： 單色調.低調藍+清爽白
2.有無遇到的問題? 分頁連結搞很久
3.製作感想(你認為導覽列的意義為何？） 網頁基本訓練
4.製作作業的時間 30分鐘]]> 1055445010 106-1《中國》竹視傳二A-網頁設計 Tue, 16 Jan 2018 15:32:39 +0800 http://mepopedia.com/forum/read.php?2689,86443,87418#msg-87418 http://mepopedia.com/forum/read.php?2689,86443,87418#msg-87418
(2).請回答以下問題：
1.導覽列配色與風格設定： 米色系,簡單乾淨
2.有無遇到的問題:沒有問題
3.製作感想:跟期中的蠻像沒太大問題
4.製作作業的時間 :20分鐘]]> 1055445193 106-1《中國》竹視傳二A-網頁設計 Tue, 16 Jan 2018 15:24:08 +0800 http://mepopedia.com/forum/read.php?2689,86443,87254#msg-87254 http://mepopedia.com/forum/read.php?2689,86443,87254#msg-87254
.請回答以下問題：
1.網頁主題：nba
配色與風格設定：黑色
2.有無遇到的問題:無
3.製作感想:我覺得有點難
4.製作作業的時間: 2小時]]> cchjjs002 106-1《中國》竹視傳二A-網頁設計 Thu, 11 Jan 2018 17:37:53 +0800 http://mepopedia.com/forum/read.php?2689,86443,87211#msg-87211 http://mepopedia.com/forum/read.php?2689,86443,87211#msg-87211
(2).請回答以下問題：
1.導覽列配色與風格設定： 簡約乾淨
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 之前練習過多次，所以這次作起來蠻輕鬆的!
4.製作作業的時間 :1小時以內]]> 1055445204 106-1《中國》竹視傳二A-網頁設計 Thu, 11 Jan 2018 02:46:32 +0800 http://mepopedia.com/forum/read.php?2689,86443,87130#msg-87130 http://mepopedia.com/forum/read.php?2689,86443,87130#msg-87130 有無遇到的問題?:製作時間較久
製作感想(你認為導覽列的意義為何？）:一覽無遺
製作作業的時間:1~2小時

作業網址:http://mepopedia.com/~css106-2a/hw04/hw04-1055445094]]> 陳柏宇 106-1《中國》竹視傳二A-網頁設計 Thu, 04 Jan 2018 09:15:45 +0800 http://mepopedia.com/forum/read.php?2689,86443,87092#msg-87092 http://mepopedia.com/forum/read.php?2689,86443,87092#msg-87092
(1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055443135

(2).請回答以下問題：
1.導覽列配色與風格設定： 蓝色
2.有無遇到的問題? 按钮大小一开始能不清楚 不知道在哪里设置
3.製作感想(你認為導覽列的意義為何？） 比切图来的方便
4.製作作業的時間 3个小时]]> zhou 106-1《中國》竹視傳二A-網頁設計 Tue, 02 Jan 2018 21:03:58 +0800 http://mepopedia.com/forum/read.php?2689,86443,87085#msg-87085 http://mepopedia.com/forum/read.php?2689,86443,87085#msg-87085
(2).請回答以下問題：
1.導覽列配色與風格設定:米羅
2.有無遇到的問題:弄不太清楚按鈕的設定
3.製作感想:終於做完了
4.製作作業的時間:2~3天]]> 何芯萍 106-1《中國》竹視傳二A-網頁設計 Sat, 30 Dec 2017 22:34:42 +0800 http://mepopedia.com/forum/read.php?2689,86443,87017#msg-87017 http://mepopedia.com/forum/read.php?2689,86443,87017#msg-87017
(2).請回答以下問題：
1.導覽列配色與風格設定： 黑白
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 省時間
4.製作作業的時間 兩天]]> h2207538 106-1《中國》竹視傳二A-網頁設計 Wed, 27 Dec 2017 22:36:32 +0800 http://mepopedia.com/forum/read.php?2689,86443,87012#msg-87012 http://mepopedia.com/forum/read.php?2689,86443,87012#msg-87012
(2).請回答以下問題：
1.導覽列配色與風格設定： 文青
2.有無遇到的問題:沒什麼問題
3.製作感想:孰悉網頁語法後就能再控制其他細節(色系)，讓頁面更賞心悅目！
4.製作作業的時間 :2hr]]> 1055445043 106-1《中國》竹視傳二A-網頁設計 Wed, 27 Dec 2017 21:52:09 +0800 http://mepopedia.com/forum/read.php?2689,86443,86969#msg-86969 http://mepopedia.com/forum/read.php?2689,86443,86969#msg-86969 1.導覽列配色與風格設定：復古風
2.有無遇到的問題? :沒有
3.製作感想(你認為導覽列的意義為何？）: 更方便製作
4.製作作業的時間 :2小時]]> 1055445055 106-1《中國》竹視傳二A-網頁設計 Fri, 22 Dec 2017 13:53:48 +0800 http://mepopedia.com/forum/read.php?2689,86443,86919#msg-86919 http://mepopedia.com/forum/read.php?2689,86443,86919#msg-86919
(1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055445085

(2).請回答以下問題：
1.導覽列配色與風格設定：
古風 簡約

2.有無遇到的問題?
製作導覽列的設定讓我卡一陣子。

3.製作感想(你認為導覽列的意義為何？）
可以方便點閱其他頁面。

4.製作作業的時間
4小時]]> 綰瑛 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 09:20:31 +0800 http://mepopedia.com/forum/read.php?2689,86443,86915#msg-86915 http://mepopedia.com/forum/read.php?2689,86443,86915#msg-86915

(1).作業網址：http://mepopedia.com/~css106-2a/hw04/hw04-1055445007
(2).請回答以下問題：
1.導覽列配色與風格設定：卡通
2.有無遇到的問題? 沒
3.製作感想：更輕鬆製作
4.製作作業的時間 ：4小時]]> wuyujie 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 04:40:26 +0800 http://mepopedia.com/forum/read.php?2689,86443,86913#msg-86913 http://mepopedia.com/forum/read.php?2689,86443,86913#msg-86913
(2).請回答以下問題：
1.導覽列配色與風格設定： 綠色
2.有無遇到的問題? 圖片大小設定
3.製作感想(你認為導覽列的意義為何？）讓人可以清楚的切換網頁
4.製作作業的時間 40分]]> a5253141 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 02:43:32 +0800 http://mepopedia.com/forum/read.php?2689,86443,86911#msg-86911 http://mepopedia.com/forum/read.php?2689,86443,86911#msg-86911
(2).請回答以下問題：
1.導覽列配色與風格設定：成熟穩重 黑灰
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 很累
4.製作作業的時間 3小時]]> 1055445046 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 00:59:04 +0800 http://mepopedia.com/forum/read.php?2689,86443,86909#msg-86909 http://mepopedia.com/forum/read.php?2689,86443,86909#msg-86909

(2).請回答以下問題：
1.導覽列配色與風格設定:清新的淺藍
2.有無遇到的問題?:無
3.製作感想(你認為導覽列的意義為何？） 比較簡單
4.製作作業的時間 1小時]]> jing52096 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 00:14:25 +0800 http://mepopedia.com/forum/read.php?2689,86443,86907#msg-86907 http://mepopedia.com/forum/read.php?2689,86443,86907#msg-86907
(2).請回答以下問題：
1.導覽列配色與風格設定： 黃 樸素
2.有無遇到的問題? 有
3.製作感想(你認為導覽列的意義為何？）複習
4.製作作業的時間 2小時]]> 1055445196 106-1《中國》竹視傳二A-網頁設計 Thu, 21 Dec 2017 00:01:14 +0800 http://mepopedia.com/forum/read.php?2689,86443,86897#msg-86897 http://mepopedia.com/forum/read.php?2689,86443,86897#msg-86897
(2).請回答以下問題：
1.導覽列配色與風格設定:黑紫色神秘風格
2.有無遇到的問題?:無
3.製作感想(你認為導覽列的意義為何？） 比較簡單
4.製作作業的時間 2小時]]> 1055445196 106-1《中國》竹視傳二A-網頁設計 Wed, 20 Dec 2017 22:39:08 +0800 http://mepopedia.com/forum/read.php?2689,86443,86896#msg-86896 http://mepopedia.com/forum/read.php?2689,86443,86896#msg-86896 (2).請回答以下問題：
1.導覽列配色與風格設定：漫畫的配色灰黑白
2.有無遇到的問題? 無
3.製作感想 努力配置
4.製作作業的時間 50分鐘]]> 1035443128 106-1《中國》竹視傳二A-網頁設計 Wed, 20 Dec 2017 22:33:02 +0800 http://mepopedia.com/forum/read.php?2689,86443,86887#msg-86887 http://mepopedia.com/forum/read.php?2689,86443,86887#msg-86887
(2).請回答以下問題：
1.導覽列配色與風格設定： 簡約
2.有無遇到的問題:邊框每次都用不好
3.製作感想:比上次花更多時間讓背景變得更好
4.製作作業的時間 :3hr]]> 1055445204 106-1《中國》竹視傳二A-網頁設計 Wed, 20 Dec 2017 18:40:42 +0800 http://mepopedia.com/forum/read.php?2689,86443,86883#msg-86883 http://mepopedia.com/forum/read.php?2689,86443,86883#msg-86883 1.導覽列配色與風格設定: 溫婉、柔和
2.有無遇到的問題? : 一直想不到做什麼哈哈哈哈
3.製作感想(你認為導覽列的意義為何？）: 讓畫面看起來簡潔，且方便閱讀跟分類。
4.製作作業的時間 :2小時]]> ukiss52007 106-1《中國》竹視傳二A-網頁設計 Wed, 20 Dec 2017 15:03:51 +0800 http://mepopedia.com/forum/read.php?2689,86443,86826#msg-86826 http://mepopedia.com/forum/read.php?2689,86443,86826#msg-86826
(2).請回答以下問題：
1.導覽列配色與風格設定： Hello Kitty
2.有無遇到的問題? 無
3.製作感想: 很有成就感
4.製作作業的時間 2小時左右]]> yuyun 106-1《中國》竹視傳二A-網頁設計 Tue, 19 Dec 2017 15:19:21 +0800 http://mepopedia.com/forum/read.php?2689,86443,86808#msg-86808 http://mepopedia.com/forum/read.php?2689,86443,86808#msg-86808
(2).請回答以下問題：
1.導覽列配色與風格設定：黑白灰紅 簡約
2.有無遇到的問題? 大小問題
3.製作感想(你認為導覽列的意義為何？）越來越高端了！ 主要的介紹和整體的風格
4.製作作業的時間 不久吧。。。！]]> 1055445064 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 09:15:18 +0800 http://mepopedia.com/forum/read.php?2689,86443,86807#msg-86807 http://mepopedia.com/forum/read.php?2689,86443,86807#msg-86807 (1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055445178
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單時尚
2.有無遇到的問題? 細節處理調整很花時間
3.製作感想:製作起來很有就感
4.製作作業的時間: 3-4小時]]> 1055445178 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 09:10:26 +0800 http://mepopedia.com/forum/read.php?2689,86443,86806#msg-86806 http://mepopedia.com/forum/read.php?2689,86443,86806#msg-86806
(1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055445103

(2).請回答以下問題：
1.導覽列配色與風格設定：可愛風
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 讓看的人更明白要看什麼內容
4.製作作業的時間 1天]]> LRU 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 09:09:39 +0800 http://mepopedia.com/forum/read.php?2689,86443,86805#msg-86805 http://mepopedia.com/forum/read.php?2689,86443,86805#msg-86805 1.導覽列配色與風格設定： 簡約風
2.有無遇到的問題? :想題目想很久
3.製作感想(你認為導覽列的意義為何？）: 方便我們閱讀與分類
4.製作作業的時間 :一個下午]]> 1055445148 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 09:08:48 +0800 http://mepopedia.com/forum/read.php?2689,86443,86804#msg-86804 http://mepopedia.com/forum/read.php?2689,86443,86804#msg-86804 (2).請回答以下問題：
1.導覽列配色與風格設定:可愛甜蜜
2.有無遇到的問題? 比較困難
3.製作感想(你認為導覽列的意義為何？）但還是有無限成就感:")
4.製作作業的時間 2個小時]]> 1055445160 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 09:00:03 +0800 http://mepopedia.com/forum/read.php?2689,86443,86803#msg-86803 http://mepopedia.com/forum/read.php?2689,86443,86803#msg-86803
(1).作業網址 ：http://mepopedia.com/~css106-2a/hw04/hw04-1055445004

(2).請回答以下問題：
1.導覽列配色與風格設定:清新的紅白色系
2.有無遇到的問題:footer大小調不準
3.製作感想:要重頭開始做新的網頁了....
4.製作作業的時間:1天]]> 1055445004 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 08:59:21 +0800 http://mepopedia.com/forum/read.php?2689,86443,86802#msg-86802 http://mepopedia.com/forum/read.php?2689,86443,86802#msg-86802 (2).請回答以下問題：
1.導覽列配色與風格設定 : 皮克斯動畫接帶給大家神秘感。(:P)
2.有無遇到的問題 : 沒有什麼大問題。(:D
3.製作感想 : 製作起來很又常就感，也會嘗試一些語法。:)-D
4.製作作業的時間 : 2-3小時。X(]]> 1055445082 106-1《中國》竹視傳二A-網頁設計 Thu, 14 Dec 2017 01:35:54 +0800