或許你已經發現這個問題了：天啊！我不是在記事本裡排版排得很漂亮，為何透過瀏覽器看起來一切都走了樣？對啊！別太訝異，在網頁的編排裡，並不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因為 ，HTML語言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當作沒看見啦！

 

1. 使用方法：強制斷行標籤<br>、強制分段標籤<p>

2. 標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（<br>），或是在寫完某一段的時候便會分段（<p>），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。

3. 使用範例：

   原始碼	呈現結果
   這是一個斷行的範例<br>看出來了嗎？	這是一個斷行的範例 看出來了嗎？
   這是一個分段的範例<p>基本上他會比斷行還多空出一行	這是一個分段的範例 基本上分段會比斷行還多空出一行

 

1. 使用方法：上一段文字內容<hr>下一段文字內容

2. 標籤解說：利用<hr>這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下：

3. 使用範例：
   

   一般用法	尚未加任何屬性。
   原始碼	普通分隔線<hr>
   呈現結果	普通分隔線

    

   顏色屬性	用法：<hr color="顏色碼或顏色名稱">
   原始碼	橘色分隔線<hr color="#ff8000">
   呈現結果	橘色分隔線

    

   寬度屬性	用法：<hr width="寬度">，其單位為px（像素），寬度亦可用百分比來作設定，如50%即意為寬度佔螢幕50%。
   原始碼	寬度為240px的分隔線<hr width="240">
   呈現結果	寬度為240px分隔線

    

   厚度屬性	用法：<hr size="厚度">
   原始碼	厚度為5的分隔線<hr size="5">
   呈現結果	厚度為5分隔線

    

   位置屬性	用法：<hr align="水平對齊位置">，其設定值有三個，也就是置左align="left"、置中align="center"、置右align="right"
   原始碼	靠右的分隔線<hr align="right">
   呈現結果	靠右的分隔線

    

   陰影屬性	用法：<hr noshade>，無設定值，只要將 noshade 加入即可，通常會配合顏色設定，效果較佳。
   原始碼	實心分隔線（無陰影）<hr noshade>
   呈現結果	實心分隔線（無陰影）

 

1. 使用方法：老實說，剛剛我們學過的分段標籤<p>再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：

    

   原始碼	呈現結果
   <p align="left">文字靠左</p>	文字靠左
   <p align="center">文字置中</p>	文字置中
   <p align="right">文字靠右</p>	文字靠右

   標籤解說：嗯！祕訣就在於「align=對齊位置」而已啦！align是分段標籤<p>的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定「水平對齊位置」，其常見的設定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

 

1. 使用方法：<center>這是置中</center>

2. 標籤解說：這個標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網頁上的東西都可以置中喔！

3. 使用範例：

   原始碼	呈現結果
   <center>這是最中間</center>	這是最中間

 

1. 使用方法：<blockquote>要縮排的文字</blockquote>

2. 標籤解說：利用<blockquote></blockquote>這個標籤可以將其包起來的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類推。

3. 使用範例：

   原始碼	呈現結果
   <blockquote>縮排1單位</blockquote>	縮排1單位
   <blockquote><blockquote>縮排2單位</blockquote></blockquote>	縮排2單位

 

1. 使用方法：<pre>文字內容<pre>

2. 標籤解說：利用<pre></pre>這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。

3. 使用範例：

   原始碼	呈現結果
   <pre> 文　字 　格　式 </pre>	文　字 　格　式

 

1. 使用方法：<h1>標題內容</h1>

2. 標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。

3. 使用範例：
   

   原始碼	呈現結果
   <h1>標題一</h1>	標題一
   <h2>標題二</h2>	標題二
   <h3>標題三</h3>	標題三
   <h4>標題四</h4>	標題四
   <h5>標題五</h5>	標題五
   <h6>標題六</h6>	標題六

 

1. 使用方法：<font size=3>文字內容</font>

2. 標籤解說：標題的大小一共有七種，也就是<font size=1>（最小）到<font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內容</font>，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。

3. 使用範例：
   

   原始碼	呈現結果
   <font size=1>字體一</font> 或是 <font size=-2>字體一</font>	字體一
   <font size=2>字體二</font> 或是 <font size=-1>字體二</font>	字體二
   <font size=3>字體三</font> 或是 <font size=+0>字體三</font>	字體三
   <font size=4>字體四</font> 或是 <font size=+1>字體四</font>	字體四
   <font size=5>字體五</font> 或是 <font size=+2>字體五</font>	字體五
   <font size=6>字體六</font> 或是 <font size=+3>字體六</font>	字體六
   <font size=6>字體七</font> 或是 <font size=+4>字體七</font>	字體七

 

1. 使用方法：<b>文字</b>

2. 標籤解說：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無強迫說遇到原始碼 就要加上『原始碼』的標籤。

3. 使用範例：
   

   原始碼	呈現結果
   <b>粗體</b>	粗體
   <i>斜體</i>	斜體
   <u>底線</u>	底線
   <sup>上標</sup>	上標
   <sub>下標</sub>	下標
   <tt>打字機</tt>	打字機
   <blink>閃爍</blink>（ie沒效果）	閃爍
   <em>強調</em>	強調
   <strong>加強</strong>	加強
   <samp>範例</samp>	範例
   <code>原始碼</code>	原始碼
   <var>變數</var>	變數
   <dfn>定義</dfn>	定義
   <cite>引用</cite>	引用
   <address>所在地址</address>	所在地址

 

1. 使用方法：<font color="#fefecb">文字顏色</font>

2. 標籤解說：文字也可以設定 顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！

3. 使用範例：
   

   原始碼	呈現結果
   <font color="#ff0000">紅</font>	紅色的字喔！
   <font color="#ff8000">橙</font>	橙色的字喔！
   <font color="#ffff00">黃</font>	黃色的字喔！
   <font color="#00ff00">綠</font>	綠色的字喔！
   <font color="#0080ff">藍</font>	藍色的字喔！
   <font color="#0000a0">靛</font>	靛色的字喔！
   <font color="#8000ff">紫</font>	紫色的字喔！
   <font color="#000000">黑</font>	黑色的字喔！
   <font color="#c0c0c0">灰</font>	灰色的字喔！

 

1. 使用方法：<font face="字型名稱">文字</font>

2. 標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的 字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！

   另外，如果您的網頁中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。

3. 使用範例：
   

   原始碼	呈現結果
   <font face="標楷體">標楷體</font>	標楷體
   <font face="華康儷中黑">華康儷中黑</font>	華康儷中黑

 

1. 使用方法：&nbsp;

2. 標籤解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：「&lt;」，常用的如下：

3. 使用範例：
   

   原始碼	呈現結果
    	( 代表一個不斷行空白)
   &lt;	<
   &gt;	>
   &amp;	&
   &quot;	"

 

1. 使用方法：<basefont size="1~7">

2. 標籤解說：這個標籤可以改變文字大小的內定值，直接加在<body>標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值為3。

在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GI F在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因為系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。

另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。

 

1. 使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>

2. 標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適 合用jpg格式來呈現。

3. 使用範例：

    

   基本用法	用法：<img src="圖檔名稱、路徑"> 顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。
   原始碼	<img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔！
   呈現結果	嗨！我是本站的模特兒喔！

    

   長寬設定	用法：<img src="圖檔" height="高度" width="寬度"> 設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
   原始碼	<img src="/html/images/G-FASE4.GIF" height=32 width=32>
   呈現結果

    

   加上說明	用法：<img src="圖檔" alt="說明文字"> 滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。
   原始碼	<img src="/html/images/G-FASE4.GIF" alt="本站特約模特兒">移到圖上看看。
   呈現結果	移到圖上看看。

    

   圖片位置	用法：<img src="圖檔" align="位置"> 圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成『文繞圖』的效果。
   原始碼	<img src="/html/images/G-FASE4.GIF" align=right>嗨！我往右邊靠！
   呈現結果	嗨！我往右邊靠！
   原始碼	<img src="/html/images/G-FASE4.GIF" align=left>嗨！我往左邊靠！
   呈現結果	嗨！我往左邊靠！
   原始碼	<img src="/html/images/G-FASE4.GIF" align=top>文字對齊我頭頂！
   呈現結果	文字對齊我頭頂！
   原始碼	<img src="/html/images/G-FASE4.GIF" align=bottom>文字對齊我腳底！
   呈現結果	文字對齊我腳底！
   原始碼	<img src="/html/images/G-FASE4.GIF" align=middle>文字對齊我中間！
   呈現結果	文字對齊我中間！
   原始碼	<img src="/html/images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！
   呈現結果	文字對齊我絕對中間！

    

   邊框設定	用法：<img src="圖檔" border="邊框粗細"> 設定邊框大小，通常都設成 0 感覺比較美觀啦！因為內定的框框實在是不怎麼漂亮....。尤其在連結時，設框框簡直是醜斃了...。
   原始碼	<img src="/html/images/G-FASE4.GIF" border="4">
   呈現結果

    

   左右間距	用法：<img src="圖檔" hspace="離左右物件的距離"> 離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
   原始碼	左邊的字<img src="/html/images/G-FASE4.GIF" hspace="15">右邊的字
   呈現結果	左邊的字右邊的字

    

   上下間距	用法：<img src="圖檔" vspace="離上下物件的距離"> 離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
   原始碼	上面的字<br><img src="/html/images/G-FASE4.GIF" vspace="15"><br>下面的字
   呈現結果	上面的字 下面的字

   由於此網頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。

 

1. 關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通 放在同一個目錄下，比如說有人將圖檔全放在c:\images裡，而網頁檔放在c:\demo裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：
   

   html檔的位置	圖檔的位置	寫法	情形說明
   c:\demo	c:\demo	<img src="tad.gif">	圖文均在同一目錄
   c:\demo	c:\demo\images	<img src="/html/images/tad.gif">	圖在網頁下一層目錄
   c:\demo	c:\	<img src=" ../tad.gif">	圖在網頁上一層
   c:\demo	c:\image	<img src=" image/tad.gif">	圖文在同一層但不同目錄

   或許有人看到不明就理，我來說明一下，「../」是回到上一層目錄的意思。「images/」則是進入下一層目錄image之意，而「images/」的意思就是，回到上一層目錄，然後再進入目錄images中。以上我們使用的均為 「相對路徑」的概念。

2. 影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是「pixels」，我們稱之為「像素」。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉 個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整為800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點變小的原因。

3. 影像格式：網頁用的圖檔目前只有gif格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的， 若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！

    

   圖檔範例	說明
   	gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。
   	jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。

說穿了，背景標籤只有<BODY>這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。

 

1. 使用方法：<body bgcolor="#ffffff" background="bg.jpg">

2. 標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎...現在放馬後砲有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在<body>這標籤裡面。我就其屬性來一一解說：

   背景顏色	用法：<body bgcolor="顏色碼"> 設定背景顏色。有人會說：『我已經設定了背景圖片，那背景顏色還有用嗎？』當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！
   原始碼	<html> <head> <title>這是標題</title> </head> <body bgcolor="#f9e6a2"> 這裡是本文區 </body> </html>
   呈現結果	按下此處觀看結果

    

   背景圖案	用法：<body background="圖檔名稱、路徑"> g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。
   原始碼	<html> <head> <title>這是標題</title> </head> <body background="bg.jpg"> 這裡是本文區 </body> </html>
   呈現結果	按下此處觀看結果

 

1. 使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

2. 標籤解說：用字體標籤中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個<body>標籤中，便有設定內文、連結等文字的顏色內定值功能。用法如下：

    

   內文顏色	用法：<body text="顏色碼"> 設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。
   原始碼	<html> <head> <title>這是標題</title> </head> <body text="#0906a2"> 這裡是本文區 </body> </html>
   呈現結果	按下此處觀看結果

    

   連結顏色	用法：<body link="顏色碼"> 設定「連結」的顏色。只要是有連結的地方就會出現你指定的顏色，當然，如果按下連結後，那又會變成另一個顏色了，這底下會說明。
   原始碼	<html> <head> <title>這是標題</title> </head> <body link="#ff6600"> <a href="index.htm">連結文字</a> </body> </html>
   呈現結果	按下此處觀看結果（設定連結為橘色）

    

   連結時顏色	用法：<body alink="顏色碼"> 設定「按下連結」的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。
   原始碼	<html> <head> <title>這是標題</title> </head> <body alink="#0099ff"> <a href="index.htm">連結中文字</a> </body> </html>
   呈現結果	按下此處觀看結果（滑鼠點下連結瞬間才會出現我們設定的淺藍色）

    

   已連結顏色	用法：<body vlink="顏色碼"> 設定「按下鏈結後」的顏色，也就是如果該連結已經有被按過了，那麼就會呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過了，哪些沒去過。
   原始碼	<html> <head> <title>這是標題</title> </head> <body vlink="red"> <a href="demo1-10-6.htm">連結文字</a> </body> </html>
   呈現結果	按下此處觀看結果（設定已執行過的連結以紅色顯示）

    

 

1. 連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當游標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的...）。

   扯到連結，最基本來看有『內部連結』及『外部連結』，所謂『內部連結』就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。

   要了解內部連結，首先必須先了解一下這兩種東西，一個是『相對路徑』，一個是『絕對路徑』。

   現在假設一個情形：我們在自己的電腦裡設計網頁，所有網頁相關的檔案我們通通放在 c:\www 裡面，現在假設 c:\www 裡面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！

   現在我們想在 index.htm 裡面設一個連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裡面加上下面任一敘述：

    

   <a href="/c|/www/text1.htm">	這就是『絕對路徑』
   <a href="text1.htm">	這就是『相對路徑』

   瞧出什麼端倪了沒有？嗯嗯....沒錯，『絕對路徑』要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而『相對路徑』就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:\www 底下去找text1.htm。

   如果說，今天我們將 c:\www 裡所有的檔案都上傳到網路上的網頁伺服器（總不能做好了只給自己看吧！），且該伺服器是別人的電腦，而非你自己架設的主機，那麼問題就來了！你猜，哪一種連結會出問題？呵呵...答案是『絕對路徑』，您猜對了嗎？

   為什麼說『絕對路徑』會出問題呢？因為，當您將檔案上傳到網路上時，您的整個網頁目錄架構一定會變，到時候，電腦可能找不到 c:\ （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會規定要放在特定的目錄下才能顯示網頁），所以說，沒事的話，盡量用『相對路徑』來作連結吧！好寫又不容易出錯。

   另外一個情形是：為了整理方便，有些網友喜歡將圖檔通通放到同一個目錄下，如：c:\www\gif\ 底下放進了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:\www 底下。現在我們想在 index.htm 下設個連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來使用『相對路徑』呢？他們又不在『同一個目錄』下...？

    

   <a href="/c|/www/gif/p1.gif">	這是『絕對路徑』的寫法
   <a href="gif/p1.gif">	這是『相對路徑』的寫法

   如何？不難吧！（只是字有點多，看到腦子發脹）

 

2. 總整理：很亂嗎？嗯...看看這表，或許會清楚些。

    

   相對路徑表示方式	代表連結位置
   <a href="text1.htm">	text1.htm在目前的目錄中（就例子而言，就是在c:\www中）
   <a href="docs/text1.htm">	text1.htm在名為docs的次目錄中（就本例而言，就是在c:\www\docs中）
   <a href="../text1.htm">	text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:\底下了）

 

1. 使用方法：

    

   1. 先在欲連結處作記號：<a name="here1">這裡是你想連結的點</a>

   2. 設定連結：<a href="#here1">連結</a>

2. 標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！

3. 使用範例：

    

   範例	第一步驟	第二步驟
   www連結標籤基本概念	<a name="m1">欲連結的位置</a>	<a href="#m1">www連結標籤基本概念</a>
   網頁內部的連結	<a name="m2">欲連結的位置</a>	<a href="#m2">網頁內部的連結</a>
   網頁外部的連結	<a name="m3">欲連結的位置</a>	<a href="#m3">網頁外部的連結</a>

 

1. 標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。

2. 使用範例：

    

   網站連結	好站	<a href="https://sunspot-design.com">好站</a>
   電子郵件連結	寫情書給我	<a href="mailto:tad@ms1.url.com.tw">寫情書給我</a>
   ftp連結	下載檔案	<a href="ftp://ftp.ntu.edu.tw">下載檔案</a>
   news連結	seednet news服務	<a href="news:news.seed.net.tw">seednet news服務</a>
   gopher連結	seednet gopher服務	<a href="gopher://gopher.seed.net.tw/">seednet gopher服務</a>
   bbs連結	seednet gopher服務	<a href="telnet://bbs.seed.net.tw/">seednet bbs服務</a>

 

1. 使用方法：在連結後面加入 target=_參數

2. 標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是『目標』，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！

3. 使用範例：

    

   • target=框窗名稱：
     這在『框架標籤』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。

   • target=_blank：
     將連結的畫面內容，開在新的瀏覽視窗中。

   • target=_parent：
     將連結的畫面內容，當成文件的上一個畫面。

   • target=_self：
     將連結的畫面內容，顯示在目前的視窗中。

   • target=_top：
     這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。

舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用<TABLE></TABLE>標籤告訴電腦 我要做一個表格；第二個步驟，利用一組<TR></TR>標籤先做一個橫列，然後在橫列中利用三組<TD></TD>標籤再分出三欄；第三個步驟，重複第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列 的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細：

1. 首先我們來看一個最簡單的表格：

    

   原始碼	呈現結果
   <TABLE BORDER=1> <TR><TD>1</TD></TR> </TABLE>	1

   利用<TABLE>這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組<TR></TR>是設定一橫列的開始。一組<TD></TD>則是設定一個欄位。當然，文字就是要擺在這裡面。

2. 現在我們再來增加二個格子：

    

   原始碼	呈現結果
   <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE>	1 2 3

3. 看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：

    

   原始碼	呈現結果
   <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 4 5 6

1. 並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠「合併欄位」，讓表格更美觀、更實用一點，而談到「合併欄位」，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併） ，一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。

2. 左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格：

    

   原始碼	呈現結果
   <TABLE BORDER=1> <TR><TD COLSPAN=3>1</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE>	1 4 5 6

   您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個欄位左右 橫跨了3個欄位」，也正因如此，本來的兩個<TD>都可以省掉了，因為都被併掉了嘛！

3. 上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 1、4格通通合併變成一大格：

    

   原始碼	呈現結果
   <TABLE BORDER=1> <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>5</TD><TD>6</TD></TR> </TABLE>	1 2 3 5 6

   有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下 面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的<TD>標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」，其結果如下：

    

1. 我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：

    

   原始碼	呈現結果
   <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD>1</TD></TR> </TABLE>	1

2. 哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：

    

   原始碼	呈現結果
   <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER>1</TD></TR> </TABLE>	1

   此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在<TD>中呢？因為，<TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。

3. 既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。

    

   原始碼	呈現結果
   <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR> </TABLE>	1

   利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。

    

1. 那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：

    

   原始碼	呈現結果
   <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

   將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色：

    

   原始碼	呈現結果
   <TABLE BORDER="1" > <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

   將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：

    

   原始碼	呈現結果
   <TABLE BORDER="1" > <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

2. 表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列 的背景圖片：

    

   原始碼	呈現結果
   <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

   將BACKGROUND="圖片名稱"加在<TD>中，可以指定「一欄」的背景顏色：

    

   原始碼	呈現結果
   <TABLE BORDER="1"> <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>	1 2 3 4

1. 如何設定表格粗細？只要利用BORDER="粗細值"就行了。

    

   原始碼	呈現結果
   <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE>	1

2. 如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。

    

   原始碼	呈現結果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE>	1

3. 另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。

    

   原始碼	呈現結果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE>	1

1. 我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。

    

   原始碼	呈現結果
   <TABLE BORDER="1" CELLPADDING="10"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

2. 我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習慣設為 0 。

    

   原始碼	呈現結果
   <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

    

 

1. 序列標籤基本上可分為兩種，一種是「無序條列」，一種是「有序條列」。所謂「無序條列」當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔 。至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。

2. 我們先來看看「無序列表標籤」如何使用：

    

   原始碼	呈現結果
   <UL> <LI>姓名：傑克昇 <LI>生日：1974/11/21 <LI>星座：天蠍座 </UL>	姓名：傑克昇 生日：1974/11/21 星座：天蠍座

   其中<UL>標籤即為「無序列表標籤」，每增加一列內容，就必須加一個<LI>。

3. 前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。）：

    

   原始碼	呈現結果
   <UL TYPE="CIRCLE"> <LI>姓名：傑克昇 <LI>生日：1974/11/21 <LI>星座：天蠍座 </UL>	姓名：傑克昇凱 生日：1974/11/21 星座：天蠍座

 

1. 接下來，我們來看看「有序列表標籤」如何使用：

    

   原始碼	呈現結果
   <OL> <LI>姓名：傑克昇 <LI>生日：1974/11/21 <LI>星座：天蠍座 </OL>	姓名：傑克昇 生日：1974/11/21 星座：天蠍座

   其中<OL>標籤即為「有序列表標籤」，每增加一列內容，就必須加一個<LI>。

2. 和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：

    

   原始碼	呈現結果
   <OL TYPE="A"> <LI>姓名：傑克昇 <LI>生日：1974/11/21 <LI>星座：天蠍座 </OL>	姓名：傑克昇 生日：1974/11/21 星座：天蠍座

3. 另外，我們亦可指定序列起始的數目，其方法如下：

    

   原始碼	呈現結果
   <OL START="8"> <LI>姓名：傑克昇 <LI>生日：1974/11/21 <LI>星座：天蠍座 </OL>	姓名：傑克昇 生日：1974/11/21 星座：天蠍座

對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！

本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。

【各種輸入類型】

 

1. 文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態就是TYPE="TEXT，其使用方法如下：

    

   呈現結果	姓名：
   原始碼	<FORM> 姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
   • SIZE="數值"，是設定此一欄位顯現的寬度。
   • VALUE="預設內容"，是設定此一欄位的預設內容。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
   • MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。

    

   ---

2. 單選核取表單：利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。

    

   呈現結果	性別：男 女
   原始碼	<FORM> 性別： 男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
   • VALUE="內容"，是設定此一欄位的內容、值或是意義。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
   • CHECKED，是設定此一欄位為預設選取值。

    

   ---

3. 複選核取表單：利用TYPE=" CHECKBOX "就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。

    

   呈現結果	喜好： 電影 看書
   原始碼	<FORM> 喜好： <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書 </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
   • VALUE="內容"，是設定此一欄位的內容、值或是意義。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
   • CHECKED，是設定此一欄位為預設選取值。

    

   ---

4. 密碼表單：利用TYPE=" PASSWORD "就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。

    

   呈現結果	請輸入密碼：
   原始碼	<FORM> 請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
   • SIZE="數值"，是設定此一欄位顯現的寬度。
   • VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
   • MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。

    

   ---

5. 送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。

    

   呈現結果
   原始碼	<FORM> <INPUT TYPE="SUBMIT" VALUE="送出資料"> <INPUT TYPE="RESET" VALUE="重新填寫"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一按鈕的名稱。
   • VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。

    

   ---

6. 按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。

    

   呈現結果	請按下按鈕：
   原始碼	<FORM> 請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一按鈕的名稱。
   • VALUE="文字"，是設定此一按鈕上要呈現的文字。
   • ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文 字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。

    

   ---

7. 隱藏欄位：表單中有時有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。

    

   呈現結果	隱藏欄位：
   原始碼	<FORM> 隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱。
   • VALUE="文字"，是設定此一欄位的值、文字或意義。

 

1. 有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可 作為預設文字。

    

   呈現結果	請輸入您的意見：
   原始碼	<FORM> 請輸入您的意見：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM>

    

   其有下列可設定之屬性：
   • NAME="名稱"，是設定此一欄位的名稱。
   • WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、 PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
   • COLS="數值"，是設定此一欄位的行數（橫向字數）。
   • ROWS="數值"，是設定此一欄位的列數（垂直字數）。

 

1. 下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用<SELECT NAME="名稱">便可以產生一個下拉式選單，另外，還需要配合<OPTION>標籤來產生選項，這樣才算完整喔！

    

   呈現結果	您喜歡看書嗎？： 非常喜歡 還算喜歡 不太喜歡 非常討厭
   原始碼	<FORM> 您喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>

    

   其有下列可設定之屬性：
   • SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
   • MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。

 

1. 首先，各位先看看右手邊這張圖，我將利用這張圖來作解說，這樣子，講起來可能會清楚一點。 OK！我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？

2. 原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）

3. 這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）

 

1. 別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？

    

   原始碼	呈現結果
   <HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> </HTML>

2. 各位會發現，奇怪，在上面的語法中，怎麼都沒見到<BODY></BODY>熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的<FRAMESET></FRAMESET>標籤給取代了！也就是說，如果我們要分割畫面，就要先 用<FRAMESET>標籤告訴電腦說：『喂！我要開始分割了！』此時，<BODY>是派不上用場的，所以躲到一旁涼快去了！

3. 現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢！），如下圖：

    

   原始碼	呈現結果
   <HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> <FRAMESET COLS="120,*" > 　<FRAME SRC="a.htm" NAME="1"> 　<FRAME SRC="b.htm" NAME="2"> </FRAMESET> </HTML>

4. 在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。

5. 然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：

    

   原始碼	呈現結果
   <HTML> <HEAD> <TITLE>框窗實作</TITLE> </HEAD> <FRAMESET COLS="120,*"> 　<FRAME SRC="a.htm" NAME="1"> 　<FRAMESET ROWS="100,*"> 　　<FRAME SRC="b.htm" NAME="2"> 　　<FRAME SRC="c.htm" NAME="3"> 　</FRAMESET> </FRAMESET> </HTML>

6. 看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點的語法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來的喔！（亂七八糟了對不對？）

7. 呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，我會再將一些進階的標籤在底下一一說明。