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

Advanced

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

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

1. 參考講義


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

2. 製作說明


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

2.只要做導覽列就好,參考以下語法,修改成自己設定的風格,顏色及樣式都需要改變,並可設著加上圖片,記得tilte註明學號。

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

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>



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





1. 第一種靠左型


#wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; background-color: #6E6E6E; 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; }

2. 第二種置中型


#wrapper { width: 900px; margin: auto; } #header { height: px; background-image: url( ); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; font-size: 14px; background-color:#6E6E6E; 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 }



4. 繳交方式


1.製作完成後,檔案命名方式:

第四個作業FTP上的資料夾為:hw04

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:http://mepopedia.com/~web104-2b/hw04/hw04-1035445XXX

資料夾內含:
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾(非必要)

存放在 < hw04-學號 > 的資夾內


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



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

作業參考
永遠的印象--莫內,範例網址:
1.透過CSS,以清單 <ul>及<li>製作網頁導覽列
http://mepopedia.com/~jinjin/web/hw04/ (滑入僅文字變色的導覽列)
http://mepopedia.com/~jinjin/web/hw04-1/ (滑入底色變色及文字置中的導覽列)

2.以圖片按鈕製作的導覽列
http://mepopedia.com/~jinjin/web/hw04-2/ 


(1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/
(2) http://mepopedia.com/~web103-a/hw04/hw04-1005445193/
(3) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/
(4) http://mepopedia.com/~web103-a/hw04/hw04-1025445178/
(5) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/
(6) http://mepopedia.com/~web101c/hw04/hw04-1015445243/



Edited 2 time(s). Last edit at 11/26/2015 08:59AM by JinJin.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445218

(2).請回答以下問題:
1.導覽列配色與風格設定: 以符合角落生物的感覺,以柔和的咖啡色為文字主體,鵝黃色、白色為背景主色。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) (1)導覽列度網頁來說就像是一本書的目錄。
                   (2)我還是喜歡圖片式的導覽列。
4.製作作業的時間 :課外1小時多

1034445113

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445113

(2).請回答以下問題:
1.導覽列配色與風格設定: 這次主題是部分自然生物的說明,所以使用的偏綠色和天空藍等。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?)  (1能看到網站的目錄分類
                   (2)名稱應該可以打中文吧?
4.製作作業的時間 :1hr

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445176/


(2).請回答以下問題:
1.導覽列配色與風格設定: vespa
2.有無遇到的問題? 否
3.製作感想(你認為導覽列的意義為何): 讓人容易找到頁面
4.製作作業的時間 :1小時

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445002


(2).請回答以下問題:
1.導覽列配色與風格設定: 大自然
2.有無遇到的問題? 否
3.製作感想(你認為導覽列的意義為何): (1)可以讓人找到想要的頁面 (2)比用圖片作導覽頁簡單
4.製作作業的時間 :2小時



Edited 3 time(s). Last edit at 12/03/2015 08:22AM by 1034445002.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1045245001

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑背景圖,紅色字,白色背景,迎合主題氣氛
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和
1) 方便找到自己想要的資料
2)分類,整理
4.製作作業的時間 :2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445017

(2).請回答以下問題:
1.導覽列配色與風格設定: 這次主題是七龍珠
2.有無遇到的問題?有,做的時候不向老師說明時候那麼輕鬆,很多東西要自己找解答
3.製作感想(你認為導覽列的意義維何?)  能看到網站的目錄分類,讓別人使用網頁時更清楚
                  
4.製作作業的時間 :2hr



Edited 1 time(s). Last edit at 12/10/2015 09:26AM by 1035445017.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445053

(2).請回答以下問題:
1.導覽列配色與風格設定: 辛普森家庭,為了符合主題所以以黃色系列為主,字用黑色可以讓黃色更襯托出來。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和
(1) 條列可以讓人清楚又方便的找到自己想找的東西
(2)雖然只是單色塊填色,但是卻不會讓人覺得單調
4.製作作業的時間 : 一小時

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445155


(2).請回答以下問題:
1.導覽列配色與風格設定: 以前的卡通
2.有無遇到的問題? 否
3.製作感想(你認為導覽列的意義為何): 1.快速知道網站裡有什麼 2.比用圖片用簡單
4.製作作業的時間 :1小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445086

(2).請回答以下問題:
1.導覽列配色與風格設定:日式燒烤的風格,希望能營造出很美味的感覺。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) (1)導覽列度網頁感覺就很像書剛翻開的前頁。
                   (2)比較喜歡文字排列的風格。
4.製作作業的時間 :2小時



1035445086

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445026
(2).請回答以下問題:
1.導覽列配色與風格設定:導覽列的配色取自加菲貓的淡橘色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)比起繁雜的圖片導覽列更喜歡文字導覽列
4.製作作業的時間: 零散的時間

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445104

(2).請回答以下問題:
1.導覽列配色與風格設定: 以深色的背景與明亮的文字底圖配色,不論是文字還是導覽列都使用讓人一目了然的色系。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) (1)導覽列能讓人更清楚網頁的分類
                   (2)覺得圖片式的導覽列比較好看。
4.製作作業的時間 :大約1.5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445059

(2).請回答以下問題:
1.導覽列配色與風格設定: 太陽番茄拉麵 使用番茄的配色去搭配
2.有無遇到的問題?: 無
3.製作感想(你認為導覽列的意義維和
(1) 覺得又學到了一些小技巧

4.製作作業的時間 :30分鐘



Edited 1 time(s). Last edit at 12/02/2015 10:18PM by 1035445059.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445209

(2).請回答以下問題:
1.導覽列配色與風格設定:用大地色來配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?):把導覽列用更簡單的方式呈現 ,更方便的製作網頁。
4.製作作業的時間 :1Hr

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445041

(2).請回答以下問題:
1.導覽列配色與風格設定: cinema 黑白風格為主
2.有無遇到的問題?: 無
3.製作感想(你認為導覽列的意義維和
(1) 覺得又學到了一些小技巧

4.製作作業的時間 :40分鐘

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445041

(2).請回答以下問題:
1.導覽列配色與風格設定: cinema 黑白風格為主
2.有無遇到的問題?: 無
3.製作感想(你認為導覽列的意義維和
(1) 覺得又學到了一些小技巧

4.製作作業的時間 :40分鐘
1035445041簡廷恩

(1).作業網址 :
http://mepopedia.com/~web104-2b/hw04/hw04-1045245002/

(2).請回答以下問題:
1.導覽列配色與風格設定:
>>藍色背景與標題棕色的配搭,一冷一暖作為對比
2.有無遇到的問題?
>>認為要對準位置有點難度
3.製作感想(你認為導覽列的意義為何?)
>>分類資料讓人能清晰並簡單地找到想看的資訊
>>增添網頁色彩
4.製作作業的時間
>>大概一個小時

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445074


(2).請回答以下問題:
1.導覽列配色與風格設定: 史迪奇 ( 以藍色為主)
2.有無遇到的問題? 否
3.製作感想(你認為導覽列的意義為何):
(1)可以讓人找到想要的資訊內容
(2)分類 + 整理
4.製作作業的時間 :3小時



Edited 1 time(s). Last edit at 12/02/2015 10:28PM by 1035445074.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445107

(2).請回答以下問題:
1.導覽列配色與風格設定:主題:慕夏,以黑色為文字主體,深黃色與淺黃色做導覽顏色色塊、黃色為背景主色。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?)
基本大概的目錄或分類。
4.製作作業的時間 :2小時左右

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445200
(2).請回答以下問題:
1.導覽列配色與風格設定:(插畫家#南瓜子) 以黑白風格來搭配。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)方便製作網頁部分
4.製作作業的時間: 2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445098

(2).請回答以下問題:
1.導覽列配色與風格設定:使用暗色系與亮色系的對比。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) (1)導覽列讓觀者可以清楚的了解網站在介紹什麼。
4.製作作業的時間 :課外合起來1個小時。

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1015448146/

(2).請回答以下問題:
1.導覽列配色與風格設定: 我選擇和梵谷畫作相近的顏色
2.有無遇到的問題? :目前沒有
3.製作感想(你認為導覽列的意義為何 :導覽列就是讓閱覽者快速的找到想了解的內容
4.製作作業的時間 :約2.5小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445131

(2).請回答以下問題:
1.導覽列配色與風格設定:主題是星空,以藍色為主
2.有無遇到的問題? :無
3.製作感想(你認為導覽列的意義為何?):導覽列就是讓閱覽者快速的找到想了解的內容,而且也能讓製作者更方便的製作網頁 。
4.製作作業的時間 :1小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445098

(2).請回答以下問題:
1.導覽列配色與風格設定:使用暗色系與亮色系的對比。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) (1)導覽列讓觀者可以清楚的了解網站在介紹什麼。
4.製作作業的時間 :課外合起來1個小時。

(1).作業網址 :
http://mepopedia.com/~web104-2b/hw04/hw04-1035445080
(2).請回答以下問題:
1.導覽列配色與風格設定:
以圖片有的相反色作為顏色配置,一般(?)
2.有無遇到的問題?
應該是沒有,但是圖會不見耶~
3.製作感想(你認為導覽列的意義為何?)
感覺以後會更難!!
讓人方便找尋想要看的東西以及快速到達想要去的網頁。
4.製作作業的時間
大約1個小時。

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445194

(2).請回答以下問題:
1.導覽列配色與風格設定: 以柔和的繽紛色彩表現溫馨可愛的風格。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 使人清楚快速找到需要的資訊
4.製作作業的時間 一個多小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445170

(2).請回答以下問題:
1.導覽列配色與風格設定: 還是喜歡魔髮奇緣~~用紫色、深藍、淡粉紅 有較夢幻又神祕的公主風格~
2.有無遇到的問題? 沒有太大問題
3.製作感想(你認為導覽列的意義維何?) 
(1)感覺就像分類美一樣項目
(2)多了一些與網頁的互動
4.製作作業的時間 :差不多2小時smileys with beersmiling bouncing smiley

1035445170

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445149

(2).請回答以下問題:
1.導覽列配色與風格設定: 這次主題是VANS,想介紹關於這個牌子的相關商品。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?)  (1)主題名稱能用英文表示
                   (2)導覽列能用更多相關的連結
4.製作作業的時間 :1hr



Edited 1 time(s). Last edit at 12/02/2015 11:05PM by 1035445149.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445158

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

1.導覽列配色與風格設定:依據圖的顏色而定的配色,風格偏向插畫向量圖的風格

2.有無遇到的問題:目前沒有遇到太大的問題

3.製作感想(你認為導覽列的意義為何) : 我覺得導覽列能讓看網站的人,更快的知道網站的大略重點與內容,也能提高閱讀性更能增加瀏覽網站效率。

4.製作作業的時間:大約一個小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445134/

(2).請回答以下問題:
1.導覽列配色與風格設定: 大致為header部分的背景選用黑色作為button的底色,再用圖片上的紅藍色相互切換
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)
使整個網頁架構清晰,方便瀏覽者能夠快速尋找想要瀏覽的地方
4.製作作業的時間 : 40分鐘

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445023
(2).請回答以下問題:
1.導覽列配色與風格設定: 以咖啡色為主
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?):方便分類和整理
4.製作作業的時間 :1小時

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445011


(2).請回答以下問題:
1.導覽列配色與風格設定:以小王子的背景色,再以簡單的大地色和白色來結合
2.有無遇到的問題? 否
3.製作感想(你認為導覽列的意義為何): 1.更一目了然 2.方便快速瀏覽
4.製作作業的時間 :1~2小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445068

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

1.導覽列配色與風格設定: 以圖片的類似色當導覽列配色,風格大自然色調

2.有無遇到的問題:目前沒有遇到太大的問題

3.製作感想(你認為導覽列的意義為何) : 我覺得導覽列可以讓人明確的知道在點選哪個按鈕

4.製作作業的時間:大約1.5個小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445206

(2).請回答以下問題:
1.導覽列配色與風格設定:導覽列使用灰色,以不搶走圖片的風采為主
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為和:可以讓瀏覽網站的人清楚的知道這個網站有介紹那些內容
4.製作作業的時間 1小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445185

(2).請回答以下問題:
1.導覽列配色與風格設定: 使用柔和可愛的顏色搭配櫻桃小丸子這個主題
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) 讓觀看者可以清楚的看到不同的分類
                  
4.製作作業的時間 :1小時多



Edited 1 time(s). Last edit at 12/03/2015 12:12AM by 1035445185 徐于庭.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445050/
(2).請回答以下問題:
1.導覽列配色與風格設定:很美又很奇幻的少年pi的奇幻漂流
2.有無遇到的問題? 按鈕的間距搞死我了
3.製作感想(你認為導覽列的意義為何?) 神奇閃亮亮按鈕讓人想點一下
4.製作作業的時間 :兩小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445191

(2).請回答以下問題:
1.導覽列配色與風格設定:符合這位插畫家溫馨可愛的風格,使用粉紅及粉黃色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?)
   (1)能讓使用者迅速找到想要的類別
   (2)如果是有設計過的導覽列則是另一種與使用者的互動,很有趣

4.製作作業的時間 :大約1小時多

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445152

(2).請回答以下問題:
1.導覽列配色與風格設定:大家熟悉的LINE的綠色配色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?):導覽列用更簡潔的方式呈現 ,方便的製作網頁,原始碼也比較乾淨易懂
4.製作作業的時間 :約1小時

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445222/

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

1.導覽列配色與風格設定: 以符合黃色小兵的顏色,利用黃色及藍色來配色。

2.有無遇到的問題? 無

3.製作感想(你認為導覽列的意義維何?) (1)導覽列讓人能一眼就知道自己要找尋的方向。
                   (2)目前還是對於影像式導覽列製作方法較熟悉。

4.製作作業的時間 :1小時多



Edited 3 time(s). Last edit at 12/24/2015 09:48AM by yung yi.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445065

(2).請回答以下問題:
1.導覽列配色與風格設定: 早晨太陽穿透森林空隙
2.有無遇到的問題? :
3.製作感想(你認為導覽列的意義為何): 覺得文字跟圖片都不錯
4.製作作業的時間 :沒計算

作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035461133


1.導覽列配色與風格設定: 淡淡的優雅
2.有無遇到的問題:無
3.製作感想(你認為導覽列的意義為何: 讓人可以快速尋找到需要的頁面
4.製作作業的時間:2hr

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445137/

(2).請回答以下問題:
1.導覽列配色與風格設定: 基於wrapper所用圖片的整體感覺,將整個頁面也選用相近的大地色系完成
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)
明確網頁架構,是網頁結構更清晰
4.製作作業的時間 : 40分鐘


1035445137 周李銘

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445032

(2).請回答以下問題:
1. 導覽列配色與風格設定:主題是樂高,內容則用樂高經典配色去搭配
2. 有無遇到的問題?
有,導覽列每格想用不同顏色可是不知道怎麼用,後來想想可能因為它是導覽列所以不行吧哈哈
3. 製作感想(你認為導覽列的意義為何)
ⓐ 製作感想:又學會一種更簡潔的方法,對語法又了解一點了
ⓑ 導覽列意義:條列式看起來會比較整齊統一,觀看著瀏覽的時候比較舒服
4.製作作業的時間 : 1.5小時

1035445032林以真

1035445071陳郁琳

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445071

(2).請回答以下問題:
1.導覽列配色與風格設定:配合主題
2.有無遇到的問題:無
3.製作感想(你認為導覽列的意義為何:清楚分類
4.製作作業的時間:2小時

作業網址:http://mepopedia.com/~web104-2b/hw04/hw04-1035445056


(2).請回答以下問題:
1.導覽列配色與風格設定: 夕陽色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何): 清楚明瞭的找到想要的頁面
4.製作作業的時間 :30分鐘

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445125/

(2).請回答以下問題:
1.導覽列配色與風格設定: 以生活為準的插畫,配色舒適。
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) (1)我認為導覽列就是一個指標。
                   (2)我喜歡圖片式的製作方式。
4.製作作業的時間 :課外1小時。

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445014

(2).請回答以下問題:
1. 導覽列配色與風格設定:主題是攝影,主要讓整體有簡約風or工業風
2. 有無遇到的問題?
對於與法上還是有點難
3. 製作感想(你認為導覽列的意義為何)
ⓐ 製作感想:覺得很有設計感
ⓑ 導覽列意義:條列式看起來會比較整齊統一,觀看著瀏覽的時候比較舒服
4.製作作業的時間 : 1.5小時

1035445014

1035445029陳悅綾
(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1035445029
(2).請回答以下問題:
1.導覽列配色與風格設定: 以粉紅色可愛風格為主
2.有無遇到的問題: 有些位子找不到
3.製作感想(你認為導覽列的意義為何?):方便分類和整理
4.製作作業的時間 :2小時



Edited 2 time(s). Last edit at 12/17/2015 01:05PM by 1035445029.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1025445086

(2).請回答以下問題:
1.導覽列配色與風格設定: 質感
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維何?) 
                  
4.製作作業的時間 :50分鐘
學號:1025445086

1015445276 - 王星宇

(1).作業網址 :http://mepopedia.com/~web104-2b/hw04/hw04-1015445276
(2).請回答以下問題:
1.導覽列配色與風格設定:灰色配合整體色系
2.有無遇到的問題: 無
3.製作感想(你認為導覽列的意義為何?):文字導覽與解說很方便閱讀
4.製作作業的時間:幾小時

(1).作業網址 : http://mepopedia.com/~web104-2b/hw04/hw04-1035445179

(2).請回答以下問題:
1.導覽列配色與風格設定: 以符合大英雄天團給我的感覺,以像是正和邪的黑白兩色為主體。
2.有無遇到的問題? 要符合大小真的要仔細計算。
3.製作感想(你認為導覽列的意義維何?) (1)可以讓人容易找到想要的頁面。
4.製作作業的時間:大概6小時多