[講義04] 以CSS製作網頁導覽列
|
[講義04] 以CSS製作網頁導覽列 |
Moderator October 25, 2011 10:31PM 發表文章數: 1,229 |
接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能
[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/
首先談到的是[color=#CC0099]網頁導覽列的製作[/color]，其中分為以清單 ul 及 li 製作與圖片製作兩類
[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]
[color=#666600]導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。
在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。
以往許多類似的做法，有用表格table製作，或用圖片製作，各有其優缺點：
以表格製作雖然看似架構簡單，但表格本身實際內容複雜(包含TR TD)，以CSS設定會更為繁瑣。
以圖片來製作雖然變化較多，但修改不易（例如只是修改文字內容，整張圖片或一組圖片就需重作）。
以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定，但圖片則要整組重作（有時數目可能非常多）。
有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現：
Table: http://www.sitepoint.com/examples/cssvtables/tables4.html
(此例中的留著許多邊框是為了凸顯多層表格，不是設計得不好看)
CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html
[/color]
[hr]
以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：
清單文字採用[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]，並使用[color=#CC0066]＜li＞標籤定義個別項目[/color]，例如：
即會產生以下的清單列
- About
- Works
- Video
- Links
- Story
接著，加入[color=#CC0066]連結[/color]的語法
即會產生以下有連結的清單列
接著[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]
語法為：
1. 完整語法（含header )
[hr]
接下來就開始開始[color=#CC0066]設定ＣＳＳ[/color]的部分
#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;
[color=#CC3300]/*文字設定*/[/color]
font-weight: bolder;
color: #FFF;
font-size: 14px;
[color=#993300]/*將內定的邊距清除*/[/color]
margin: 0px;
[color=#993300]/*將清單內定的內距清除(無清除，則左側會多出約40px，範例二可不用加這一項*/[/color]
padding:0px;
}
1. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]
#button li {
[color=#CC0099]/* 讓各個清單元素靠左對齊，由原本的垂直排列變成水平排列，形成水平清單 */[/color]
float:left;
[color=#CC0099]/* 設定清單文字範圍的寬度 */[/color]
width:178px;
[color=#CC0099]/* 去除清單文字前面的小點*/[/color]
list-style-type:none;
[color=#CC0099]/* 讓清單文字居中對齊 */[/color]
text-align:center;
[color=#CC3300]/* 設定背景色，依個人喜好調整背景色，但要符合整設計風格 */[/color]
background-color:#6E6E6E;
[color=#CC3300]/* 設定字距為2px，非必要 */[/color]
letter-spacing: 2px;
[color=#CC3300]/* 設定左邊的白邊樣式，可依個人喜好調整 */[/color]
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
[color=#CC3300]/* 右邊留白1像素 ，可依個人喜好調整*/[/color]
margin-right:1px;
}
#button li a {
[color=#CC0099]/* 連結範圍充滿整個區塊 */[/color]
display: block;
[color=#CC0099]/* 單個連結範圍的框度和高度*/[/color]
width: 180px;
height:20px;
[color=#CC3300]/* 設定連結範圍向上的內距，依狀況調整 */[/color]
padding-top:2px;
[color=#CC3300]/* 連結的文字設為白色以及無裝飾(無底線) ，依個人喜好調整背景色，但要符合整設計風格*/[/color]
color: #FFF;
text-decoration: none;
}
#button li a:hover{
[color=#993300]/* 設定滑鼠移過時，清單改變的底色設定 */[/color]
background-color:#39919F;
}
完成範例
http://mepopedia.com/~jinjin/web/hw04-1/ （滑入底色變色及文字置中的導覽列）
[hr]
2. [color=#CC3300]2.改變文字顏色的做法[/color]
#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;
}
#button li a {
display: block;
width: 169px;
height: 22px;
padding-top:2px;
color: #FFF;
text-decoration: none;
}
#button li a:hover{
/* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}
完成範例
http://mepopedia.com/~jinjin/web/hw04/ （滑入僅文字變色的導覽列）
[hr]
[color=#990000]二、以圖片置入製作網頁導覽列[/color]
[color=#CC0066]※以圖片製作導覽按鈕的優點：可依設計者喜好設計多樣風格的按鈕
※以圖片製作導覽按鈕的缺點：修改較不方便，一定要進繪圖軟體修改，製作時間較長，檔案容量較大[/color]
1.以photoshop製作頂圖及按鈕
設定與裁切好尺寸，此範例設定為寬900px，按鈕寬180px，高21px
以參考線（尺規CTRL+R 拉出參考線）拉出所需的長寬
[IMG]http://mepopedia.com/~jinjin/web/img/4-01.jpg[/IMG]
[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性
[IMG]http://mepopedia.com/~jinjin/web/img/4-02.jpg[/IMG]
[hr]
3.在同一位置放上中英文字
[IMG]http://mepopedia.com/~jinjin/web/img/4-03.jpg[/IMG]
[hr]
4.將文字分別複製修改至適當位置
[IMG]http://mepopedia.com/~jinjin/web/img/4-04.jpg[/IMG]
[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作
[IMG]http://mepopedia.com/~jinjin/web/img/4-05.jpg[/IMG]
[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）
[IMG]http://mepopedia.com/~jinjin/web/img/4-06.jpg[/IMG]
[hr]
7.直接按確定
[IMG]http://mepopedia.com/~jinjin/web/img/4-07.jpg[/IMG]
[hr]
8.格式選[color=#CC0066]僅影像[/color]，全部使用者切片，按確定
[IMG]http://mepopedia.com/~jinjin/web/img/4-08.jpg[/IMG]
[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中
[IMG]http://mepopedia.com/~jinjin/web/img/4-09.jpg[/IMG]
[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出
[IMG]http://mepopedia.com/~jinjin/web/img/4-10.jpg[/IMG]
[hr]
11.在切片的選項，選取 [color=#CC0066]選取的切片[/color]
[IMG]http://mepopedia.com/~jinjin/web/img/4-11.jpg[/IMG]
即會在images資料夾，自動產生英文組的按鈕
[hr]
放入按鈕的方法，請見講義三
連結按鈕的方法請參考下圖
[IMG]http://mepopedia.com/~jinjin/web/img/4-12.jpg[/IMG]
[hr]
3. 三、範例語法
4. [color=#CC0099]1.範例圖片按鈕的語法如下[/color]
1. 1.HTML語法：
2. 2.CSS部分的語法如下：
5. [color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]
1. 1.HTML語法：
2. 2.CSS部分的語法如下：
[hr]
依然沒有錄到聲音>"<
http://youtu.be/Q3QV5El081c
Edited 29 time(s). Last edit at 11/22/2017 04:53PM by JinJin.
(編輯記錄)
MEPOERs said:
HP: JinJin老師講義製作得真是超級用心。不僅有完整的 HTML/CSS 原始碼，連怎麼用Photoshop作圖片都有Step-by-Step的教學呢！
|
1035445156
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
December 17, 2015 08:40PM 發表文章數: 20 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1035445156
(2).請回答以下問題：
1.導覽列配色與風格設定：龍貓
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 30分
(2).請回答以下問題：
1.導覽列配色與風格設定：龍貓
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 30分
|
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
December 30, 2015 12:49AM 發表文章數: 19 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1035445090
(2).請回答以下問題：
1.導覽列配色與風格設定：唐老鴨
2.有無遇到的問題? 有一些忘光
3.製作感想 :一開始不知道從哪著手，之後慢慢做
4.製作作業的時間 一小時
(2).請回答以下問題：
1.導覽列配色與風格設定：唐老鴨
2.有無遇到的問題? 有一些忘光
3.製作感想 :一開始不知道從哪著手，之後慢慢做
4.製作作業的時間 一小時
|
H224488882
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
January 11, 2017 12:07PM 發表文章數: 16 |
(1).作業網址 ： http://mepopedia.com/~web105-2c/final/final-1045445217/index2.html
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單黑白灰
2.有無遇到的問題? 很大的問題
3.製作感想 :累
4.製作作業的時間 兩小時
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單黑白灰
2.有無遇到的問題? 很大的問題
3.製作感想 :累
4.製作作業的時間 兩小時
|
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
December 20, 2015 07:47PM 發表文章數: 19 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1035445018
(2).請回答以下問題：
1.導覽列配色與風格設定：小王子
2.有無遇到的問題? 無
3.製作感想 :比前面作業還要容易上手
4.製作作業的時間 30分
(2).請回答以下問題：
1.導覽列配色與風格設定：小王子
2.有無遇到的問題? 無
3.製作感想 :比前面作業還要容易上手
4.製作作業的時間 30分
|
1035445027
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
December 23, 2015 03:03PM 發表文章數: 18 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1035445027
(2).請回答以下問題：
1.導覽列配色與風格設定：魯魯米
2.有無遇到的問題? 無
3.製作感想 :容易上手
4.製作作業時間:30分鐘
(2).請回答以下問題：
1.導覽列配色與風格設定：魯魯米
2.有無遇到的問題? 無
3.製作感想 :容易上手
4.製作作業時間:30分鐘
|
1035445201
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
January 07, 2016 12:41AM 發表文章數: 19 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1035445201
(2).請回答以下問題：
1.導覽列配色與風格設定:美國恐怖故事
2.有無遇到的問題?
3.製作感想 :容易上手
4.製作作業時間:30分鐘
(2).請回答以下問題：
1.導覽列配色與風格設定:美國恐怖故事
2.有無遇到的問題?
3.製作感想 :容易上手
4.製作作業時間:30分鐘
|
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
January 07, 2016 02:20AM 發表文章數: 20 |
(1).作業網址 ：file:///C:/Users/gina/Desktop/hw04-1035445114/index.html
(2).請回答以下問題：
1.導覽列配色與風格設定：柴犬
2.有無遇到的問題? 無
3.製作感想 : 心想事成
4.製作作業的時間 30分鐘
(2).請回答以下問題：
1.導覽列配色與風格設定：柴犬
2.有無遇到的問題? 無
3.製作感想 : 心想事成
4.製作作業的時間 30分鐘
|
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
June 16, 2016 11:37AM 發表文章數: 10 |
(1).作業網址 ：http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題：
1.導覽列配色與風格設定：繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見，弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚，語法也都亂七八糟，希望不會有人拿我得去改應該會很痛苦
4.製作作業的時間 :好久好久
(2).請回答以下問題：
1.導覽列配色與風格設定：繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見，弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚，語法也都亂七八糟，希望不會有人拿我得去改應該會很痛苦
4.製作作業的時間 :好久好久
|
1045440020
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
June 16, 2016 01:50PM 發表文章數: 10 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1045440020
(2).請回答以下問題：
1.導覽列配色與風格設定：多莉
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :波棒
4.製作作業的時間 30分
(2).請回答以下問題：
1.導覽列配色與風格設定：多莉
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :波棒
4.製作作業的時間 30分
|
Re: [講義04] 以CSS製作網頁導覽列 |
January 11, 2017 12:16AM 發表文章數: 22 |
1).作業網址 ：file:///C:/Users/tr558/Desktop/10/hw04-1045445108/index.html
(2).請回答以下問題：
1.導覽列配色與風格設定：灌籃高手
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 20
(2).請回答以下問題：
1.導覽列配色與風格設定：灌籃高手
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 20
|
1045445177
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
January 11, 2017 11:54AM 發表文章數: 23 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1045445177
(2).請回答以下問題：
1.導覽列配色與風格設定：荳荳
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :還好沒太多感觸
4.製作作業的時間 一天一點點
(2).請回答以下問題：
1.導覽列配色與風格設定：荳荳
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :還好沒太多感觸
4.製作作業的時間 一天一點點
|
misoomisooo
[ 站內寄信 / PM ]
Re: [講義04] 以CSS製作網頁導覽列
分類標籤: 網頁設計與語法（HTML/CSS）
|
January 17, 2018 03:23PM 發表文章數: 5 |
(1).作業網址 ： http://mepopedia.com/~web104-2c/hw04/hw04-1055445081
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 影片沒聲音只能靠自己的眼睛跟腦袋
3.製作感想 :還好不會很難
4.製作作業的時間 20min(?)
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 影片沒聲音只能靠自己的眼睛跟腦袋
3.製作感想 :還好不會很難
4.製作作業的時間 20min(?)
MEPO forum
is powered by Phorum.