使用 布局頁面 (div+css布局 和frameset布局,兩種並列策略)

來源:互聯網
上載者:User
 原文出自:http://blog.3gcomet.com/article.asp?id=43 frame,iframe,frameset 的區別作者:comet 日期:2006-11-16字型大小: 小 中 大 

<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(comet:也使用於FireFox)。 它的作用是在一頁網頁中間插入一個框窗以顯示另一個檔案。它是 一個圍堵標記,但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示,如<noframes> 一樣,可以放些提醒字句之類。通常 iframe 配合一個辨認瀏覽器的 JavaScript 會較好,若 JavaScript 認出該瀏覽器並非 Internet Explorer 便會切換至另一版本。PS:一定要使用</iframe>關閉,否則後面的內容顯示不出來。

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

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 則不容許捲動。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.