[作業04]以CSS製作網頁導覽列 - 105-1《中國》竹視傳二B-網頁設計論壇

JinJin [ 站內寄信 / PM ]

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

Moderator
November 29, 2016 07:42PM
發表文章數: 1,224

1. 參考講義
2. 製作說明
3. 參考語法
3.1 新增index.html檔案，貼上以下語法
3.2 完整語法（含header)
3.3 新增style.css檔案(index.html 儲存於hw04-學號資料夾中)，選擇以下兩種語法其中一個即可
3.3.1 第一種置中型
3.3.2 第二種靠左型
4. 繳交方式
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-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]

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:30PM by JinJin.

(編輯記錄)

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

1045445008 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 07, 2016 10:24PM
發表文章數: 18

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

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

1.導覽列配色與風格設定：
以灰色調為主,想呈現穩重乾淨的感覺

2.有無遇到的問題?

沒有遇到問題!!

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

分類這個網站的事物
讓人比較好找想找的東西

4.製作作業的時間

1小時

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

1045445074 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 15, 2016 01:54AM
發表文章數: 18

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

(2).請回答以下問題：
1.導覽列配色與風格設定：神秘感
2.有無遇到的問題? 按鈕的底色設定不出來，只跑出一小塊色塊的背景
3.製作感想(你認為導覽列的意義為何？）能更清楚了解的知道一些東西, 覺得之前用ps切片工具比較方便也比較快速
但用css導覽列來設定雖然按鈕面複雜了些,但很有趣。
4.製作作業的時間：3~4小時

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

1045445110 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 07, 2016 11:18PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
以藍紫為主，有理性的感覺
2.有無遇到的問題?
目前還算簡單
3.製作感想(你認為導覽列的意義為何？）
有之前做的經驗，現在會比流暢。以導覽列做為分類，讓類別更清楚
4.製作作業的時間 :
一個半小時

Edited 1 time(s). Last edit at 12/08/2016 12:43AM by 1045445110.

(編輯記錄)

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

1045445035 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 12:16AM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：以簡單現代感為設計，用灰黑白為主色。
2.有無遇到的問題? 剛開始真的不知道該怎麼做，之後參考講義就必較懂了。
3.製作感想(你認為導覽列的意義為何？）
4.製作作業的時間1~2hr

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

lemon2016 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 01:28AM
發表文章數: 18

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
因為是做國外有海邊的度假村，所以用藍色為主，有沉靜、自由的意象。

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

3.製作感想(你認為導覽列的意義為何？）
按照自己喜歡的風格去做是很開心的事，而導覽列的意義就是能連結到其他頁，幫助了解此網頁的內容為何。

4.製作作業的時間
一天。

Edited 1 time(s). Last edit at 12/08/2016 09:59PM by lemon2016.

(編輯記錄)

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

1045445170 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 03:39AM
發表文章數: 16

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

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

1.導覽列配色與風格設定：用藍灰帶出星際感。

2.有無遇到的問題？無。

3.製作感想（你認為導覽列的意義為何？）讓人能清楚找到自己需要的資料位置。

4.製作作業的時間：１～２小時。

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

1045445080 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 04:51AM
發表文章數: 18

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
因lagy gaga給人的感覺是比較狂放型的所以在header的部分我做了比較狂放感覺的圖，但在內文裡走比較簡潔的風格這樣整體看起來比較舒服

2.有無遇到的問題?
導覽列花了一些時間看懂

3.製作感想(你認為導覽列的意義為何？）
方便找到資訊

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

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

1045445002 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 10:22AM
發表文章數: 21

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
配合網頁主題，黑暗風格

2.有無遇到的問題?
新的東西需要點時間吸收~

3.製作感想(你認為導覽列的意義為何？）
方便瀏覽網頁的人能夠快速找到自己想要的東西

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

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

1045445152 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 10:40AM
發表文章數: 18

http://mepopedia.com/~web105-2b/hw04/hw04-1045445152/

1.導覽列配色與風格設定：
以暗紫色系為主，呈現一種神祕的感覺

2.有無遇到的問題?

導覽列新的方法還不是很熟

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

分類，讓上網的人比較方便尋找

4.製作作業的時間

2小時

Edited 1 time(s). Last edit at 12/08/2016 12:01PM by 1045445152.

(編輯記錄)

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

1045445062 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 10:49AM
發表文章數: 19

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

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

1.導覽列配色與風格設定：營造神道教純潔、純白的樣子

2.有無遇到的問題? 繞圖排文還是不太熟練搞了一陣子才用好

3.製作感想 :不用再PS另外再做按鈕方便許多，但要慢慢去調整尺寸比較麻煩。

4.製作作業的時間 :3小時

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

OuO1045445125 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 11:19AM
發表文章數: 17

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

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

1.導覽列配色與風格設定：Fifth Harmony的風格選用比較粉嫩的色系

2.有無遇到的問題? :有時候圖片會對不齊導覽列所以有花時間對齊

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

4.製作作業的時間 :3~3.5小時

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

janny [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 08, 2016 09:14PM
發表文章數: 19

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

1.導覽列配色與風格設定：以暖色調為主要顏色，配色上完全符合小熊維尼，
使整體有種溫馨可愛的感覺，畫面也乾淨簡潔

2.有無遇到的問題?
都有照著老師的步驟做，但不知道為何按鈕或是其他地方都會跑掉，
用了很久，最後問同學才好不容易用出來

3.製作感想(你認為導覽列的意義為何？）
用導覽列作按鈕方便很多，不用像上次做按鈕還要到ps裡面用比較費時，
而且也讓上網的人方便搜尋

4.製作作業的時間

2~3小時

Edited 1 time(s). Last edit at 12/08/2016 09:18PM by janny.

(編輯記錄)

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

089 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 10, 2016 04:05PM
發表文章數: 19

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

(2).請回答以下問題：
1.導覽列配色與風格設定：繪本色彩
2.有無遇到的問題? spinning smiley sticking its tongue out

3.製作感想(你認為導覽列的意義為何？）有導覽列才能清楚找到想要知道的資訊
4.製作作業的時間 :1小時多

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

1045445161 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 14, 2016 12:22PM
發表文章數: 16

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445161

1.導覽列配色與風格設定：
主題是做路易莎咖啡，使用他logo標準色來配色整個網頁。
整體配色想要給人( 喝咖啡，吃輕食，蛋糕，麵包，可以有 ) 溫暖幸福的感覺。

2.有無遇到的問題?
大致上無大礙

3.製作感想(你認為導覽列的意義為何？）
每次的作業都是一次的版面設計和色彩規劃的訓練，受益良多。
導覽列的意義：我認為導覽列是將所有資訊做統整分類，讓瀏覽者可以快速找到自己想看的東西。

4.製作作業的時間
3~4小時

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

vera1028 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 14, 2016 10:34PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
以header的配色來選擇
2.有無遇到的問題?
還沒有
3.製作感想(你認為導覽列的意義為何？）
讓我們更加清楚
4.製作作業的時間 :
一小時

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

smile103520 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 14, 2016 11:13PM
發表文章數: 18

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

(2)請回答以下問題：
1.導覽列配色與風格設定：暗紅，復古風
2.有無遇到的問題？
暫時沒有太大的問題，只是偶爾會失去記憶忘記應該做些什麼
3.製作感想
我覺得用css來做導覽列好像有點麻煩，感覺做成圖片再利用Ps切片工具比較方便也比較快速
(你認為導覽列的意義為何？）跳轉至其他頁面，經過分類後頁面也不會過於凌亂
4.製作作業的時間：一至兩小時

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

1045445092 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 15, 2016 12:06AM
發表文章數: 18

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

(2).請回答以下問題：
1.導覽列配色與風格設定：神秘、奇幻
2.有無遇到的問題? 還沒有
3.製作感想(你認為導覽列的意義為何？）
製作按鈕部分的程式碼稍微複雜了一點。
4.製作作業的時間
2~3小時

Edited 1 time(s). Last edit at 12/15/2016 01:31AM by 1045445092.

(編輯記錄)

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

1045445188 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 15, 2016 03:28AM
發表文章數: 19

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445188

(2).請回答以下問題：
1.導覽列配色與風格設定：主題是哈士奇，因為牠是寒帶雪橇犬，所以風格以較寒色系為主，搭配寒帶溫暖的陽光讓畫面可以看起來更舒服。
2.有無遇到的問題? 有，css的按鈕地方我看不太懂...
3.製作感想(你認為導覽列的意義為何？）
製作期間遇到很多困難，雖然最後有弄完可是還是有很多地方不熟(真的要來複習一下了...)
導覽列的意義就是為了有更完整的規劃分類，讓人可以更加清楚
4.製作作業的時間
10小時

Edited 2 time(s). Last edit at 12/22/2016 01:10AM by 1045445188.

(編輯記錄)

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

1045445119 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 15, 2016 10:06AM
發表文章數: 23

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

(2).請回答以下問題：
1.導覽列配色與風格設定：
可愛的風格及配色
2.有無遇到的問題?
只有一點點，意外的自己做的出來~
3.製作感想(你認為導覽列的意義為何？）
方便點進你所想了解的地方，覺得做出來心情很好哈哈哈
4.製作作業的時間
1~2小時

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

1045445044 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 19, 2016 01:16AM
發表文章數: 16

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

(2).請回答以下問題：
1.導覽列配色與風格設定：櫻桃小丸子粉紅可愛
2.有無遇到的問題? 按鈕用很久
3.製作感想(你認為導覽列的意義為何？）可以讓大家選擇
4.製作作業的時間 3小時

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

dj520136 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 21, 2016 12:15AM
發表文章數: 13

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

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

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

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

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

4.製作作業的時間
1~2小時

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

1045445095 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 22, 2016 09:18AM
發表文章數: 23

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445095

1.網頁主題：美國歌手selena gomaz
配色與風格設定：暖色調
2.有無遇到的問題? 還沒有
3.製作感想覺得課以直接做導覽列很方便
4.製作作業的時間 1-2小時

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

1045445053 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 22, 2016 10:33AM
發表文章數: 14

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

(2)
1.導覽列配色與風格設定：黑白 ..時尚的...
2.有無遇到的問題 : 沒什麼問題
3.製作感想(你認為導覽列的意義為何？:因為之前期中有做過的關係，現在再做導覽列會比較熟悉。意義是好分類吧XD
4.製作作業的時間 :1小時

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

1035443110 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 22, 2016 03:59PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：監獄兔監獄的顏色以及他們皮膚的顏色
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何？）導覽列的意義應該就跟海報的主視覺一樣，可以是整個網站的一個重點
4.製作作業的時間 30分鐘左右

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

1045445131 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

December 26, 2016 02:39PM
發表文章數: 16

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

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

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

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

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

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

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

1045445068 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 10:45AM
發表文章數: 19

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

(2).請回答以下問題：
1.導覽列配色與風格設定：淡紫色迷幻風
2.有無遇到的問題? 一開始顏色改不了但後來可以了
3.製作感想(你認為導覽列的意義為何？）
設定雖然複雜了些,但很有成就感。
4.製作作業的時間：2~4小時

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

1045445077 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 11:08AM
發表文章數: 20

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

(2).請回答以下問題：
1.導覽列配色與風格設定：黃色、紅色，較為活潑亮麗
2.有無遇到的問題? 還好
3.製作感想(你認為導覽列的意義為何？）
成就感
4.製作作業的時間：1小時

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

1045445059 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 12:21PM
發表文章數: 13

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445059

1.網頁主題： mazda 2
配色與風格設定：簡潔風
2.有無遇到的問題? 無
3.製作感想挺有趣
4.製作作業的時間 2小時

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

黃書俞 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 12:34PM
發表文章數: 13

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445029

1.網頁主題：慢慢說樂團
配色與風格設定：簡潔文青
2.有無遇到的問題? 有繞圖排文放兩張照片會跑掉,還有語法很複雜研究了很久
3.製作感想雖然製作過程中很困難但很有趣
4.製作作業的時間 2小時

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

1045445155 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 01:16PM
發表文章數: 17

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445155

1.網頁主題：草間彌生
配色與風格設定：黃色配色
2.有無遇到的問題? 沒
3.製作感想雖然製作過程中很困難但很有趣
4.製作作業的時間 2小時

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

1045445050 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 01:20PM
發表文章數: 11

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445050

1.網頁主題：ONE PIECE
配色與風格設定：神秘
2.有無遇到的問題? 沒有
3.製作感想但很有趣
4.製作作業的時間 1小時

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

abcdefg12345678 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 05, 2017 03:16PM
發表文章數: 18

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445149

請回答以下問題：

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

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

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

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

4.製作作業的時間

0.5hr

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

徐夢蔆1045445071 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 09, 2017 12:56AM
發表文章數: 16

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

(2).請回答以下問題：
1.導覽列配色與風格設定：暗黑
2.有無遇到的問題? 沒
3.製作感想(你認為導覽列的意義為何？）方便尋找
4.製作作業的時間 1個小時

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

陳柏叡1045445137 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 09, 2017 04:16AM
發表文章數: 20

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

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

Edited 1 time(s). Last edit at 01/11/2017 01:55PM by 陳柏叡1045445137.

(編輯記錄)

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

芮薇珊 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 10, 2017 01:12AM
發表文章數: 18

http://mepopedia.com/~web105-2b/hw04/hw04-1045445086/

請回答以下問題：
1.導覽列配色與風格設定：活潑撞色
2.有無遇到的問題? 圖片大小對不好
3.製作感想(你認為導覽列的意義為何？）清楚分辨
4.製作作業的時間 2小時

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

kiki2007810 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 10, 2017 11:57AM
發表文章數: 21

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

(2).請回答以下問題：
1.導覽列配色與風格設定：粉色系.想走可愛的路線
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）讓網頁的架構更成熟
4.製作作業的時間 2小時

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

1045445077 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 10, 2017 05:55PM
發表文章數: 20

(1).作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445077
(2).請回答以下問題：

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

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

4.製作作業的時間 :3小時

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

1045445104 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 12, 2017 11:21AM
發表文章數: 9

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

(2).請回答以下問題：
1.導覽列配色與風格設定：為了配合柯南故事所以不使用鮮豔色ㄉㄧㄠ
2.有無遇到的問題? 按鈕的底色設定不出來，只跑出一小塊色塊的背景
3.製作感想(你認為導覽列的意義為何？）能更清楚了解的知道一些東西, 覺得之前用ps切片工具比較方便也比較快速
但用css導覽列來設定雖然按鈕面複雜了些,但很有趣。
4.製作作業的時間：3~4小時

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

1025445119 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 12, 2017 11:28AM
發表文章數: 11

作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1025445119

導覽列配色與風格設定：用綠色去調整配色
有無遇到的問題：好像沒調整得很好
製作感想：方便瀏覽和整理
製作作業的時間：一兩小時

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

1045445065 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 12, 2017 12:28PM
發表文章數: 16

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

(2).請回答以下問題：
1.導覽列配色與風格設定：宇宙
2.有無遇到的問題? 無
3.製作感想？老師資訊明確
4.製作作業的時間 2d

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

1045445122 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 12, 2017 10:01PM
發表文章數: 17

(1).作業網址：http://mepopedia.com/~web105-2b/hw04/hw04-1045445122/cast

(2).請回答以下問題：
1.導覽列配色與風格設定：低調，簡約
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何？）導覽列就是要輕清楚明瞭
4.製作作業的時間 2個小時

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

1045445173 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 14, 2017 04:17PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：冷酷風格
2.有無遇到的問題: N
3.製作感想: N
4.製作作業的時間 2hr

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

1045445173 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 14, 2017 04:35PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定冷酷風格
2.有無遇到的問題 N
3.製作感想 N
4.製作作業的時間 2hr

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

1045445173 [ 站內寄信 / PM ]

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

分類標籤: 105-1《中國》竹視傳二B-網頁設計

January 14, 2017 04:54PM
發表文章數: 17

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

(2).請回答以下問題：
1.導覽列配色與風格設定：冷酷風格
2.有無遇到的問題 N
3.製作感想 N
4.製作作業的時間 2hr

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