Course Syllabus

Download Report

Transcript Course Syllabus 

網際網路應用-網頁設計3
教師: 陳明瑤
電郵: [email protected]
1
<meta>（文件描述標籤）

<meta>標籤是一個獨立標籤（空標籤），主
要的功用是用來描述該HTML文件。<meta>
的功能項目繁多，例如定義關鍵字（以便使得
搜尋引擎可以尋找到該網頁）、宣告網頁製作
工具版本、網頁的編碼方式等等關於該份
HTML文件的資訊都屬於<meta>標籤的功能。

位置：應包含在<head>與</head>之內
2
<meta>（文件描述標籤）(Cont.)

記錄檔頭資料（時間、關鍵字、回覆者資訊）

早期搜尋引擎的製作方式，是由HTML網頁中定義某些關鍵
字，當搜尋引擎搜尋到該網頁時，就可以從HTTP的回傳檔
頭中取出所需要的時間、關鍵字、回覆者資訊等網頁資訊，
並做進一步的應用，例如取出關鍵字與查詢字串比對，藉此
尋得所需要的網頁，而這些資訊（例如關鍵字）就是定義在
<meta>標籤中，但由於近來搜尋引擎大多要求網站擁有者必
須先到搜尋引擎註冊網頁及關鍵字之後，才能夠搜尋到該網
頁，並且大多數的搜尋引擎也都支援了全文檢索的查詢功能，
因此，目前大多數的網頁都已經放棄了使用<meta>標籤來記
錄關鍵字的方法，以下是相關語法。
3

標籤：<meta>獨立標籤。

功能二：記錄檔頭資料。
語法： <meta http-equiv="expires"

Expires (期限)

content="時間"/>
<meta http-equiv="keywords" content="關鍵字"/>
<meta http-equiv="reply-to" content="電子郵件信箱"/>


可以用於設定網頁的到期時間。一旦網頁過期，必須到
服務器上重新傳輸。
＜meta http-equiv="expires" content="Wed, 20 Jun 2011
22:33:00 GMT"＞
4
bgcolor屬性（背景顏色）

在HTML中，顏色的表示方法可以分為兩大類


(1)英文表示法（或稱為關鍵字表示法），也就是直
接以顏色的英文名稱加以設定，例如：green（綠
色）、pink（粉紅色）。
(2)16進制表示法，以6位數16進制的數值來表示顏
色，例如：0000FF（藍色）、FFFF00（黃色）等
等。
5
bgcolor屬性（背景顏色）(Cont.)

問題是我們怎麼知道每一種顏色的16進制表示法呢？
其實很簡單，6位數16進制顏色表示法是基於『紅、
綠、藍』3原色的調色方式所構成





前兩位數代表的是紅色的成分
中間兩位數代表的是綠色的成分
最後兩位數代表的是藍色的成分
數值由000~255，也就是16進制的00~FF，其中成分越
高者數值越大
就像調水彩一樣，當我們改變了3原色的比例之後，就
會形成許多種顏色，總共的變化應該有16777216種顏色。
6
bgcolor屬性（背景顏色）(Cont.)

常見的顏色及顏色表示法
7
bgcolor屬性（背景顏色）(Cont.)



標籤屬性：<body>－bgcolor屬性。
功能：設定背景顏色。
格式：
<body bgcolor="#16進制顏色表示法">………………………</body>
或
<body bgcolor="關鍵字顏色表示法">………………………</body>
8
bgcolor屬性（背景顏色）(Cont.)

範例














<html>
<head>
<title>&lt;body&gt;之bgcolor屬性(背景顏色設定)</title>
</head>
<body bgcolor="#FFFF00">
<center>
相思<br/>
紅豆生南國，<br/>
春來發幾枝，<br/>
願君多采擷，<br/>
此物最相思。
</center>
</body>
</html>
9
background屬性（背景圖片）



標籤屬性：<body>－background屬性。
功能：設定背景圖片。
格式：
<body background="圖片路徑/圖片檔名">………………………</body>

【註】：圖片如果與網頁放在相同的資料夾，則不需要設定
圖片路徑。如果圖片和網頁位於不同的資料夾，就必須設定
路徑，路徑分為絕對路徑與相對路徑兩種。為了避免因為網
站的搬移造成檔案位置的更動，我們應該盡量使用相對路徑
來表示圖片路徑。
10
background屬性（背景圖片）(Cont.)


絕對路徑就是完整的路徑名稱，例如：
C:\HTML\PIC\bg1.jpg或
http://127.0.0.1/Myhome/PIC/bg1.jpg就是絕對路徑。
相對路徑指的是從網頁所在位置開始計算，往上一
層目錄（上一層資料夾）就使用『../』，往下一層
就使用『資料夾名稱/』來表示，假設我們有兩個
目錄ch04、PIC，其中網頁放在ch04目錄中，圖片
放在PIC目錄中，兩個目錄為同一層級的目錄（父
目錄相同），我們就可以使用『../PIC/』來代表圖
片的相對路徑。另外，『./』則是代表原來的目錄
位置。
11
background屬性（背景圖片）(Cont.)

相對路徑示意圖
12
text屬性（文字顏色）

HTML網頁的文字顏色預設為黑色，我們可以
透過<body>的text屬性改變所有的文字顏色，
顏色的設定方法同樣有16進制表示法與關鍵字
表示法兩種。



標籤屬性：<body>－text屬性。
功能：改變預設的文字顏色。
格式：
<body text="#16進制顏色表示法">…………………………</body>
或
<body text="關鍵字顏色表示法">…………………………</body>
13
符號清單

符號清單指的是『每筆資料的左方都有一個不
具累加特性的特殊符號』
14
<menu>（說明書清單）


<menu>標籤與<li>標籤搭配可以形成第一種符號清單
格式。清單作用範圍從<menu>開始直到</menu>結
束，其中每一次的<li>標籤代表一個新項目的開始，
直到遇見</li>或下一個<li>為止。並且我們還可以在
<menu>中設定type屬性，選擇想要的清單符號樣式。
值得注意的是，在進入清單作用範圍前，<menu>會
產生一個空白列，以做為清單與其他內容的區隔，並
且所有的清單項目都會呈現向右縮排的現象。


標籤：<menu>、</menu>成對標籤。<li>獨立標籤或<li>、
</li>成對標籤。
格式：
<memu type="disc、circle、square">
<li>…………………….. </li>
：
：
<li>……………………...</li>
</menu>
15
<menu>（說明書清單）(Cont.)



功能：產生符號式清單。
<li>功能：表示單一清單項目。
<menu>－type屬性：設定清單符號樣式。




屬性值disc：實心圓點符號。（預設值）
屬性值circle：空心圓點符號。
屬性值square：實心方塊符號。
位置：在<body>標籤內的任何位置
16
<menu>（說明書清單）(Cont.)

範例














<html>
<head>
<title>說明式符號清單</title>
</head>
<body>
程式設計類暢銷書
<menu>
<li>C語言初學指引</li>
<li>VB6初學指引</li>
<li>ASP初學指引</li>
<li>C++函式庫精華錄</li>
</menu>
</body>
</html>
17
序號清單



除了符號清單之外，另一類常見的清單就是序
號清單
序號清單的每一個清單項目前面都會有一個數
字，用以代表該清單項目的編號
並且該序號會累計
18
序號清單(Cont.)

序號清單主要是由<ol>標籤配合<li>標籤來完
成，並且還可以設定多種數字格式，以及起始
數字


標籤：<ol>、</ol>成對標籤。<li>獨立標籤或<li>、
</li>成對標籤。
格式
<ol>
<li>……………………..</li>
：
：
<li>……………………..</li>
</ol>
19
序號清單(Cont.)


功能：產生序號式清單。
效果：





(1) 清單前後換列。
(2) 清單項目向右縮排。
(3) 清單項目的前面會出現一個累計的序號。
<li>功能：表示單一清單項目。
位置：在<body>標籤內的任何位置
20
序號清單(Cont.)

範例














<html>
<head>
<title>序號式清單</title>
</head>
<body>
程式設計類暢銷書
<ol>
<li>C語言初學指引</li>
<li>VB6初學指引</li>
<li>ASP初學指引</li>
<li>C++函式庫精華錄</li>
</ol>
</body>
</html>
21
<ol>－type屬性
（序號樣式）

type屬性允許我們以數字、大小寫英文字母以
及大小寫羅馬字母來表示清單序號。


標籤屬性：<ol>－type屬性。
格式：
<ol type="1、a、A、i、I">
<li>……………………..</li>
：
：
<li>……………………...</li>
</ol>
22
<ol>－type屬性
（序號樣式）



標籤<ol>功能：設定序號清單
屬性type功能：設定序號的樣式
屬性值：





1：以阿拉伯數字做為序號，例如：『1、2、3』（預
設值）
a：以小寫英文字母做為序號，例如：『a、b、c』
A：以大寫英文字母做為序號，例如：『A、B、C』
i：以小寫羅馬字母做為序號，例如：『i、ii、iii、iv、
v』
I：以大寫羅馬字母做為序號，例如：『I、II、III、IV、
V』
23
<ol>－type屬性
（序號樣式）

範例














<html>
<head>
<title>序號樣式設定</title>
</head>
<body >
程式設計類暢銷書
<ol type="A">
<li>C語言初學指引</li>
<li>VB6初學指引</li>
<li>ASP初學指引</li>
<li>C++函式庫精華錄</li>
</ol>
</body>
</html>
24
超鏈結的顏色設定

在網頁中超鏈結的文字會以藍色或紫色的顏色出現，
其中藍色代表未曾讀取過的超鏈結目標網頁，而紫色
則是代表已經讀取過的超鏈結目標網頁。

除了預設的超鏈結顏色之外，我們也可以自由指定超
鏈結的顏色，方法有兩種：



第一種是由瀏覽者自行更改瀏覽器中的設定來改變超鏈結的
顏色。
第二種則是由網頁設計者在HTML網頁中，設定<body>的
link、vlink、alink屬性。
標籤屬性：

<body>－link、vlink、alink屬性
25
超鏈結的顏色設定(Cont.)

格式：

屬性link功能：


設定超鏈結目標已被瀏覽時的超鏈結文字顏色。（預設為紫色）
屬性alink功能：


設定超鏈結目標未曾被瀏覽時的超鏈結文字顏色。（預設為藍色）
屬性vlink功能：


<body link="顏色表示法"
vlink="顏色表示法"
alink="顏色表示法">
………………………………
</body>
設定超鏈結文字已被按下，但尚未放開滑鼠左鍵時的超鏈結文字顏色
範例
<body link="red" vlink="green" alink="pink">
<a href=“http://www.kaohsiung.gov.tw/”>高雄市政府</a><br/>
26
撥放背景音樂

bgsound>是IE專用的撥放背景音樂標籤，其語法如下。






標籤：<bgsound>獨立標籤。（非HTML/XHTML的標準）
功能：撥放背景音樂。
支援：IE瀏覽器支援。（Netscape瀏覽器不支援。）
格式：
<bgsound src="音樂檔URL" loop="N"/>
src屬性：設定音樂檔（*.mid、*.wav、*.au等等）所在位置，
可以使用絕對路徑表示法或相對路徑表示法。
loop屬性：設定背景音樂重複撥放次數。若希望不斷地重複
撥放背景音樂，可以將loop屬性值設為『infinite』。
27
撥放背景音樂

<embed>不是專門用來撥放背景音樂的標籤，它也可
以用來撥放其他多媒體檔案，使用<embed>撥放背景
音樂必須將<embed>標籤的各屬性設定為特殊值才能
夠造成背景音樂的效果，因此，如果想要在IE撥放背
景音樂，建議還是使用<bgsound>標籤比較簡單。

格式：（非HTML/XHTML的標準）
<embed src="音樂檔URL" autostart="true"
width="0" height="0"
loop="true或no"/>


autostart：多媒體檔案是否自動開始撥放，屬性值如下。
 true：多媒體檔案自動開始撥放。
 no：多媒體檔案不自動撥放。（預設值）
loop屬性：若設為true，則無限次撥放音樂。若設為no，則
撥放一次後停止撥放音樂。
28
撥放背景音樂

Width


Height


設定面板寬度
設定面板高度
Align

設定面板對齊方式
29
連結You Tube

You Tube影音手動播放語法

<embed
src="http://www.youtube.com/v/52i8H5wBgNc"
type="application/x-shockwave-flash"
wmode="transparent" width="425"
height="350"></embed>
30
連結You Tube

You Tube影音自動播放語法

<embed
src="http://www.youtube.com/v/52i8H5wBgNc&autop
lay=1" type="application/x-shockwave-flash"
wmode="transparent" width="145"
height="110"></embed>
31
Java/VB Script程式碼宣告標籤）


<<script>、</script>是成對標籤，其中所包含
的內容是能夠由客戶端瀏覽器執行的Script程
式碼
Script程式碼可以分為Java Script與VB Script
兩種
32
<script>與</script>

標籤：<script>、</script>成對標籤。


功能：宣告Script程式碼。
語法：
<script language="語法宣告">
：
：
</script>
語法說明：語法宣告為JavaScript或VBScript。
位置：最好包含在<head>與</head>之內，但也可以放置於
HTML文件的任何位置。當放置於<head>與</head>之內時，
可以當作文件檔頭定義，因此在該份HTML任何地方都可以
呼叫此處宣告的副程式


33
<script>與</script>(Cont.)

範例













<html>
<head>
<title>Script練習</title>
<script language="JavaScript">
function Welcome()
{
alert("歡迎光臨\n\n歡迎參觀指教")
}
</script>
</head>
<body onload="Welcome()">
</body>
</html>
34
<script>與</script>(Cont.)

範例

















<html>
<head>
<title>顯示目前日期時間</title>
<script language="JavaScript">
function print_today_date()
{
var d=new Date( );
document.write(d.toLocaleString( ));
}
</script>
</head>
<body>
<script language="JavaScript">
print_today_date();
</script>
</body>
</html>
35
<script>與</script>(Cont.)

範例



















<html>
<head>
<title>Script練習</title>
<meta http-equiv="refresh" content="1">
<script language="JavaScript">
function print_today_date()
{
var d=new Date( );
document.write(d.toLocaleString( ));
}
</script>
</head>
<body>
現在時間<br>
<script language="JavaScript">
print_today_date();
</script>
</body>
</html>
36
表格宣告

HTML的表格宣告，最主要是靠<table>、
<tr>、<td>（或<th>）等3種標籤組合而成。
並且每個標籤包含各種屬性，藉由這些屬性便
可以完成表格的種種變化。各標籤用途如下：


<table>、</table>：成對標籤，用來宣告一個表格
的開頭與結束。
<tr>、</tr>成對標籤


用來宣告表格中某一列的開頭與結束。
<td>、</td>（或<th>、</th>）成對標籤


一列中某一個儲存格的開頭與結束
其中<td>稱為一般儲存格（或簡稱儲存格），<th>則稱
為標題儲存格。
37
表格宣告

<table>、<tr>、<td>（或<th>）的基本格式
<table>
與示意圖如下：

格式：
<tr>
<td>...</td>.........<td>...</td>
</tr>
<tr>
<td>...</td>.........<td>...</td>
</tr>
：………………………………………..
：………………………………………..
：………………………………………..
<tr>
<td>...</td>.........<td>...</td>
</tr>
</table>
38
表格宣告(Cont.)

示意圖：
39
表格宣告(Cont.)

範例


















<html>
<head>
<title>基本表格製作</title>
</head>
<body background="../PIC/bg2.jpg">
<h3>學歷</h3>
<hr/>
<table>
<tr>
<th>國小</th><th>國中</th><th>專科</th><th>大學</th><th>研究所</th>
</tr>
<tr>
<td>前金國小</td><td>大義國中</td><td>正修工專</td>
<td>逢甲大學</td><td>交通大學</td>
</tr>
</table>
</body>
</html>
40

結果
41
表格宣告(Cont.)

範例

<html>
<head>
<title>設定表格邊框厚度</title>
</head>
<body >
<h3>表格邊框寬度為10(內框線預設值為1)</h3>
<table border="10">
<tr><th>專科</th><th>大學</th><th>研究所</th></tr>
<tr><td>正修工專</td><td>逢甲大學</td><td>交通大學</td></tr>
</table>
<hr/>
<h3>表格邊框寬度為5(內框線預設值為1)</h3>
<table border="5">
<tr><th>專科</th><th>大學</th><th>研究所</th></tr>
<tr><td>正修工專</td><td>逢甲大學</td><td>交通大學</td></tr>
</table>
</body>
</html>

















42

結果
43