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-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>


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/~web103-a/hw04/hw04-1025445XXX

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :

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



5. 參考範例


http://mepopedia.com/forum/read.php?1173,27953

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

1.導覽列配色與風格設定:藍色系
2.有無遇到的問題? 無
3.製作感想: 這次比較簡單
4.製作作業的時間 15分

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445040

1.導覽列配色與風格設定:黑白 鬍子
2.有無遇到的問題? 這次沒有,YA~我有在進步!!!
3.製作感想: 比起之前用圖片做導覽列簡單,現在的我比之前能看得懂程式碼了,真是開心!!
我會再繼續努力的,因為網頁設計很有趣!!!thumbs up
4.製作作業的時間:20分

1025445040

MEPOERs said:
JinJin: 整體搭配很棒喔!
1.作業網址:http://mepopedia.com/~web103-a/hw04/hw04-1005445193
2.導覽列配色與風格設定:清爽藍色系
3.有無遇到的問題?:想照著某個網址做,但原始碼太複雜,所以只能製作出比較相近的感覺。
4.製作感想(你認為導覽列的意義為何):我認為導覽列的意義就是快速的讓瀏覽者找到他們想去的頁面、知道他們想知道的訊息,所以我覺得不要用得太複雜,不然就失去本意。
5.製作作業的時間:1天

1005445193/徐芯儀



Edited 1 time(s). Last edit at 11/29/2014 10:54PM by 徐芯儀.
(編輯記錄)

(1).作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445133
1.導覽列配色與風格設定:靛與青
2.有無遇到的問題? 無
3.製作感想: 雖然簡單,但卻有不錯的效果
4.製作作業的時間 1小時

(1).作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445046/html.html

(2).請回答以下問題:
1.導覽列配色與風格設定:暖暖微風(讓人想睡覺...)
2.有無遇到的問題? :有些語法少放或多放,導致剛開始按鈕無法更換,還有網址也跳不出來。
3.製作感想(你認為導覽列的意義為何):我認為導覽列做的簡單明瞭能清楚更換頁面就行了,因為如果做得太過於複雜,
會讓原本頁面該呈現的重點跑掉,所以不用做得過於誇張,甚至把顏色改的繽紛雜亂,這次的練習也簡單許多。
4.製作作業的時間:1小時半

1025445046



Edited 1 time(s). Last edit at 11/30/2014 10:12PM by Xin Lin.
(編輯記錄)

(1).作業網址 :
http://mepopedia.com/~web103-a/hw04/hw04-1025445064
1.導覽列配色與風格設定: 布丁狗的配色、暖暖可愛的風格
2.有無遇到的問題:有些語法要回去翻才記得
3.製作感想:導覽列主要讓人可以清楚明瞭的讓人知道這個網站的分類,太過複雜可能會搶過主題;製作網頁慢慢進步了,希望會更好!
4.製作作業的時間 :半小時

1025445064

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

(2).請回答以下問題:
1.導覽列配色與風格設定:用紅色與淺粉橘色做搭配,與HELLO KITTY有呼應
2.有無遇到的問題: 還好,製作導覽列沒遇到甚麼問題
3.製作感想:語法上面變得比較不複雜,導覽列簡單化了
4.製作作業的時間 :20幾分鐘左右

1025445049

MEPOERs said:
JinJin: 導覽謝的紅色可以跟頂圖呼應會更好
(1).作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445148/

(2).請回答以下問題:
1.導覽列配色與風格設定:簡約淡色系
2.有無遇到的問題: 還算順利
3.製作感想: 這次比較簡單
4.製作作業的時間 :30分鐘

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


1.導覽列配色與風格設定:藍綠政黨風
2.有無遇到的問題:到底該加啥進去
3.製作感想:跟公共場所的識別設計一樣,在小地方下功夫總會耳目一新
4.製作作業的時間:基本半小時+小幽默3分鐘
1025445136 劉志彥

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 是以簡約的白色灰色搭配
2.有無遇到的問題? 一直當機 然後被語法搞到頭昏眼脹 一直重做 而且跑不出自己要的東西 不知道問題在哪
3.製作感想(你認為導覽列的意義維和 分類清楚吧
4.製作作業的時間 4個小時

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

(2).請回答以下問題:
1.導覽列配色與風格設定:深灰色和亮綠色 / 對比色
2.有無遇到的問題? : 有時候導覽列在瀏覽器的位子會跑掉,不過通常是沒問題
3.製作感想(你認為導覽列的意義為何):這次的導覽列較期中前的圖片是導覽列穩定,看起來也較清楚,讓網站看起來簡單舒服更好使用
4.製作作業的時間:30分鐘

1025445043

(1).作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445100
(2).請回答以下問題:
1.導覽列配色與風格設定:咖啡色系
2.有無遇到的問題? : 沒有講義就真的看不懂,講義幫了很大的忙
3.製作感想(你認為導覽列的意義為何):導覽列是網頁中最重要的指引標示,所以學會這個對將來網頁製作絕對有極大幫助
4.製作作業的時間:30分鐘

(1).作業網址 :http://mepopedia.com/~web103-a/hw04/hw04-1025445073
(2).請回答以下問題:
1.導覽列配色與風格設定:灰色和藍色
2.有無遇到的問題? : 沒有這次比較簡單
3.製作感想(你認為導覽列的意義為何):這次的導覽列較期中前的圖片是導覽列穩定,而且簡單,事前作業沒那麼複雜,看起來也比較清楚。
4.製作作業的時間:30分鐘
1025445073

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

請回答以下問題:
1.導覽列配色與風格設定: 簡約三色、黑白灰
2.有無遇到的問題? 有點忘記如何把整個頁面置中
3.製作感想:這次做起來比較簡單,但還是有些微不熟練,還要在努力下點功夫!
4.製作作業的時間 :半小時

1025445070



Edited 1 time(s). Last edit at 12/02/2014 11:52PM by 1025445070.
(編輯記錄)

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445169

1.導覽列配色與風格設定 : 一種清新的感覺,配上Snoopy圖
2.有無遇到的問題 : 沒有
3.製作感想 : 比以前更上手
4.製作作業的時間 : 30分

1025445169/視傳2A/古佳綺



Edited 1 time(s). Last edit at 12/03/2014 12:20AM by chia chi.
(編輯記錄)

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445175

1.導覽列配色與風格設定 :以突顯文字為主
2.有無遇到的問題 : 沒有
3.製作感想 : 終於有個比較簡單的作業了ya
4.製作作業的時間 : 20分

1025445175/視傳2A/張怡萱

作業網址
http://mepopedia.com/~web103-a/hw04/hw04-1025445178/

導覽列配色與風格設定 :
我很喜歡coldplay,圖片很繽紛,
導覽列滑過去的顏色就想說用暖的橘色來配


有無遇到的困難:

沒有 ,第一次做網頁設計做好快www,
唯一的小問題是不會置中 哈哈
圖片置中,可是導覽列卻靠左,不曉得那邊要調整

花的時間:20分鐘


spinning smiley sticking its tongue out
製作感想: 從一開始的完全不瞭解網頁設計,都看不懂,
到現在看得懂也可以直接快速地完成 做完都會看自己以前的東西覺得終於有進步一點了
smiling smiley

學號:1025445178 / 張祐寧

作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445001

請回答以下問題:
1.導覽列配色與風格設定:跟期中一樣
2.有無遇到的問題:兩種不同的語法搞得很混亂
3.製作感想:讓網站使用者清楚明瞭知道分類是最重要的。
做完這個感想就是,我要再更認真上課不然我還是搞不懂。
4.製作作業的時間:2個小時...

1025445001 蘇柔羽




Edited 1 time(s). Last edit at 12/03/2014 01:15AM by royu.
(編輯記錄)

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445223

1.導覽列配色與風格設定:藍色
2.有無遇到的問題? 算沒有?
3.製作感想: 比較簡單很開心【閉眼
4.製作作業的時間:20分鐘

1025445223 王芷漪

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 排球少年—烏野排球隊配色,橘黑白
2.有無遇到的問題? 沒有
3.製作感想:這樣設計的話比之前跟圖片結合的導覽列還要清爽
4.製作作業的時間:不包含找圖時間半小時

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

1.導覽列配色與風格設定:紫色系~
2.有無遇到的問題? 無
3.製作感想: 照著老師步驟比較容易
4.製作作業的時間 30分

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445079/

1.導覽列配色與風格設定 :對比色系
2.有無遇到的問題 : 沒有
3.製作感想 : 輕鬆多了
4.製作作業的時間 : 10幾分鐘

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

1.導覽列配色與風格設定:青綠色~
2.有無遇到的問題? 無
3.製作感想: 對語法比較認識了~
4.製作作業的時間:30分~

1025445058

1.作業網址:http://mepopedia.com/~web103-a/hw04/hw04-1005445091
2.導覽列配色與風格設定:清爽色系
3.有無遇到的問題?:一開始沒辦法置中
4.製作感想(你認為導覽列的意義為何):讓看的然方便點選
5.製作作業的時間:1hr

1005445091



Edited 1 time(s). Last edit at 12/03/2014 10:00AM by 小碧.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:淺綠色與深綠與我的主題做結合。
2.有無遇到的問題: 用的還蠻順利的,在變換顏色時有時候會搞混。
3.製作感想:製作完成時感覺比第一次做時還要來的輕鬆。
4.製作作業的時間 :25幾分鐘左右

(1).作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445025/
(2).請回答以下問題:
1.導覽列配色與風格設定: 舒服
2.有無遇到的問題? 沒問題
3.製作感想字要清楚明瞭
4.製作作業的時間 :25分



Edited 1 time(s). Last edit at 12/04/2014 06:58PM by 許函郁.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw04/hw04-1025445025/
(2).請回答以下問題:
1.導覽列配色與風格設定: 舒服
2.有無遇到的問題? 沒問題
3.製作感想字要清楚明瞭
4.製作作業的時間 :25分

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

1.導覽列配色與風格設定:藍色系
2.有無遇到的問題: 無
3.製作感想: 這次比較簡單
4.製作作業的時間 30分

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445160
1.導覽列配色與風格設定:柔和色系
2.有無遇到的問題 : 無
3.製作感想 : 這次的蠻簡單的,一次教一點較好吸收
4.製作作業的時間 : 10分

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

1.導覽列配色與風格設定:以黑色為主
2.有無遇到的問題? 無
3.製作感想: 沒遇到什麼問題
4.製作作業的時間 15分

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

1.導覽列配色與風格設定:紫色
2.有無遇到的問題? 無
3.製作感想: 無
4.製作作業的時間:課堂時間

1025445202

1.作業網址:http://mepopedia.com/~web103-a/hw04/hw04-1025445097
2.導覽列配色與風格設定:粉色系/少女風格
3.有無遇到的問題?:語法一樣複雜但內容比較簡單
4.製作感想(你認為導覽列的意義為何):看的方便,可以做更多選擇鍵讓讀者按
5.製作作業的時間:1小時

1025445097

作業網址 : http://mepopedia.com/~web103-a/hw04/hw04-1025445067/

1.導覽列配色與風格設定:色塊
2.有無遇到的問題: 沒有
3.製作感想: 做出來後真的會有一點成就感
4.製作作業的時間 :15分鐘

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

1.導覽列配色與風格設定:個人網頁 / 主色 艷紅 暖色
2.有無遇到的問題? 無
3.製作感想: 好想睡
4.製作作業的時間:有空的時候...

1025445055 許淑雯

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 鮮豔紅與橘
2.有無遇到的問題? 語法有點錯
3.製作感想(你認為導覽列的意義為何:要看講義才比較能做出來
4.製作作業的時間 1小時

1025445076 葉珈妤

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

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

導覽列的意義 :方便快速流覽網頁
4.製作作業的時間:30分鐘

.



Edited 2 time(s). Last edit at 01/05/2015 01:05PM by 1025445144.
(編輯記錄)

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445085

1.導覽列配色與風格設定:公主系列
2.有無遇到的問題? 覺得卡卡的,可是基本都會
3.製作感想:比之前更能看得懂程式碼了,進步了覺得開心
4.製作作業的時間:30分

1025445085

(1).作業網址 :http://mepopedia.com/~web103-a/hw04/hw04-1025445082/
(2).請回答以下問題:
1.導覽列配色與風格設定:色相高對比設計
2.有無遇到的問題: 沒有
3.製作感想: 製做順利,沒有遇到問題
4.製作作業的時間 :半小時左右

作業網址 ::http://mepopedia.com/~web103-a/hw04/hw04-1025445103

1.導覽列配色與風格設定:藍色調
2.有無遇到的問題:不熟悉軟體
3.製作感想: 這次製作的比較快
4.製作作業的時間:30分

1025445103 張秀安

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 德國國旗配色
2.有無遇到的問題?
3.製作感想:連結header的圖片,有整體性
4.製作作業的時間 :用期中作業修改,所以大概五分鐘

1005445195/黃沛容

http://mepopedia.com/~web103-a/hw04/hw04-1025445163
1.導覽列配色與風格設定:黑白
2.有無遇到的問題? 其實還滿多的
3.製作感想: 慢慢有在進步了

4.製作作業的時間:20分

1025445163

1.作業網址:http://mepopedia.com/~web103-a/final/final-1025445217
2.導覽列配色與風格設定:單一風格
3.有無遇到的問題?:無法與別的連接
5.製作作業的時間:2小時

1.作業網址:http://mepopedia.com/~web103-a/hw07/hw04-1025445184
2.網頁主題:superdry
3.配色與風格設定:黑橘色為主,白為輔
4.有無遇到的問題? 只要可以command+c+v都不是問題了
5.製作感想:終於完成了。
6.製作作業的時間:3~4day

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

(2).請回答以下問題:
1.導覽列配色與風格設定: 黑 白
2.有無遇到的問題? 語法有點錯
3.製作感想 我會努力 因為有點難
4.製作作業的時間 2小時

1025445163 曾國鼎

重新回覆
1.作業網址:http://mepopedia.com/~web103-a/hw04/hw04-1025445217
2.導覽列配色與風格設定:單一風格
3.有無遇到的問題?:無法與別的連接
4.製作作業的時間:2小時

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

1.導覽列配色與風格設定:大地色
2.有無遇到的問題? 有
3.製作感想: 覺得網頁設計是非常困難的東西
4.製作作業的時間 三小

(1).作業網址 ::C:\Users\usercoert\Desktop\hw07-1035445142\index.html

1.導覽列配色與風格設定:藍色系
2.有無遇到的問題? 無
3.製作感想: 還可以
4.製作作業的時間 1.2小時