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

Advanced

[作業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-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>



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; 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 }


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; }





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.製作作業的時間



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-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.
(編輯記錄)

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

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


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

2.有無遇到的問題?

沒有遇到問題!!

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

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


4.製作作業的時間

1小時

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

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

(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.
(編輯記錄)

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

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

(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.
(編輯記錄)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
(編輯記錄)

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

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

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

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


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


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

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

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

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

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


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


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

(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.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:繪本色彩
2.有無遇到的問題? spinning smiley sticking its tongue out
3.製作感想(你認為導覽列的意義為何?) 有導覽列才能清楚找到想要知道的資訊
4.製作作業的時間 :1小時多

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

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

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

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

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

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

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

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

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

(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.
(編輯記錄)

作業網址 :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.
(編輯記錄)

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

請回答以下問題:

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

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

2.有無遇到的問題?

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

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

4.製作作業的時間

0.5hr

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

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

(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.
(編輯記錄)

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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