數位生活與網頁設計

[body (background/link/vlink color)] Body 進階使用
[color] 十六進位顏色表
[ol (Different Types)] 編號式條列進階使用
[ul (Different Types)] 無編號式條列進階使用
[p & align] 隔行與對齊
[font size & color] 字型進階使用
[image size] 圖形進階使用
[table-- color & multiple layers] 表格進階使用
[fieldset-- legend] 框線使用
[fragment indentifiers] 頁內連結
[image mapping] 圖形對映
[iframe] 內隔頁
[frame] 隔頁
[meta] 動態文件
[bookmark] Bookmark Icon
[marquee] 動態引言
[passwd] 頁面設密碼
[Adobe Acrobat / Word File] 植入Adobe Acrobat檔案
[Director/Flash Files Included] 在HTML插入Director 或 Flash3檔案
[Sound/Vedio Show] 聲音與影像例子
[Streaming Video/Audeo File]　網錄串流影音檔案
[Web Layout Application] 網頁編排與對位應用
[Example] 簡單的網頁範例

§ body (background/link/vlink color)

<body bgcolor | background text link vlink alink
leftmargin topmargin marginwidth marginheight>
[說明]: 網頁底色或底紋指定
-- bgcolor : 網頁底色(注意:顏色用六位十六進位代碼,且前加 #)
-- background : 網頁底紋 (給圖檔名)
-- bgproperties = "fixed" : 背景不隨scrollbar移動 (只適用於IE)
-- text : 網頁文字顏色
-- link : 網頁Anchor顏色
-- vlink : 網頁被點過的 Anchor顏色
-- leftmargin = n : body內容距window左邊之距離 (只適用於IE)
-- topmargin = n : body內容距window右邊之距離 (只適用於IE)
-- marginwidth = n : body內容距window之橫向間距 (只適用於Netscape)
-- marginheight = n : body內容距window之縱向間距 (只適用於Netscape)


Example 1: (底色為白色、link為藍色)
<body bgcolor="#ffffff" text="#000000" link="#0000ff" 
 vlink=#8e2323 alink="#3299cc">
Example 2: (底色為灰藍色、link為黃色)
<body bgcolor="#236b8e" text="#ffffff" link="#d9d919" 
 vlink="#5a5ad6" alink="#3299cc">

Example 3: (底圖)
<body background="bg.jpg" 
 text="#000000" link="#0066cc" vlink="#5a5ad6" alink="#cc6666">

Example 4: (最常用的window邊距設定,適用於IE 與 Netscape)
<body bgcolor=#ffffff text=#000000 link=616469 vlink=999999
topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>

(此處的"可省略)

§ color (十六進位顏色表)

顏色表(一): (十六進位顏色表) **** Table of RGB Color (1)

顏色表(二): (十六進位顏色表) **** Netscape 216 Colors (2)

顏色單字表(三): (十六進位顏色單字表)

顏色單字表(四): (十六進位顏色表)

顏色表(五):

§ ol (Different Types)

<ol type=a|a|i|i|1 value>
[說明]: 各種有序號列式


    Example 1:
    <ol type=A>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    
        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center
  
    Example 2:
    <ol type=a>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 3:
    <ol type=I>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 4:
    <ol type=i>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 5:
    <ol type=1>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 6 :
    <ol>
    <li value=10>red sox
    <li>cubs
    <li>royals
    <li>dodgers
    <li>indians
    </ol>

Red Sox
Cubs
Royals
Dodgers
Indians

    Example 7 :
    <ol>
    <li>red sox
    <li>cubs
    <li>royals
    <li value=10>dodgers
    <li>indians
    </ol>

Red Sox
Cubs
Royals
Dodgers
Indians

§ ul (Different Types)

<ul type=square|disc|circle value>
[說明]: 各種無序號列式 (只適用Netscape)


    Example 1:
    <ul type=square>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ul>
    
        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 2:
    <ul type=disk>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ul>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 3:
    <ul type=circle>
        <lh><i>special centers in tnua</i></lh>
        <li>technological arts center</li>
        <li>trditional arts center</li>
        <li>performance arts center</li>
        <li>computer center</li>
    </ol>
    

        Special Centers in tnua
        Technological Arts Center
        Trditional Arts Center
        Performance Arts Center
        Computer Center

    Example 4 :
    <ol>
    <li>red sox
    <li>cubs
    <li type=I>royals
    <li>dodgers
    <li>indians
    </ol>

Red Sox
Cubs
Royals
Dodgers
Indians

    Example 5 :
    <ul type=square>
    <li>red sox
    <li>cubs
    <li type=circle>royals
    <li>dodgers
    <li>indians
    </ul>

Red Sox
Cubs
Royals
Dodgers
Indians

§ p & align

<p align=left, right, center>
[說明]: 空行後的文字對位指令

    Example 1:
    Thinking of you at this beautiful holiday.<p align=left>
    Merry Christmas & Happy New Year!</p>

Thinking of you at this beautiful holiday.

Merry Christmas & Happy New Year!

    Example 2:
    Thinking of you at this beautiful holiday.<p align=right>
    Merry Christmas & Happy New Year!</p>

Thinking of you at this beautiful holiday.

Merry Christmas & Happy New Year!

    Example 3:
    Thinking of you at this beautiful holiday.<p align=center>
    Merry Christmas & Happy New Year!</p>

Thinking of you at this beautiful holiday.

Merry Christmas & Happy New Year!

§ font size & color

<font size | color | face>
[說明] : 文字大小、顏色、字型指定
-- size : 文字大小 (-6 ~ +6)
-- color : 文字顏色
-- face : 文字字型 (中文除明體、細明體外，盡量不定義其它字體)


Example 1 :

<font size=-1 color="#7fff00">i</font> 
<font size=0 color="#ff7f00">n</font> 
<font size=+1 color="#3299cc">f</font> 
<font size=+2 color="#42426f">o</font> 
<font size=+3 color="#6b4226">r</font> 
<font size=+4 color="#e47833">m</font> 
<font size=+3 color="#238e23">a</font> 
<font size=+2 color="#d9d919">t</font> 
<font size=+1 color="#5c4033">i</font> 
<font size=0 color="#23238e">o</font> 
<font size=-1 color="#5a5ad6">n</font>

i n f o r m a t i o n


Example 2 :

<font size=+3 color="#aa0000"><blink>C</blink></font>lick 
<font size=+3 color="#00aa00"><blink>A</blink></font>bove 
<font size=+3 color="#0000aa"><blink>I</blink></font>con !

Click Above Icon !


Example 3 :

<font color="#aa0000" face="Time New Roman">Time New Roman</font>
<font color="#aa0000" face="Arial">"Arial"</font>

Time New Roman

Arial


Example 4 :

<basefont face=arial size=5>
設定後，往後所有頁內文字字型為Arial，級數為5

§ Image Size


Example 1:
<img src="sample.gif" alt="此Image原圖大小為120x97"> 
 沒有設任何參數的標準表示


Example 2:
<img src="sample.gif" vspace=15> 


圖與文字的縱向間距
 

Example 3:
<img src="sample.gif" hspace=20> 
 圖與文字的水平間距


Example 4:
<img height=150 src="sample.gif"> 
 height=150 (等比例放大)
 

Example 5:
<img height=50 src="sample.gif"> 
 height=50 (等比例放大)
 

Example 6:
<img height=50 width=200 src="sample.gif"> 
 height=50 width=97
 

Example 7: 圖與Anchor (link)合用
<a href=sample.gif><img width="80" src="sample.gif" border=0></A> 
(請click此圖)
 
 (請click此圖)

§ Color & Multiple Table

<table border bordercolor cellspacing cellpadding
bgcolor rowspan colspan width height valign>
[說明] : 可設定巢狀式表格及多色表格
-- border = n : Table框邊大小
-- bordercolor : Table框邊顏色
-- cellspacing = n : Table內部隔線寬度
-- cellpadding = n : Table內文字與隔線間距
-- colspan=n : Table跨行設定
-- rowspan : Table跨列設定
-- width : Table的寬度
-- height : Table的高度
-- align = left, middle, right : Table的橫向對位
-- valign = top, center, bottom : Table的縱向對位
-- nowrap : Cell中的文字不斷行 (至於 TD 中)

Example 1:  Table內不同行的顏色設定

<table border cellspacing=5 cellpadding=10 bgcolor="#e0e0e0" 
width=500>
  <tr>
      <td align=middle bgcolor="#ff0000">
          <a href="http://techart.tnua.edu.tw">techart center</a></td>
      <td>red color for one cell</td>
  </tr>
  <tr>
      <td align=middle bgcolor="#00ff00">
          <a href="http://music.tnua.edu.tw/">music department</a></td>
      <td>green color for one cell</td>
  </tr>
  <tr>
      <td align=middle>
          <a href="http://finearts.tnua.edu.tw/">finearts department</a></td>
      <td>background color of table (grey)</td>
  </tr>
  <tr>
      <td align=middle>
          <a href="http://theatre.tnua.edu.tw/">theatre department</a></td>
      <td>background color of table (grey)</td>
          <tr bgcolor="#00ffff"><td align=middle>
          <a href="http://dance.tnua.edu.tw/">dance department</a></td>
      <td>blue color of the whole row</td>
  </tr>
</table>

TechArt Center	Red Color for one cell
Music Department	Green Color for one cell
Finearts Department	background color of table (grey)
Theatre Department	background color of table (grey)
Dance Department	blue color of the whole row

Example 2:  巢狀表格

<table border=1 cellpadding=5>
<tr><td>單位</td>
    <td>ip</td>
    <td>聯絡人</td>
    <td>網路設備及地點</td>
</tr>
<tr><td>電算中心主機</td>
    <td>192.192.10.1</td>
    <td>
        <table border=1>
        <tr><td>許煒城 Tel: 893-8818</td></tr>
        <tr><td>email: chw@ccnia.tnua.edu.tw</td></tr>
        <tr><td>系統維護工程師</td></tr>
        </table>
    </td>
    <td align=center>
        <table border=1> 
        <tr><td>ccnia.tnua.edu.tw</td></tr>
        <tr><td>型號<td>ibm 930</td> </tr>
        </table>
    </td>
</tr>
</table>

單位

聯絡人

網路設備及地點

電算中心主機

192.192.10.1

Sampson Tel: 2896-1000

Email: www@ccnia.tnua.edu.tw

系統維護工程師

型號

IBM 930



Example 3: Span-tables: colspan 跨行表格

<table border=1 cellpadding=2>
    <tr><td colspan=2藝術與科技中心</td></tr>
    <tr><td>小牛老師</td>
        <td>電話 : 1234</td>
    </tr>
</table>

藝術與科技中心
小牛老師	電話 : 1234



Example 4: Span-tables: rowspan 跨列表格

<table border=1 cellpadding=2>
    <tr><td rowspan=2>藝術與科技中心</td>
        <td>小牛老師</td>
    </tr>
    <tr><td>電話 : 1234</td></tr>
</table>

藝術與科技中心	小牛老師
	電話 : 1234

Example 5: 無邊的有色表格

<table border="0" width="400" bgcolor=#ffffff>
<tr bgcolor="#588ccc"><td><font color="#ffffff">課 程</font></td></tr>
<tr><td>電腦繪圖與影像處理</td></tr>
<tr> bgcolor=#eeeeee><td>WWW Home Page 的設計 </td></tr>
<tr><td>電腦網路的基本概念與應用</td></tr>

<tr bgcolor="#588ccc"><td><font color="#ffffff">著 作</font></td></tr>
<tr><td>內縮與賁張</td></tr>
<tr bgcolor=#eeeeee><td>樹林裡放風箏</td></tr>
<tr><td>我們不只是數字</td></tr>
<tr bgcolor=#eeeeee><td>往、網、魍、惘、枉</td></tr>

<tr bgcolor="#588ccc"><td><font color="#ffffff">興 趣</font></td></tr>
<tr><td>不 務 正 業</td></tr>
<tr bgcolor=#eeeeee><td>到 處 流 浪</td></tr>
</table>

課程

電腦繪圖與影像處理

WWW Home Page 的設計

互動式多媒體系統製作與應用

著作

內縮與賁張

樹林裡放風箏

我們不只是數字

往、網、魍、惘、枉

興趣

不務正業

到處流浪

Example 6: 表格的框邊顏色設定

<table bordercolor=#aa0000 border=10>
<tr><td>衣索匹亞</td>
    <td>索馬利亞</td>
</tr>
<tr><td>南斯拉夫</td>
    <td>保加利亞</td>
</tr>
</table>

衣索匹亞	索馬利亞
南斯拉夫	保加利亞

Example 7: 利用VALIGN及WIDTH來達到文章對位之效果

<table width="500" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="130" valign="top">
    <a href="http://techart.tnua.edu.tw/1_labs/digiart.html">數位藝術實驗室</a></td>
<td width="20"></td>
<td width="350" valign="top">
        數位藝術實驗室主要宗旨乃將積極開拓數位藝術各類型創作
        之可能性，包括數位影像／動畫、多媒體創作、互動裝置、
        網路藝術、互動裝置與公共空間結合等創作之可能性，未來
        藉著數位藝術實驗室之設置積極開發不同互動式介面技術。C<p> </td>
</tr>

<tr>
<td width="130" valign="top">
    <a href="http://techart.tnua.edu.tw/1_labs/digimusic.html">電腦音樂實驗室</a></td>
<td width="20"></td>
<td width="350" valign="top"> 
        電腦音樂、科技音樂是全球樂壇之大勢所趨，沒有電腦音樂
        方面的先進發展，臺灣將繼續無法打入國際創作樂壇。作為
        臺灣的一個電腦音樂專業研發組織，我們配合教育部所推展
        的「教學卓越計畫」提出「電腦音樂創意支援計畫」，並擴
        大成立「電腦音樂」實驗室。<p></td>
</tr>
</table>

數位藝術實驗室		數位藝術實驗室主要宗旨乃將積極開拓數位藝術各類型創作之可能性，包括數位影像／動畫、多媒體創作、互動裝置、網路藝術、互動裝置與公共空間結合等創作之可能性，未來藉著數位藝術實驗室之設置積極開發不同互動式介面技術。
電腦音樂實驗室		電腦音樂、科技音樂是全球樂壇之大勢所趨，沒有電腦音樂方面的先進發展，臺灣將繼續無法打入國際創作樂壇。作為臺灣的一個電腦音樂專業研發組織，我們配合教育部所推展的「教學卓越計畫」提出「電腦音樂創意支援計畫」，並擴大成立「電腦音樂」實驗室。

Example 8: 利用 Table 來作畫面構成 coing2002.zip、 techart.zip

§ Field & Legend

[說明] :<fieldset>...</fieldset>標籤會在區塊的外圍，加上矩形的邊框，若加上Background-color的屬性，可以使區塊的設定更為明顯！

Example 1 :

<div style="width:80%"> 
<fieldset> 
<legend align=right >【花想】關渡花卉藝術節</legend> 
隨著花序的輪替、十二節氣的轉換，人的感情世界感受到外在環境的影響 
，變得豐富而遼闊。文人雅士只賞花卉，常將自己幻化為花卉，結合文學 
的表述、藝術的展現昇華了花的想像空間，其悲喜交織、變化萬千的姿容
，與人的情感相共鳴，激發文學家與藝術家的創作。不僅文人雅士如此，
即使是普羅大 眾，也常因花生活變得多采多姿。<p>
人類的藝文活動透過以花為主題的詮釋，更 能展現藝文的精神層次，而花
也因與藝文創作相結合，留下更多想像的空間。 
</fieldset> 
</div>

【花想】關渡花卉藝術節隨著花序的輪替、十二節氣的轉換，人的感情世界感受到外在環境的影響
，變得豐富而遼闊。文人雅士只賞花卉，常將自己幻化為花卉，結合文學
的表述、藝術的展現昇華了花的想像空間，其悲喜交織、變化萬千的姿容
，與人的情感相共鳴，激發文學家與藝術家的創作。不僅文人雅士如此，
即使是普羅大眾，也常因花生活變得多采多姿。

人類的藝文活動透過以花為主題的詮釋，更能展現藝文的精神層次，而花
也因與藝文創作相結合，留下更多想像的空間。

Example 2:

<fieldset> 
<legend>2003/4/17</legend> 
<p>以花之手，推開春天與大地，先放一點雲與鳥兒進來，再讓世界遼闊出去…… 
</fieldset>

2003/4/17

以花之手，推開春天與大地，先放一點雲與鳥兒進來，再讓世界遼闊出去……

Example 3 :

§ Fragment Indentifiers

[說明] : Page頁內的連結 (適合用在講義的網頁撰寫)

Example 1 : 連到同一網頁的某段落文章

(注意:上面link需 #，下面被link不需要#; 上面link用HREF，下面被link用NAME) 

<a href="#Font">[Font Size & Color] 字型進階使用</a><p>
    
<a name="Font"> </a>
<h1><font color="#aa0000">§ font</font></h1>

連到本份講義的Font單元

Example 2 : 連到不同網頁的某段落文章
<a href="http://techart.tnua.edu.tw/~suchu/www/java.html#Java(4)">
連到另一份Java講義中的"Java公司精彩例子"</a>

連到Java講義中的"Java精彩例子"

§ Image Mapping

[說明] : 圖檔不同位置的Links
-- shape = rect : mapping 的範圍為矩形, mapping中需給矩形左上角與右下角之
　座標位置
-- shape = polygon : mapping 的範圍為多邊形, mapping中需給每頂點之座標位置
-- shape = circle : mapping 的範圍為圓形, mapping中需給半徑及圓心之座標位置

(圖形mapping需先定義)
<map name="xxxx">
<area shape=rect coords="x1,y1,x2,y2" href="url-1">
<area shape=polygon coords="x1,y1,x2,y2 x3,y3 ... ,xn,yn"
    href="url-2">
<area shape=circle coords="x1,y1,r" href="url-2">
<area shape=default href="url-n">
<area shape=some-area nohref">
</map>

(圖形link先前定義的mapping)
<img src="url" usemap="#xxxx">


Example 1:

<map name=cow-photo>
<area shape=rect coords="15,19,82,117" href="photo-01.html"> 
<area shape=rect coords="93,18,157,116" href="photo-02.html">
<area shape=rect coords="167,18,234,115" href="photo-03.html">
<area shape=rect coords="245,18,311,116" href="photo-04.html">
<area shape=rect coords="17,137,110,208" href="photo-05.html">
<area shape=rect coords="122,138,213,206" href="photo-06.html">
<area shape=rect coords="223,140,310,207" href="photo-07.html">
<area shape=rect coords="16,226,108,296" href="photo-08.html">
<area shape=rect coords="120,224,212,293" href="photo-09.html">
<area shape=rect coords="224,227,310,293" href="photo-10.html">
<area shape=rect coords="15,320,82,415" href="photo-11.html">
<area shape=rect coords="91,320,160,416" href="photo-12.html">
<area shape=rect coords="168,320,236,417" href="photo-13.html">
<area shape=rect coords="245,319,311,416" href="photo-14.html">
<area shape=default href="try-again.html">
</map>

<img src="photo.jpg" usemap="#cow-photo"></a><p>

§ iframe (內部崁頁)

§ frame (頁面分割)

<frameset cols|rows frameborder=0 border=0
bordercolor framespacing=0 framepadding=0>
[說明] : 把視窗切成大小不同的子視窗
-- frameset : 切割定義
-- cols | rows = "300,*" 或 "20%,*" : 縱向 | 橫向切割為300pixels (*表示剩
　下的),或用螢幕百分比表示
-- frameborder = 0 border= n : 定義frame的邊界寬度
　 (前forIE, 後for Netscape)
-- bordercolor : frame的邊界顏色
-- framespacing = n : 文字距邊界之間距
-- framepadding = n : frame 與 fame 間距

<frame src="url" name="frame-name" scrolling="yes/no/auto"
noresize marginwidth="value" marginheigh="value">
[說明] : 每個frame
-- frame : 每個frame的內部定義
-- name : frame的名字 (可供TARGET使用)
-- src=xxx.html : frame中要連結那個網頁
-- scrolling="yes/no/auto" : frame中要不要scrollbar
-- noresize : frame中允不允許被變更size
-- marginwidth = n, marginheigh = n : frame內部文字距左邊邊界與上
　面邊界的間距 (for IE)


用了body就不能用frame;用了frame就不能用body。

在Frame中,Link的TARGET描素:     
  "_blank" : load this link into a new unnamed windows
  "_self" : load this link over itself
  "_parent" : load this link into its parent  (範例)
  "_top" : load this link into top level


Example 1: 上下切割 (記得每個Frame都要給個名字)
<frameset rows="40%,*">
   <frame name="top" src="i-can.html">
   <frame name="bottom" src="http://www.tnua.edu.tw/">
</frameset>
註 : *表示剩下的60%， name 可任意取你要的名字


Example 2: 左右切割
<frameset cols="40%,*">
   <frame name="left" src="i-can.html">
     <frame name="right" src="http://www.tnua.edu.tw/">
</frameset>
      

Example 3: 多重切割
<frameset cols="60%,*">
 <frame name="left" src="http://www.tnua.edu.tw/">
 <frameset rows="50%,*">
  <frame name="top" src="i-can.html">
    <frameset cols="50%,*">
        <frame name="home-1" src="menu.html">
        <frame name="home-2" src="http://techart.tnua.edu.tw">
  </frameset>      
 </frameset>
</frameset>


Example 4:
<a href=http://techart.tnua.edu.tw/~suchu/graphics target=frame-name>
 (注意網頁左邊Frame中的連結,用TARGET參數指到右邊Fram的名字)


Example 5: 沒有界線的Frame寫法
<frameset cols="131,*" frameborder="0" border="0">
  <frame src="menu.html" name="menu" scrolling="no"
            noresize maginwidh="0" marginheight="0">
  <frame src="home.html" name='home' 
            marginheight="20" marginwidth="20">
</frameset>


Example 6:  沒有Frame框、沒有界距的寫法，適用於 IE 與 Netscape
<frameset cols="130,420" border="0" frameborder="0" framepadding="0" framespacing="0"> 


Example 7:  
<frameset cols="10%,200,1*,2*"> 表示切割為10%,200pixel,剩工的作 1 比 2 等份

§ Meta (需放於 HEAD 內)

<meta http-equiv="Refresh" content="2;url=http://techart.tnua.edu.tw">
[說明]: 1. 使一網頁停留幾秒後自動切換到另一網頁，
　　　　或瀏覽時間超過設定時間，必須重新reload
<meta http-equiv="Refresh" content="text/html; charset=big5">
[說明]: 2. 宣告網頁內的文字模式
<meta name="author" content="作者名稱">
[說明]: 3. 宣告網頁內的作者
<meta name="description" content="網頁描述">
[說明]: 4. 宣告網頁內容摘要
<meta name="keywords" content="網頁keyword">
[說明]: 5. 宣告網頁關鍵字

Example 1: (從一網頁自動跳到另一網頁, 目的: 用於網址更動告知)

<head>
<meta http-equiv="Refresh"  content="2; url=http://techart.tnua.edu.tw">
<title>Table Color Test</title>
</head>

<body bgcolor="#ffffff" text="#000000" vlink="#5a5ad6" alink="#9a9a9a">
<h1>Test Meta with Image</h1>
<img src="Data/cow-bw.gif">
</body>

Example 2: (瀏覽時間超過設定時間，必須重新reload)

<head>
<meta http-equiv="Expires" content="Sun, 04 Aug 2001 00:00:00 GMT">
<title>Meta Test</title>
</head>


Example 3: (目的：宣告網頁內的文字模式)

<meta http-equiv="Content-Type" content="text/html; charset=big5">

注意：此 Big5的文字模式，可使文字自動縮排。但若在 English Windows
(即使灌有楓橋、南極星中文系統)則只會看到"口口口口口..."的中文字。
最好在English Windows 下所使用的 Browser 安裝有 Big5字型。)

Example 4: (目的：宣告網頁內的作者、內容綱要、關鍵字)

(以下描述需置於 HEAD 中)
<meta name="AUTHOR" content="Xiaoniu SuChu Hsu, 小牛">
<meta name="description" content="WWW Home Page Design --
  1. 本課程主要乃介紹同學如何運用Netscape來查詢全世界之資訊.
  2. 學習如何製作 WWW Home Page 的設計 (撰寫HTML程式).
  3. 並進一步使用CGI、Java Script及Java程式作專業的設計。">
<meta name="keywords" content="WWW,Netscape,HTML,CGI,Java,
  Java Script,Icon,Front Page">

§ Bookmark Icon (需放於 HEAD 內)

<link rel="shortcut icon" href="My.ico">

<link rel="shortcut icon" href="http://techart.tnua.edu.tw/~suchu/CowDisk.ico">

[說明]: 1. My.ico為自己準備local的Icon圖檔
[說明]: 2. Icon圖檔亦可用remote端之圖檔

§ Marquee 動態引言 (只適合IE)

<marquee dirction="right / left" scrollamount="1" >
(數字越小，越慢)

Example1 :路雖難走，總得有人走；非需而走，非求而走；為生命而走，為難而走。
<marquee>路雖難走，總得有人走；非需而走，非求而走；為生命而走，為難而走。</marquee>

Example2 :
<marquee direction=right><img src="http://www.google.com/images/logo.gif"></marquee>

§ 植入Adobe Acrobat / Office 檔案

Example 1: 連結式的呼叫 Acrobat xxx.pdf 檔案 (Click後出現) Click here
<a href=Acrobat.pdf>Click here</a>
　(連結式，會呼叫 Acrobat軟體把檔案開出。)
(※注意：若沒灌有Adobe Acrobat的軟體，則會變成把 xxx.pdf Save as下來)

Example 2: 連結式的呼叫 WORD xxx.doc 檔案 Click here
<a href=word.doc>Click here</a>
　(連結式，會呼叫 WORD軟體把檔案開出。)
(※注意：在 Netscape，則會變成把 xxx.doc Save as下來)

Example 3: 連結式的呼叫其他檔案檔案
‧ Powerpoint檔案 <a href=powerpoint_file.ppt>powerpoint_file.ppt</a>
‧ Excell檔案 <a href=excell_file.xls>excell_file.xls</a>
‧ Zip壓縮檔檔案 <a href=winzip.zip>winzip.zip</a>
‧ exe檔案需放於ftp server <a href=ftp://ftp_server/pub/other.exe>other.exe</a>

§ Director or Flash 檔案的使用

Example 1: 連結式的呼叫 Director xxx.dcr 檔案
Click <a href=whispers.dcr>whispers.dcr</a> to see.
　Click whispers.dcr to see.

(※注意：需要 Shockwave 的plugin軟體)

Example 2 : 隱藏式展示 Flash File ball.html
(Flash軟體可直接 save成相關 html檔，不能用連結式的呼叫)

   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
   id="ball" width="400" height="240">
   <param name="movie" value="Data/ball.swf"> 
   <param name="quality" value="high"> 
   <param name="bgcolor" value="#000000"> 

   <embed src="Data/ball.swf" quality="high" bgcolor="#000000" 
             width="400" height="240" swliveconnect="true" type="application/x-shockwave-flash" 
       pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
   </embed>
   </object>

注意：flash的html碼可自flash軟體直接publish出來

(※注意：需要 Flash Player 的plugin軟體)

§Sound/Video

[說明]: 各種多媒體檔案播放

〝連結式〞的呼叫多媒體檔案〝互動式播放〞
<a href="xxx.wav|xxx.mid|xxx.avi|xxx.mov>

1. Sound-example (WAV聲音檔 xxx.wav)
<a href="jungle.wav">1. Sound-example</a>

2. Avi-example (AVI影像檔 xxx.avi) (王敬聰提供)
<a href="morph.avi">2. Avi-example</a>

3. QuickTime-example (QuickTime影像檔 xxx.mov)
<a href="sample.mov">3. QuickTime-example</a>
※Quick Time Player [Download]

4. Mpeg-example (Mpeg影像檔 xxx.mpg)
<a href="sample.mpg">4. Mpeg-example</a>
※ Windows Media Player 與 Real One Player 可播放 mpeg1, mpeg2檔案
但mpeg4，需安裝DivX502Bundle.exe影像解壓縮軟體

〝隱藏式〞的展示多媒體檔案〝自動播放〞 (only for Netscape)
1. 隱藏式背景音樂 sound1.html
<bgsound src="jungle.wav" Loop=4>

〝Flash Video (shockwave-flash)〞Video播放

<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/WoUzfIlX_D8&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/WoUzfIlX_D8&rel=1" type="application/x-shockwave-flash" 
wmode="transparent" width="425" height="350"></embed>
</object>

2. Google Video
 
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" 
src="http://video.google.com/googleplayer.swf?docId=507732229697832036&hl=en"> 
</embed>

§ 網頁編排與對位應用

Example 01: 利用無框邊Table與VALIGN參數來達到對位的效果
Example 02: 利用一個很小的透明檔案來達到對位
Example 03: 利用 Style Sheet 來達到對位
<p style="text-indent:xx% (或xxpt) | line-height: xx pt">

範例一： FRAME的使用
　‧範例網頁呈現
　‧範例首頁程式 : index.html
　‧範例左邊Frame程式 : menu.html
　‧範例右邊Frame程式 : main.html
　‧範例左邊Frame的第一個 link程式 : subject1.html

範例二： ASCC 中研院電算中心 (用TABLE來對位)
　‧ASCC 中研院電算中心 (網頁呈現)
　‧ASCC 中研院電算中心 (網頁分析)

範例三：台灣人文社會電子影音數位博物館 (用TABLE來對位)
　‧影音數位博物館 (網頁呈現)
　‧影音數位博物館 (網頁分析)
　‧index.html | menu.html | home.html

HTML4 最新版教戰手冊 -- 孫昱編譯 (文魁)
精通HTML -- 洪錦魁‧蔡昌均 (文魁)
HTML -- 林修平編譯 (松格)
WWW 之 HTML 與 CGI 寫作大全 -- 蔡奇玉‧連振漢 (第三波)
Home Page製作實務技巧 (HTML, CGI, Java, VRML) --
鍾允中‧陳建銘‧曾志光 (立威)
HTML 教戰手冊/如何製作Home Page -- 何月瑩 (凱立資訊股份有限公司)
WWW 入門 (架站與系統維護) -- 游光志 (碁峰)
JAVA 技術手冊 -- (松格)
CGI 程式設計 -- (松格)
Web Graphics Bible -- Ron Wodaski (IDG Worldwide)