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

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

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

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

3. 參考語法



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



<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>以CSS製作網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <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> </body> </html>


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





1. 第一種靠左型


#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. 第二種置中型


#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/~web101c/hw04/hw04-10154452XX

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



Edited 7 time(s). Last edit at 11/26/2014 09:54AM by JinJin.
(編輯記錄)

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445243/

(2).請回答以下問題:
1.導覽列配色與風格設定: 金色+黑色時尚風
2.有無遇到的問題? :透明背景好難做="=
3.製作感想(你認為導覽列的意義為何:感想!!~~越做越有挑戰性!!
導覽列的意義 :方便快速流覽網頁
4.製作作業的時間:2天~~~

作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445236/

請回答以下問題:
1.導覽列配色與風格設定: 白色
2.有無遇到的問題? :背景還沒弄好 連結也是
3.製作感想(你認為導覽列的意義為何:讓人更快找到需要的資料
導覽列的意義 :流覽網頁
4.製作作業的時間:1天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445203/

(2).請回答以下問題:
1.導覽列配色與風格設定: 亮粉紅色&黑色
2.有無遇到的問題? 有,謝謝黃凱敬的幫忙XDDD
3.製作感想:讓人一目了然
4.製作作業的時間:半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445269/

(2).請回答以下問題
1.導覽列配色與風格設定/呈現Tiffany Alvord的俏皮
2.有無遇到的問題?在DW裡設計的樣式和開啟網頁的樣式有差異
3.製作感想(你認為導覽列的意義為何)/導覽列簡單又容易有設計感,做久了發現不會很難,可是無法像其他同學一樣跳脫,他們太厲害了.
4.製作作業的時間/ 一天



Edited 1 time(s). Last edit at 11/24/2012 10:12PM by 1015445269.
(編輯記錄)

MEPOERs said:
JinJin: 你沒有放index,html喔!記得補上,不過也做得越來越好越來越完整囉!
(1)作業網址: http://mepopedia.com/~web101c/hw04/hw04-1015445219
(2).請回答以下問題:
1.導覽列配色與風格設定:下課後(卡通)風格
2.有無遇到的問題? : 沒有
3.製作感想(你認為導覽列的意義維和 : 順眼、簡單明瞭
4.製作作業的時間 : 放學留下來做的



Edited 1 time(s). Last edit at 12/16/2012 12:11PM by stying411.
(編輯記錄)

mepopedia.com/~web101c/hw05/hw05-1015445225/

導覽列配色與風格設定:無
2.有無遇到的問題?沒
3.製作感想(你認為導覽列的意義維和= =ㄜ.....
4.製作作業的時間:糧堂

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445215

(2).請回答以下問題:
1.導覽列配色與風格設定: 復古
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和: 又學到了不一樣的作法,這次作法很便利好用。
4.製作作業的時間:半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445218/

(2).請回答以下問題:
1.導覽列配色與風格設定:黃藍綠粉紅,可愛俏皮的風格
2.有無遇到的問題? :還好噢~沒什麼大問題~
3.製作感想(你認為導覽列的意義為何):
作來做去跟以前的差沒有多少XDD
導覽列的意義就是方便清楚的一種指標
4.製作作業的時間:半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445213/

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑色
2.有無遇到的問題? :背景要用到AI、PS遇上問題,還好有小凱幫忙 ^_^
3.製作感想(你認為導覽列的意義為何:讓使用者更方便尋找資料
導覽列的意義 :方便快速流覽網頁
4.製作作業的時間:1天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445208

(2).請回答以下問題

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

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

3.製作感想(你認為導覽列的意義為何:讓人好分辨,找出要閱讀的部分

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

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445239/

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑灰/對比色
2.有無遇到的問題? NONO
3.製作感想 簡單方便快速 hot smiley
4.製作作業的時間 2HR

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445217

(2).請回答以下問題:
1.導覽列配色與風格設定: 我最喜歡的人類
2.有無遇到的問題? 他太美了我的眼睛有點張不開
3.製作感想(你認為導覽列的意義維和: 朋友真好
4.製作作業的時間:半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445270/

(2).請回答以下問題:
1.導覽列配色與風格設定: 簡灰白藍橘 簡單變化
2.有無遇到的問題? 還好
3.製作感想(你認為導覽列的意義維和 比較簡便的感覺
4.製作作業的時間 一個小時多左右

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445240

(2).請回答以下問題:
1.導覽列配色與風格設定:黑灰白色系
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和 簡單清楚明瞭
4.製作作業的時間 一天

(1).作業網址 :http://mepopedia.com/~web101c/hw04/hw04-1015445261/
(2).請回答以下問題:
1.導覽列配色與風格設定:清新春天
2.有無遇到的問題? :按鈕與header連不到,已請教同學並解決
3.製作感想(你認為導覽列的意義為何):我覺得導覽列就像路上的指示牌,需要簡單明確的告訴瀏覽者方向
4.製作作業的時間:大約3小時....

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445206


(2).請回答以下問題:
1.導覽列配色與風格設定: 紫色 .粉紅色
2.有無遇到的問題? 很多
3.製作感想 標示清晰 能快速找到想要的物件
4.製作作業的時間 一個禮拜

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445250/

(2).請回答以下問題:
1.導覽列配色與風格設定:綠色
2.有無遇到的問題? :還好 不大
3.製作感想(你認為導覽列的意義為何:做完蠻爽的
導覽列的意義 :方便流覽網頁
4.製作作業的時間:5小時

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445256

(2).請回答以下問題:
1.導覽列配色與風格設定: 粉色系
2.有無遇到的問題? 有ㄛㄛㄛ!!!!同學幫我解決了!!!!
3.製作感想(你認為導覽列的意義維和 簡單明瞭就好摟!!!!!!
4.製作作業的時間1.5節課吧!!!!!!

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445235

(2).請回答以下問題

1.導覽列配色與風格設定:紫色系為配色
2.有無遇到的問題?:無

3.製作感想(你認為導覽列的意義為何:讓主題更明顯 更容易閱讀

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

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445210

(2).請回答以下問題:
1.導覽列配色與風格設定: 奇妙探險風
2.有無遇到的問題? 按鈕顏色配很久!!
3.製作感想(你認為導覽列的意義為何):導覽列就是要給人方向.所以要簡單大方清楚
4.製作作業的時間:2小時

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445252/

(2).請回答以下問題:
1.導覽列配色與風格設定: 活力可愛
2.有無遇到的問題?: 已解決
3.製作感想(你認為導覽列的意義為何:簡單明瞭,方便快速
4.製作作業的時間:半天~~~

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445234

1.導覽列配色與風格設定:粉色系
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和 :更容易辨別
4.製作作業的時間:留下來的時間

作業網址:http://mepopedia.com/~web101c/hw04/hw04-1015445254

1.導覽列配色與風格設定:色調差不多 粉綠
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和) 導覽列換色廷好玩的,簡單明了
4.製作作業的時間 半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445212

(2).請回答以下問題

1.導覽列配色與風格設定:粉色
2.有無遇到的問題?:無

3.製作感想(你認為導覽列的意義為何:統整

4.製作作業的時間:放學後

(1).作業網址 :http://mepopedia.com/~web101c/hw04/hw04-1015445257/
1.導覽列配色與風格設定: 橘紅+白色
2.有些小細節還是會忘記
3.有越來越順手
4.30分鐘

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445246/

(2).請回答以下問題:
1.導覽列配色與風格設定:紅色
2.有無遇到的問題? 邊框設定的英文看不太懂~~後來發現想亦有解說~~喝 喝><
3.製作感想:還蠻好玩的!!
4.製作作業的時間:兩個禮拜

http://mepopedia.com/~web101c/hw04/hw04-1015445231

1.橘紅
2.目前沒有
3.增加了一點知識
4.1時05分

1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445201

(2).請回答以下問題

1.導覽列配色與風格設定:淡色系
2.有無遇到的問題?:無

3.製作感想(你認為導覽列的意義為何:簡便

4.製作作業的時間:課後留下來

(1).作業網址 :http://mepopedia.com/~web101c/hw04/hw04-1015445221

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

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

2.有無遇到的問題? 導覽列寬度

3.製作感想:還是會搞混語法,感謝老師幫忙

4.製作作業的時間:半天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445251/

(2).請回答以下問題:
1.導覽列配色與風格設定: 簡約風
2.有無遇到的問題? :痾 應該沒有吧
3.製作感想(你認為導覽列的意義為何:不太了解= =
導覽列的意義 :快速瀏覽網頁吧
4.製作作業的時間:2分鐘

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445233/

(2).請回答以下問題:
1.導覽列配色與風格設定:活潑
2.有無遇到的問題? :有點困難
3.製作感想(你認為導覽列的意義為何:更清楚操作
導覽列的意義 :清楚操作
4.製作作業的時間:30分鐘

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445227/

(2).請回答以下問題:
1.導覽列配色與風格設定: 復古之類的
2.有無遇到的問題? :不會連結!!
3.製作感想(你認為導覽列的意義為何:上課沒認真聽就GG
導覽列的意義 :方便快速流覽網頁
4.製作作業的時間:2天

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:
(1).作業網址 :

http://mepopedia.com/~web101c/hw04/hw04-1015445245

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

1.導覽列配色與風格設定:可愛的鮮豔顏色 (紅+黃+咖啡)

2.遇到的問題:亂七八糟(自己一直把語法搞混)

3.製作感想:做完了,很有成就感,很開心,要更加努力的把後續依依完成

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

hw04-1015445262

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445262



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

1.導覽列配色與風格設定: 粉藍調
2.有無遇到的問題? 沒
3.製作感想 其實就文法貼上 並且改顏色
4.製作作業的時間 週一下課留下老師指導完成

(1).作業網址 :http://mepopedia.com/~web101c/hw04/hw04-1015445271/

(2).請回答以下問題
1.導覽列配色與風格設定/呈現
藍色配粉紅色亮眼舒服.
2.有無遇到的問題?
有,但老師幫忙解決了.

3.製作感想(你認為導覽列的意義為何)?
有設計感編排看起來簡單.
4.製作作業的時間?
兩節課

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445232

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

(1)作業網址: http://mepopedia.com/~web101c/hw04/hw04-1015445241
(2).請回答以下問題:
1.導覽列配色與風格設定 :白色圖片
2.有無遇到的問題? : 有 無法至中
3.製作感想(你認為導覽列的意義維和 : (為何)
4.製作作業的時間 : 好幾天 趕進度中..........

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445242/

(2).請回答以下問題:
1.導覽列配色與風格設定: 紅白+藍白的設計
2.有無遇到的問題? :圖片出不來
3.製作感想(你認為導覽列的意義為何:要調整顏色有些複雜還要換連結後的顏色
4.製作作業的時間:1個小時

(1).作業網址 :
http://mepopedia.com/~web101c/hw04/hw04-1015445202/

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑色
2.有無遇到的問題? 想要做間隔的東西可是一直不會
3.製作感想(你認為導覽列的意義維和 可以讓人一目了然而且美觀
4.製作作業的時間 20分鐘

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445207/

(2).請回答以下問題:
1.導覽列配色與風格設定: 簡潔.黃色調
2.有無遇到的問題? 下面的列表位子調整有點困難
3.製作感想:耶!!!做完拉!!!!
你認為導覽列的意義為何:讓人快速理解網站資訊
4.製作作業的時間:2節課

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445228

(2).請回答以下問題:
1.導覽列配色與風格設定:粉紅色系
2.有無遇到的問題? 沒有
3.製作感想:做完之後感覺很漂亮(?
導覽列的意義 :指引方向
4.製作作業的時間:sorry~其實早就做好了也上傳到FTP...只是一直忘記要回覆....製作時間應該是上課邊教邊弄的.....

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445263/

(2).請回答以下問題:
1.導覽列配色與風格設定: 黃藍對圾風
2.有無遇到的問題? : 無
3.製作感想(你認為導覽列的意義為何:開始熱血了哦哦哦哦哦
導覽列的意義 :分類
4.製作作業的時間:1天

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445209/

(2).請回答以下問題:
1.導覽列配色與風格設定: 橘紅暖色系風格
2.有無遇到的問題? :無
3.製作感想(你認為導覽列的意義為何:成就感
導覽列的意義 :方便快速流覽網頁
4.製作作業的時間:老師指導下15分鐘

(1).作業網址 : http://mepopedia.com/~web101c/hw04/hw04-1015445248/

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

http://mepopedia.com/~web103-c/hw04/hw04-1025443044

1.導覽列配色與風格設定: 藍色藍天
2.有無遇到的問題: 上傳了FTP 網頁打不開
3.製作感想 : 做完了會有成就感
4.製作作業的時間: 一天