回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 今昔HTML
 HTML概念
 標記一覽
 文件標記
 排版標記
 字體標記
 清單標記
 表格標記
 表單標記
 圖形標記
 連結標記
 框架標記Here
 影像地圖
 多媒體
 其他標記
 特殊字元
 調色原理
 StyleSheets
 加入實例
 本節實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 本節主要介紹的標記:
<FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>

欲明白本篇【HTML剖析】之標記分類請看 【標記一覽】。
亦請先明白圍堵標記與空標記的分別請看 【HTML概念】。

■ 框架概念 :
所謂框架便是網頁畫面分成幾個框窗,同時取得多個 URL。只需要 <FRAMESET> <FRAME> 即可,而所有框架標記需要放在一個總起的 html 檔,這個檔案只記錄了該框架 如何劃分,不會顯示任何資料,所以不必放入 <BODY> 標記,瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。<FRAMESET> 是用以劃分框窗,每一框窗由一個 <FRAME> 標 記所標示,<FRAME>必須在 <FRAMESET> 範圍中使用。如下例:

<frameset cols="50%,*">

<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>

此例中 <FRAMESET> 把畫面分成左右兩相等部分,左便是顯示 up2u.html,右邊則會顯示 me2.html 這檔案,<FRAME> 標記所標示的框窗永遠是按由上而下、由左至右的次序。

本節與 Composer 教室的【運用框架】大部分相同,只是本節增加了內容及較為詳細,正 如其它篇章一樣并不會提及網頁製作工具,若閣下學會了 HTML 相信你亦不會選用 Composer , FrontPage 一類的工具了。

<FRAMESET> <FRAME> :
<FRAMESET> 稱框架標記,用以宣告HTML文件為框架模式,并設定視窗如何分割。
<FRAME> 則只是設定某一個框窗內的參數屬性。

<FRAMESET> 參數設定:
例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">

  • COLS="90,*"
    垂直切割畫面(如分左右兩個畫面),接受整數值百分數* 則代表佔用餘下空 間。數值的個數代表分成的視窗數目且以逗號分隔。例如 COLS="30,*,50%" 可以 切成三個視窗,第一個視窗是 30 pixels 的寬度,為一絕對分割,第二個視窗是當 分配完第一及第三個視窗後剩下的空間,第三個視窗則佔整個畫面的 50% 寬度 為 一相對分割。您可自己調整數字
  • ROWS="120,*"
    就是橫向切割,將畫面上下分開,數值設定同上。唯 COLS 與 ROWS 兩參數盡量 不要同在一個 <FRAMESET> 標記中,因 Netacape 偶然不能顯示這類形的框架,盡 採用多重分割。
  • frameborder="0"
    設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
  • border="0"
    設定框架的邊框厚度,以 pixels 為單位。
  • bordercolor="#008000"
    設定框架的邊框顏色。顏色值請參考【調色原理】。
  • framespacing="5"
    表示框架與框架間的保留空白的距離。

<FRAME> 參數設定:
例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

  • SRC="a.html"
    設定此框窗中要顯示的網頁檔案名稱,每個框窗一定要對應著一個網頁檔案。你可 使用絕對路徑或相對路徑,有關此兩者詳見於【連結進階】。
  • NAME="top"
    設定這個框窗的名稱,這樣才能指定框架來作連結,必須但任意命名。
  • frameborder=0
    設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。(避 免使用 yes 或 no )
  • framespacing="6"
    表示框架與框架間的保留空白的距離。
  • bordercolor="#008000"
    設定框架的邊框顏色。顏色值請參考【HTML 剖析】。
  • scrolling="Auto"
    設定是否要顯示捲軸,YES 表示要顯示捲軸,NO 表示無論如何都不要顯示, AUTO是視情況顯示。
  • noresize
    設定不讓使用者可以改變這個框框的大小,亦沒有設定此參數,使用者可以很隨 意地拉動框架,改變其大小。
  • marginhight=5
    表示框架高度部份邊緣所保留的空間。
  • marginwidth=5
    表示框架寬度部份邊緣所保留的空間。
以下是一些例子:(與 Composer 教室的【運用框架】相同)

例子HTML Code
 
 
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
例子HTML Code
 
 
 
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
例子HTML Code
   
 
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset>
例子HTML Code
 
   
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
例子HTML Code
   
 
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>

<NOFRAMES> :
當別人使用的瀏覽器太舊,不支援框架這個功能時,他看到的將會是一片空白。為了避免 這種情況,可使用 <NOFRAMES> 這個標記,當使用者的瀏覽器看不到框架時,他就會看 到 <NOFRAMES></NOFRAMES> 之間的內容,而不是一片空白。這些內容可以是提醒 瀏覽轉用新的瀏覽器的字句,甚至是一個沒有框架的網頁或能自動切換至沒有框架的版本 亦可。

應用方法:
在<frameset> 標記範圍加入 </NOFRAMES> 標記,以下是一個例子:

<frameset rows="80,*">
<noframes>
<body>
很抱歉,閣下使用的瀏覽器不支援框架功能,請轉用新的瀏覽器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>

若瀏覽器支援框架,那麼它不會理會 <noframes> 中的東西,但若瀏覽器不支援框架,由 於不認識所有框架標記,不明的標記會被略過,標記包圍的東西便被解讀出來,所以放在 <noframes>範圍內的文字會被顯示。

<IFRAME> :
這標記只適用於 IE。 它的作用是在一頁網頁中間插入一個框窗以顯示另一個文件。它是 一個圍堵標記,但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示,如<noframes> 一樣,可以放些提醒字句之類。通常 iframe 配合一個辨認瀏覽器的 Java Script 會較好,若 JavaScript 認出該瀏覽器并非 Internet Explorer 便會切換至另一版本。

<iframe> 的參數設定如下:
例子: <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">

  • src="iframe.html"
    欲顯示於此框窗的文件來源除檔案名稱,必要加上相對或絕對路徑。
  • name="test"
    此框窗名稱,這是連結標記的 target 參數所需要的,
  • align="MIDDLE"
    可選值為 left, right, top, middle, bottom,作用不大
  • width="300" height="100"
    框窗的寬及長,以 pixels 為單位。
  • marginwidth="1" marginheight="1"
    該插入的文件與框邊所保留的空間。
  • frameborder="1"
    使用 1 表示顯示邊框, 0 則不顯示。(可以是 yes 或 no)
  • scrolling="Yes"
    使用 Yes 表示容許捲動(內定), No 則不容許捲動。

例子:
原始碼
<center> <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1">
很抱歉,閣下使用的瀏覽器并不支援 IFrame,不能正常瀏覽我的網頁。</iframe>
</center>
顯示結果

 

The Best Web Hosting Company
Download Internet Explorer Download Netscape Netvigator