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

Advanced

Change History

Message: [作業04]以CSS製作網頁導覽列

討論區清單 文章列表
Changed By: JinJin
Change Date: November 30, 2016 08:30PM

[作業04]以CSS製作網頁導覽列

Original Message

作者: JinJin
Date: November 29, 2016 07:42PM

[作業04]以CSS製作網頁導覽列

參考講義


[講義04] 以CSS製作網頁導覽列
http://mepopedia.com/forum/read.php?804,17032

製作說明


1.請參考 [講義04] 以CSS製作網頁導覽列 的步驟製作，以及使用以下的語法完成。

2.只要做導覽列就好，參考以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-102xxxxxxx 資料夾中
以下語法，修改成自己設定的風格，顏色及樣式都需要改變，並可設著加上圖片，記得tilte註明學號。

3.須包含index.html style.css 也可以使用圖片資料夾images，儲存在hw04-104xxxxxxx 資料夾中

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

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

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

參考語法



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



<ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br />


完整語法（含header)


<!DOCTYPE html><br /> <html><br /> <head><br /> <title>網頁導覽列</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <br /> <ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> <br /> </div><br /> </body><br /> </html><br />


[hr]

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


[hr]

第一種置中型


#wrapper {<br /> width: 900px; <br /> margin: auto;<br /> }<br /> <br /> #header {<br /> height: px;<br /> background-image: url( );<br /> background-repeat: no-repeat;<br /> }<br /> <br /> #button {<br /> font-weight: bolder;<br /> color: #FFF;<br /> font-size: 14px;<br /> margin: 0px;<br /> padding:0px;<br /> }<br /> <br /> #button li {<br /> width:178px;<br /> text-align:center;<br /> list-style-type:none;<br /> background-color:#6E6E6E;<br /> float:left;<br /> letter-spacing: 2px;<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #FFF;<br /> margin-right:1px;<br /> }<br /> <br /> #button li a {<br /> display: block;<br /> line-height: 22px;<br /> color: #FFF;<br /> text-decoration: none;<br /> }<br /> <br /> #button li a:hover{<br /> background-color:#39919F<br /> }<br />

[hr]

第二種靠左型


#wrapper {<br /> width: 900px; <br /> margin: auto;<br /> }<br /> <br /> #header {<br /> height: px;<br /> background-image: url( );<br /> background-repeat: no-repeat;<br /> }<br /> <br /> #button {<br /> font-weight: bolder;<br /> color: #FFF;<br /> padding-bottom: 2px;<br /> height: 20px;<br /> padding-top: 2px;<br /> font-size: 14px;<br /> margin: 0px;<br /> }<br /> <br /> #button a {<br /> display: block;<br /> float: left;<br /> width: 150px;<br /> color: #FFF;<br /> text-decoration: none;<br /> }<br /> <br /> #button a:hover{<br /> color: #7CCBDC;<br /> }<br /> <br /> #button li {<br /> float: left;<br /> list-style-type: none;<br /> letter-spacing: 2px;<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #FFF;<br /> padding-left: 10px;<br /> }<br /> <br />



[hr]

繳交方式


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).作業網址 ：

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

[hr]

參考範例



http://mepopedia.com/forum/read.php?2023,67216
http://mepopedia.com/forum/read.php?2024,67217
http://mepopedia.com/forum/read.php?1173,27953

作業參考
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]
[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
：http://mepopedia.com/~web105-2b/hw04/hw04-1045445XXX

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

[hr]

參考範例



http://mepopedia.com/forum/read.php?2023,67216
http://mepopedia.com/forum/read.php?2024,67217
http://mepopedia.com/forum/read.php?1173,27953

作業參考
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]
[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
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/