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-105xxxxxxx 資料夾中

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/~css106-2c/hw04/hw04-1055445XXX

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445XXX

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



5. 參考範例



作業參考
永遠的印象--莫內,範例網址:
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/~web105-2c/hw04/hw04-1045445045/
http://mepopedia.com/~web105-2c/hw04/hw04-1045445189/
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/~css106-2c/hw04/hw04-1055445003
(2).請回答以下問題:
1.導覽列配色與風格設定: 黑色,紅色
2.有無遇到的問題? 遇到的問題多嘗試幾次就成功了,開自己電腦裡的檔案 東西都是完整的
不知道為什麼點網址東西跑掉了
3.製作感想(你認為導覽列的意義為何?) 跟CSS搭配起來就變得有用了
4.製作作業的時間 半天



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

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445186
(2).請回答以下問題:
1.導覽列配色與風格設定: 黃 粉色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 讓使用者能快速瀏覽自己想要的頁面
4.製作作業的時間 2~3小時



Edited 1 time(s). Last edit at 12/20/2017 01:00AM by 施婉晴.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445135

(2).請回答以下問題:
1.導覽列配色與風格設定: 黃色系列
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 讓使用者能清楚看到以及使用
4.製作作業的時間 1~2小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445039
(2).請回答以下問題:
1.導覽列配色與風格設定:史迪奇
2.有無遇到的問題? 有問題都在上課時解決嘞
3.製作感想(你認為導覽列的意義為何?) 讓導覽列有嘞很不一樣的感覺
4.製作作業的時間1~2

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445144

(2).請回答以下問題:
1.導覽列配色與風格設定:粉粉的
2.有無遇到的問題? 自己做在瀏覽器看都是好的,但上傳後點網址圖片位置就跑掉
3.製作感想(你認為導覽列的意義為何?) 給使用者清楚的標示 找到想看到
4.製作作業的時間 一陣子



Edited 1 time(s). Last edit at 01/02/2018 07:17PM by 1055445144.
(編輯記錄)

這個作業的網址則為:http://mepopedia.com/~css106-2c/hw04/hw04-1055445024

1.導覽列配色與風格設定:暖色系
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)導覽列可以變色
4.製作作業的時間 :30分鐘



Edited 1 time(s). Last edit at 12/20/2017 11:23AM by zhuuu.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445156

(2)
1.導覽列配色與風格設定:天藍色系與陽光配色
2.有無遇到的問題? 原來的檔案與現在的檔案亂掉
3.製作感想(你認為導覽列的意義為何?) 整齊好整理
4.製作作業的時間 1小時



Edited 1 time(s). Last edit at 12/20/2017 02:44AM by 高慎妤.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445141

(2)
1.導覽列配色與風格設定:海洋風波西米亞風
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何?) 好看很棒
4.製作作業的時間 3分鐘

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445192

(2)
1.導覽列配色與風格設定:暗色系
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何?) 覺得比以前還要順手很多了
4.製作作業的時間:20分鐘

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445105

(2)
1.導覽列配色與風格設定:維尼可愛風
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何?)讚
4.製作作業的時間 15分

(1).作業網址:http://mepopedia.com/~css106-2c/hw04/hw04-1055445117

(2)
1.導覽列配色與風格設定:藍色調
2.有無遇到的問題?沒有
3.製作感想(你認為導覽列的意義為何?)讚
4.製作作業的時間70分

(1)

作業網址:http://mepopedia.com/~css106-2c/hw04/hw04-1055445033

(2)

1.導覽列配色與風格設定:黃橘色與米黃色
2.有無遇到的問題?: 沒有
3.製作感想(你認為導覽列的意義為何?):好分辨點選
4.製作作業的時間:40分



Edited 1 time(s). Last edit at 12/13/2017 11:34AM by 1055445033.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055440122

(2)
1.導覽列配色與風格設定:海洋色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何? : 這次做的導覽列比較快,但是相較於圖片設計變化較少。
體驗到CSS真的很萬能!
4.製作作業的時間:1小時



Edited 1 time(s). Last edit at 12/14/2017 02:16PM by Ch2254.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445129

(2).請回答以下問題:
1.導覽列配色與風格設定: 粉粉紫紫的
2.有無遇到的問題? :按鈕的我還需要去研究,有些老師有教了我還在看要怎麼用哈哈哈
3.製作感想(你認為導覽列的意義為何?): 簡單方便的製作
4.製作作業的時間: 半小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445075

(2).請回答以下問題:
1.導覽列配色與風格設定: 藍色系列
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 讓使用者能清楚看到以及使用
4.製作作業的時間 1~2小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445054
1.導覽列配色與風格設定:紫粉色
2.有無遇到的問題? 在標題那有點不會用~
3.製作感想(你認為導覽列的意義為何?) 方便好用,可以分頁的按鈕
4.製作作業的時間 一天

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445150

(2).請回答以下問題:
1.導覽列配色與風格設定: 科技感,灰藍色為主
2.有無遇到的問題? 有點分不清哪個是哪個的設定
3.製作感想(你認為導覽列的意義為何?) 方便導覽者迅速去找尋自己需要的頁面,又多了好多語法...記的很吃力
4.製作作業的時間 :1小時



Edited 1 time(s). Last edit at 12/18/2017 02:30AM by 1055445150.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445015

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

1.導覽列配色與風格設定: 冷冷的藍色象徵超冷的北極

2.有無遇到的問題? 目前還可以

3.製作感想(你認為導覽列的意義為何?) 更加的漂亮,增加質感

4.製作作業的時間 30分鐘左右



Edited 2 time(s). Last edit at 12/19/2017 08:16PM by 大漢堡王.
(編輯記錄)

這個作業的網址則為:file:///C:/Users/vincent/Desktop/hw04-1055445120/index.html

1.導覽列配色與風格設定: 淡黃色 清新
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?)導覽列可以增加豐富性
4.製作作業的時間 :50分鐘

這個作業的網址則為:http://mepopedia.com/~css106-2c/hw04/hw04-1055445183

1.導覽列配色與風格設定: 青色
2.有無遇到的問題? 置入的圖片被裁掉一半...................................................................................
4.製作作業的時間 1小時



Edited 1 time(s). Last edit at 12/19/2017 09:04PM by nine999999999.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445060

(2).請回答以下問題:
1.導覽列配色與風格設定:深紅跟米黃
2.有無遇到的問題? no
3.製作感想(你認為導覽列的意義為何?) 讓人更清楚
4.製作作業的時間 1小時9分鐘

http://mepopedia.com/~css106-2c/hw04/hw04-1055445102

1.導覽列配色與風格設定: 簡單柔和
2.有無遇到的問題? 一樣要教四個人累死
3.製作感想 ㄜ....做到沒感想了
4.製作作業的時間 上課時做完的所以約....1~2小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445036

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

1.導覽列配色與風格設定:黑魔法的power

2.有無遇到的問題? 越來越可以喔!

3.製作感想(你認為導覽列的意義為何?) 很有質感 畫質生動

4.製作作業的時間:課程上的實作跟回宿舍1hr

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445087

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

1.導覽列配色與風格設定:蠟筆小新

2.有無遇到的問題? 越來越上手了

3.製作感想(你認為導覽列的意義為何?) 更加清楚網頁的分頁

4.製作作業的時間:課程上的實作跟回家2hr

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445042

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑暗風格
2.有無遇到的問題? : 目前沒有
3.製作感想 : 比上次簡單多
4.製作作業的時間 1小時

http://mepopedia.com/~css106-2c/hw04/hw04-1055443120
时间 1小时
问题 暂时没有
配色 暖色
感谢 感觉有很地方奇奇怪怪的



Edited 1 time(s). Last edit at 12/19/2017 10:11PM by 1055443120.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445021

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

1.導覽列配色與風格設定:
以溫暖觸動人心的感覺做配色

2.有無遇到的問題?
目前還沒有,但我相信以後一定有。

3.製作感想(你認為導覽列的意義為何?)
讓看網頁的人更清楚

4.製作作業的時間
不到1小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445168

(2).請回答以下問題:
1.導覽列配色與風格設定: 綠色系
2.有無遇到的問題? 沒有
3.製作感想(你認為導覽列的意義為何?): 可以讓使用者清楚看到和使用
4.製作作業的時間 : 1小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1035445036

1.導覽列配色與風格設定:黑白灰,簡潔的。

2.有無遇到的問題? :哈哈,還是一堆,像是導覽列的框和框的高度怎麼調都很怪,不知道要怎麼弄才行。

3.製作感想(你認為導覽列的意義為何?): 導覽列的字告訴對方這個頁面要傳遞的訊息是什麼,也就是這個網站的資訊分類表,導覽列的變化設計則是告訴對方這可以點,按這裡可以導覽其它頁面;製作感想,網頁還是很難,試著全部自己打程式碼時,好多東西都顯示不出來,研究半天很多程式碼意思還是某薩傻,不過意外的製作出來了?感覺程式碼這東西可以研究一輩子阿confused smiley

4.製作作業的時間:胡搞瞎搞5小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445206

(2).請回答以下問題:
1.導覽列配色與風格設定:藍色 淺色系
2.有無遇到的問題? 按鈕一直跑掉
3.製作感想(你認為導覽列的意義為何?)
4.製作作業的時間 1小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445177

(2).請回答以下問題:
1.導覽列配色與風格設定:淡藍色+黃色,風格是清新可愛風
2.有無遇到的問題?畫面太雜亂調很久
3.製作感想(你認為導覽列的意義為何?)可以更了解除了用連結還有這種語法
4.製作作業的時間 :兩天

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1035471056

(2).請回答以下問題:
1.導覽列配色與風格設定:簡介潮流風
2.有無遇到的問題? 還好
3.製作感想(你認為導覽列的意義為何?) 為什麼不用之前期中的圖片劃過的 比較好看
4.製作作業的時間 兩小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445096

(2)
1.導覽列配色與風格設定:暗黑憂鬱風
2.有無遇到的問題? 語法有點搞混
3.製作感想(你認為導覽列的意義為何?)超級克難
4.製作作業的時間 2小時

1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445111

(2)
1.導覽列配色與風格設定:綠色自然
2.有無遇到的問題? 這次的其實還好
3.製作感想(你認為導覽列的意義為何?)
清楚的知道要往哪個網頁走

4.製作作業的時間 上課時間??!!
網頁整個的話是兩小時吧

這個作業的網址則為:http://mepopedia.com/~css106-2c/hw04/hw04-1055445132
(2).請回答以下問題:
1.導覽列配色與風格設定: 黃色,橘色
2.有無遇到的問題? 有時候圖片會大小不一,多試幾次就解決了
3.製作感想(你認為導覽列的意義為何?) 能讓使用者快速尋找
4.製作作業的時間 2-3小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445159

(2).請回答以下問題:
1.導覽列配色與風格設定:深藍憂鬱與淡雅
2.有無遇到的問題:Header設定一開始跑不出來,位置措誤
3.製作感想:更加搞懂排列順序,十分有幫助
4.製作作業的時間:1.5小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445207

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

這個作業的網址則為:http://mepopedia.com/~css106-2c/hw04/hw04-1055445045
(2).請回答以下問題:
1.導覽列配色與風格設定: 深灰色,暗紅色
2.有無遇到的問題? 總算開起來是可以看到的了 !還蠻驚訝能做到這樣
3.製作感想(你認為導覽列的意義為何?) 跟CSS搭配起來就變得有用了
4.製作作業的時間 一個晚上

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445205

(2).請回答以下問題:
1.導覽列配色與風格設定:以藍白色調為主
2.有無遇到的問題? 外距設定不了
3.製作感想(你認為導覽列的意義為何?)有點成就感
4.製作作業的時間 7個小時

(1).作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055445063
(2).請回答以下問題:
1.導覽列配色與風格設定: 黑 灰 白
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 方便順手許多
4.製作作業的時間 2~3小時

.作業網址 :http://mepopedia.com/~css106-2c/hw04/hw04-1055443122

老师多看下不同的链接 谢谢您