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

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

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


2.上傳至FTP

3.回覆本篇文章

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

(2).請回答以下問題:
1.導覽列配色與風格設定:淡紫色風格設定
2.有無遇到的問題:清單改變的底色設定忘了怎麼改
3.製作感想:做完很有成就感,雖然花了不少時間做 ...
4.製作作業的時間:1-2天

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

(2).請回答以下問題:
1.導覽列配色與風格設定:淺色系風格/可愛類型
2.有無遇到的問題:設定很多,都快眼花了。 _(:3 」∠)_
3.製作感想:想到期末就覺得粉刺激。smileys with beer
4.製作作業的時間:4小時



Edited 1 time(s). Last edit at 12/13/2017 10:19PM by 1055445097 _(:3 」∠)_.
(編輯記錄)

1055445007 / 吳郁婕


(1).作業網址:http://mepopedia.com/~css106-2a/hw04/hw04-1055445007
(2).請回答以下問題:
1.導覽列配色與風格設定:卡通
2.有無遇到的問題? 沒
3.製作感想:更輕鬆製作
4.製作作業的時間 :4小時



Edited 1 time(s). Last edit at 12/21/2017 04:41AM by wuyujie.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445052
(2).請回答以下問題:
1.導覽列配色與風格設定: 可愛 清新 藍色 thumbs up
2.有無遇到的問題?
3.製作感想(你認為導覽列的意義為何?) 滿多地方需要設定,多看幾次講義才會比較清楚! smileys with beer
4.製作作業的時間 2-3小時 hot smiley



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

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445169
(2).請回答以下問題:
1.導覽列配色與風格設定:清新風格
2.有無遇到的問題:有些小錯誤
3.製作感想:學到很多東西
4.製作作業的時間:3小時



Edited 1 time(s). Last edit at 12/14/2017 01:08AM by 1055445169.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1035443128
(2).請回答以下問題:
1.導覽列配色與風格設定:漫畫的配色灰黑白
2.有無遇到的問題? 無
3.製作感想 努力配置
4.製作作業的時間 50分鐘

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445082
(2).請回答以下問題:
1.導覽列配色與風格設定 : 皮克斯動畫接帶給大家神秘感。spinning smiley sticking its tongue out
2.有無遇到的問題 : 沒有什麼大問題。smiling bouncing smiley
3.製作感想 : 製作起來很又常就感,也會嘗試一些語法。smileys with beer
4.製作作業的時間 : 2-3小時。hot smiley

1055445004 王咨涵

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

(2).請回答以下問題:
1.導覽列配色與風格設定:清新的紅白色系
2.有無遇到的問題:footer大小調不準
3.製作感想:要重頭開始做新的網頁了....
4.製作作業的時間:1天

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445160
(2).請回答以下問題:
1.導覽列配色與風格設定:可愛甜蜜
2.有無遇到的問題? 比較困難
3.製作感想(你認為導覽列的意義為何?)但還是有無限成就感:")
4.製作作業的時間 2個小時

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445148
1.導覽列配色與風格設定: 簡約風
2.有無遇到的問題? :想題目想很久
3.製作感想(你認為導覽列的意義為何?): 方便我們閱讀與分類
4.製作作業的時間 :一個下午



Edited 1 time(s). Last edit at 12/14/2017 09:10AM by 1055445148.
(編輯記錄)

1055445103 林容渝

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

(2).請回答以下問題:
1.導覽列配色與風格設定:可愛風
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 讓看的人更明白要看什麼內容
4.製作作業的時間 1天



Edited 1 time(s). Last edit at 12/14/2017 09:10AM by LRU.
(編輯記錄)

1055445178 陳宜宜
(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445178
(2).請回答以下問題:
1.導覽列配色與風格設定:簡單時尚
2.有無遇到的問題? 細節處理調整很花時間
3.製作感想:製作起來很有就感
4.製作作業的時間: 3-4小時



Edited 1 time(s). Last edit at 12/14/2017 09:11AM by 1055445178.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:黑白灰紅 簡約
2.有無遇到的問題? 大小問題
3.製作感想(你認為導覽列的意義為何?)越來越高端了! 主要的介紹和整體的風格
4.製作作業的時間 不久吧。。。!

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

(2).請回答以下問題:
1.導覽列配色與風格設定: Hello Kitty
2.有無遇到的問題? 無
3.製作感想: 很有成就感
4.製作作業的時間 2小時左右

(1).作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445076
1.導覽列配色與風格設定: 溫婉、柔和
2.有無遇到的問題? : 一直想不到做什麼哈哈哈哈
3.製作感想(你認為導覽列的意義為何?): 讓畫面看起來簡潔,且方便閱讀跟分類。
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 簡約
2.有無遇到的問題:邊框每次都用不好
3.製作感想:比上次花更多時間讓背景變得更好
4.製作作業的時間 :3hr



Edited 1 time(s). Last edit at 12/20/2017 09:29PM by 1055445204.
(編輯記錄)

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

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

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

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

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


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

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

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

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 綠色
2.有無遇到的問題? 圖片大小設定
3.製作感想(你認為導覽列的意義為何?)讓人可以清楚的切換網頁
4.製作作業的時間 40分

1055445085 林安情

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

(2).請回答以下問題:
1.導覽列配色與風格設定:
古風 簡約

2.有無遇到的問題?
製作導覽列的設定讓我卡一陣子。

3.製作感想(你認為導覽列的意義為何?)
可以方便點閱其他頁面。

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



Edited 1 time(s). Last edit at 12/21/2017 09:21AM by 綰瑛.
(編輯記錄)

作業網址 :http://mepopedia.com/~css106-2a/hw04/hw04-1055445055
1.導覽列配色與風格設定:復古風
2.有無遇到的問題? :沒有
3.製作感想(你認為導覽列的意義為何?): 更方便製作
4.製作作業的時間 :2小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 文青
2.有無遇到的問題:沒什麼問題
3.製作感想:孰悉網頁語法後就能再控制其他細節(色系),讓頁面更賞心悅目!
4.製作作業的時間 :2hr

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

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

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

(2).請回答以下問題:
1.導覽列配色與風格設定:米羅
2.有無遇到的問題:弄不太清楚按鈕的設定
3.製作感想:終於做完了
4.製作作業的時間:2~3天



Edited 1 time(s). Last edit at 12/30/2017 10:39PM by 何芯萍.
(編輯記錄)

3.回覆本篇文章

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 蓝色
2.有無遇到的問題? 按钮大小一开始能不清楚 不知道在哪里设置
3.製作感想(你認為導覽列的意義為何?) 比切图来的方便
4.製作作業的時間 3个小时

導覽列配色與風格設定:紫色
有無遇到的問題?:製作時間較久
製作感想(你認為導覽列的意義為何?):一覽無遺
製作作業的時間:1~2小時

作業網址:http://mepopedia.com/~css106-2a/hw04/hw04-1055445094

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 簡約乾淨
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何?) 之前練習過多次,所以這次作起來蠻輕鬆的!
4.製作作業的時間 :1小時以內

作業網址 :http://mepopedia.com/~css106-2a/hw05/hw05-1055445157

.請回答以下問題:
1.網頁主題:nba
配色與風格設定:黑色
2.有無遇到的問題:無
3.製作感想:我覺得有點難
4.製作作業的時間: 2小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 米色系,簡單乾淨
2.有無遇到的問題:沒有問題
3.製作感想:跟期中的蠻像沒太大問題
4.製作作業的時間 :20分鐘

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 單色調.低調藍+清爽白
2.有無遇到的問題? 分頁連結搞很久
3.製作感想(你認為導覽列的意義為何?) 網頁基本訓練
4.製作作業的時間 30分鐘

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 粉紅色
2.有無遇到的問題:
3.製作感想:還不錯
4.製作作業的時間:忘了

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

(2).請回答以下問題:
1.網頁主題: 海賊王
2.配色與風格設定: 黑白灰
2.有無遇到的問題? 無
3.製作感想 難
4.製作作業的時間 忘了