web-8. 多框架頁面的創建
8. 多框架頁面的創建
8.1 框架概念
框架是由單個框架加上框架集構成的區域。
每個框架是指頁面中一個獨立額區，框架集是一個關於框架結構的頁面，定義本頁面的框架數、大小、布局以及框架之間的相互關系。
8.2 框架集標記
框架集文件保存了所有框架的信息，例如設定框架的布局，水平框架與垂直框架的數目、尺寸、名稱等。
框架集標記<frameset>語法格式如下：
<frameset>
<frame>
......
</frameset>
<frameset>標記的rows屬性用來將瀏覽器分割成為上下窗口。rows屬性值是一個以逗號分開的長度值列表，單位是像素或百分比。
<frameset rows=”60,*”>
<frameset>標記的cols屬性用來將瀏覽器分割成為左右窗口。cols屬性是一個以逗號分開的長度值列表，單位是像素後者百分比。
例如：
<frameset cols=”20%,*”>
<frame name=”left “ src=”**” scrolling=”auto”>
<frame name=”right“ src=”**” scrolling=”auto”>
</frameset>
8.3 框架標記
框架標記<frame>的作用是定義框架網頁的內容，例如框架名稱、框架對應的框架頁面文件、滾動條等。
每個框架對應一個網頁，這個網頁稱為框架頁面。
格式如下：
<frame name=”” src=”” scrolling=”” frameborder=””>
name屬性用來命名框架名稱。src屬性用於指定框架頁面對應的HTML頁面文件。scrolling屬性用來設定框架空間不夠用時，是否顯示滾動條，yes表示“顯示滾動條”，no表示“不顯示滾動條”，auto表示“根據頁面的長度自動判斷是否顯示滾動條”。frameborder屬性用來設定是否顯示邊框，0表示不顯示邊框，1表示顯示邊框，默認的情況是0。
由於框架中的內容有時較少，不需要滾動條就可以全部顯示，因此滾動條有時會顯示灰色，表示不可用的狀態。
8.4 無框架標記
目前市場上瀏覽器的種類眾多，並非每一種瀏覽器都支持框架結構。考慮到這類用戶，HTML還提供了無框架標記<noframes>。當瀏覽器不能正常加載框架標記<frameset>時，瀏覽器就會檢測到<noframes>標記。並顯示其中內容。
框架結構如下：
<frameset rows=”60,*”>
<frame>
<frame>
......
<noframes>
<body>
......
</body>
</noframes>
</frameset>
8.5 框架之間的信息交互
雖然多框架頁面中的各個框架頁面是相互獨立的HTML文檔，但是編程人員可以利用為框架命名的方式使框架間產生一定的相互關系，其中最常用的就是框架間的鏈接關系。
要實現框架間信息的交互，首先要在編寫框架集文件是命名相關框架。
<frame name=”top” src=”**” scrolling=”auto” >
......
<frame name=”left” src=”**” scrolling=”auto” >
<frame name=”right” src=”**” scrolling=”auto” >
這些源碼是將上部框架命名為“top”，左下側框架命名為“left”，右下側框架命名為“right”。命名完成後，在先關的超鏈接中進行改動，將其超鏈接標記<a>的target屬性賦值為目標框架的名稱。
<h2><a href=”**” target=right>天鵝</a></h2>
實例：
本例定義一個整個頁面的框架集文件，3個框架文件，2個連接文件
1.html
<html>
<head>
<title>使用框架實例</title>
</head>
<frameset rows="60,*">
<frame name="top" src="top.html" scrolling="auto">
<frameset cols="20%,*">
<frame name="left" src="left.html" scrolling="auto">
<frame name="right" src="right1.html" scrolling="auto">
</frameset>
<noframeset>
<body>
<p>此網頁使用了框架，但是瀏覽器不支持</p>
</body>
</noframeset>
</frameset>
</html>
top.html
<html>
<head>
<title>上側框架</title>
</head>
<body>
<h1><center>動物園簡介</center></h1>
</body>
</html>
leht.html
<html>
<head>
<title>左側框架</title>
</head>
<body>
<br>動物園裏，你最喜歡哪個動物？：
<h2><a href="right1.html" target=right>獅子</a></h2>
<h2><a href="right2.html" target=right>老虎</a></h2>
<h2><a href="right3.html" target=right>大象</a></h2>
</body>
</html>
right1.html
<html>
<head>
<title>右側框架</title>
</head>
<body>
<h2><br><br>獅子:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>
right2.html
<html>
<head>
<title>右側框架</title>
</head>
<body>
<h2><br><br>老虎:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>
right3.html
<html>
<head>
<title>右側框架</title>
</head>
<body>
<h2><br><br>大象:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>
web-8. 多框架頁面的創建