9-1 框架的含義和基本構成
框架就是把一(yī)個浏覽器窗口劃分(fēn)爲若幹個小(xiǎo)窗口，每個窗口可以顯示不同的 URL 網頁。使用框架可以非常方便的在浏覽器中(zhōng)同時浏覽不同的頁面效果，也可以非常方便的完成導航工(gōng)作。
而所有的框架标記 要放(fàng)在一(yī)個 html 文檔中(zhōng)。html頁面的文檔體(tǐ)标簽<body>被框架集标簽<frameset>所取代，然後通過<frameset>的子窗口标簽<frame>定義每一(yī)個子窗口和子窗口的頁面屬性。
語法格式：
<html>
<head>
</head>
<frameset>
<frame src="url地址1">
<frame src="url地址2">
......
<frameset>
</html>
Frame子框架的src屬性的每個URL值指定了一(yī)個html文件（這個文件必須事先做好）地址，地址路徑可使用絕對路徑或相對路徑，這個文件将載入相應的窗口中(zhōng)。
框架結構可以根據框架集标簽<frameset>的分(fēn)割屬性分(fēn)爲3種：
左右分(fēn)割窗口
上下(xià)分(fēn)割窗口
嵌套分(fēn)割窗口
9-2 框架集<frameset>控制
<frameset>的屬性
屬 性 描 述
border 設置邊框粗細,默認是5象素.
bordercolor 設置邊框顔色
frameborder 指定是否顯示邊框 ："0"代表不顯示邊框，"1"代表顯示邊框
cols 用"象素數" 和 "%"分(fēn)割左右窗口,"*"表示剩餘部分(fēn)
rows 用"象素數" 和 "%"分(fēn)割上下(xià)窗口,"*"表示剩餘部分(fēn)
framespacing="5" 表示框架與框架間的保留空白(bái)的距離(lí)
noresize 設定框架不能夠調節，隻要設定了前面的，後面的将繼承
左右分(fēn)割窗口屬性：cols
如果想要在水平方向将浏覽器分(fēn)割多個窗口，這需要使用到框架集的左右分(fēn)割窗口屬性cols.分(fēn)割幾個窗口其cols的值就有幾個，值的定義爲寬度，可以是數字(單位爲像素)，也可以是百分(fēn)比和剩餘值。各值之間用逗号分(fēn)開(kāi)。其中(zhōng)剩餘值用"*"号表示，剩餘值表示所有窗口設定之後的剩餘部分(fēn)，當"*"隻出現一(yī)次時，表示該子窗口的大(dà)小(xiǎo)将根據浏覽器窗口的大(dà)小(xiǎo)自動調整，當"*"出現一(yī)次以上時，表示按比例分(fēn)割剩餘的窗口空間。cols的默認值爲一(yī)個窗口
如： <frameset cols="40%,2*,*"> 将窗口分(fēn)爲40%，40%，20%
<frameset cols="100,200,*">
<frameset cols="100,*,*"> 将100像素以外(wài)的窗口平均分(fēn)配
<frameset cols="*,*,*"> 将窗口分(fēn)爲三等份
2. 上下(xià)分(fēn)割窗口屬性：rows
上下(xià)分(fēn)割窗口的屬性設置和左右窗口的屬性設定是一(yī)樣的，參照上面所述就可以了。
9-3 子窗口<frame>标簽的設定
<frame>是個單标簽,<frame>标簽要放(fàng)在框架集frameset中(zhōng),<frameset>設置了幾個子窗口就必須對應幾個<frame>标簽，而且每一(yī)個<frame>标簽内還必須設定一(yī)個網頁文件（src="*.html",其常用屬性有:
<frame>常用屬性 屬 性 描 述
src 指示加載的url文件的地址
bordercolor 設置邊框顔色
frameborder 指示是否要邊框,1顯示邊框，0不顯示（不提倡用 yes 或 no）
border 設置邊框粗細
name 指示框架名稱,是連結标記的 target所要的參數
noresize 指示不能調整窗口的大(dà)小(xiǎo),省略此項時就可調整,
scorlling 指示是否要滾動條,auto根據需要自動出現,Yes有,No無
marginwidth 設置内容與窗口左右邊緣的距離(lí)，默認爲1
marginheight 設置内容與窗口上下(xià)邊緣的邊距，默認爲1
width 框窗的寬及高 默認爲width="100" height="100"
align 可選值爲 left, right, top, middle, bottom
子窗口的排列遵循從左到右，從上到下(xià)的次序規則。
一(yī)、窗口的左右設定：
實例一(yī) sl9-1.html
首先我(wǒ)(wǒ)們新建一(yī)個文件夾，然後做四個要放(fàng)到子窗口中(zhōng)的頁面，sl1.html、sl2.html、sl3.html、sl4.html。
<html>
<head>
</head>
<frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset><noframes></noframes>
</html>
二、窗口的上下(xià)設定
實例二 sl9-2.html
<html>
<head>
</head>
<frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html" noresize="noresize">
</frameset><noframes></noframes>
</html>
三、窗口的嵌套設定
實例三 sl9-3.html
<html>
<head>
</head>
<frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
實例四 sl9-4.html
<html>
<head>
</head>
<frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
實例五 sl9-5.html
<html>
<head>
</head>
<frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
<frame src="sl4.html">
</frameset><noframes></noframes>
</html>
大(dà)家看到上面的文件中(zhōng)還有一(yī)對<noframes></noframes>标簽，即使在做框架集網頁時沒有這對标簽，文件在很多浏覽器解析時也會自動生(shēng)成<noframes>标簽，這對标簽的作用是當浏覽者使用的浏覽器太舊(jiù)，不支援框架這個功能時，他看到的将會是一(yī)片空白(bái)。爲了避免這種情況，可使用 <NOFRAMES> 這個标記，當使用的浏覽器看不到框架時，他就會看到 <NOFRAMES>你的浏覽器不支持框架網頁</NOFRAMES>之間的内容，而不是一(yī)片空白(bái)。這些内容可以是提醒 浏覽轉用新的浏覽器的字句，甚至是一(yī)個沒有框架的網頁或能自動切換至沒有框架的版本。
9-4 窗口的名稱和鏈接
如果在窗口中(zhōng)要做鏈接，就必須對每一(yī)個子窗口命名，以便于被用于窗口間的鏈接，窗口命名要有一(yī)定的規則，名稱必須是單個英文單詞，允許使用下(xià)滑線，但不允許使用"—","句點"和空格等，名稱必須以字母開(kāi)頭，不能使用數字，還不能使用網頁腳本中(zhōng)保留的關鍵字，在窗口的鏈接中(zhōng)還要用到一(yī)個新的屬性"targe",用這個屬性就可以将被鏈接的内容放(fàng)置到想要放(fàng)置的窗口内。
下(xià)面的實例就是窗口内的命名和鏈接方法
文件一(yī)中(zhōng)的片斷代碼格式爲：
<a href="sl1.html" target="aa2">愛在深秋</a>
<a href="sl2.html" target="aa3">圖像對文字的水平居中(zhōng)</a>
<a href="sl3.html" target="aa2">圖像與文本之間的距離(lí)</a>
<a href="sl4.html" target="aa3">圖像大(dà)小(xiǎo)的設定</a>
<a href="http://www.sina.com.cn" target="aa3">新浪網站</a>
文件二的片斷代碼格式爲：
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
文件一(yī)：
ml.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<center>
<h2>目錄</h2>
<hr>
<p><a href="sl1.html" target="aa2">愛在深秋</a></p>
<p><a href="sl2.html" target="aa3">圖像對文字的水平居中(zhōng)</a></p>
<p><a href="sl3.html" target="aa2">圖像與文本之間的距離(lí)</a></p>
<p><a href="sl4.html" target="aa3">圖像大(dà)小(xiǎo)的設定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪網站</a></p>
</center>
</body>
</html>
文件二：
sl94.html
<html>
<head>
</head>
<frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99CCFF">
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
</frameset><noframes></noframes>
</html>
9-5 浮動窗口<iframe>
<iframe>這标記隻适用於IE浏覽器。 它的作用是在浏覽器窗口中(zhōng)可以嵌入一(yī)個框窗以顯示另一(yī)個文件。它是 一(yī)個圍堵标記，但圍著的字句隻有在浏覽器不支援 iframe 标記時才會顯示，如<noframes> 一(yī)樣，可以放(fàng)些提醒字句之類。通常 iframe 配合一(yī)個辨認浏覽器的 Java Script 會較好，若 JavaScript 認出該浏覽器并非 Internet Explorer 便會切換至另一(yī)版本。
<iframe> 的參數設定格式：
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
<iframe>屬性的含義 屬 性 含 義
src 浮動窗框中(zhōng)的要顯示的頁面文件的路徑，可以是相對或絕對。
name 此框窗名稱，這是連結标記的 target 參數所 要的，
align 可選值爲 left, right, top, middle, bottom，作用不大(dà)
height 框窗的高，以 pixels 爲單位。
width 框窗的寬，以 pixels 爲單位。
marginwidth 該插入的文件與框邊所保留的空間。
marginheight 該插入的文件與框邊所保留的空間。
frameborder 使用 1 表示顯示邊框， 0 則不顯示。（可以是 yes 或 no）
scrolling 使用 Yes 表示容許卷動（内定）， No 則不容許卷動。
sl95.html
<html>
<head>
<title>浮動框架</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true">
這是一(yī)個浮動窗口
</iframe>
<p><a href="sl1.html" target="aa">愛在深秋</a></p>
<p><a href="sl2.html" target="aa">圖像對文字的水平居中(zhōng)</a></p>
<p><a href="sl3.html" target="aa">圖像與文本之間的距離(lí)</a></p>
<p><a href="sl4.html" target="aa">圖像大(dà)小(xiǎo)的設定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪網站</a></p>
</center>
</body>
</html>
注意: Internet Explorer 5.5 支持浮動框架的内容透明。如果想要爲浮動框架定義透明内容，則必須滿足下(xià)列條件。
與 IFRAME 元素一(yī)起使用的 ALLOWTRANSPARENCY 标簽屬性必須設置爲 true。
在 IFRAME 内容源文檔，background-color 或 BODY 元素的 BGCOLOR 标簽屬性必須設置爲 transparent。
框架就是把一(yī)個浏覽器窗口劃分(fēn)爲若幹個小(xiǎo)窗口，每個窗口可以顯示不同的 URL 網頁。使用框架可以非常方便的在浏覽器中(zhōng)同時浏覽不同的頁面效果，也可以非常方便的完成導航工(gōng)作。
而所有的框架标記 要放(fàng)在一(yī)個 html 文檔中(zhōng)。html頁面的文檔體(tǐ)标簽<body>被框架集标簽<frameset>所取代，然後通過<frameset>的子窗口标簽<frame>定義每一(yī)個子窗口和子窗口的頁面屬性。
語法格式：
<html>
<head>
</head>
<frameset>
<frame src="url地址1">
<frame src="url地址2">
......
<frameset>
</html>
Frame子框架的src屬性的每個URL值指定了一(yī)個html文件（這個文件必須事先做好）地址，地址路徑可使用絕對路徑或相對路徑，這個文件将載入相應的窗口中(zhōng)。
框架結構可以根據框架集标簽<frameset>的分(fēn)割屬性分(fēn)爲3種：
左右分(fēn)割窗口
上下(xià)分(fēn)割窗口
嵌套分(fēn)割窗口
9-2 框架集<frameset>控制
<frameset>的屬性
屬 性 描 述
border 設置邊框粗細,默認是5象素.
bordercolor 設置邊框顔色
frameborder 指定是否顯示邊框 ："0"代表不顯示邊框，"1"代表顯示邊框
cols 用"象素數" 和 "%"分(fēn)割左右窗口,"*"表示剩餘部分(fēn)
rows 用"象素數" 和 "%"分(fēn)割上下(xià)窗口,"*"表示剩餘部分(fēn)
framespacing="5" 表示框架與框架間的保留空白(bái)的距離(lí)
noresize 設定框架不能夠調節，隻要設定了前面的，後面的将繼承
左右分(fēn)割窗口屬性：cols
如果想要在水平方向将浏覽器分(fēn)割多個窗口，這需要使用到框架集的左右分(fēn)割窗口屬性cols.分(fēn)割幾個窗口其cols的值就有幾個，值的定義爲寬度，可以是數字(單位爲像素)，也可以是百分(fēn)比和剩餘值。各值之間用逗号分(fēn)開(kāi)。其中(zhōng)剩餘值用"*"号表示，剩餘值表示所有窗口設定之後的剩餘部分(fēn)，當"*"隻出現一(yī)次時，表示該子窗口的大(dà)小(xiǎo)将根據浏覽器窗口的大(dà)小(xiǎo)自動調整，當"*"出現一(yī)次以上時，表示按比例分(fēn)割剩餘的窗口空間。cols的默認值爲一(yī)個窗口
如： <frameset cols="40%,2*,*"> 将窗口分(fēn)爲40%，40%，20%
<frameset cols="100,200,*">
<frameset cols="100,*,*"> 将100像素以外(wài)的窗口平均分(fēn)配
<frameset cols="*,*,*"> 将窗口分(fēn)爲三等份
2. 上下(xià)分(fēn)割窗口屬性：rows
上下(xià)分(fēn)割窗口的屬性設置和左右窗口的屬性設定是一(yī)樣的，參照上面所述就可以了。
9-3 子窗口<frame>标簽的設定
<frame>是個單标簽,<frame>标簽要放(fàng)在框架集frameset中(zhōng),<frameset>設置了幾個子窗口就必須對應幾個<frame>标簽，而且每一(yī)個<frame>标簽内還必須設定一(yī)個網頁文件（src="*.html",其常用屬性有:
<frame>常用屬性 屬 性 描 述
src 指示加載的url文件的地址
bordercolor 設置邊框顔色
frameborder 指示是否要邊框,1顯示邊框，0不顯示（不提倡用 yes 或 no）
border 設置邊框粗細
name 指示框架名稱,是連結标記的 target所要的參數
noresize 指示不能調整窗口的大(dà)小(xiǎo),省略此項時就可調整,
scorlling 指示是否要滾動條,auto根據需要自動出現,Yes有,No無
marginwidth 設置内容與窗口左右邊緣的距離(lí)，默認爲1
marginheight 設置内容與窗口上下(xià)邊緣的邊距，默認爲1
width 框窗的寬及高 默認爲width="100" height="100"
align 可選值爲 left, right, top, middle, bottom
子窗口的排列遵循從左到右，從上到下(xià)的次序規則。
一(yī)、窗口的左右設定：
實例一(yī) sl9-1.html
首先我(wǒ)(wǒ)們新建一(yī)個文件夾，然後做四個要放(fàng)到子窗口中(zhōng)的頁面，sl1.html、sl2.html、sl3.html、sl4.html。
<html>
<head>
</head>
<frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset><noframes></noframes>
</html>
二、窗口的上下(xià)設定
實例二 sl9-2.html
<html>
<head>
</head>
<frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html" noresize="noresize">
</frameset><noframes></noframes>
</html>
三、窗口的嵌套設定
實例三 sl9-3.html
<html>
<head>
</head>
<frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
實例四 sl9-4.html
<html>
<head>
</head>
<frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
實例五 sl9-5.html
<html>
<head>
</head>
<frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
<frame src="sl4.html">
</frameset><noframes></noframes>
</html>
大(dà)家看到上面的文件中(zhōng)還有一(yī)對<noframes></noframes>标簽，即使在做框架集網頁時沒有這對标簽，文件在很多浏覽器解析時也會自動生(shēng)成<noframes>标簽，這對标簽的作用是當浏覽者使用的浏覽器太舊(jiù)，不支援框架這個功能時，他看到的将會是一(yī)片空白(bái)。爲了避免這種情況，可使用 <NOFRAMES> 這個标記，當使用的浏覽器看不到框架時，他就會看到 <NOFRAMES>你的浏覽器不支持框架網頁</NOFRAMES>之間的内容，而不是一(yī)片空白(bái)。這些内容可以是提醒 浏覽轉用新的浏覽器的字句，甚至是一(yī)個沒有框架的網頁或能自動切換至沒有框架的版本。
9-4 窗口的名稱和鏈接
如果在窗口中(zhōng)要做鏈接，就必須對每一(yī)個子窗口命名，以便于被用于窗口間的鏈接，窗口命名要有一(yī)定的規則，名稱必須是單個英文單詞，允許使用下(xià)滑線，但不允許使用"—","句點"和空格等，名稱必須以字母開(kāi)頭，不能使用數字，還不能使用網頁腳本中(zhōng)保留的關鍵字，在窗口的鏈接中(zhōng)還要用到一(yī)個新的屬性"targe",用這個屬性就可以将被鏈接的内容放(fàng)置到想要放(fàng)置的窗口内。
下(xià)面的實例就是窗口内的命名和鏈接方法
文件一(yī)中(zhōng)的片斷代碼格式爲：
<a href="sl1.html" target="aa2">愛在深秋</a>
<a href="sl2.html" target="aa3">圖像對文字的水平居中(zhōng)</a>
<a href="sl3.html" target="aa2">圖像與文本之間的距離(lí)</a>
<a href="sl4.html" target="aa3">圖像大(dà)小(xiǎo)的設定</a>
<a href="http://www.sina.com.cn" target="aa3">新浪網站</a>
文件二的片斷代碼格式爲：
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
文件一(yī)：
ml.html
<html>
<head>
<title>無标題文檔</title>
</head>
<body>
<center>
<h2>目錄</h2>
<hr>
<p><a href="sl1.html" target="aa2">愛在深秋</a></p>
<p><a href="sl2.html" target="aa3">圖像對文字的水平居中(zhōng)</a></p>
<p><a href="sl3.html" target="aa2">圖像與文本之間的距離(lí)</a></p>
<p><a href="sl4.html" target="aa3">圖像大(dà)小(xiǎo)的設定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪網站</a></p>
</center>
</body>
</html>
文件二：
sl94.html
<html>
<head>
</head>
<frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99CCFF">
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
</frameset><noframes></noframes>
</html>
9-5 浮動窗口<iframe>
<iframe>這标記隻适用於IE浏覽器。 它的作用是在浏覽器窗口中(zhōng)可以嵌入一(yī)個框窗以顯示另一(yī)個文件。它是 一(yī)個圍堵标記，但圍著的字句隻有在浏覽器不支援 iframe 标記時才會顯示，如<noframes> 一(yī)樣，可以放(fàng)些提醒字句之類。通常 iframe 配合一(yī)個辨認浏覽器的 Java Script 會較好，若 JavaScript 認出該浏覽器并非 Internet Explorer 便會切換至另一(yī)版本。
<iframe> 的參數設定格式：
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
<iframe>屬性的含義 屬 性 含 義
src 浮動窗框中(zhōng)的要顯示的頁面文件的路徑，可以是相對或絕對。
name 此框窗名稱，這是連結标記的 target 參數所 要的，
align 可選值爲 left, right, top, middle, bottom，作用不大(dà)
height 框窗的高，以 pixels 爲單位。
width 框窗的寬，以 pixels 爲單位。
marginwidth 該插入的文件與框邊所保留的空間。
marginheight 該插入的文件與框邊所保留的空間。
frameborder 使用 1 表示顯示邊框， 0 則不顯示。（可以是 yes 或 no）
scrolling 使用 Yes 表示容許卷動（内定）， No 則不容許卷動。
sl95.html
<html>
<head>
<title>浮動框架</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true">
這是一(yī)個浮動窗口
</iframe>
<p><a href="sl1.html" target="aa">愛在深秋</a></p>
<p><a href="sl2.html" target="aa">圖像對文字的水平居中(zhōng)</a></p>
<p><a href="sl3.html" target="aa">圖像與文本之間的距離(lí)</a></p>
<p><a href="sl4.html" target="aa">圖像大(dà)小(xiǎo)的設定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪網站</a></p>
</center>
</body>
</html>
注意: Internet Explorer 5.5 支持浮動框架的内容透明。如果想要爲浮動框架定義透明内容，則必須滿足下(xià)列條件。
與 IFRAME 元素一(yī)起使用的 ALLOWTRANSPARENCY 标簽屬性必須設置爲 true。
在 IFRAME 内容源文檔，background-color 或 BODY 元素的 BGCOLOR 标簽屬性必須設置爲 transparent。
文章來源：http://longka.flasher123.com/zy/index/h9/h9.html
475003427