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

Advanced

Re: [作業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-102xxxxxxx 資料夾中

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>
[hr]

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


[hr]

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 }
[hr]

4. 繳交方式


1.製作完成後,檔案命名方式:

第四個作業FTP上的資料夾為:hw04

每位同學請將自己的資料夾命名為:hw04-學號
這個作業的網址則為:http://mepopedia.com/~cg104-1a/hw04/hw04-104544XXXX

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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

[hr]
學長姐參考範例
(1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/
(2) http://mepopedia.com/~web103-a/hw04/hw04-1005445193/
(3) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/
(4) http://mepopedia.com/~web103-a/hw04/hw04-1025445178/
(5) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/
(6) http://mepopedia.com/~web101c/hw04/hw04-1015445243/

[hr]

5. 參考範本語法


HTML
<!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> </body> </html>
[hr]

CSS
#wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; } #header { height:502px; /*高度設定為130px,因有有設背景圖片,所以要設高度*/ background-image: url(pon.gif); background-repeat: no-repeat; } #button { font-weight: bolder; color: #FFF; font-size: 14px; background-color: #F0F0F0; margin: 0px; padding: 0px; border-left-width: 5px; border-left-style: dotted; border-left-color: #F93; } #button li { width: 169px; text-align: center; list-style-type: none; background-color: #FFFF66; float: left; letter-spacing: 2px; border-left-width: 4px; border-left-style: dashed; border-left-color: #663333; margin-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 12px; border-right-width: 4px; border-right-style: dashed; border-right-color: #663333; } #button li a { display: block; line-height: 22px; color: #333; text-decoration: none; } #button li a:hover{ background-color: #663333; font-family: "Lucida Console", Monaco, monospace; font-size: 12px; color: #FFF; border-right-width: 4px; border-left-width: 4px; border-right-style: dashed; border-left-style: dashed; border-right-color: #FC6; border-left-color: #FC6; }


Edited 2 time(s). Last edit at 05/02/2016 08:14PM by JinJin.
(編輯記錄)

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440046/

請回答以下問題
1.導覽列配色與風格設定 - 可愛的波妞。
2.有無遇到的問題 ? 摸header圖片置中摸很久,後來有成功。
3.製作感想(你認為導覽列的意義維和 - 讓選項更豐富但簡潔。
4.製作作業的時間 - 上完課當天回家就做了,比較有印象。

(1).作業網址 : http://mepopedia.com/~cg104-1a/hw04/hw04-1045440045

(2).請回答以下問題:
1.導覽列配色與風格設定: 皮克斯
2.有無遇到的問題?:沒有問題
3.製作感想:蠻簡單的
4.製作作業的時間 :20分鐘

(1).作業網址 : http://mepopedia.com/~cg104-1a/hw04/hw04-1045440013

(2).請回答以下問題:
1.導覽列配色與風格設定: 可愛兔兔與小雞的咖哩世界。
2.有無遇到的問題?置中有花一些時間,還有按鈕的一些小問題,目前已解決。
3.製作感想(你認為導覽列的意義維和介面清晰好操作。
4.製作作業的時間 :兩個鐘頭,每次使用學校做好的檔案儲存到USB都會毀損,十分傷腦筋。



Edited 1 time(s). Last edit at 05/07/2016 02:10PM by 1045440013.
(編輯記錄)

作業網址:

http://mepopedia.com/~cg104-1a/hw04/hw04-1045440010

請回答以下問題:

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

配合EXO的Sing For You(冬專),以藍色和白色為主要配色。風格是:冬天冷冷的感覺。

2.有無遇到的問題 ?

在學校做好的檔案差點存不進USB。

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

感覺跟前面的作業有些地方很像,但是又不一樣;學習到新的東西很開心,我覺得導覽列的意義是要讓人一目了然的找到要看的東西。

4.製作作業的時間:

上課時間,還有放學時間。

(1).作業網址 :http://mepopedia.com/~cg104-1a/hw04/hw04-1045440014

(2).請回答以下問題:
1.導覽列配色與風格設定:
粉紅色;少女時代

2.有無遇到的問題?
不知道怎麼讓按鈕變橫的,目前已解決

3.製作感想(你認為導覽列的意義為何?) :
簡要的介紹有哪些內容

4.製作作業的時間
兩個鐘頭

(1).作業網址 : http://mepopedia.com/~cg104-1a/hw04/hw04-1045440011

(2).請回答以下問題:
1.導覽列配色與風格設定: 森林感
2.有無遇到的問題?置中有花一些時間研究成功棒!
3.製作感想棒棒棒棒
4.製作作業的時間 :一小時多

1).作業網址 : http://mepopedia.com/~cg104-1a/hw04/hw04-1045440050

(2).請回答以下問題:
1.導覽列配色與風格設定: 沒有固定風格憑感覺
2.有無遇到的問題? 還好但~~我們嘗試了很多奇怪的方法來弄置中
3.製作感想(你認為導覽列的意義維和 這........沒意義
4.製作作業的時間 30分鐘

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440051

請回答以下問題
1.導覽列配色與風格設定 - ColdPlay樂團
2.有無遇到的問題 ? 因為之前有做過類似的,所以沒什麼問題
3.製作感想(你認為導覽列的意義維和 - 跟圖片的顏色差不多有變化就蠻好看的!
4.製作作業的時間 - 30分鐘內

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440029/

請回答以下問題
1.導覽列配色與風格設定 - Perfume。
2.有無遇到的問題 ? 摸了很久,但有成功。
3.製作感想(你認為導覽列的意義維和 - 讓選項更豐富但簡潔。
4.製作作業的時間 - 想到才做的。

作業網址:

http://mepopedia.com/~cg104-1a/hw04/hw04-1045440044

請回答以下問題:

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

粉紅色的~~~

2.有無遇到的問題 ?

我自己就是個大問題

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

導覽列就是給人分門別類嘛

4.製作作業的時間:

我以為我做了400年,其實只做了一天

作業網址:http://mepopedia.com/~cg104-1a/hw04/hw04-1045440003/

1.簡約風
2.弄超久自己都忘了
3.好累啊哈哈
4.挺久 斷斷續續的

(1).作業網址 :http://mepopedia.com/~cg104-1a/hw04/hw04-1025435233

(2).請回答以下問題:
1.導覽列配色與風格設定:
亮粉色;鸚鵡人

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

3.製作感想(你認為導覽列的意義為何?) :
介紹重點

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

作業網址:

http://mepopedia.com/~cg104-1a/hw04/hw04-1045440031

請回答以下問題:

1.導覽列配色與風格設定:
照片 我拍的 藍藍綠綠

2.有無遇到的問題 ?
人生處處有困難

3.製作感想(你認為導覽列的意義為何?) :
快速找到想要的東西

4.製作作業的時間:

800秒

(1).作業網址 :http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題:
1.導覽列配色與風格設定:繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見,弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚,語法也都亂七八糟,希望不會有人拿我得去改應該會很痛苦spinning smiley sticking its tongue out
4.製作作業的時間 :好久好久

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440028

請回答以下問題
1.導覽列配色與風格設定 - 紅 藍 白 美國國旗顏色/灰
2.有無遇到的問題 ? 累
3.製作感想(你認為導覽列的意義維和 - 繼續努力
4.製作作業的時間 - 上完課當天回家就做了,比較有印象。

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440033/

請回答以下問題
1.導覽列配色與風格設定 帥氣就好
2.有無遇到的問題 ? 沒有
3.製作感想 好麻煩喔
4.製作作業的時間 - 下課後

作業網址
http://mepopedia.com/~cg104-1a/hw04/hw04-1045440022/

請回答以下問題
1.導覽列配色與風格設定 - 小小兵
2.有無遇到的問題 沒有
3.製作感想 難不倒我
4.製作作業的時間 - 二十分

(1).作業網址 : http://mepopedia.com/~cg104-1a/hw04/hw04-1045440019

(2).請回答以下問題:
1.導覽列配色與風格設定: 可愛迷人的萌物角色
2.有無遇到的問題?沒有
3.製作感想?耶~我缺交的作業都補齊了
4.製作作業的時間 :1小時