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-2b/hw04/hw04-1055445XXX

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~css106-2b/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/

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

(2).
1.導覽列配色與風格設定:配合header的配色,橘色→紅色,黑體
2.製作感想:我認為導覽列可以讓瀏覽網站的人快速的找到他們想看的內容。
3.製作作業的時間 :1小時左右

http://mepopedia.com/~css106-2b/hw04/hw04-1055445104

1.導覽列配色與風格設定:
按鈕以深色調為主 底色相襯
2.有無遇到的問題?
以期中作業修改 然後把一堆東西刪掉之後版面就變醜了 打算把期末用漂漂亮亮~~
3.製作感想
不太妙
4.製作作業的時間
20min.



Edited 1 time(s). Last edit at 12/13/2017 11:51PM by MEATBALL HONG.
(編輯記錄)

(1).作業網址 :

http://mepopedia.com/~css106-2b/hw04/hw04-1055445176


1.網頁主題:菇菇巢穴

配色與風格設定: 遊戲

2.有無遇到的問題?


3.製作感想

4.製作作業的時間 讚

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

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

作業網址 :http://mepopedia.com/~css106-2b/hw04/hw04-1055445191


1.導覽列配色與風格設定:以亮色、粉色為主

(1).作業網址 :http://mepopedia.com/~css106-2b/hw04/hw04-1055445137
1.導覽列配色與風格設定:柔和.公主
2.有無遇到的問題:圖片.按鈕尺寸喬很久
3.製作感想;差不多的東西做第二遍
4.製作作業的時間:三小

(1).作業網址 :http://mepopedia.com/~css106-2b/hw04/hw04-1045445101
1.導覽列配色與風格設定:怪物
2.有無遇到的問題:連結怪怪的
3.製作感想;不知道發生什麼事了
4.製作作業的時間:三小

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

(2).請回答以下問題:
1.導覽列配色與風格設定:黑白簡約。
2.有無遇到的問題? 無
3.製作感想: 簡單的導覽列別有風味。
4.製作作業的時間:約2小時。

作業網址 :http://mepopedia.com/~css106-2b/hw04/hw04-1055445056

1. 導覽列配色與風格設定 :藍白簡約風格
2. 有無遇到的問題 ? 目前尚無
3. 製作感想 :簡單的排版及設計使得整體看起來非常舒服
4. 製作作業的時間 :約一小時

作業網址:http://mepopedia.com/~css106-2b/hw04/hw04-1055445201/

1. 導覽列配色與風格設定:小孩大聯盟配色
2. 有無遇到的問題:無
3. 製作感想:越做越上手
4. 製作作業的時間:一小時

作業網址 :http://mepopedia.com/~css106-2b/hw04/hw04-1055445071

1.導覽列配色與風格設定:日式 穩重 木頭
2.有無遇到的問題? 無
3.製作感想 順順ㄉ~
4.製作作業的時間 1hr

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


1.導覽列配色與風格設定:目前沒想法
2.有無遇到的問題? : 語法上需要加強
3.製作感想(你認為導覽列的意義為何:感覺用css做的導覽較具質感
4.製作作業的時間 :2017/12/14

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


1.導覽列配色與風格設定:目前沒想法
2.有無遇到的問題? : 語法上需要加強
3.製作感想(你認為導覽列的意義為何:感覺用css做的導覽較具質感
4.製作作業的時間 :2017/12/14
(我是本尊1055445146

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

(2).請回答以下問題:
1.導覽列配色與風格設定:紅色跟頻道有關
2.有無遇到的問題? 這次終於沒問題拉 因為有助手!!!~~~
3.製作感想(你認為導覽列的意義為何?) 比較簡單的做法
4.製作作業的時間 很快就幾秒 沒有拉 十幾分鐘吧

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

(2).請回答以下問題:
1.導覽列配色與風格設定:大海的藍&陸地的綠。
2.有無遇到的問題? 目前進行還順利。
3.製作感想: 我認為簡單的程式碼看起來舒適不眼花,學到更好的方法~
4.製作作業的時間:約2小時。

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

(2).
1.導覽列配色與風格設定:配合整體顏色(使用期中考版面)
2.製作感想:...忘記回復這個了sorry
3.製作作業的時間 :2分鐘左右

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 清新
2.有無遇到的問題? 有,已解决
3.製作感想(你認為導覽列的意義為何?) 更簡潔,但文字無法發生變化
4.製作作業的時間 2小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 以卡通配色
2.有無遇到的問題? 有,但很快就解決
3.製作感想(你認為導覽列的意義為何?) 語法變少可玩性變小
4.製作作業的時間 1小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:我喜歡的紫色。
2.有無遇到的問題? 還行。
3.製作感想: 我認為簡單的程式碼看起來舒適不眼花但就沒優之前那麼漂亮了
4.製作作業的時間:約2小時。

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

(2).
1.導覽列配色與風格設定:紅色深淺變化
2.製作感想:我認為程式碼很簡單看起來很簡潔
3.製作作業的時間 :1小時左右

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

(2).請回答以下問題:
1.導覽列配色與風格設定:灰色配藍
2.有無遇到的問題? 無
3.製作感想: 很想快點完成
4.製作作業的時間:約1小時?

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

(2).請回答以下問題:
1.導覽列配色與風格設定:明亮的橘色及綠色做配色。
2.有無遇到的問題? 沒有。
3.製作感想(你認為導覽列的意義為何?)列出單元看起來清楚明瞭。
4.製作作業的時間:2小時。

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

(2).請回答以下問題:
1.導覽列配色與風格設定:B1A4 / 黑灰色 / 神秘感
2.有無遇到的問題? 有,但很快就解決
3.製作感想(你認為導覽列的意義為何?) 很有趣。
4.製作作業的時間 1小時

1).作業網址 :http://mepopedia.com/~css106-2b/hw06/hw04-1055445032

(2).請回答以下問題:
1.網頁主題:珍珠美人魚
2.配色與風格設定:海洋
2.有無遇到的問題? :
3.製作感想:難到躺平
4.製作作業的時間:5~6小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:黑色、金色
2.有無遇到的問題?找很久置中語法
3.製作感想(你認為導覽列的意義為何?) CSS做得非常簡潔很棒
4.製作作業的時間 3小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:鮮豔俏皮
2.有無遇到的問題? 無
3.製作感想: 簡單的導覽列也須細心及耐心
4.製作作業的時間:約2小時。

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

(2).
1.導覽列配色與風格設定:配合header的配色,紅色→綠色,黑體
2.製作感想:很棒。
3.製作作業的時間:1小時左右

http://mepopedia.com/~css106-2b/hw04/hw04-1055445059



Edited 3 time(s). Last edit at 01/17/2018 09:56PM by jolin82145.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2b/hw06/hw06-1055445044/index.html

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

http://mepopedia.com/~css106-2b/hw04/hw04-1055445026

補交作業
1.導覽列配色與風格設定:白色 清晰 貓貓貓貓貓
2.製作感想:終於做完了
3.製作作業的時間 :從做之後就比較快了



Edited 1 time(s). Last edit at 01/19/2018 05:33PM by 1055445026.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:配合刊頭使用深色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 這個方式比切片簡單
4.製作作業的時間 沒印象