frameset、frame、noframes和iframe的區別

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

■ <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" :設定框架的邊框顏色。
        scrolling="Auto" :設定是否要顯示卷軸,YES 表示要顯示卷軸,NO 表示無論如何都不要顯示, AUTO是視情況顯示。
        noresize:設定不讓使用者可以改變這個框框的大小,亦沒有設定此參數,使用者可以很隨意地拉動框架,改變其大小。
        marginhight=5:表示框架高度部份邊緣所保留的空間。
        marginwidth=5:表示框架寬度部份邊緣所保留的空間。
        例子 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 便會切換至另一版本。
<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 則不容許捲動。
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章