HTML 網頁設計教學示範

 

參考網站

http://www.tchcvs.tc.edu.tw/~chalien/teachhtm.htm

http://netcity3.web.hinet.net/UserData/gcchen36/html_cai/page0.htm

請選擇下列網頁設計的項目
  1. 簡介
  2. 網頁架構
  3. 標籤種類如右：
  4. 標籤查詢



簡介
　　全球資訊網 (WWW, World Wide Web) 是由 CERN (the European Laboratory for Particle Physics) 為了建立分散式多媒體的網路資訊系統，而研究發展出來的。目前所提供的資訊包含有：文字、圖形、聲音及影像。而在全球資訊網中所看到的多媒體資訊就是以 HTML 文件來製作。

　　因各種電腦平台間無統一的文件格式，所以產生了 SGML (Standard Generalized Markup Language) 標準。而超文件標示語言 (HTML, Hypertext Markup Language) 的發展是由 1991 年 Tim Berners-Lee 所提出來 HTML 語法，即依 SGML 為基礎而發展。

　　想要瞭解 SGML 的詳細資料，可到右列網址 http://www.sgmlopen.org/來看看；
而有關 HTML 的詳細資料，則可到 http://www.w3.org/pub/WWW/Markup/ 看看。

名詞 中文名稱
WWW: World Wide Web 全球資訊網
HTML: Hypertext Markup Language 超文件標示語言
URL: Uniform Resource Locator 統一資源定位器
Homepage 首頁、多媒體資訊頁
Browser 瀏覽器



網頁架構：
一個網頁 (HTML 文件) 的架構如下：
<html> 宣告為 HTML 文件
　<head> 設定文件標頭開始
　　<title> ... </title> 設定文件標題名稱
　　 ... 網頁的說明文字
　</head> 設定文件標頭結束尾
　 　
　<body> 設定文件內容開始
　　 ... 文件內容
　</body> 設定文件內容結尾
</html> 結束 HTML 文件


關於 HTML 語法的特性有：


設計網頁的小技巧





背景設定
語法：
<body 屬性="設定值">...</body>

屬性 設定值 說明
bgcolor= #rrggbb 或 colorname 背景色彩：以十六進位顏色值或顏色名稱表示
background= 圖形檔名 背景圖案
text= #rrggbb 或 colorname 一般字體的顏色
link= #rrggbb 或 colorname 可連結的字體顏色
alink= #rrggbb 或 colorname 正連結時的字體顏色
vlink= #rrggbb 或 colorname 已連結後的字體顏色

範例：
本文件的設定為
<body bgcolor="#116611" text="#ffffff" link="#ffff00" vlink="#00ff00" alink="#0000ff">




註解
語法：
<!-- xxx -->

說明：
xxx 表示註解文字
若有很多行註解，最好每一列的開端與結尾都加上 <!-- 及 --> 的符號

注意：
不支援巢狀功能，即下列寫法為錯誤的：

<!-- 第一層
　<!-- 第二層 -->
-->





錨 (超連結指令)
語法：
<a name="位置名稱">

<a href="擷取伺服器方法 :// 伺服器位址 :: port / 目錄 / URL檔案名稱>...</a>

屬性：
指定位置名稱
標籤範例 說 明
<a name="main">我的首頁</a> 將「我的首頁」的位置，命名為 main
<a name="loc1">第一章</a> 將「第一章」的位置，命名為 loc1
超連結
擷取伺服器方法 說明 範例
file:// 擷取某系統的檔案 <a href="file://C:/Windows/myhome.htm">
http:// 擷取 WWW 伺服器上的資源 <a href="http://www.hinet.net">
telnet:// 連接到 telnet-base 伺服器上 <a href="telnet://bbs.ntu.edu.tw">
ftp:// 連接到 ftp 伺服器上 <a href="ftp://ftp.ntu.edu.tw">
news:// 擷取到 newsgroups 伺服器上 <a href="news://news.ntu.edu.tw">
gopher:// 擷取 gopher 伺服器上的目錄或檔案 <a href="gopher://gopher.ntu.edu.tw">
mailto: 啟動電子郵件伺服器 <a href="mailto:chalien@tchcvs.tc.edu.tw">
#位置名稱 連結到文件的 loc1 位置 <a href="#loc1">

 

目 標 屬 性

事前解說
目標TARGET
TARGET只是在連結標籤下的一個屬性而以，但這個屬性，卻是在框架網頁中不可少的
在框架的範例中，你是否發現按了NAME為left的框架中 (files.htm) 你是否發現連結開啟不是在 NAME為right的框架中 (home.htm) 那一頁上開啟呢，而是在files.htm那開啟，而TARGET主要功能就是在於按了某個連結後，要將這個連結的位置放在網頁框架的某個位置，或是開啟一個新的瀏覽視窗來瀏覽
用法
用法很簡單，TARGET只是屬性而不是標籤，只要將TARGET屬性架入連結標籤就好了
<A HREF="index.htm" TARGET="xxxx">按這裡會回到教學文件首頁</A>
而xxxx的值有下例可以使用
_NEW 重新開啟一瀏覽器視窗顯示
_BLANK 重新開啟一空白瀏覽器視窗顯示
_PARENT 開啟在巢式的第一層 (幾乎用不到)
_SELT 開啟在連結那頁 (預設值)
_TOP 所用的瀏覽器視窗若為框架將會展開
框架的NAME 如我在文件中取的up , left ,right....(最常和框架一起用)

例： 回北興首頁 _NEW
  回北興首頁 _BLANK
  回北興首頁 _PARENT
  回北興首頁 _SELT
  回北興首頁 _TOP
  回北興首頁 框架的main


說明：
在此指令之間為一超連結的位址，稱為 URL (Uniform Resource Location) 統一資源定位器，透過此超連結，我們可以參考全世界各地方的資源。





文字
有關文字的標籤有下列幾種：




標題指令
語法：
<hn>...</hn>　　n=1,2,3,4,5,6

說明：
顯示不同大小的標題文字。n=1 字最大，n=6 字最小。文字為粗體且自成一列並靠左對齊，適用於每個段落的標題文字。

標籤範例 網頁顯示結果 說 明 　 標籤範例 網頁顯示結果 說 明
<h1>Head 1</h1>

Head 1

最大
<h4>Head 4</h4>

Head 4


<h2>Head 2</h2>

Head 2



<h5>Head 5</h5>
Head 5

<h3>Head 3</h3>

Head 3



<h6>Head 6</h6>
Head 6
最小





分段指令
語法：
<p>

說明：
在此指令之後開始一個新的段落，且與上一段之間會有一空白列。


標籤範例 網頁顯示結果 說 明
hello<p>honey hello

honey

第一段為hello，第二段為honey，在兩段間有一空白列







分行指令
語法：
<br>

說明：
在此指令之後的文字將分割到下一列，僅是分割字串，並不多空一列。

標籤範例 網頁顯示結果 說 明
hello<br>honey hello
honey 		將hello後面的文字honey，分割到下一列






不分行
語法：
<nobr>...</nobr>

說明：
強迫一列文字不被瀏覽器自動分行。

標籤範例 網頁顯示結果 說 明
<nobr>Hello, darling: My honey, I love you</nobr> Hello, darling: My honey, I love you 將文字強迫不分割到下一列，而連成一列







分隔線
語法：
<hr 屬性=設定值>

屬性：
屬性 設定值 說明
size= 1,2,3,... 指定分隔線的粗細
width= 1024以內之任何數值或百分比 指定分隔線的長短
color= #rrggbb 分隔線的顏色
algin= center 分隔線居中對齊
right 分隔線靠右對齊
left 分隔線靠左對齊
noshade
畫出實心的分隔線

說明：
在網頁頁面上畫出一條水平的分隔線。具有美觀、分隔段落或區分主題的效果。







原定格式
語法：
<pre>...</pre>

說明：
依原來文字排列方式顯示，若有分行、空白、縮排，一律依原定排列顯示出來。


標籤 網頁顯示結果 說明
Normal
<pre>Hi,
　How are you?
　May you happy</pre>
Normal 		Normal 
Hi,
  How are you?
  May you Happy
Normal		 完全依照原來文字排列
注意：字體與正常文字不同
適用於已排列好的文字





居中對齊
語法：
<center>...</center>

說明：
將此指令中的文字或圖形居中顯示。


標籤 網頁顯示結果 說明
This is a book.
<center>Dog</center>
That is a desk.		 This is a book.
Dog
That is a desk.		 將 Dog 文字在畫面上居中顯示出來
當瀏覽器視窗大小調整時，文字仍會居中





格式對齊
語法：
<div 屬性=設定值>...</div>

屬性：
屬性 設定值 說明
align= left 文件靠左對齊
center 文件居中對齊
right 文件靠右對齊

說明：
設定整段文字的對齊格式。

標籤 網　頁　顯　示　結　果 說明
<div align=center>Center</div>
<div align=right>Right</div>
<div align=left>Left</div>
Center
Right
Left
　　　中央
對齊　右方
　　　左方






字型變化
語法：
<font 屬性=設定值>...</font>

屬性：
屬性 設定值 說明
size= 1,2,3,4,5,6,... 以絕對數值指定字型的大小
+1,+2,+3,... 以鄉對數值指定字型的大小
color= #rrggbb 以十六進位數字設定字體顏色
red,green,black,... 以顏色名稱指定字體顏色
face= "字形名稱" 將文字改用某種字形，如:Arial, Symbol

說明：
可改變指令之間的文字外觀。通常適用於所有文字，而<hn>等則用於標題文字。

標籤 網頁顯示結果 說明
<font size=7>Size7</font> Size7 最大
<font size=6>Size6</font> Size6
<font size=5>Size5</font> Size5
<font size=4>Size4</font> Size4
<font size=3>Size3</font> Size3 預設字體大小
<font size=2>Size2</font> Size2
<font size=1>Size1</font> Size1 最小
Size3 <font size=+2>Size5</font> Size3 Size5 字體加 2 級


標籤 網頁顯示結果 說明

Default 預設字型
<font face="Arial">Arial</font> Default Arial
<font face="Symbol">Symbol</font> Default Symbol
<font face="標楷體">標楷體</font> Default 標楷體





標籤 網頁顯示結果 說明

Default 預設字體顏色 (由 body text 設定)
<font color="red">Red</font> Normal Red 紅色
<font color="yellow">Yellow</font> Normal Yellow 黃色
<font color="blue">Blue</font> Normal Blue 藍色
<font color="#aa11ff">Color</font> Normal Color 依 RRGGBB 顏色組成 每兩位數字一組(16進位) 顏色分配為(紅R=$aa) (綠G=$11) (藍B=$ff)











實際字體樣式
標籤 網頁顯示結果 說明

Normal 正常文字
<b>Bold</b> Normal Bold 粗體
<i>Italic</i> Normal Italic 斜體
<tt>Typewriter</tt> Normal Typewriter 打字機字體，字體等寬
<u>Under line</u> Normal Under line 加底線
<s>Strike out</s> Normal Strike out 加橫線
<big>BIG</big> Normal BIG 字體變大
<small>small</small> Normal small 字體變小
<sup>Superscirbe</sup> Normal Superscribe 上標字
<sub>Subscirbe</sub> Normal Subscribe 下標字
<blink>Blinking</blink> Normal Blinking 閃爍





邏輯字體樣式
標籤 網頁顯示結果 說明

Normal 正常文字
<em>Emphasis</em> Normal Emphasis
<cite>Cite</cite> Normal Cite
<code>Code</code> Normal Code 可表示程式碼，字距稍寬
<kbd>Keyboard</kbd> Normal Keyboard
<samp>Sample</samp> Normal Sample
<strong>Strong</strong> Normal Strong 強調文字，字體稍粗
<var>Variable</var> Normal Variable 變數
<dfn>Definition</dfn> Normal Definition 定義
<address>Address</address> Normal
Address
可表示位址或地址。字體略斜並獨立為一列。






特殊符號
語法：
標籤 網頁顯示結果 說明
&lt < 小於
&gt > 大於
&nbsp   空白
&quot " 雙引號
&amp & and 符號
&ouml ö 希臘符號
&ntilde ñ 希臘符號
&egrave è 希臘符號
&#126 ~ ASCII 第 126 號



Font face = "symbol"
編號 .0 .1 .2 .3 .4 .5 .6 .7 .8 .9
30..39       ! " # $ % & '
40..49 ( ) * + , - . / 0 1
50..59 2 3 4 5 6 7 8 9 : ;
60..69 < = > ? @ A B C D E
70..79 F G H I J K L M N O
80..89 P Q R S T U V W X Y
90..99 Z [ \ ] ^ _ ` a b c
100..109 d e f g h i j k l m
110..119 n o p q r s t u v w
120..126 x y z { | } ~      
160..169   ¡ ¢ £ ¤ ¥ ¦ § ¨ ©
170..179 ª « ¬ ­ ® ‾ ° ± ² ³
180..189 ´ µ · ¸ ¹ º » ¼ ½
190..199 ¾ ¿ À Á Â Ã Ä Å Æ Ç
200..209 È É Ê Ë Ì Í Î Ï Ð Ñ
210..219 Ò Ó Ô Õ Ö × Ø Ù Ú Û
220..229 Ü Ý Þ ß à á â ã ä å
230..239 æ ç è é ê ë ì í î ï
240..249 ð ñ ò ó ô õ ö ÷ ø ù
250..254 ú û ü ý þ ÿ        





文字特效
語法：
<marquee 屬性=設定值>...</marquee>

屬性：
屬性 設定值 說明
width= 點數 或 百分比 設定捲動區的寬度
height= 點數 設定捲動區的高度
hspace= 點數  
vspace= 點數  
bgcolor= #rrggbb 或 顏色名 設定捲動區的背景色
behavior= slide
alternate 		 
loop= 數值
-1
infinite 		設定捲動次數 (-1 或 infinite 表無限多次)
align= top
scrolldelay= 數值  
scrollamount= 數值  
direction= left
right 		 



標籤 網頁顯示結果 說明
<marquee>捲動中</marquee> 捲動中 未設定其它屬性
<marquee width=50% bgcolor=#0000ff>捲動中</marquee> 捲動中 設定寬度為 50% 且背景色為藍色
<marquee direction=right>捲動中</marquee> 捲動中 設定向右捲動
<marquee behavior=slide>捲動文字內容</marquee> 捲動文字內容 設定捲動效果為投影片播放方式且只捲動 10 次
<marquee behavior=alternate>捲動文字內容</marquee> 捲動文字內容 設定捲動效果為兩邊晃動



對齊標籤
事 前 解 說
其實對齊就好比word中的置中,置右...,而在HTML對齊標籤可以對文字,表格,圖片下達對齊的命令,不過這裡先講文字的對齊就好了,不過這還會說到一些文字編排的重點
置 左
這就不用下什麼指令了..因為打出來就是置左對齊丫
置 中 , 置 右
置中
就是用center標籤就可以了
例如：
<center>這是置中對齊</center>
效果：
這是置中對齊

置右
用的是p align=right , 而其實是p的標籤(所以結尾要用/p哦)然後給他個指令為align (中文解釋好像是對齊)=right(右),這樣你應該想到right其實可以換成left和center了吧..
例如：
<p align=right>這是置右對齊</p>
<p align=center>這是置中對齊</p>
<p align=left>這是置左對齊</p>

效果：

這是置右對齊


這是置中對齊


這是置左對齊
對齊的備註
在看到上面<p align=right>的對齊有沒有看到..對齊完後下面後自動空一行,因為<p align=right>這個標籤在我買的那本書上並沒有說..而我是在frontpage 98做出來的效果看到這個標籤的.....因為平常我後少把文字對齊在右邊,我都直接用<center>來置中的....而若要置有的機會較少...所以<p align=right>功能較少用到.. 而我這份教學交件最後的版權說明是用表格的方式(無框線的)然後用表格自己的對齊指令..會比較好,而這個在後面的文章會教到.

文字編排
在前面那章曾提到<br>換行，<p>空一行，兩個標題，這裡我在詳細解說一下
當我們在編輯HTML時,文字一直打..然後打完後你可以按一個enter去換行但你在看效果時..可能在你按enter時沒有換行,因為HTML中換行要下br或p的指令

還有一個重點,就是在HTML,你若要空很多格時,要用全形空格哦,若用半形空格,無論你按幾個空隔,最後都只會空一隔

另一個重點是解析度的問題,依使用者電腦設的解析度不用,看同一個網頁都會出現不同狀況
而一般電腦若沒設定大都為640X480,不過現在大都15吋螢幕解析度都設成800X600,網路上有許多站都以800X600 做為設計的依據...而設定解析度在控制台中..若不會..問問別人..這裡不做說明了
當然還有視窗有沒有放大到最大也有關係哦...


圖形
語法：
<img src="圖形檔案名稱" 屬性=設定值>
屬性：
屬性 設定值 說明
src= 圖形檔案名稱 用以指定圖形來源
align= left 圖形與其它文字採水平式靠左對齊
right 圖形與其它文字採水平式靠右對齊
top 圖形的說明文字靠圖形的上方對齊
middle 圖形的說明文字靠圖形的中間對齊
bottom 圖形的說明文字靠圖形的底部對齊
texttop 同top
absmiddle 同middle
abseline 圖形的說明文字靠圖形的中間對齊
absbottom 圖形的說明文字靠圖形的底部對齊
width= 數值或百分比(內定為圖形大小) 設定圖形的寬度，單位為點
height= 數值或百分比(內定為圖形大小) 設定圖形的高度，單位為點
border= 數值(內定為 2 ) 設定圖形邊框厚度
vspace= 數值(內定為 2 ) 設定圖文間的垂直空白距離
hspace= 數值(內定為 2 ) 設定圖文間的水平空白距離
lowsrc= 圖形檔案名稱 預先載入低解析度的圖形以避免浪費頻寬
alt= 圖形說明文 當圖形無法顯示時，改以文字說明的方式來代替圖形
ismap
將圖形設定為影像地圖選項單

說明：
在瀏覽器中常用的圖形檔有 GIF 與 JPEG 兩種格式，其中 GIF 為 256 色，雖然壓縮的比例不大，但卻有動態顯示圖形的能力，通常用於動畫小圖案。
而 JPEG 的失真壓縮其壓縮比大，所以能做出檔案較小的圖檔，且能使用全彩 (1677 萬色) 的圖形，但卻有失真的情形，且無動畫能力，通常用於顯示照片。
GIF 的圖形檔副檔名為 .GIF ； JPEG 的圖形檔副檔名則大都為 .JPG
另外，也可使用最基本的 .BMP 圖形檔，只是因檔案太大，並不適用於網頁設計。

範例：
標籤 網頁顯示結果 說明
<img src="t.gif">文字 圖形文字 預設圖形對齊方式
<img src="t.gif" align=top>文字 圖形文字 文字對齊圖形上方
<img src="t.gif" align=middle>文字 圖形文字 文字對齊圖形中央
<img src="t.gif" align=bottom>文字 圖形文字 文字對齊圖形下方
<img src="t.gif" align=texttop>文字 圖形文字 文字上緣對齊圖形上方
<img src="t.gif" align=absmiddle>文字 圖形文字 文字對齊圖形
<img src="t.gif" align=baseline>文字 圖形文字 文字對齊圖形
<img src="t.gif" align=absbottom>文字 圖形文字 文字對齊圖形
<img src="t.gif" align=right>文字 圖形文字 文字對齊圖形
<img src="t.gif" border=3>文字 圖形文字 圖框寬度 3 點



列舉文字
在列舉文字中，可分為下列幾種不同的列舉方式：

無序號式 (其屬性設定僅適用於 Netscape)
語法：
<ul>...</ul>

屬性 設定值 說明
type= square 以小方格為標頭符號
disc 以小實心圓為標頭符號
circle 以空心圓為標頭符號

說明：
沒有序號的排列方式，在每一項目前都加上一方格或圓形的項目符號。
若使用巢狀格式，內層會自動向內縮排。

type 屬性設定 (僅適用於Netscape)
type=Disk type=Circle type=Square
  • one
  • two
  • three
  • one
  • two
  • three
  • one
  • two
  • three



有序號式
語法：
<ol>...</ol>

ol 屬性設定
屬性 設定值 說明
type= 1 以阿拉伯數字來顯示序號
A 或任一大寫英文字母 以英文字母大寫來顯示序號
a 或任一小寫英文字母 以英文字母小寫來顯示序號
I 以羅馬數字大寫來顯示序號
i 以羅馬數字小寫來顯示序號
start= 任何數字 設定序號的起始值

li 屬性設定
屬性 設定值 說明
value= 1,2,3,... 設定此項目的序號

說明：
有序號的排列方式，在每一項目前都有序號做為項目符號。
同樣在巢狀格式中，內層會自動縮排。

標籤 網頁顯示結果 說明
<ol type=1>
<li>第一點
<li>第二點
<li>第三點
  1. 第一點
  2. 第二點
  3. 第三點
阿拉伯數字
<ol type=A>
<li>第一點
<li>第二點
<li>第三點
  1. 第一點
  2. 第二點
  3. 第三點
大寫英文字母
<ol type=a>
<li>第一點
<li>第二點
<li>第三點
  1. 第一點
  2. 第二點
  3. 第三點
小寫英文字母
<ol type=I>
<li>第一點
<li>第二點
<li>第三點
  1. 第一點
  2. 第二點
  3. 第三點
大寫羅馬數字
<ol type=i>
<li>第一點
<li>第二點
<li>第三點
  1. 第一點
  2. 第二點
  3. 第三點
小寫羅馬數字
<ol type=1 start=5>
<li>第五點
<li>第六點
<li>第七點
  1. 第五點
  2. 第六點
  3. 第七點
阿拉伯數字且指定由序號 5 開始
<ol type=1>
<li>第一點
<li value=8>第八點
<li>第九點
  1. 第一點
  2. 第八點
  3. 第九點
阿拉伯數字且指定項目序號
<ol type=a>
<li>第一點
<li value=8>第八點
<li>第九點
  1. 第一點
  2. 第八點
  3. 第九點
小寫英文字母且指定項目序號



定義式
語法：
<dl>...</dl>

說明：
主要用於定義一些名詞。第一部份為主項目，以<dt>為標籤；第二部份為解釋內容，以<dd>為標籤。主項目通常是一個名詞或一句話，而解釋內容則不限字數。

標籤 網頁顯示結果 說明
<dl>
<dt>名詞一<dd>解釋內容
</dl>
名詞一
解釋內容
此解釋內容將會在名詞的下一列才顯示。



選單式
語法：
<menu>...</menu>

說明：
選單式的說明文字通常較為簡短，字的間距也較密集。
注意：
有些瀏覽器不分別<menu>與<ul>兩個指令




目錄式
語法：
<dir>...</dir>

說明：
以目錄形式來顯示項目清單。
注意：
每個項目以不超過 20 bytes 為限




巢狀的表列文字





表格
語法：
<table 屬性=設定值>
<caption 屬性=設定值>表格的標題文字</caption>
<tr 屬性=設定值>
<th 屬性=設定值> 文字</th> ...
<td 屬性=設定值> 文字</td> ...
</tr>
</table>

 

頁 框 (框 架) 標 籤

事前解說
框架標籤就是<FRAME>
FRAME在整份教學文件中，可以說是一個很好用，但也是最難的部份，但是，打出來的語法卻只有一點點而以，而框架只是把原本一個好好的視窗分成幾個部份，然後用類似連結的方法，連入某頁進來而以，例如本教學網頁就是以頁框的方式來做的 。
框架的重點
框架有一個很重要的地方，就是因為框架和BODY這個標籤是相對等的，所以沒法一起使用，也就是說在BODY標籤的開始到結尾都不會有FRAME標籤的出現，而FRAME的開頭到結尾也不會有BODY標籤的出現，但可以分開來用，不過在框架用法中較少用到BODY標籤的，只有在瀏覽器不支援框架，才須用到的
框架的基本架構
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>

解說：
在FRAME剛開始是以FRAMESET來開始的，中文意思是框架設定，而在開頭和結尾中間則用FRAME來表示，主要用在呼叫文件進來，並設定框架的名字

垂直，水半的分割 ( COLS,ROWS屬性 )
垂直 COLS
水半 ROWS
這兩個屬性是加在FRAMESET的後面用的，而在兩個屬性後就是來很要分成幾個區域的
用法：
<FRAMESET COLS="200,150,*">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
這個是分成垂直的視窗，而我們要分成３個區域，第一個為200,第二個為150,第三個的 * 代表其它的部份，而這個其它部份是什麼意思，而又是多大，都要依使用者那時螢幕的解析度而定了

 

<FRAMESET ROWS="20%,*,15%,*">
<FRAME>
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
這個是分成水平的視窗，我們這次要分成４個，而不只可以用數字而且可以用百分比，而在第一及第三分別為20%,15%，在第二及第四為 * 表示第二，四平分剩下的部份

 

另外FRAMESET還有個BORDER的屬性，我想這我不必多說，應該知道怎麼用了吧

SRC屬性
SRC又是個很熟的東西，沒錯，就是在圖片標籤中出現過的東西，這也不難吧
<FRAMESET ROWS="70,70,*">
<FRAME SRC="a.htm">
<FRAME SRC="b.htm">
<FRAME SRC="c.htm">
</FRAMESET>
NORESIZE屬性
你是否看過有的網頁的框架可以任意拉著中間的線，然後改變大小，而對於有些人來說，他不喜歡別人可以任意改變大小而就用NORESIZE的屬性就可以了
<FRAME SRC="c.htm" NORESIZE>
SCROLLING屬性
這個屬性是控制，每個區域中的捲軸，而其值有AUTO,NO,YES三種，而預設值為AUTO也就是自動，作者個人建議用這個就好了不過可能有時還是會有用到NO的時候的
<FRAME SRC="c.htm" SCROLLING=AUTO>
MARGINHEIGHT,MARGINWIDTH屬性
MARGINHEIGHT 區域中的內容離區域上方的距離
MARGINWIDTH 區域中的內容離區域左邊的距離
<FRAME SRC="c.htm" MARGINHEIGHT=30 MARGINWIDTH=10>
NAME屬性
在台灣，個都地區都有一個地方，在電腦中把硬碟分割，每個分割區都有一定的代號
而在框架中，也不例外哦，而其最主要的功能我在TRAGE屬性會說到的 <FRAME SRC="c.htm" NAME="c">
巢狀框架
巢狀框架可以說是框架中用的滿多的一種，若學過程式設計的人，對巢狀這個名詞不陌生吧其實巢狀框架只是比較省時而以，不然其實可以寫成很多個FRAME的文件，然後連進來，不過很麻煩，用巢狀只要寫一個FRAME的文件就好了
而巢狀就是在FRAMESET中還有FRAMESET的功能

<FRAMESET COLS="20%,80%">
　<FRAMESET ROWS="17%,83%">
　　<FRAME SRC="a.htm" NAME="a" NORESIZE>
　　<FRAME SRC="b.htm" NAME="b" SCROLLING="NO">
　</FRAMESET>
　<FRAME SRC="c.htm" NAME="c" MARGINHEIGHT=0>
</FRAMESET>
橘色的那區本來應為一個FRAME的，但後來因為巢狀框架，而變成FRAMESET
首先原本要分成垂直的左右區域兩個，而在這兩個中的左邊方的那個在做水平的兩個區域，上面為A.HTM，下面為B.HTM ，而右邊的那個則為C.HTM