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檔案,貼上以下語法



<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>以CSS製作網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> </head> <body> <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>


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



Edited 1 time(s). Last edit at 11/26/2014 09:55AM by JinJin.
(編輯記錄)

http://mepopedia.com/~web103-c/hw04/hw04-1025445147
1.導覽列配色與風格設定: 期中作業續用
2.有無遇到的問題:以上傳,卻連不到,無法顯示出來
3.製作感想:覺得這次做法跟期中作業作法對我來說都比較困難
4.製作作業的時間:二小時

1025445147 張 郁



Edited 1 time(s). Last edit at 12/02/2014 12:56AM by 詠月吾熹.
(編輯記錄)

http://mepopedia.com/~web103-c/hw04/hw04-1025445141
1.導覽列配色與風格設定: 以off white 品牌來製作
2.有無遇到的問題:以上傳卻無法顯示圖片
3.製作感想:恩 需看一下影片 研究一下
4.製作作業的時間:二小時

1025445141 王心仁



Edited 1 time(s). Last edit at 01/04/2015 10:51PM by 1025445141.
(編輯記錄)

http://mepopedia.com/~web103-c/hw04/hw04-1025445156

1.導覽列配色與風格設定:死魚眼 / 淺灰藍
2.有無遇到的問題:有
3.製作感想:非常花時間的作業
4.製作作業的時間:N小時

1025445156 蔡佳芬

http://mepopedia.com/~web103-c/hw04/hw04-1025445153

1.導覽列配色與風格設定: selena gomez的酷炫風格
2.有無遇到的問題:太多語法一起用,一下子就混亂了
3.製作感想:做出來的效果比期中做出來的效果更近一步
4.製作作業的時間:無法估計

1025445153 廖敏君

作業網址 : http://mepopedia.com/~web103-c/hw04/hw04-1025445072/


1.導覽列配色與風格設定: 神偷奶爸
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和 簡單明瞭
4.製作作業的時間 一個晚上


1025445072 王人永



Edited 1 time(s). Last edit at 12/02/2014 07:15PM by 1025445072.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:搭配Imagine Dragons樂團的風格
2.有無遇到的問題? 暫時沒有
3.製作感想(你認為導覽列的意義維和 簡單明瞭
4.製作作業的時間:半天

1025445090 鍾婷玟

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

(2).請回答以下問題:
1.導覽列配色與風格設定:與HBA品牌有關介紹 風格 紐約街頭
2.有無遇到的問題? 無大礙
3.製作感想: 看見人生跑馬燈
4.製作作業的時間:3小時以上

1025445144李欣翰

(1).作業網址 : http://mepopedia.com/~web103-c/final/final-1025445051/

(2).請回答以下問題:
1.導覽列配色與風格設定:日式配美式 /紅黑白
2.有無遇到的問題:要用opera開 不然很怪
3.製作感想(:有點難
4.製作作業的時間:半天

1025445051 林芳伃

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

(2).請回答以下問題:
1.導覽列配色與風格設定:藍色
2.有無遇到的問題? 一直不能置中 但是後來弄好了
3.製作感想(你認為導覽列的意義為何:明顯方便找到
4.製作作業的時間 一個晚上

http://mepopedia.com/~web103-c/hw04/hw04-1025445162
1.導覽列配色與風格設定: 期中作業續用
2.有無遇到的問題:不知道如何置中
3.製作感想:覺得很難
4.製作作業的時間:1小時

1025445162 陸怡潔

http://mepopedia.com/~web103-c/hw04/hw04-1025445180

1.導覽列配色與風格設定:甜美活潑風格
2.有無遇到的問題:有些語法還是會搞混
3.製作感想:做完很有成就感
4.製作作業的時間:60分鐘

1025445180 謝芷寧

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

(2).請回答以下問題:
1.導覽列配色與風格設定:淡色系/野餐主題
2.有無遇到的問題? 無
3.製作感想: 要隨時檢查語法有無錯誤
4.製作作業的時間 三小時

1025445054 許雅筑

http://mepopedia.com/~web103-c/hw04/hw04-1025445009
1.導覽列配色與風格設定:簡單粉色系
2.有無遇到的問題:之前有下面一直自己換行,幸好解決了
3.製作感想:學到很多東西的感覺
4.製作作業的時間:二小時

http://mepopedia.com/~web103-c/hw04/hw04-1025445018

1.導覽列配色與風格設定:斑馬,黑白。
2.有無遇到的問題:有遇到一些小問題 解決了。
3.製作感想:想做得更有質感。
4.製作作業的時間:1個小時。

1025445018 陳怡融

作業網址 : http://mepopedia.com/~web103-c/hw04/hw04-1025445060

1.導覽列配色與風格設定:可愛風格 期中作業延續

2.有無遇到的問題:研究很久還是不知道導覽列要怎麼跟圖片一起置中

3.製作感想: 不知道要怎麼置中

4.製作作業的時間: 3小時多

1025445060 黃淯婷

http://mepopedia.com/~web103-c/hw04/hw04-1025445039

1.導覽列配色與風格設定:日式簡約風格麵包店
2.有無遇到的問題:沒有
3.製作感想:完成很有成就感
4.製作作業的時間:兩個小時

1025445039 何佳霖

1).作業網址 :http://mepopedia.com/~web103-c/hw04/hw04-1025445108

(2).請回答以下問題:
1.導覽列配色與風格設定:簡單
2.有無遇到的問題? 不會置中
3.製作感想(你認為導覽列的意義為何:讓網頁更明瞭
4.製作作業的時間 2小時


1025445108 張惟婷

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

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

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

(2).請回答以下問題 :
1.導覽列配色與風格設定 : 比較穩重風格
2.有無遇到的問題 : 有一些小地方搞混
3.製作感想(你認為導覽列的意義為何) : 我覺得可以讓參訪網站者更能明確瞭解
4.製作作業的時間 : 12/2

1025445036 李易達

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

(2).請回答以下問題 :
1.導覽列配色與風格設定 : 比較愉快的感覺所以用淡藍色
2.有無遇到的問題 : 有一些語法有點不知道怎麼放 忘了怎麼置中
3.製作感想(你認為導覽列的意義為何) : 雖然可以用簡單的語法做導覽列但有些語法忘了怎麼使用需要回去再看講義
4.製作作業的時間 : 課堂+回家1~2小時

1025445102 邱筱惠

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


1.導覽列配色與風格設定:帶點復古簡單的配色
2.有無遇到的問題? 目前沒有
3.製作感想(你認為導覽列的意義為何) : 不同種製作方法
4.製作作業的時間:12/2

1025445123



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

1.導覽列配色與風格設定: 無
2.有無遇到的問題? 無
3.製作感想 難度不高 設定有些不熟悉
4.上課時間


視傳四C 1005445215 王時峰

http://mepopedia.com/~web103-c/hw04/hw04-1025445063


1.導覽列配色與風格設定:可愛貓咪風
2.有無遇到的問題:作這網頁都會卡卡的
3.製作感想:要多練 花蠻多時間 但看到成品就很開心
4.製作作業的時間:五個小時


1025445063 洪筠真

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

(2).請回答以下問題 :
1.導覽列配色與風格設定 : 比較心靈的感覺所以用墨綠色和深藍色
2.有無遇到的問題 : 無
3.製作感想(你認為導覽列的意義為何) : 幫助大家更加便利的搜尋想要的東西
4.製作作業的時間 : 課堂

1025445048 林侑慶



Edited 1 time(s). Last edit at 12/03/2014 11:58AM by Natoby.
(編輯記錄)

http://mepopedia.com/~web103-c/hw04/hw04-1025445087
1.導覽列配色與風格設定: 冷色系
2.有無遇到的問題:圖片太大
3.製作感想:很容易搞混
4.製作作業的時間:1小時

1025445087 陳盈君

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

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

1025445111 莊于萱

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

(2).請回答以下問題:
1.導覽列配色與風格設定:藍紫音樂風
2.有無遇到的問題? 無法置中
3.製作感想(你認為導覽列的意義為何? 給人按
4.製作作業的時間:56小時

1025445027

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

(2).請回答以下問題:
1.導覽列配色與風格設定:水藍色天空的感覺
2.有無遇到的問題:有點跟不太上
3.製作感想(你認為導覽列的意義維和 :讓網頁更加豐富
4.製作作業的時間 :一天


視傳2C 1025443044 王薏茹

http://mepopedia.com/~web103-c/hw04/hw04-1025445129
1.導覽列配色與風格設定: 藝人專輯
2.有無遇到的問題:上傳了連不到
3.製作感想:又學到一樣新東西
4.製作作業的時間:二小時

1025445129 王嬿婷

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

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


1025445120

http://mepopedia.com/~web103-c/hw04/hw04-1025445126
1.導覽列配色與風格設定: 簡單
2.有無遇到的問題:按鈕
3.製作感想:有點難
4.製作作業的時間:2小時

1025445126宋映萱

http://mepopedia.com/~web103-c/hw04/hw04-1025445132

1.導覽列配色與風格設定:snoppy /藍色系
2.有無遇到的問題:沒有
3.製作感想:希望能做出完整的網頁
4.製作作業的時間:2小時


1025445132 羅雅嫚

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

(2).請回答以下問題 :
1.導覽列配色與風格設定 : 有種馬卡龍甜甜味道的風格
2.有無遇到的問題 : 有些地方搞不懂
3.製作感想(你認為導覽列的意義為何) : 可以讓使用網站的人一眼就看到所要找尋的目標
4.製作作業的時間 : 12/21

1025445003 潘相逸

http://mepopedia.com/~web103-c/hw04/hw04-1025445117

1.導覽列配色與風格設定: PINK LUV.
2.有無遇到的問題:覺得還好 只是連結的部分 剛開始有點小問題 之後就OK了
3.製作感想: 有一次比一次熟練了
4.製作作業的時間:1小時多

不知道為什麼 上傳後打開的網頁 就變得不一樣??

1025445117 黃振誠



Edited 1 time(s). Last edit at 01/03/2015 04:31PM by 1025445171.
(編輯記錄)

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

(2).請回答以下問題:
1.導覽列配色與風格設定:淺藍色系
2.有無遇到的問題─須認真學習
3.製作感想─有導覽列,版面能見度差很多
4.製作作業的時間─2個小時

1025445138 梁奕堯

作業網址 : http://mepopedia.com/~web103-c/hw04/hw04-1025445030/


1.導覽列配色與風格設定: REDBULL
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義維和 簡單明瞭
4.製作作業的時間 一個下午


1025445030 王泰然

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

1.導覽列配色與風格設定:簡潔 白色搭配綠色與紅玫瑰色
2.有無遇到的問題? 無
3.製作感想(你認為導覽列的意義為何? 清楚明瞭 如果沒有導覽列畫面會變很亂
4.製作作業的時間:2小時

1025445192 黃婷萱

作業網址 : http://mepopedia.com/~web103-c/hw04/hw04-1025445135/


1.導覽列配色與風格設定:水藍和粉紅色
2.有無遇到的問題:置中用不出來
3.製作感想:還行
4.製作作業的時間:2小時


1025445135 李品萱

http://mepopedia.com/~web103-c/hw04/hw04-1025445165
1.導覽列配色與風格設定:
2.有無遇到的問題:按鈕有些問題
3.製作感想:複雜
4.製作作業的時間:2小時

1025445165

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

(2).請回答以下問題:
1.導覽列配色與風格設定:較簡單的顏色去搭配
2.有無遇到的問題 無
3.製作感想 覺得導覽列,可以有很多種形式
4.製作作業的時間 上課時間

1005445191 陳佳雯

(1).作業網址 : http://mepopedia.com/~web103-c/hw07/hw07-1025445174


(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 藍色系
2.有無遇到的問題? 不太熟
3.製作感想: 有點難
4.製作作業的時間:很多天

1025445174 黃琪雅

1).作業網址 : http://mepopedia.com/~web103-c/hw04/hw04-1025445096

(2).請回答以下問題:
1.網頁主題: 配色與風格設定: 灰色
2.有無遇到的問題? css很複雜
3.製作感想: 很慶幸做成功了
4.製作作業的時間:一天

1025445096 徐琬凌

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

(2).請回答以下問題:
1.網頁主題: 配色與風格設定:以老範例為主
2.有無遇到的問題?:做這麼多次我依然覺得 css很難
3.製作感想: 以眼睛的疲勞為代價,換來製作完成的喜悅
4.製作作業的時間:一整天

1025445033 林子軒

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

(2)
1.製作作業的時間:很多天
2.有無遇到的問題:語法太多太複雜會搞混
3.製作心得與感想:雖然遇到很多瓶頸可是當作玩的時候還是很有成就感
4.本學期於網頁設計課程上的收穫:是一堂令人壓力很大可是卻充實的課程

1025445010 謝佳蓁