參考講義 [講義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-2c/hw04/hw04-1045445XXX 資料夾內含： 1.首頁命名為index.html 2.一個命名為style.css的css樣式檔 3.images圖檔資料夾(非必要) 存放在 < hw04-學號 > 的資夾內 2.上傳至FTP 3.回覆本篇文章 (1).作業網址 ：http://mepopedia.com/~web105-2c/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?2603,83097,83097#msg-83097 Sat, 24 Oct 2026 21:50:55 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2603,83097,83819#msg-83819 http://mepopedia.com/forum/read.php?2603,83097,83819#msg-83819

1.導覽列配色與風格設定：以黑色為主
2.有無遇到的問題:沒有
3.製作感想(你認為導覽列的意義為何？） :方便瀏覽跟分類
4.製作作業的時間 50分鐘]]> 1045445138 105-1《中國》竹視傳二C-網頁設計 Fri, 13 Jan 2017 16:05:00 +0800 http://mepopedia.com/forum/read.php?2603,83097,83812#msg-83812 http://mepopedia.com/forum/read.php?2603,83097,83812#msg-83812 1.導覽列配色與風格設定： 簡單
2.有無遇到的問題? 好卡
3.製作感想(你認為導覽列的意義為何？） 方便
4.製作作業的時間 2小時]]> H224488882 105-1《中國》竹視傳二C-網頁設計 Fri, 13 Jan 2017 01:08:31 +0800 http://mepopedia.com/forum/read.php?2603,83097,83805#msg-83805 http://mepopedia.com/forum/read.php?2603,83097,83805#msg-83805
1.導覽列配色與風格設定： 日系清新 主色粉紅 輔色淺藍
2.有無遇到的問題? 表格的細部修飾還不上手
3.製作感想(你認為導覽列的意義為何？） 我覺得導覽列佔有很大的地位，尤其是在找資料的時候一點擊就有了，分類也很詳細。
4.製作作業的時間 2小時]]> 1045445081 105-1《中國》竹視傳二C-網頁設計 Thu, 12 Jan 2017 19:45:33 +0800 http://mepopedia.com/forum/read.php?2603,83097,83746#msg-83746 http://mepopedia.com/forum/read.php?2603,83097,83746#msg-83746
(2).請回答以下問題：
1.導覽列配色與風格設定:素色簡約
2.有無遇到的問題? 有同學幫忙沒什麼大問題
3.製作感想(你認為導覽列的意義維和
其實沒有想像中的難 但很花時間
4.製作作業的時間
45分鐘]]> 1045445153 105-1《中國》竹視傳二C-網頁設計 Wed, 11 Jan 2017 12:45:39 +0800 http://mepopedia.com/forum/read.php?2603,83097,83742#msg-83742 http://mepopedia.com/forum/read.php?2603,83097,83742#msg-83742 網站主題:My Melody
(請回答以下問題：
1.導覽列配色與風格設定：粉色系
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）能加速瀏覽主題
4.製作作業的時間:1小時]]> 黃靖家 105-1《中國》竹視傳二C-網頁設計 Wed, 11 Jan 2017 12:06:16 +0800 http://mepopedia.com/forum/read.php?2603,83097,83732#msg-83732 http://mepopedia.com/forum/read.php?2603,83097,83732#msg-83732
(2).請回答以下問題：
1.導覽列配色與風格設定：藍色 清新
2.有無遇到的問題? ：問題都靠講義解決
3.製作感想 ：
可以做自己喜歡的主題真的很好玩，網頁的資料也可以幫助別人
在做完後，瀏覽自己的網頁，真的很有成就感
， 但也有許多複雜的設定，搞得我很頭痛，
但只要細心一些，都可以找到答案。

4.製作作業的時間 ：30分~1小時之間]]> 曾慶恩 105-1《中國》竹視傳二C-網頁設計 Wed, 11 Jan 2017 11:24:14 +0800 http://mepopedia.com/forum/read.php?2603,83097,83681#msg-83681 http://mepopedia.com/forum/read.php?2603,83097,83681#msg-83681
(2).請回答以下問題：
1.導覽列配色與風格設定： 清新簡單、看了讓人舒服
2.有無遇到的問題? ：講義上都尋找的到解答
3.製作感想 ：比聽起來簡單許多
4.製作作業的時間 ：30分~1小時之間]]> weiwei 105-1《中國》竹視傳二C-網頁設計 Tue, 10 Jan 2017 20:36:12 +0800 http://mepopedia.com/forum/read.php?2603,83097,83644#msg-83644 http://mepopedia.com/forum/read.php?2603,83097,83644#msg-83644 (2)
1.導覽列配色與風格設定：
這次我做的是嚕嚕米
配色是以繽紛的風格，整體活潑可愛，跟夢幻的嚕嚕米一樣可愛

2.有無遇到的問題：
有
導覽列會一直跑掉，還好有強大的同學幫助後來終於做好了

3.製作感想(你認為導覽列的意義為何？）

可以讓別人知道你的網頁有什麼資料
能夠很淺顯易懂的瀏覽自己的網頁
這次做我很喜歡的嚕嚕米，我也找了很多資料想分享給大家
真的超可愛的，很開心


4.製作作業的時間
5~6個小時
哈哈哈哈找資料花蠻久時間!]]> 1045445144 105-1《中國》竹視傳二C-網頁設計 Tue, 10 Jan 2017 03:11:39 +0800 http://mepopedia.com/forum/read.php?2603,83097,83608#msg-83608 http://mepopedia.com/forum/read.php?2603,83097,83608#msg-83608
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1025445200

(2).請回答以下問題：
1.導覽列配色與風格設定： 清新舒爽的藍色。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）
把每個介紹項目細分好可以更清楚知道網頁所需要的資訊有哪些讓人可以更簡單輕鬆的點選到需要的位子
4.製作作業的時間 :30分鐘]]> 1025445200 105-1《中國》竹視傳二C-網頁設計 Sun, 08 Jan 2017 22:46:35 +0800 http://mepopedia.com/forum/read.php?2603,83097,83581#msg-83581 http://mepopedia.com/forum/read.php?2603,83097,83581#msg-83581
(2).請回答以下問題：
1.導覽列配色與風格設定：利用黑色色調當整體風格配置 提升整體畫面配色質感
2.有無遇到的問題? 沒
3.製作感想(你認為導覽列的意義為何？）方便清楚瀏覽
4.製作作業的時間 一個小時]]> 蔡薰緯 105-1《中國》竹視傳二C-網頁設計 Sat, 07 Jan 2017 01:58:35 +0800 http://mepopedia.com/forum/read.php?2603,83097,83524#msg-83524 http://mepopedia.com/forum/read.php?2603,83097,83524#msg-83524 網站主題:犬夜叉
(請回答以下問題：
1.導覽列配色與風格設定：藍色配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）很棒
4.製作作業的時間:1-2小]]> zxzx10110774 105-1《中國》竹視傳二C-網頁設計 Thu, 05 Jan 2017 14:05:36 +0800 http://mepopedia.com/forum/read.php?2603,83097,83464#msg-83464 http://mepopedia.com/forum/read.php?2603,83097,83464#msg-83464
(2).請回答以下問題：
1.導覽列配色與風格設定： 粉色
2.有無遇到的問題? NO
3.製作感想(你認為導覽列的意義為何？） NO
4.製作作業的時間 1HR]]> Saigyouji 105-1《中國》竹視傳二C-網頁設計 Wed, 04 Jan 2017 12:08:04 +0800 http://mepopedia.com/forum/read.php?2603,83097,83459#msg-83459 http://mepopedia.com/forum/read.php?2603,83097,83459#msg-83459
(2).請回答以下問題：
1.導覽列配色與風格設定：星際風
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）我覺得很棒
4.製作作業的時間 30MIN]]> 113039 105-1《中國》竹視傳二C-網頁設計 Wed, 04 Jan 2017 11:43:34 +0800 http://mepopedia.com/forum/read.php?2603,83097,83448#msg-83448 http://mepopedia.com/forum/read.php?2603,83097,83448#msg-83448 導覽列配色與風格設定：
偵探就是要灰灰的感覺阿~~~~
有無遇到的問題：
製作感想(你認為導覽列的意義為何？）
其實真的好累喔 但成就感我就不說了ˊ ˋ
製作作業的時間
３小時 up]]> 1045445177 105-1《中國》竹視傳二C-網頁設計 Wed, 04 Jan 2017 01:28:06 +0800 http://mepopedia.com/forum/read.php?2603,83097,83437#msg-83437 http://mepopedia.com/forum/read.php?2603,83097,83437#msg-83437 (請回答以下問題：
1.導覽列配色與風格設定：黑和白色 簡潔俐落的風格
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 能讓網頁使用起來更清楚方便
4.製作作業的時間:3小時]]> loveelise1021 105-1《中國》竹視傳二C-網頁設計 Tue, 03 Jan 2017 20:42:28 +0800 http://mepopedia.com/forum/read.php?2603,83097,83421#msg-83421 http://mepopedia.com/forum/read.php?2603,83097,83421#msg-83421 網站主題：HURTS
(2).請回答以下問題：
1.導覽列配色與風格設定：灰色和綠色 簡潔俐落的風格
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 能讓網頁使用起來更清楚方便
4.製作作業的時間:二小時]]> 1045445150 105-1《中國》竹視傳二C-網頁設計 Sun, 01 Jan 2017 18:07:08 +0800 http://mepopedia.com/forum/read.php?2603,83097,83396#msg-83396 http://mepopedia.com/forum/read.php?2603,83097,83396#msg-83396 (2).請回答以下問題：
1.導覽列配色與風格設定:運用暗紫色和黑色配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和
做完覺得滿有成就感的
4.製作作業的時間
30分鐘]]> 1045445075 105-1《中國》竹視傳二C-網頁設計 Thu, 29 Dec 2016 13:22:50 +0800 http://mepopedia.com/forum/read.php?2603,83097,83300#msg-83300 http://mepopedia.com/forum/read.php?2603,83097,83300#msg-83300
(2).請回答以下問題：

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

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

3.製作感想(你認為導覽列的意義為何？）
雖然主題自由，但就像中午要決定吃什麼午餐一樣困難。]]> dj520136 105-1《中國》竹視傳二C-網頁設計 Wed, 21 Dec 2016 00:19:32 +0800 http://mepopedia.com/forum/read.php?2603,83097,83216#msg-83216 http://mepopedia.com/forum/read.php?2603,83097,83216#msg-83216 (2)
1.導覽列配色與風格設定：
黑白的，簡潔

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

3.製作感想(你認為導覽列的意義為何？）
表明網頁的走向，方便瀏覽
個人還是比較偏愛自己放圖的導覽列就是了
4.製作作業的時間
2小時]]> 1045445141 105-1《中國》竹視傳二C-網頁設計 Wed, 14 Dec 2016 03:07:33 +0800 http://mepopedia.com/forum/read.php?2603,83097,83215#msg-83215 http://mepopedia.com/forum/read.php?2603,83097,83215#msg-83215
(2).請回答以下問題：

1.導覽列配色與風格設定： 愛莉絲的顏色，藍與白，藍代表愛莉絲，白代表愛莉絲的單純善良。
2.有無遇到的問題： 設定錯地方，結果還在調半天。
3.製作感想：比之前還要快，只是設定的地方變多
4.製作作業的時間：1個小時半]]> 1045445069 105-1《中國》竹視傳二C-網頁設計 Wed, 14 Dec 2016 02:36:40 +0800 http://mepopedia.com/forum/read.php?2603,83097,83212#msg-83212 http://mepopedia.com/forum/read.php?2603,83097,83212#msg-83212
(2).請回答以下問題：

1.導覽列配色與風格設定： 以Running man 的主要黃色調作為基礎
2.有無遇到的問題： X
3.製作感想：個人還是比較喜歡切片方式的導覽列，也比較好設計。
4.製作作業的時間：2個小時半]]> Jieru 105-1《中國》竹視傳二C-網頁設計 Wed, 14 Dec 2016 01:27:56 +0800 http://mepopedia.com/forum/read.php?2603,83097,83201#msg-83201 http://mepopedia.com/forum/read.php?2603,83097,83201#msg-83201
(2).請回答以下問題：
1.導覽列配色與風格設定：這次是以宇宙作為主題，所以配色上都略為暗
2.有無遇到的問題? 因為連續兩週都請公假進度大落後......都沒有上到課，然後自己看著講義還是有點障礙......但還好問一下同學即可解決。
3.製作感想(你認為導覽列的意義為何？） 因為這次是做自己喜歡的樂團，所以做起來會特別開心，就好像把追星的所有心力都花在這上面哈哈
4.製作作業的時間 兩個小時]]> 1045445042 105-1《中國》竹視傳二C-網頁設計 Tue, 13 Dec 2016 15:05:38 +0800 http://mepopedia.com/forum/read.php?2603,83097,83196#msg-83196 http://mepopedia.com/forum/read.php?2603,83097,83196#msg-83196
(2).請回答以下問題：
1.導覽列配色與風格設定：可愛的味道多一點和一點活潑感

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

3.製作感想(你認為導覽列的意義為何？） ：越做越上手，如果太久沒有碰會忘記；導覽列會讓網頁裡面的內容更好搜尋

4.製作作業的時間 ： 快一小時]]> 簡瑜萱 105-1《中國》竹視傳二C-網頁設計 Mon, 12 Dec 2016 21:15:38 +0800 http://mepopedia.com/forum/read.php?2603,83097,83182#msg-83182 http://mepopedia.com/forum/read.php?2603,83097,83182#msg-83182
(2).請回答以下問題：
1.導覽列配色與風格設定：全部都以藍色為主 符合BTS的陽光可愛
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 可以更清楚找到想要知道的內容
4.製作作業的時間 接近2小時]]> 1045445009 105-1《中國》竹視傳二C-網頁設計 Thu, 08 Dec 2016 23:19:12 +0800 http://mepopedia.com/forum/read.php?2603,83097,83156#msg-83156 http://mepopedia.com/forum/read.php?2603,83097,83156#msg-83156
(2).請回答以下問題：
1.導覽列配色與風格設定：

《Mr. Pickles》
這次的主題比較偏向恐怖風格~他是一隻撒旦養過的牧羊犬，
卡通隱含(其實都很明刀明槍)了太多撒旦教、光明會和神秘學的訊息，
和每集必有的血腥殺人或惡魔祟拜鏡頭，
所以很快就吸引了數以萬計的陰謀論者的愛戴和觀看。
背景就放跟牧羊犬相似的配底~
一開始也是因為純黑色對於眼睛太過刺激，
所以用比較緩和的灰色~~~~
希望觀看的人都跟我依樣喜愛他~

2.有無遇到的問題?

中間有些設定小失意的一下，大致上沒有太多的困難~(目前

3.製作感想(你認為導覽列的意義為何？）

這次用我一直很喜歡的國外限制級動畫，
《Mr. Pickles》絕對是一部兒童不宜的動畫，
充斥各種噴血、猥褻的畫面，
隨著劇情發展每每都有一種「God！我到底看了什麼！」的感覺，
雖然獵奇到不行，但這樣的美式幽默真的很舒壓呢！

4.製作作業的時間

大概1~2小時]]> Hus,Ching-Chiech 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 10:19:54 +0800 http://mepopedia.com/forum/read.php?2603,83097,83153#msg-83153 http://mepopedia.com/forum/read.php?2603,83097,83153#msg-83153
(2).請回答以下問題：
1.導覽列配色與風格設定：
我用大英雄天團的杯麵作為主題，主要顏色有紅色和白色。簡單不花俏很基本的配色，禿顯杯麵純白又可愛。
2.有無遇到的問題?
用cc版本做還是依樣苦手，在思考要載cs6版本還是繼續用cc((其實就是自己英文很差看不懂就是了X(
3.製作感想(你認為導覽列的意義為何？）
不會用ps製作切片的可以用這種方法依樣可以做出導覽列~但我個人還是比較喜歡用切片做
4.製作作業的時間
1小時實際製作時間]]> 1234567809 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 02:09:55 +0800 http://mepopedia.com/forum/read.php?2603,83097,83152#msg-83152 http://mepopedia.com/forum/read.php?2603,83097,83152#msg-83152
請回答以下問題：
1.導覽列配色與風格設定： 小火車風格，所以使用紅色
2.有無遇到的問題? 有點小困難，已解決
3.製作感想(你認為導覽列的意義為何？）當然是導覽阿
4.製作作業的時間 : 四小時]]> 時尚時尚最時尚 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 01:46:26 +0800 http://mepopedia.com/forum/read.php?2603,83097,83151#msg-83151 http://mepopedia.com/forum/read.php?2603,83097,83151#msg-83151
(2).請回答以下問題：
1.導覽列配色與風格設定：神秘復古風
2.有無遇到的問題? no
3.製作感想-做完超有成就感
4.製作作業的時間 2小時]]> 1045445009 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 01:27:11 +0800 http://mepopedia.com/forum/read.php?2603,83097,83150#msg-83150 http://mepopedia.com/forum/read.php?2603,83097,83150#msg-83150
2導覽列配色與風格設定:可愛

3有無遇到的問題： 有點忘了

4製作感想:有趣

5製作作業的時間：2小時]]> 1045445102 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 01:00:55 +0800 http://mepopedia.com/forum/read.php?2603,83097,83149#msg-83149 http://mepopedia.com/forum/read.php?2603,83097,83149#msg-83149
(2).請回答以下問題：
1.導覽列配色與風格設定：
簡單黑白兩色(有加進一小塊不同於黑白的顏色)，因為niconico網站本身就是以黑白兩色為主調，所以這次期末也會朝著簡潔單色去做(之後可能會再做微調)
2.有無遇到的問題？
沒有，但是久久沒碰網頁設計真的會忘光(爆
3.製作感想(你認為導覽列的意義為何？）：
覺得導覽列讓我們省略了做圖置入和切片的動作，也省了一長串的圖片語法，比起期中的html，現在這個看起來乾淨很多XDDDDD
4.製作作業的時間：
1小時]]> j29927381 105-1《中國》竹視傳二C-網頁設計 Wed, 07 Dec 2016 00:59:30 +0800