Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[作業04] 以CSS製作網頁導覽列

105-1《中國》竹視傳二C-網頁設計 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
  1. 1. 參考講義
  2. 2. 製作說明
  3. 3. 參考語法
  4. 3.1 新增index.html檔案，貼上以下語法
  5. 3.2 完整語法（含header)
  6. 3.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
  7. 3.3.1 第一種置中型
  8. 3.3.2 第二種靠左型
  9. 4. 繳交方式
  10. 5. 參考範例

1. 參考講義


[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

2. 製作說明


1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作，以及使用以下的語法完成。

2.可以以期末作業主題製作完整的一頁，也可以只做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-104xxxxxxx 資料夾中

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

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

（1 ）以清單方式 ＜ul＞及＜li＞利用CSS製作導覽列
（3 ）熟悉以清單方式 ＜ul＞及＜li＞製作導覽列的語法，自行修改成設定的風格
（4 ）如何將圖片與色彩搭配出有質感的導覽列。

3. 參考語法



1. 新增index.html檔案，貼上以下語法



<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>

2. 完整語法（含header)


<!DOCTYPE html> <html> <head> <title>網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"></div> <ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul> </div> </body> </html>

[hr]

3. 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可


[hr]

1. 第一種置中型


#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]

2. 第二種靠左型


#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]

4. 繳交方式


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]

5. 參考範例



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/



Edited 1 time(s). Last edit at 11/30/2016 08:29PM by JinJin.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445045 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445045

(2).請回答以下問題：
1.導覽列配色與風格設定:配合這次作的樂團主視覺來設定顏色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和
其實沒有想像中的難
4.製作作業的時間
30分鐘

推薦 / 評論　 分享到Facebook     回應文章 Quote
松本.豪 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
1.作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445117

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

導覽列的重要性在於能夠快速地使觀者掌握整個網頁的主題內容， 尤其是內容豐富的網頁
像是之前的期中作業-蝴蝶蘭的簡介，品種眾多，若有導覽列可清楚辨別並且及時找到觀者
所要瀏覽的內容， 網頁也清楚明瞭，行列分明，整體通暢，瀏覽順利。

● 欲呈現風格：水墨、灑脫、自在、現代

● 網頁架構與內容主色系：

背景-白色，黑色。
導覽列-白底黑字、橘底白字。
內容-灰色。

● 網站主題：Summer story-金魚
● 製作動機：看著悠游自在的金魚，心境感到暢快，在一片翠綠下悠然而游，格外典雅，
在夏日歡樂的慶典下，可謂夏季風物詩，因此網頁取名為夏天的故事，在這個網頁中，將
會呈現金魚簡介，品種、照顧方式、關於金魚的相關藝術作品，以及視頻，夏日的故事不
會因冬天的到來而結束，故事才正要開始。

3.有無遇到的問題：導覽列做完之後，最後一個欄位會跳到下一行，後續調整導覽列尺寸，
雖然不會跳行，但是最右側橘色分隔線因尺寸問題而加粗。

4.製作感想：以css製作導覽列比圖片的方式要來的容易，圖片方式製作較為繁複，以css
的方式製作，所呈現的風格也簡潔明瞭，個人較為喜歡css方式所製作的導覽列。

5.製作作業的時間： 2個小時



Edited 6 time(s). Last edit at 12/03/2016 03:18PM by 松本.豪.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445212 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445212

(2).導覽列配色與風格設定：
一.建築大多都是以暗色系來呈現，所以用了灰色系列來表現懷舊復古風
二.沒有遇到甚麼問題
三.製作感想：這次還蠻簡單的
四.製作作業的時間30分鐘

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445189 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445189 

(2).請回答以下問題： 
1.導覽列配色與風格設定： 小王子是個溫暖的故事但是又可以讓人思考，所以我用了玫瑰的顏色(粉嫩的玫瑰)還有藍色來配色。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 
可以讓人方便的找到自己要的資訊位置，沒有導覽頁的話可能要每個都點才能知道裡面是什麼內容
4.製作作業的時間 :30分鐘

推薦 / 評論　 分享到Facebook     回應文章 Quote
朱盈穎 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445003

(2).請回答以下問題：
1.導覽列配色與風格設定：
由於主題是一部在敘述機器人與人類之間的種種矛盾，所以使用的基本都是有點科技感的顏色
2.有無遇到的問題?
contant 的底色我特別做成有點透明感，在 chrome 和 fire fox 都能正常顯示，但一旦到 IE 就變成底色全部不見 ( ?´_ゝ｀)
P.s.內文我都暫時先用其他文字替代，所以會有點亂，sorry...
還有一但版面縮小到某個數值導覽列就會跑掉 (´∩｀。)
3.製作感想(你認為導覽列的意義為何？）
可以讓觀者方便的尋找到想找的東西 spinning smiley sticking its tongue out
4.製作作業的時間
大概是3個多小時



Edited 1 time(s). Last edit at 12/04/2016 01:18PM by 朱盈穎.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445174 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445174

(2).請回答以下問題：
1.導覽列配色與風格設定:柔和配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）方便觀看
4.製作作業的時間
一個晚上



Edited 1 time(s). Last edit at 12/05/2016 11:56PM by 1045445174.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
廖芳如 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445135
網站主題：hyukoh
(2).請回答以下問題：
1.導覽列配色與風格設定：土黃配咖啡色 風格為溫暖 簡潔得感覺
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何？） 很有趣 清楚分辨內容
4.製作作業的時間:三小時



Edited 2 time(s). Last edit at 12/06/2016 06:41PM by 廖芳如.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445195 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445195

(2).請回答以下問題：
1.導覽列配色與風格設定： 藍色比較溫暖，像天空的顏色
2.有無遇到的問題? 根據講義解決了
3.製作感想(你認為導覽列的意義為何？）
4.製作作業的時間 2個小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
sharon111688 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445019

(2).請回答以下問題：
1.導覽列配色與風格設定： 可愛粉嫩的少女風格
2.有無遇到的問題? Safari顯示的效果跟Chrome顯示的效果不一樣，真的會很怒，但是有時候又一樣，希望他聽話一點
3.製作感想：這次比較簡單 希望也能跟上腳步～
4.製作作業的時間 1個多小時＋改圖

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445105 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445105

(2).請回答以下問題：
1.導覽列配色與風格設定： 我的配色主要是以豆豆先生的主色調去配置 風格是卡通風
2.有無遇到的問題? 目前還好沒有遇到甚麼問題
3.製作感想(你認為導覽列的意義為何？） 我覺得是指引觀看者很重要的指標
如果沒有導覽列整個網頁的架構就比較不完整而且會很雜亂
4.製作作業的時間 1~2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
Peiwei [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445036
(2)
1.導覽列配色與風格設定：
配色是以蛋黃哥的黃色下去搭配，整體還是走我一貫的整潔風，但是又要可愛可愛的感覺～

2.有無遇到的問題：
這次沒有～

3.製作感想(你認為導覽列的意義為何？）
讓別人清楚知道你的網頁有些什麼～簡易的瀏覽你的網頁～去了解你所做的東西～
這次又可以做自己想做的東西了！！！我要做的比期中好～更有成就感～grinning smiley
但用語法寫導覽列真的有點麻煩啊！！！！sad smiley

4.製作作業的時間
３小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
王宜雯 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445015

(2).請回答以下問題：
1.導覽列配色與風格設定： 我是以介紹客家文化園區的市集為主，以它們的其中一幅代表作粉系插畫風形式為設定目表與執行
2.有無遇到的問題? 目前還好沒有遇到甚麼很大的問題
3.製作感想(你認為導覽列的意義為何？）透過導覽列，可以使觀看者更詳細的了解內容，更是網頁建構的執行主標。
4.製作作業的時間 1~2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445018 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445018
網站主題：台灣夜市
(2).請回答以下問題：
1.導覽列配色與風格設定：這次的顏色有點可愛，讓他有種夜市的好玩感覺
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何？）方便分類項目及尋找
4.製作作業的時間:三小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445084 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
1 作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445084

2導覽列配色與風格設定:活潑 溫暖

3有無遇到的問題： 無

4製作感想:越做越上手了

5製作作業的時間：一小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445102 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
1 作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445102

2導覽列配色與風格設定:可愛

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

4製作感想:有趣

5製作作業的時間：2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
j29927381 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445162

(2).請回答以下問題：
1.導覽列配色與風格設定：
簡單黑白兩色(有加進一小塊不同於黑白的顏色)，因為niconico網站本身就是以黑白兩色為主調，所以這次期末也會朝著簡潔單色去做(之後可能會再做微調)
2.有無遇到的問題？
沒有，但是久久沒碰網頁設計真的會忘光(爆
3.製作感想(你認為導覽列的意義為何？）：
覺得導覽列讓我們省略了做圖置入和切片的動作，也省了一長串的圖片語法，比起期中的html，現在這個看起來乾淨很多XDDDDD
4.製作作業的時間：
1小時



Edited 1 time(s). Last edit at 12/07/2016 12:59AM by j29927381.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445102 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
1 作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445102

2導覽列配色與風格設定:可愛

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

4製作感想:有趣

5製作作業的時間：2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445009 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445009

(2).請回答以下問題：
1.導覽列配色與風格設定：神秘復古風
2.有無遇到的問題? no
3.製作感想-做完超有成就感
4.製作作業的時間 2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
時尚時尚最時尚 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445180

請回答以下問題：
1.導覽列配色與風格設定： 小火車風格，所以使用紅色
2.有無遇到的問題? 有點小困難，已解決
3.製作感想(你認為導覽列的意義為何？）當然是導覽阿
4.製作作業的時間 : 四小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1234567809 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445072

(2).請回答以下問題：
1.導覽列配色與風格設定：
我用大英雄天團的杯麵作為主題，主要顏色有紅色和白色。簡單不花俏很基本的配色，禿顯杯麵純白又可愛。
2.有無遇到的問題?
用cc版本做還是依樣苦手，在思考要載cs6版本還是繼續用cc((其實就是自己英文很差看不懂就是了hot smiley
3.製作感想(你認為導覽列的意義為何？）
不會用ps製作切片的可以用這種方法依樣可以做出導覽列~但我個人還是比較喜歡用切片做
4.製作作業的時間
1小時實際製作時間

推薦 / 評論　 分享到Facebook     回應文章 Quote
Hus,Ching-Chiech [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445033

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

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

2.有無遇到的問題?

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

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

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

4.製作作業的時間

大概1~2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445009 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445030

(2).請回答以下問題：
1.導覽列配色與風格設定：全部都以藍色為主 符合BTS的陽光可愛
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 可以更清楚找到想要知道的內容
4.製作作業的時間 接近2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
簡瑜萱 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445099

(2).請回答以下問題：
1.導覽列配色與風格設定：可愛的味道多一點和一點活潑感

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

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

4.製作作業的時間 ： 快一小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445042 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445042

(2).請回答以下問題：
1.導覽列配色與風格設定：這次是以宇宙作為主題，所以配色上都略為暗
2.有無遇到的問題? 因為連續兩週都請公假進度大落後......都沒有上到課，然後自己看著講義還是有點障礙......但還好問一下同學即可解決。
3.製作感想(你認為導覽列的意義為何？） 因為這次是做自己喜歡的樂團，所以做起來會特別開心，就好像把追星的所有心力都花在這上面哈哈
4.製作作業的時間 兩個小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
Jieru [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445027/

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

1.導覽列配色與風格設定： 以Running man 的主要黃色調作為基礎
2.有無遇到的問題： X
3.製作感想：個人還是比較喜歡切片方式的導覽列，也比較好設計。
4.製作作業的時間：2個小時半

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445069 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445069

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

1.導覽列配色與風格設定： 愛莉絲的顏色，藍與白，藍代表愛莉絲，白代表愛莉絲的單純善良。
2.有無遇到的問題： 設定錯地方，結果還在調半天。
3.製作感想：比之前還要快，只是設定的地方變多
4.製作作業的時間：1個小時半

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445141 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445141
(2)
1.導覽列配色與風格設定：
黑白的，簡潔

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

3.製作感想(你認為導覽列的意義為何？）
表明網頁的走向，方便瀏覽
個人還是比較偏愛自己放圖的導覽列就是了
4.製作作業的時間
2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
dj520136 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2b/hw04/hw04-1045445123

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

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

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

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445075 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445075
(2).請回答以下問題：
1.導覽列配色與風格設定:運用暗紫色和黑色配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和
做完覺得滿有成就感的
4.製作作業的時間
30分鐘

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445150 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445150
網站主題：HURTS
(2).請回答以下問題：
1.導覽列配色與風格設定：灰色和綠色 簡潔俐落的風格
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 能讓網頁使用起來更清楚方便
4.製作作業的時間:二小時



Edited 2 time(s). Last edit at 01/01/2017 06:09PM by 1045445150.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
loveelise1021 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
網站主題:潮流藝術
(請回答以下問題：
1.導覽列配色與風格設定：黑和白色 簡潔俐落的風格
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？） 能讓網頁使用起來更清楚方便
4.製作作業的時間:3小時



Edited 1 time(s). Last edit at 01/03/2017 08:48PM by loveelise1021.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
Attachments:
開啟 | 下載 - index.html (2.3 KB)
開啟 | 下載 - style.css (3.6 KB)
1045445177 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445177
導覽列配色與風格設定：
偵探就是要灰灰的感覺阿~~~~
有無遇到的問題：
製作感想(你認為導覽列的意義為何？）
其實真的好累喔 但成就感我就不說了ˊ ˋ
製作作業的時間
３小時 up

推薦 / 評論　 分享到Facebook     回應文章 Quote
113039 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445201

(2).請回答以下問題：
1.導覽列配色與風格設定：星際風
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）我覺得很棒
4.製作作業的時間 30MIN

推薦 / 評論　 分享到Facebook     回應文章 Quote
Saigyouji [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445198

(2).請回答以下問題：
1.導覽列配色與風格設定： 粉色
2.有無遇到的問題? NO
3.製作感想(你認為導覽列的意義為何？） NO
4.製作作業的時間 1HR

推薦 / 評論　 分享到Facebook     回應文章 Quote
zxzx10110774 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445120
網站主題:犬夜叉
(請回答以下問題：
1.導覽列配色與風格設定：藍色配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）很棒
4.製作作業的時間:1-2小



Edited 1 time(s). Last edit at 01/05/2017 02:07PM by zxzx10110774.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
蔡薰緯 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445054

(2).請回答以下問題：
1.導覽列配色與風格設定：利用黑色色調當整體風格配置 提升整體畫面配色質感
2.有無遇到的問題? 沒
3.製作感想(你認為導覽列的意義為何？）方便清楚瀏覽
4.製作作業的時間 一個小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1025445200 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
1025445200-4B-連怡婷

(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1025445200

(2).請回答以下問題：
1.導覽列配色與風格設定： 清新舒爽的藍色。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）
把每個介紹項目細分好可以更清楚知道網頁所需要的資訊有哪些讓人可以更簡單輕鬆的點選到需要的位子
4.製作作業的時間 :30分鐘



Edited 1 time(s). Last edit at 01/08/2017 10:47PM by 1025445200.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445144 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445144/moomin.html
(2)
1.導覽列配色與風格設定：
這次我做的是嚕嚕米
配色是以繽紛的風格，整體活潑可愛，跟夢幻的嚕嚕米一樣可愛

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

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

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


4.製作作業的時間
5~6個小時
哈哈哈哈找資料花蠻久時間!



Edited 1 time(s). Last edit at 01/10/2017 03:13AM by 1045445144.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
weiwei [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445057

(2).請回答以下問題：
1.導覽列配色與風格設定： 清新簡單、看了讓人舒服
2.有無遇到的問題? ：講義上都尋找的到解答
3.製作感想 ：比聽起來簡單許多
4.製作作業的時間 ：30分~1小時之間

推薦 / 評論　 分享到Facebook     回應文章 Quote
曾慶恩 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/final/final-1045445051

(2).請回答以下問題：
1.導覽列配色與風格設定：藍色 清新
2.有無遇到的問題? ：問題都靠講義解決
3.製作感想 ：
可以做自己喜歡的主題真的很好玩，網頁的資料也可以幫助別人
在做完後，瀏覽自己的網頁，真的很有成就感
， 但也有許多複雜的設定，搞得我很頭痛，
但只要細心一些，都可以找到答案。

4.製作作業的時間 ：30分~1小時之間



Edited 1 time(s). Last edit at 01/11/2017 11:27AM by 曾慶恩.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
黃靖家 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445129
網站主題:My Melody
(請回答以下問題：
1.導覽列配色與風格設定：粉色系
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）能加速瀏覽主題
4.製作作業的時間:1小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445153 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ： http://mepopedia.com/~web105-2c/hw04/hw04-1045445153

(2).請回答以下問題：
1.導覽列配色與風格設定:素色簡約
2.有無遇到的問題? 有同學幫忙沒什麼大問題
3.製作感想(你認為導覽列的意義維和
其實沒有想像中的難 但很花時間
4.製作作業的時間
45分鐘

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445081 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
http://mepopedia.com/~web105-2c/hw04/hw04-1045445081/

1.導覽列配色與風格設定： 日系清新 主色粉紅 輔色淺藍
2.有無遇到的問題? 表格的細部修飾還不上手
3.製作感想(你認為導覽列的意義為何？） 我覺得導覽列佔有很大的地位，尤其是在找資料的時候一點擊就有了，分類也很詳細。
4.製作作業的時間 2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
H224488882 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
http://mepopedia.com/~web105-2c/hw04/hw04-1045445217/
1.導覽列配色與風格設定： 簡單
2.有無遇到的問題? 好卡
3.製作感想(你認為導覽列的意義為何？） 方便
4.製作作業的時間 2小時

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445138 [ 站內寄信 / PM ]
Re: [作業04] 以CSS製作網頁導覽列

分類標籤: 105-1《中國》竹視傳二C-網頁設計
(1).作業網址 ：http://mepopedia.com/~web105-2c/hw04/hw04-1045445138


1.導覽列配色與風格設定：以黑色為主
2.有無遇到的問題:沒有
3.製作感想(你認為導覽列的意義為何？） :方便瀏覽跟分類
4.製作作業的時間 50分鐘



Edited 1 time(s). Last edit at 01/13/2017 04:05PM by 1045445138.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic