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