Changed By: JinJin
Change Date: December 07, 2017 08:51AM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

<b>[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/　

</b>

首先談到的是<b>[color=#CC0099]網頁導覽列的製作[/color]</b>，其中分為以清單 ul 及 li 製作與圖片製作兩類

<h1>[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]</h1>

[color=#666600]<b>導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格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
</b>[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/color]，例如：

<xmp>
<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

即會產生以下的清單列

<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>

接著，加入<b>[color=#CC0066]連結[/color]</b>的語法

<xmp><ul>
<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>
</xmp>

即會產生以下有連結的清單列
<ul>
<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>

接著<b>[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]</b>

語法為：

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

<h3>完整語法（含header )</h3>
<xmp><!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>
<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 id="content"></div>
<div id="footer"></div>

</div>
</body>
</html>
</xmp>

[hr]

接下來就開始開始<b>[color=#CC0066]設定ＣＳＳ[/color]</b>的部分

<pre>
#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;
}

</pre>

<h2><b>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]</b></h2>

<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

[hr]

<h1>[color=#990000]二、以圖片置入製作網頁導覽列[/color]</h1>

[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.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[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.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

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

<h2>三、範例語法</h2>

<h2>[color=#CC0099]1.範例圖片按鈕的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')">

<div id="wrapper">

<div id="header">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</div>

<div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div>

<div id="content">
<p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>

</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

<h2>[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</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 id="content">
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-color: #4B92B0;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #4B92B0;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c
<iframe width="853" height="480" src="//www.youtube.com/embed/Q3QV5El081c?rel=0" frameborder="0" allowfullscreen></iframe>

Changed By: JinJin
Change Date: November 22, 2017 04:53PM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

<b>[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/　

</b>
<b>範列 hw04 (文字變色)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-1.jpg />

<b>範列 hw04-1 (背景變色及文字置中)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-2.jpg />

<b>範列 hw04-2 (圖片式導覽列)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-3.jpg />

首先談到的是<b>[color=#CC0099]網頁導覽列的製作[/color]</b>，其中分為以清單 ul 及 li 製作與圖片製作兩類

<h1>[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]</h1>

[color=#666600]<b>導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格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
</b>[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/color]，例如：

<xmp>
<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

即會產生以下的清單列

<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>

接著，加入<b>[color=#CC0066]連結[/color]</b>的語法

<xmp><ul>
<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>
</xmp>

即會產生以下有連結的清單列
<ul>
<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>

接著<b>[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]</b>

語法為：

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

<h3>完整語法（含header )</h3>
<xmp><!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>
<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 id="content"></div>
<div id="footer"></div>

</div>
</body>
</html>
</xmp>

[hr]

接下來就開始開始<b>[color=#CC0066]設定ＣＳＳ[/color]</b>的部分

<pre>
#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;
}

</pre>

<h2><b>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]</b></h2>

<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa10.jpg[/IMG]

[hr]
11.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]
text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

[hr]

<h1>[color=#990000]二、以圖片置入製作網頁導覽列[/color]</h1>

[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.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[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.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

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

<h2>三、範例語法</h2>

<h2>[color=#CC0099]1.範例圖片按鈕的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')">

<div id="wrapper">

<div id="header">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</div>

<div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div>

<div id="content">
<p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>

</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

<h2>[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</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 id="content">
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-color: #4B92B0;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #4B92B0;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c
<iframe width="853" height="480" src="//www.youtube.com/embed/Q3QV5El081c?rel=0" frameborder="0" allowfullscreen></iframe>

Changed By: JinJin
Change Date: December 01, 2015 03:54PM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

<b>[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/　

</b>
<b>範列 hw04 (文字變色)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-1.jpg />

<b>範列 hw04-1 (背景變色及文字置中)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-2.jpg />

<b>範列 hw04-2 (圖片式導覽列)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-3.jpg />

首先談到的是<b>[color=#CC0099]網頁導覽列的製作[/color]</b>，其中分為以清單 ul 及 li 製作與圖片製作兩類

<h1>[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]</h1>

[color=#666600]<b>導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格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
</b>[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/color]，例如：

<xmp>
<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

即會產生以下的清單列

<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>

接著，加入<b>[color=#CC0066]連結[/color]</b>的語法

<xmp><ul>
<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>
</xmp>

即會產生以下有連結的清單列
<ul>
<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>

接著<b>[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]</b>

語法為：

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

<h3>完整語法（含header )</h3>
<xmp><!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">
< [color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;

/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>
<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 id="content"></div>
<div id="footer"></div>

</div>
</body>
</html>
</xmp>

[hr]

接下來就開始開始<b>[color=#CC0066]設定ＣＳＳ[/color]</b>的部分

<pre>
#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;
}

</pre>

<h2><b>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]</b></h2>

<pre>
#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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa10.jpg[/IMG]

[hr]
11.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]
text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

[hr]

<h1>[color=#990000]二、以圖片置入製作網頁導覽列[/color]</h1>

[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.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[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.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

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

<h2>三、範例語法</h2>

<h2>[color=#CC0099]1.範例圖片按鈕的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')">

<div id="wrapper">

<div id="header">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</div>

<div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div>

<div id="content">
<p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>

</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

<h2>[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</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 id="content">
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-color: #4B92B0;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #4B92B0;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c
<iframe width="853" height="480" src="//www.youtube.com/embed/Q3QV5El081c?rel=0" frameborder="0" allowfullscreen></iframe>

Changed By: JinJin
Change Date: November 26, 2015 11:42AM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

<b>[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/　

</b>
<b>範列 hw04 (文字變色)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-1.jpg />

<b>範列 hw04-1 (背景變色及文字置中)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-2.jpg />

<b>範列 hw04-2 (圖片式導覽列)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-3.jpg />

首先談到的是<b>[color=#CC0099]網頁導覽列的製作[/color]</b>，其中分為以清單 ul 及 li 製作與圖片製作兩類

<h1>[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]</h1>

[color=#666600]<b>導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格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
</b>[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/color]，例如：

<xmp>
<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

即會產生以下的清單列

<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>

接著，加入<b>[color=#CC0066]連結[/color]</b>的語法

<xmp><ul>
<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>
</xmp>

即會產生以下有連結的清單列
<ul>
<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>

接著<b>[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]</b>

語法為：

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

<h3>完整語法（含header )</h3>
<xmp><!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">
< [color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;

/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>
<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 id="content"></div>
<div id="footer"></div>

</div>
</body>
</html>
</xmp>

[hr]

接下來就開始開始<b>[color=#CC0066]設定ＣＳＳ[/color]</b>的部分

<pre>
#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;
}

</pre>

<h2><b>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]</b></h2>

<pre>
#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;
width: 160px;
　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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa10.jpg[/IMG]

[hr]
11.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]
text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

[hr]

<h1>[color=#990000]二、以圖片置入製作網頁導覽列[/color]</h1>

[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.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[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.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

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

<h2>三、範例語法</h2>

<h2>[color=#CC0099]1.範例圖片按鈕的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')">

<div id="wrapper">

<div id="header">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</div>

<div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div>

<div id="content">
<p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>

</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

<h2>[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</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 id="content">
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-color: #4B92B0;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #4B92B0;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c
<iframe width="853" height="480" src="//www.youtube.com/embed/Q3QV5El081c?rel=0" frameborder="0" allowfullscreen></iframe>

Changed By: JinJin
Change Date: November 02, 2011 08:13AM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

<b>[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/　

</b>
<b>範列 hw04 (文字變色)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-1.jpg />

<b>範列 hw04-1 (背景變色及文字置中)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-2.jpg />

<b>範列 hw04-2 (圖片式導覽列)</b>

<img width=100% src=http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-3.jpg />

首先談到的是<b>[color=#CC0099]網頁導覽列的製作[/color]</b>，其中分為以清單 ul 及 li 製作與圖片製作兩類

<h1>[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]</h1>

[color=#666600]<b>導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格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
</b>[/color]

[hr]

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法：

清單文字採用<b>[color=#CC0066]＜ul＞標籤定義清單的範圍[/color]</b>，並使用[color=#CC0066]<b>＜li＞標籤定義個別項目</b>[/color]，例如：

<xmp>
<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>
</xmp>

即會產生以下的清單列

<ul>
<li>About</li>
<li>Works</li>
<li>Video</li>
<li>Links</li>
<li>Story</li>
</ul>

接著，加入<b>[color=#CC0066]連結[/color]</b>的語法

<xmp><ul>
<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>
</xmp>

即會產生以下有連結的清單列
<ul>
<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>

接著<b>[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]</b>

語法為：

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

<h3>完整語法（含header )</h3>
<xmp><!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">
< [color=#CC3300]/*背景色設定*/[/color]
　　 background-color:#6E6E6E;

/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>
<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 id="content"></div>
<div id="footer"></div>

</div>
</body>
</html>
</xmp>

[hr]

接下來就開始開始<b>[color=#CC0066]設定ＣＳＳ[/color]</b>的部分

<pre>
#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;
}

</pre>

<h2><b>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]</b></h2>

<pre>
#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;
width: 160px;
　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;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

<h2><b>[color=#CC3300]2.改變文字顏色的做法[/color]</b></h2>
<pre>
#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;
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa10.jpg[/IMG]

[hr]
11.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]
text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
color: #7CCBDC;
}

</pre>

<b>完成範例</b>
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）

[hr]

<h1>[color=#990000]二、以圖片置入製作網頁導覽列[/color]</h1>

[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.格式選<b>[color=#CC0066]僅影像[/color]</b>，全部使用者切片，按確定

[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.在切片的選項，選取　<b>[color=#CC0066]選取的切片[/color]</b>

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

<h2>三、範例語法</h2>

<h2>[color=#CC0099]1.範例圖片按鈕的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')">

<div id="wrapper">

<div id="header">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</div>

<div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div>

<div id="content">
<p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>

</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
borde <p><img src="images/MONET_03.jpg" width="835" height="312"></p>
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
2;
eft-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

<h2>[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]</h2>

<h3>1.HTML語法：</h3>

<xmp><!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">
<h1> <strong>Claude Monet</strong></h1>
<span class="header-text">forever Impressionism </span>
</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 id="content">
<p class="text-s">藍色調的睡蓮</p>
<p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p>
<p> 莫內是法國畫家，是印象主義的創立者之一，而且只有他一人終其一生都堅持印象主義的原則和目標，也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力，直到他早期的印象主義繪畫還保留著這項特質，使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮，忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：台北校區：116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by JinJin
</div>
</div>
</body>
</html>
</xmp>

<h3>2.CSS部分的語法如下：</h3>

<xmp>@charset "utf-8";
/* CSS Document */

body {
background-color: #4188A6; /*底色*/
margin: 0px; /*緊貼頂部*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-color: #4B92B0;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

/*******按鈕不同部分*******/
#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
/* 讓各個清單元素靠左對齊 */
float:left;

/* 設定清單文字範圍的寬度 */
width:178px;

/* 去除清單文字前面的小點*/
list-style-type:none;

/* 設定背景色 */
background-color:#6E6E6E;

/* 讓清單文字居中對齊 */
text-align:center;

/* 設定字距為2px */
letter-spacing: 2px;

/* 設定左邊的白邊樣式 */
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;

/* 右邊留白1像素 */
margin-right:1px;
}

#button li a {
/* 連結範圍充滿整個區塊 */
display: block;

/* 單個連結範圍的框度和高度*/
width: 180px;
height:20px;

/* 連結範圍向上的內距 */
padding-top:2px;

/* 連結的文字設為白色以及無裝飾(無底線) */
color: #FFF;
text-decoration: none;
}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F
}

/*******按鈕部分結束*******/

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #4B92B0;
}

/************標題設定************/

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px; /*清除原有的距離*/
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

/************表格設定************/

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

/************表格標題************/
.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

/************連結設定************/

#content a {
color: #278092;
text-decoration: none;
}

/************連結滑鼠移過時的設定************/

#content a:hover {
color: #903;
text-decoration: underline;
}

/************靠左浮動的設定(繞圖排文時，圖片的設定)************/

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

/************靠右浮動的設定(繞圖排文時，圖片的設定)************/
.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

/************清除浮動的設定(繞圖排文時，文字的設定)************/
.clearboth {
clear: both;
}

</xmp>

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c
<iframe width="853" height="480" src="//www.youtube.com/embed/Q3QV5El081c?rel=0" frameborder="0" allowfullscreen></iframe>

Changed By: JinJin
Change Date: November 02, 2011 08:05AM

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

Changed By: JinJin
Change Date: November 02, 2011 12:02AM

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

Changed By: JinJin
Change Date: November 01, 2011 11:06PM

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

Changed By: JinJin
Change Date: November 01, 2011 11:01PM

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

Changed By: JinJin
Change Date: November 01, 2011 11:00PM

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

Changed By: JinJin
Change Date: November 01, 2011 10:59PM

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

Changed By: JinJin
Change Date: October 26, 2011 08:10PM

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

Changed By: JinJin
Change Date: October 26, 2011 08:06AM

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

Changed By: JinJin
Change Date: October 26, 2011 08:05AM

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

Changed By: JinJin
Change Date: October 26, 2011 07:56AM

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

Changed By: JinJin
Change Date: October 26, 2011 07:48AM

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

Changed By: mepoadm
Change Date: October 26, 2011 01:34AM

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

Changed By: mepoadm
Change Date: October 26, 2011 12:18AM

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

Changed By: mepoadm
Change Date: October 26, 2011 12:15AM

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

Changed By: mepoadm
Change Date: October 26, 2011 12:11AM

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

Changed By: mepoadm
Change Date: October 26, 2011 12:05AM

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

Changed By: mepoadm
Change Date: October 26, 2011 12:02AM

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

Changed By: JinJin
Change Date: October 25, 2011 11:35PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:46PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:41PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:38PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:37PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:35PM

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

Changed By: JinJin
Change Date: October 25, 2011 10:34PM

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

Original Message

作者: JinJin
Date: October 25, 2011 10:31PM

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

接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

[color=#0033CC]永遠的印象--莫內，範例網址：[/color]
[color=#CC3300]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
[color=#669999]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]

[color=#CC3366]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://[color=#CC3300]2.以圖片按鈕製作的導覽列[/color]
mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#669999]2.以圖片按鈕製作的導覽列[/color]
[color=#CC0099]2.以圖片按鈕製作的導覽列[/color]
[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-1.jpg[/IMG]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/hw04-2.jpg[/IMG]
p://i1136.photobucket.com/albums/n481/parkpa首先rkya：
bums/n481/parkparkyang/hw04-2.jpg[/IMG]

範列 hw04-2 (圖片式導覽列)

[IMG]http://[color=#666600]導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並且點擊。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以往許多類似的做法，有用表格table製作，或用圖片製作，都有其優缺點，以表格製作的彈性較小，以圖片來製作雖然變化較多，但修改不易。

以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢，既簡潔又富設計感，修改也容易。[/color]
kparkyang/hw04-3.jpg[/IMG]色

首先談到的是[color=#CC0099]網頁導覽

About

Works

Video

Links

Story

接著，加入[color=#CC0066]連結[/color]的語法

列的製作[/color]，期中分為以清單 ul 及 li 製作與圖片製作兩類
��導覽列)

首先談到的是[color=#CC0099]網頁導覽列的製作[/color]，其中分為以清單 ul 及 li 製作與圖片製作兩類

[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]

[color=#666600]導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽
雜(包含TR TD)，以CSS設定會更為繁瑣。

以圖片來製作雖然變化較多，但修改不易（例如只是修改文字內容，整張圖片或一組圖片就需重作）。

以清單 ul 及 l

即會產生以下的清單列

About

Works

Video

Links

Story

接著，加入[color=#CC0066]連結[/color]的語法

即會產生以下有連結的清單列

About

Works

Video

Links

Story

接著[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]

[color=#99CC99]/*高度設定*/[/color]
height: 22px;

[color=#99CC99]/*文字設定*/[/color]
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
　　 background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

　　/*將內定的內距清除，範例一可不用加這一項*/
語法為：

[hr]

[color=#CC0066]◎　HTML的部分，測試時可直接ＣＯＰＹ此範例修改，但要了解其中意義[/color]

[hr]
接下來的幾份講義將以下莫內網站，來解說不同的網頁設計功能

[color=#0033CC]永遠的印象--莫內，範例網址：[/color]

[color=#CC3366]1.透過CSS，以清單＜ul＞及＜li＞製作網頁導覽列[/color]
http:/ 　　/* 設定滑鼠移過時，清單改變的底色設定 */
　background-color:#39919F
　　　}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

[color=#CC3300]2.改變文字顏色的做法[/color]

#button li {
float: left;
list-style-type: none;
letter-spacing: 2[hr]

[color=#CC0066]作業ＣＳＳ的部分可直接複製此段修改，但要了解意義，內容不可一樣，可以期中作業內容來製作[/color]

@charset "utf-8";
/* CSS Document */

body {
　　　background-color: #278092;
　　　margin: 0px;
　　　}

#wrapper {
　　width: 900px; /*寬度設定為900px*/
　　margin: auto; /*版面居中對齊*/
　　border: 2px solid #DEECDF;
}

#header {
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
　 background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
　　/* 讓各個清單元素靠左對齊 */
　　float:left;

　/* 設定清單文字範圍的寬度 */
　　width:178px;

　/* 去除清單文字前面的小點*/
　　 list-style-type:none;
　
　/* 設定背景色 */
　　background-color:#6E6E6E;

　/* 讓清單文字居中對齊 */
　　text-align:center;

　/* 設定字距為2px */
　letter-spacing: 2px;

　/* 設定左邊的白邊樣式 */
　border-left-width: 1px;
　border-left-style: solid;
　border-left-color: #FFF;

　/* 右邊留白1像素 */
　　 margin-right:1px;
　　　}

#button li a {
　/* 連結範圍充滿整個區塊 */
　　display: block;

　/* 單個連結範圍的框度和高度*/
　width: 180px;
　height:20px;

　　/* 連結範圍向上的內距 */
　padding-top:2px;

　/* 連結的文字設為白色以及無裝飾(無底線) */
　color: #FFF;
　text-decoration: none;
　　　}

#button li a:hover{
　　/* 設定滑鼠移過時，清單改變的底色設定 */
　background-color:#39919F
　　　}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px;
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
　　}

.title-1 {
　　font-size: 18px;
　　line-height: 2em;
　　border-bottom-width: 1px;
　　border-left-width: 12px;
　　border-bottom-style: dotted;
　　border-left-style: dotted;
　　border-bottom-color: #417C9A;
　　border-left-color: #417C9A;
　　color: #187E95;
　　　}

.text-s {
　　font-size: 13px;
　　color: #6F6CA1;
　　border-left-width: 2px;
　　border-left-style: dotted;
　　border-left-color: #8081B1;
　　padding-left: 5px;
　　font-weight: bolder;
　　}

px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
padding-left: 10px;
}

#button li a {
　 display: block;
width: 160px;
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://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選[color=#CC0066]僅影像[/color]，全部使用者切片，按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-08.jpg[/IMG]

[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa09.jpg[/IMG]

[hr]
10.將英文按鈕的部分，按住ＳＨＩＦＴ分別選取，按確定輸出

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa10.jpg[/IMG]

[hr]
11.在切片的選項，選取　[color=#CC0066]選取的切片[/color]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa11.jpg[/IMG]

即會在images資料夾，自動產生英文組的按鈕

[hr]

[color=#CC0066]作業ＣＳＳ的部分可直接複製此段修改，但要了解意義，內容不可一樣，可以期中作業內容來製作[/color 　　float:left;

　/* 設定清單文字範圍的寬度 */
　　width:178px;

　/* 去除清單文字前面的小點*/
　　 list-style-type:none;
　
　/* 設定背景色 */
　　background-color:#6E6E6E;

　/* 讓清單文字居中對齊 */
　　text-align:center;

　/* 設定字距為2px */
　letter-spacing: 2px;

　/* 設定左邊的白邊樣式 */
　border-left-width: 1px;
　border-left-style: solid;
　border-left-color: #FFF;

　/* 右邊留白1像素 */
　　 margin-right:1px;
　　　}

#button li a {
　/* 連結範圍充滿整個區塊 */
　　display: block;

　/* 單個連結範圍的框度和高度*/
　width: 180px;
　height:20px;

　　/* 連結範圍向上的內距 */
　padding-top:2px;

　/* 連結的文字設為白色以及無裝飾(無底線) */
　color: #FFF;
　text-decoration: none;
　　　}

#button li a:hover{
　　/* 設定滑鼠移過時，清單改變的底色設定 */
　background-color:#39919F
　　　}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px;
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
　　}

.title-1 {
　　font-size: 18px;
　　line-height: 2em;
2>[color=#CC3300]1.改變底色的做法/文字居中排法[/color]

#button li {
　　[color=#CC0066]/* 讓各個清單元素靠左對齊 */[/color]
　　float:left;

　/* 設定清單文字範圍的寬度 */
　　width:178px;

　/* 去除清單文字前面的小點*/
　　 list-style-type:none;
　
　/* 設定背景色 */
　　background-color:#6E6E6E;

　/* 讓清單文字居中對齊 */
　　text-align:center;

　/* 設定字距為2px */
　letter-spacing: 2px;

　/* 設定左邊的白邊樣式 */
　border-left-width: 1px;
　border-left-style: solid;
　border-left-color: #FFF;

　/* 右邊留白1像素 */
　　 margin-right:1px;
　　　}

#button li a {
　/* 連結範圍充滿整個區塊 */
　　display: block;

　/* 單個連結範圍的框度和高度*/
　width: 180px;
　height:20px;

　　/* 連結範圍向上的內距 */
　padding-top:2px;

　/* 連結的文字設為白色以及無裝飾(無底線) */
　color: #FFF;
　text-decoration: none;
　　　}

#button li a:hover{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[hr]

[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: 160px;
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://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
　　[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{
/* 設定滑鼠移過時，清單改變的底色設定 */
background-color:#39919F;
　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　

範列 hw04 (文字變色)

範列 hw04-1 (背景變色及文字置中)

範列 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]的語法

即會產生以下有連結的清單列

About

Works

Video

Links

Story

接著[color=#CC0066]設定導覽列的ID名稱為#button，直接設定於＜ul＞[/color]

語法為：

完整語法（含header )

[hr]

接下來就開始開始[color=#CC0066]設定ＣＳＳ[/color]的部分

#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

[color=#CC3300]/*文字
[color=#CC0066]作業ＣＳＳ的部分可直接複製此段修改，但要了解意義，內容不可一樣，可以期中作業內容來製作[/color]

@charset "utf-8";
/* CSS Document */

body {
　　　background-color: #278092;
　　　margin: 0px;
　　　}

#wrapper {
　　width: 900px; /*寬度設定為900px*/
　　margin: auto; /*版面居中對齊*/
　　border: 2px solid #DEECDF;
}

#header {
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
/*高度設定*/
height: 22px;

/*文字設定*/
font-weight: bolder;
color: #FFF;
font-size: 14px;

/*背景色設定*/
　 background-color:#6E6E6E;

/*將內定的邊距清除*/
margin: 0px;

/*將內定的內距清除*/
padding:0px;
}

#button li {
　　/* 讓各個清單元素靠左對齊 */
　　 float:left;

　/* 設定清單文字範圍的寬度 */
　　width:178px;

　/* 去除清單文字前面的小點*/
　　 list-style-type:none;
　
　/* 設定背景色 */
　　background-color:#6E6E6E;

　/* 讓清單文字居中對齊 */
　　text-align:center;

　/* 設定字距為2px */
　letter-spacing: 2px;

　/* 設定左邊的白邊樣式 */
　border-left-width: 1px;
　border-left-style: solid;
　border-left-color: #FFF;

　/* 右邊留白1像素 */
　　 margin-right:1px;
　　　}

#button li a {
　/* 連結範圍充滿整個區塊 */
　　display: block;

　/* 單個連結範圍的框度和高度*/
　width: 180px;
　height:20px;

　　/* 連結範圍向上的內距 */
　padding-top:2px;

　/* 連結的文字設為白色以及無裝飾(無底線) */
　color: #FFF;
　text-decoration: none;
　　　}

#button li a:hover{
　　/* 設定滑鼠移過時，清單改變的底色設定 */
　background-color:#39919F
　　　}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px;
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
　　}

.title-1 {
　　font-size: 18px;
　　line-height: 2em;
　　border-bottom-width: 1px;
　　border-left-width: 12px;
　　border-bottom-style: dotted;
　　border-left-style: dotted;
　　border-bottom-color: #417C9A;
　　border-left-color: #417C9A;
　　color: #187E95;
　　　}

.text-s {
　　font-size: 13px;
　　color: #6F6CA1;
　　border-left-width: 2px;
　　border-left-style: dotted;
　　border-left-color: #8081B1;
　　padding-left: 5px;
　　font-weight: bolder;
　　}

;
　　　}

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

[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;
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa01.jpg[/IMG]

[hr]
2.在清單列打入文字，並設定文字陰影，以增加閱讀性

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa04.jpg[/IMG]

[hr]
5.選擇工具箱中，裁切工具底下的切片工具，進行切片工作

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/im-05.jpg[/IMG]

[hr]
6.使用切片工具，將頂圖案按鈕依照參考線手動切片，（或按參考線自動產生切片後，將頂圖部份合併）

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/aa07.jpg[/IMG]

[hr]
8.格式選[color=#CC0066]僅影像[/color]，全部使用者切片，按確定

[IMG]http://i1136.p
放入按鈕的方法，請見講義三

連結按鈕的方法請參考下圖

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]
text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
col /*底色*/
background-color: #4188A6;
margin: 0px;
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
border: 2px solid #DEECDF;
}

#header {
background-image: url(images/back_01.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-bottom: 30px;
padding-left: 30px;
}

#button {
}

#content {
font-family: "微軟正黑體", "Arial Unicode MS";
font-size: 14px;
line-height: 2em;
color: #333;
padding: 30px;
background-color: #DDE3E3;
}

#footer {
font-size: 12px;
line-height: 1.5em;
color: #DDE3E3;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(images/header01.jpg);
background-repeat: no-repeat;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

#content a {
color: #278092;
text-decoration: none;
}

#content a:hover {
color: #903;
text-decoration: underline;
}

#content ul li {
list-style-image: url(images/arrow_c.jpg);
}

.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

.clearboth {
clear: both;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

#content a {
color: #278092;
text-decoration: none;
}

#content a:hover {
color: #903;
text-decoration: underline;
}

#content ul li {
list-style-image: url(images/arrow_c.jpg);
}

.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

.clearboth {
clear: both;
}

h1{
color: #FFF;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 30px;
margin: 0px; /*清除原有的距離*/
}

.header-text {
font-size: 15px;
color: #D2EFF7;
font-family: "Times New Roman", Times, serif;
font-weight: bolder;
font-style: italic;
margin: 0px;
}

.title-1 {
font-size: 18px;
line-height: 2em;
border-bottom-width: 1px;
border-left-width: 12px;
border-bottom-style: dotted;
border-left-style: dotted;
border-bottom-color: #417C9A;
border-left-color: #417C9A;
color: #187E95;
}

.text-s {
font-size: 13px;
color: #6F6CA1;
border-left-width: 2px;
border-left-style: dotted;
border-left-color: #8081B1;
padding-left: 5px;
font-weight: bolder;
}

#content table {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #278092;
}

#content table tr td {
padding: 5px;
font-size: 12px;
line-height: 1.5em;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #278092;
}

#content a {
color: #278092;
text-decoration: none;
}

#content a:hover {
color: #903;
text-decoration: underline;
}

#content ul li {
list-style-image: url(images/arrow_c.jpg);
}

.table_title {
font-size: 14px;
font-weight: bolder;
color: #E9F0E0;
background-color: #278092;
}

.floatleft {
float: left;
padding-right: 20px;
padding-bottom: 20px;
}

.floatright {
float: right;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}

.clearboth {
clear: both;
}

or: #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]

三、範例語法

[color=#CC0099]1.範例圖片按鈕的語法如下[/color]

1.HTML語法：

2.CSS部分的語法如下：

[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]

1.HTML語法：

2.CSS部分的語法如下：

[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c

Change History

Original Message

[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]

[color=#CC3300]2.改變文字顏色的做法[/color]

[color=#990000]二、以圖片置入製作網頁導覽列[/color]

[color=#CC3300]2.改變文字顏色的做法[/color]

[color=#990000]二、以圖片置入製作網頁導覽列[/color]

[color=#990000]一、透過CSS，以清單 ul 及 li 製作網頁導覽列[/color]

完整語法（含header )

[color=#CC3300]2.改變文字顏色的做法[/color]

[color=#990000]二、以圖片置入製作網頁導覽列[/color]

三、範例語法

[color=#CC0099]1.範例圖片按鈕的語法如下[/color]

1.HTML語法：

2.CSS部分的語法如下：

[color=#CC0099]2.透過CSS，以清單 ul 及 li 製作網頁導覽列的語法如下[/color]

1.HTML語法：

2.CSS部分的語法如下：