簡述html中框架Frame和Frameset的用法

原文:簡述html中框架Frame和Frameset的用法

NanShan 小編碰到一個frameset的問題,因爲我比較懶,就先從網上拿來一篇基礎知識,呵呵,好記性不如爛筆頭啊

 

     所謂框架便是網頁畫面分成幾個框窗,同時取得多個 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> 標記所標示的框窗永遠是按由上而下、由左至右的次序

 

<FRAME>

用法:      定義一個幀

開始/結束標識: 必須/非法

屬性:      name="..."定義幀的名字

         scr="..."定義在幀中顯示的內容的來源

         frameborder="..."定義幀之間的邊界(0或1)

         margwidth="..."設置幀的邊界和其中內容之間的間距

         margheight="..."設置幀的邊界和其中內容之間的間距化

         noresize="..."使幀的尺寸不能變

         scrolling="..."設置滾動條的表示方式(auto, yes, no)

空:       不允許

 

<FRAMESET>...</FRAMESET>

用法:      定義在一個窗口中幀的佈局

開始/結束標識: 必須/必須

屬性:      rows="..."設定行的數目

         cols="..."設定列的數目

         οnlοad="..."當載入文檔時的內部事件觸發器

         οnunlοad="..."當卸載文檔時的內部事件觸發器

空:       不允許

註釋:      FRAMESET可以嵌套

 

以上所述只是最簡單的框架設定,若希望達到更合適的效果請加入或修改以下各參數。

標記:<FRAMESET>

例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" border="2" bordercolor="#008000"></frameset>

功用:宣告HTML文件爲框架模式,並設定視窗如何分割。

參數:

COLS="90,*"

垂直切割畫面(如分左右兩個畫面),接受整數值、百分數, * 則代表佔用剩餘的空間。數值的個數代表分成的視窗數目且以逗號分隔。例如 COLS="30,*,50%" 可以切成三個視窗,第一個視窗是 30 pixels 的寬度,爲一絕對分割,第二個視窗是當分配完第一及第三個視窗後剩下的空間,第三個視窗則佔整個視窗畫面的 50% 寬度爲一相對分割。你可自己調整數字。

 

ROWS="120,*"

這是橫向切割,將畫面上下分開,數值設定同上。 COLS 與 ROWS 兩參數儘量不要放在同一個 <FRAMESET> 標記中,因 Netacape 偶然不能顯示這類型的框架,儘量採用多重分割,如以上各例。

 

frameborder="0"

設定框架的邊框,其值只有 0 和 1 , 0 表示不要邊框, 1 表示要顯示邊框。

 

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 表示要邊框。

 

framespacing="6"

表示框架與框架間的保留的空白的距離。

 

bordercolor="#008000"

設定框架的邊框顏色。

 

scrolling="Auto"

設定是否要顯示卷軸,YES 表示要顯示卷軸,NO 表示無論如何都不要顯示卷軸,AUTO 視情況而定。

 

noresize

設定不讓使用者可以改變這個框框的大小,如沒有設定此參數,使用者可隨意地拉動框架改變其大小。

 

marginhight=5

表示框架高度部分邊緣所保留的空間。

 

marginwidth=5

表示框架寬度部分邊緣所保留的空間。

如果新建頁面加入超鏈接 例如;左邊的超鏈接在右邊顯示相關內容,應定義文件left.html,內容爲<html>

<head>

<title>

</title>

</head>

<body>

<a href="right1.html" target="right">right中第一個文件</a><br/> <!-- 注意其中的target屬性值應與 frame中右邊的name屬性值相同-->

<a href="right2.html" target="right">right中第二個文件</a><!-- 注意其中的target屬性值應與 frame中右邊的name屬性值相同-->

</body>

</html>

右面的兩個文件 right1.html和right1.html 內容分別爲<html>

<head>

<title>

</title>

</head>

<body>

right中第一個文件

</body>

</html>

 

<html>

<head>

<title>

</title>

</head>

<body>

right中第二個文件

</body>

</html>

 



<noframes>標記:


當別人使用的瀏覽器太舊,不支持框架功能時,他看見的將是一片空白。爲了避免這種情況,可使用<noframes>這個標記,當使用者的瀏覽器看不到框架時,他就會看到<noframes>與</noframes>之間的內容,而不是一片空白。這些內容可以是提醒瀏覽者採用新的瀏覽器的字句,也可以是一個沒有框架的網頁或切換到沒有框架的版本的鏈接都可。

使用方法爲:在<frameset>標記範圍加入<noframes>標記,如

<frameset rows="80,*">

<noframes>

<body>

很抱歉,您使用的瀏覽器不支持框架功能,請採用新版本的瀏覽器。

</body>

</noframes>

<frame name="top" src="b.html">

<frame name="bottom" src="c.html">

</frameset>

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

程序舉例:

   

  

程序代碼 程序代碼

<frameset cols=#>  例:<frameset cols="100,200,300">

  <frameset rows=#>  例:<frameset rows="10%,20%,70%">


  #的值爲一對用引號括起來的字符串,字符串中的數字表示每個分窗口所佔的尺寸,數字中間用逗號隔開,有幾個數字就表示分出了幾個窗口。當然,這其中的任何一個數字也可以由“*”來代替,這樣表示由瀏覽器自動設置其大小。


 

程序代碼 程序代碼

 如:<frameset cols="100,200,*">

    <frameset cols="100,*,*">   將100像素以外的窗口平均分配

    <frameset cols="*,*,*">    將窗口分爲三等份


--------------------------------------------------------------------------------



縱向排列多個窗口:


程序代碼 程序代碼

<frameset cols=30%,20%,50%>

  <frame src="frame/A.html">

  <frame src="frame/B.html">

  <frame src="frame/C.html">

</frameset>




橫向排列多個窗口:

程序代碼 程序代碼

<frameset rows=25%,25%,50%>

  <frame src="frame/A.html">

  <frame src="frame/B.html">

  <frame src="frame/C.html">

</frameset>




縱橫排列多個窗口:


程序代碼 程序代碼

<frameset cols=20%,*>

  <frame src="frame/A.html">

  <frameset rows=40%,*>

    <frame src="frame/B.html">

    <frame src="frame/C.html">

  </frameset>

</frameset> 




看一個範例:


<html>

<head>

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

<title>中國電信成都分公司 渠道商業平臺</title>

</head>


<frameset rows="100,*" cols="*" frameborder="NO" border="0" framespacing="0">

  <frame src="chlidpage/top.htm" name="topFrame" scrolling="NO" noresize>

  <frameset rows="*" cols="200,*" framespacing="0" frameborder="NO" border="0">

    <frame src="chlidpage/left.htm" name="leftFrame" scrolling="NO" noresize>

    <frame src="admin/gh.htm" name="mainFrame">

  </frameset>

</frameset>

<noframes><body>

</body></noframes>

</html>

發佈了10 篇原創文章 · 獲贊 3 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章