第九章 多視視窗架構
9-1 架構的含義和基本構成
架構就是把一個瀏覽器視窗劃分為若干個小視窗，每個視窗可以顯示不同的 URL 網頁。使用架構可以非常方便的在瀏覽器中同時瀏覽不同的頁面效果，也可以非常方便的完成導航工作。
而所有的架構標記 要放在一個 html 文檔中。html頁面的文檔體標籤<body>被框架組標籤<frameset>所取代，然後通過<frameset>的子視窗標籤<frame>定義每一個子視窗和子視窗的頁面屬性。
文法格式：
<html>
<head>
</head>
<frameset>
<frame src="url地址1">
<frame src="url地址2">
......
<frameset>
</html>
Frame子架構的src屬性的每個URL值指定了一個html檔案（這個檔案必須事先做好）地址，地址路徑可使用絕對路徑或相對路徑，這個檔案將載入相應的視窗中。
架構結構可以根據框架組標籤<frameset>的分割屬性分為3種：
9-2 框架組<frameset>控制
<frameset>的屬性
| 屬 性 | 描 述 |
| border | 設定邊框粗細,預設是5象素. |
| bordercolor | 設定邊框顏色 |
| frameborder | 指定是否顯示邊框 ："0"代表不顯示邊框，"1"代表顯示邊框 |
| cols | 用"象素數" 和 "%"分割左右視窗,"*"表示剩餘部分 |
| rows | 用"象素數" 和 "%"分割上下視窗,"*"表示剩餘部分 |
| framespacing="5" | 表示架構與架構間的保留空白的距離 |
| noresize | 設定架構不能夠調節，只要設定了前面的，後面的將繼承 |
如果想要在水平方向將瀏覽器分割多個視窗，這需要使用到框架組的左右分割視窗屬性cols.分割幾個視窗其cols的值就有幾個，值的定義為寬度，可以是數字(單位為像素)，也可以是百分比和剩餘值。各值之間用逗號分開。其中剩餘值用"*"號表示，剩餘值表示所有視窗設定之後的剩餘部分，當"*"只出現一次時，表示該子視窗的大小將根據瀏覽器視窗的大小自動調整，當"*"出現一次以上時，表示按比例分割剩餘的視窗空間。cols的預設值為一個視窗
如： <frameset cols="40%,2*,*"> 將視窗分為40%，40%，20%
<frameset cols="100,200,*">
<frameset cols="100,*,*"> 將100像素以外的視窗平均分配
<frameset cols="*,*,*"> 將視窗分為三等份
2. 上下分割視窗屬性：rows
上下分割視窗的屬性設定和左右視窗的屬性設定是一樣的，參照上面所述就可以了。
9-3 子視窗<frame>標籤的設定
<frame>是個單標籤,<frame>標籤要放在框架組frameset中,<frameset>設定了幾個子視窗就必須對應幾個<frame>標籤，而且每一個<frame>標籤內還必須設定一個網頁檔案（src="*.html",其常用屬性有:
<frame>常用屬性
| 屬 性 | 描 述 |
| src | 指示載入的url檔案的地址 |
| bordercolor | 設定邊框顏色 |
| frameborder | 指示是否要邊框,1顯示邊框，0不顯示（不提倡用 yes 或 no） |
| border | 設定邊框粗細 |
| name | 指示架構名稱,是連結標記的 target所要的參數 |
| noresize | 指示不能調整視窗的大小,省略此項時就可調整, |
| scorlling | 指示是否要捲軸,auto根據需要自動出現,Yes有,No無 |
| marginwidth | 設定內容與視窗左右邊緣的距離，預設為1 |
| marginheight | 設定內容與視窗上下邊緣的邊距，預設為1 |
| width | 框窗的寬及高 預設為width="100" height="100" |
| align | 可選值為 left, right, top, middle, bottom |
子視窗的排列遵循從左至右，從上到下的次序規則。
一、視窗的左右設定：
執行個體一 sl9-1.html
首先我們建立一個檔案夾，然後做四個要放到子視窗中的頁面，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>
二、視窗的上下設定
執行個體二 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>
大家看到上面的檔案中還有一對<noframes></noframes>標籤，即使在做框架組網頁時沒有這對標籤，檔案在很多瀏覽器解析時也會自動產生<noframes>標籤，這對標籤的作用是當瀏覽者使用的瀏覽器太舊，不支援架構這個功能時，他看到的將會是一片空白。為了避免這種情況，可使用 <NOFRAMES> 這個標記，當使用的瀏覽器看不到架構時，他就會看到 <NOFRAMES>你的瀏覽器不支援框架頁</NOFRAMES>之間的內容，而不是一片空白。這些內容可以是提醒 瀏覽轉用新的瀏覽器的字句，甚至是一個沒有架構的網頁或能自動切換至沒有架構的版本。
9-4 視窗的名稱和連結
如果在視窗中要做連結，就必須對每一個子視窗命名，以便於被用於視窗間的連結，視窗命名要有一定的規則，名稱必須是單個英文單詞，允許使用下滑線，但不允許使用"—","句點"和空格等，名稱必須以字母開頭，不能使用數字，還不能使用網頁指令碼中保留的關鍵字，在視窗的連結中還要用到一個新的屬性"targe",用這個屬性就可以將被連結的內容放置到想要放置的視窗內。
下面的執行個體就是視窗內的命名和連結方法
檔案一中的片斷代碼格式為：
<a href="sl1.html" target="aa2">愛在深秋</a>
<a href="sl2.html" target="aa3">映像對文字的水平置中</a>
<a href="sl3.html" target="aa2">映像與文本之間的距離</a>
<a href="sl4.html" target="aa3">映像大小的設定</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">
檔案一：
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">映像對文字的水平置中</a></p>
<p><a href="sl3.html" target="aa2">映像與文本之間的距離</a></p>
<p><a href="sl4.html" target="aa3">映像大小的設定</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瀏覽器。 它的作用是在瀏覽器視窗中可以嵌入一個框窗以顯示另一個檔案。它是 一個圍堵標記，但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示，如<noframes> 一樣，可以放些提醒字句之類。通常 iframe 配合一個辨認瀏覽器的 Java Script 會較好，若 JavaScript 認出該瀏覽器並非 Internet Explorer 便會切換至另一版本。
<iframe> 的參數設定格式：
<iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
<iframe>屬性的含義
| 屬 性 | 含 義 |
| src | 浮動窗框中的要顯示的分頁檔的路徑，可以是相對或絕對。 |
| name | 此框窗名稱，這是連結標記的 target 參數所 要的， |
| align | 可選值為 left, right, top, middle, bottom，作用不大 |
| 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="center" allowtransparency="true">
這是一個浮動視窗
</iframe>
<p><a href="sl1.html" target="aa">愛在深秋</a></p>
<p><a href="sl2.html" target="aa">映像對文字的水平置中</a></p>
<p><a href="sl3.html" target="aa">映像與文本之間的距離</a></p>
<p><a href="sl4.html" target="aa">映像大小的設定</a></p>
<p><a href="http://www.sina.com.cn" target="aa3">新浪網站</a></p>
</center>
</body>
</html>
注意: Internet Explorer 5.5 支援浮動架構的內容透明。如果想要為浮動架構定義透明內容，則必須滿足下列條件。
與 IFRAME 元素一起使用的 ALLOWTRANSPARENCY 標籤屬性必須設定為 true。
在 IFRAME 內容來源文檔，background-color 或 BODY 元素的 BGCOLOR 標籤屬性必須設定為 transparent。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
