Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

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

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>

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


[hr]


接下來就開始開始<b>[color=#CC0066]設定CSS[/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://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.將英文按鈕的部分,按住SHIFT分別選取,按確定輸出

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

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

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


[hr]


接下來就開始開始<b>[color=#CC0066]設定CSS[/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]/* 連結的文字設為白色以及無裝飾(無底線) ,依個人喜好調整背景色,但要符合整設計風格* width: 160px;
/[/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://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.將英文按鈕的部分,按住SHIFT分別選取,按確定輸出

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

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

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


[hr]


接下來就開始開始<b>[color=#CC0066]設定CSS[/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]/* 連結的文字設為白色以及無裝飾(無底線) ,依個人喜好調整背景色,但要符合整設計風格* width: 160px;
/[/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://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.將英文按鈕的部分,按住SHIFT分別選取,按確定輸出

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

[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="scree <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;
/>
<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 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]的語法

<br /> <ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br />
列的製作[/color]
,期中分為以清單 ul 及 li 製作與圖片製作兩類
導覽列)





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

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




[color=#666600]導覽列對於網頁設計來說,是一個非常重要的部分,敘述網站的導覽<br /> <ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> 架構,並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。<br /> <br /> 在整個網頁設計中,肩負著重要資訊的描述以及視覺注視的任務,不能搶過主要的視覺焦點,卻要能醒目及兼具設計質感,達到網頁設計的平衡。<br /> <br /> 以往許多類似的做法,有用表格table製作,或用圖片製作,都有其優缺點,以表格製作的彈性較小,以圖片來製作雖然變化較多,但修改不易(例如只是修改文字內容,整個圖片或圖片就需重作)。<br /> <br /> 以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢,既簡潔又富設計感,修改也容易(例如修改設計只需在CSS中作一次的設定,但圖片則要整組重作)。</b>[/color]<br /> 以往許多類似的做法,有用表格table製作,或用圖片製作,都有其優缺點,以表格製作的彈性較小,以圖片來製作雖然變化較多,但修改不易(例如只是修改文字內容,整張圖片或一組圖片<xmp><br /> <ul id="button"><br /> <li><a href="index就需重作)。<br /> 以以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢,既簡潔又富設計感,修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定,但圖片則要整組重作(有時數目可能非常多)。</b>[/color]<br /> <br /> 往許多類似的做法,有用表格table製作,或用圖片製作,都有其優缺點:<br /> 以往許多類似的做法,有用表格table製作,或用圖片製作,各有其優缺點:<br /> <br /> 以表格製作雖然看似架構簡單,但表格本身實</ul><br /> <br />
雜(包含TR TD),以CSS設定會更為繁瑣。

以圖片來製作雖然變化較多,但修改不易(例如只是修改文字內容,整張圖片或一組圖片就需重作)。

以清單 ul 及 l<br /> <!DOCTYPE html><br /> i 製作網頁導覽列則是目前設計的趨勢,既簡潔又富設計感,修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定,但圖片則要整組重作(有時數目可能非常多)。<br /> <br /> 有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現:<br /> <br /> Table: http://www.sitepoint.com/examples/cssvtables/tables4.html<br /> (此例中的留著許多邊框是為了凸顯多層表格,不是設計得不好看)<br /> CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html<br /> </b>[/color]<br /> <br /> [hr]<br /> <br /> 以下則講解,透過CSS樣式,把清單(list)文字調整成導覽列使用的方法:<br /> <br /> <br /> 清單文字採用<b>[color=#CC0066]<ul>標籤定義清單的範圍[/color]</b>,並使用[color=#CC0066]<b><li>標籤定義個別項目</b>[/color],例如:<br /> <br /> <xmp><br /> <ul><br /> <li>About</li><br /> <li>Works</li><br /> <li>Video</li><br /> <li>Links</li><br /> <li>Story</li><br /> </ul><br />

即會產生以下的清單列


  • About

  • Works

  • Video

  • Links

  • Story




接著,加入[color=#CC0066]連結[/color]的語法

<ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br />

即會產生以下有連結的清單列



接著[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;

  /*將內定的內距清除,範例一可不用加這一項*/
語法為:

<ul id="but /* 讓各個清單元素靠左對齊 */<br /> float:left;<br /> /* 設定清單文字範圍的寬度 */<br /> width:178px;<br /> <br /> /* 去除清單文字前面的小點*/<br /> list-style-type:none;<br /> <br /> /* 設定背景色 */<br /> background-color:#6E6E6E;<br /> <br /> /* 讓清單文字居中對齊 */<br /> text-align:center;<br /> <br /> /* 設定字距為2px */<br /> letter-spacing: 2px;<br /> <br /> /* 設定左邊的白邊樣式 */<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #FFF;<br /> <br /> /* 右邊留白1像素 */<br /> margin-right:1px;<br /> }<br /> <br /> #button li a {<br /> /* 連結範圍充滿整個區塊 */<br /> display: block;<br /> <br /> /* 單個連結範圍的框度和高度*/<br /> width: 180px;<br /> height:20px;<br /> <br /> /* 連結範圍向上的內距 */<br /> padding-top:2px;<br /> <br /> /* 連結的文字設為白色以及無裝飾(無底線) */<br /> color: #FFF;<br /> text-decoration: none;<br /> }<br /> <br /> #button li a:hover{<br /> /* 設定滑鼠移過時,清單改變的底色設定 */<br /> background-color:#39919F<br /> }<br />    /* 讓各個清單元素靠左對齊 */<br /> ton"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul>


[hr]

[color=#CC0066]◎ HTML的部分,測試時可直接COPY此範例修改,但要了解其中意義[/color]

<!DOCTYPE html><br /> <html><br /> <head><br /> <title>永遠的印象--莫內</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <br /> <body><br /> <div id="wrapper"> <br /> <div id="header"><br /> <h1> <strong>Claude Monet</strong></h1><br /> <span class="header-text">forever Impressionism </span><br /> </div><br /> <br /> <ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> <br /> <div id="content"><br /> <p><img src="images/MONET_03.jpg" width="835" height="312"></p><br /> <p class="text-s">藍色調的睡蓮</p><br /> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p><br /> <p> 莫內是法國畫家, 是印象主義的創立者之一,而且只有他一人終其一生都堅持印象主義的原則和目標,也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力,直到他早期的印象主義繪畫還保留著這項特質,使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮,忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p><br /> </div><br /> <br /> <div id="footer"><br /> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br><br /> │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br><br /> │最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by JinJin <br /> </div><br /> </div><br /> </body><br /> </html><br />

[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]作業CSS的部分可直接複製此段修改,但要了解意義,內容不可一樣,可以期中作業內容來製作[/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.將英文按鈕的部分,按住SHIFT分別選取,按確定輸出

[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]作業CSS的部分可直接複製此段修改,但要了解意義,內容不可一樣,可以期中作業內容來製作[/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],例如:

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

即會產生以下的清單列


  • About

  • Works

  • Video

  • Links

  • Story




接著,加入[color=#CC0066]連結[/color]的語法

<ul><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br />

即會產生以下有連結的清單列



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

語法為:

<ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul>

完整語法(含header )


<!DOCTYPE html><br /> <html><br /> <head><br /> <title>網頁導覽列</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> < [color=#CC3300]/*背景色設定*/[/color]<br />    background-color:#6E6E6E;<br /> <br /> /head><br /> <br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <br /> <ul id="button"><br /> <li><a href="index.html">About</a></li><br /> <li><a href="works.html">Works</a></li><br /> <li><a href="video.html">Video</a></li><br /> <li><a href="links.html">Links</a></li><br /> <li><a href="story.html">Story</a></li><br /> </ul><br /> <br /> </div><br /> </body><br /> </html><br />


[hr]


接下來就開始開始[color=#CC0066]設定CSS[/color]的部分


#button {
[color=#CC3300]/*高度設定*/[/color]
height: 22px;

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

[color=#993300]/*將內定的邊距清除*/[/color]
margin: 0px;

[color=#993300]/*將清單內定的內距清除(無清除,則左側會多出約40px,範例二可不用加這一項*/[/color]
padding:0px;
}



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




#button li {
[color=#CC0099]/* 讓各個清單元素靠左對齊,由原本的垂直排列變成水平排列,形成水平清單 */[/color]
   float:left;

 [color=#CC0
[color=#CC0066]作業CSS的部分可直接複製此段修改,但要了解意義,內容不可一樣,可以期中作業內容來製作[/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;
  }
00]/* 設定滑鼠移過時,清單改變的底色設定 */[/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;
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.p
放入按鈕的方法,請見講義三

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

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/li01.jpg[/img]

[hr]

三、範例語法



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



1. /*底色*/
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;
}

HTML語法:



<!DOCTYPE html><br /> <html><br /> <head><br /> <title>永遠的印象--莫內</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> <br /> <script type="text/javascript"><br /> function MM_swapImgRestore() { //v3.0<br /> var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;<br /> }<br /> <br /> function MM_preloadImages() { //v3.0<br /> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();<br /> var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)<br /> if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}<br /> }<br /> <br /> function MM_findObj(n, d) { //v4.01<br /> var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {<br /> d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}<br /> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];<br /> for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);<br /> if(!x && d.getElementById) x=d.getElementById(n); return x;<br /> }<br /> <br /> function MM_swapImage() { //v3.0<br /> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)<br /> if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}<br /> }<br /> </script><br /> </head><br /> <br /> <body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')"><br /> <br /> <div id="wrapper"> <br /> <br /> <div id="header"><br /> <h1> <strong>Claude Monet</strong></h1><br /> <span class="header-text">forever Impressionism </span><br /> </div><br /> <br /> <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" o, serif;<br /> font-size: 30px;<br /> margin: 0px; /*清除原有的距離*/<br /> }<br /> <br /> .header-text {<br /> font-size: 15px;<br /> color: #D2EFF7;<br /> font-family: "Times New Roman", Times, serif;<br /> font-weight: bolder;<br /> font-style: italic;<br /> margin: 0px; /*清除原有的距離*/<br /> }<br /> <br /> <br /> .title-1 {<br /> font-size: 18px;<br /> line-height: 2em;<br /> border-bottom-width: 1px;<br /> border-left-width: 12px;<br /> border-bottom-style: dotted;<br /> border-left-style: dotted;<br /> border-bottom-color: #417C9A;<br /> border-left-color: #417C9A;<br /> color: #187E95;<br /> }<br /> <br /> .text-s {<br /> font-size: 13px;<br /> color: #6F6CA1;<br /> border-left-width: 2px;<br /> border-left-style: dotted;<br /> border-left-color: #8081B1;<br /> padding-left: 5px;<br /> font-weight: bolder;<br /> }<br /> <br /> <br /> /************表格設定************/<br /> <br /> #content table {<br /> border-bottom-width: 5px;<br /> border-bottom-style: solid;<br /> border-bottom-color: #278092;<br /> }<br /> <br /> <br /> #content table tr td {<br /> padding: 5px;<br /> font-size: 12px;<br /> line-height: 1.5em;<br /> border-bottom-width: 1px;<br /> border-bottom-style: dotted;<br /> border-bottom-color: #278092;<br /> }<br /> <br /> <br /> /************表格標題************/<br /> .table_title {<br /> font-size: 14px;<br /> font-weight: bolder;<br /> color: #E9F0E0;<br /> background-color: #278092;<br /> }<br /> <br /> <br /> /************連結設定************/<br /> <br /> #content a {<br /> color: #278092;<br /> text-decoration: none;<br /> }<br /> <br /> /************連結滑鼠移過時的設定************/<br /> <br /> #content a:hover {<br /> colh1{<br /> color: #FFF;<br /> font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;<br /> font-size: 30px;<br /> margin: 0px; /*清除原有的距離*/<br /> }<br /> <br /> .header-text {<br /> font-size: 15px;<br /> color: #D2EFF7;<br /> font-family: "Times New Roman", Times, serif;<br /> font-weight: bolder;<br /> font-style: italic;<br /> margin: 0px;<br /> }<br /> erline;<br /> }<br /> <br /> /************靠左浮動的設定(繞圖排文時,圖片的設定)************/<br /> <br /> .floatleft {<br /> float: left;<br /> padding-right: 20px;<br /> padding-bottom: 20px;<br /> }<br /> <br /> /************靠右浮動的設定(繞圖排文時,圖片的設定)************/<br /> .floatright {<br /> float: right;<br /> padding-top: 20px;<br /> padding-bottom: 20px;<br /> padding-left: 20px;<br /> }<br /> <br /> /************清除浮動的設定(繞圖排文時,文字的設定)************/<br /> .clearboth {<br /> clear: both;<br /> }<br /> <br />


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



1.HTML語法:

title>永遠的印象--莫內


藍色調的睡蓮


 關於莫內 Claude Monet


莫內是法國畫家, 是印象主義的創立者之一,而且只有他一人終其一生都堅持印象主義的原則和目標,也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就#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);
}

他早期的印象主義繪畫還保留著這項特質,使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮,忽視傳統的概念﹝構圖、題材、潤飾等﹞。