運行frame框架前應知道:
1、frameset(框架的生成的標記)是和html的<body>標簽同等級的,所以不能將<frameset></frameset>寫在<body></body>標簽內部,否則會出錯或無法顯示;
2、框架必須正確嵌套,正確形式為:
1 <frameset cols="" rows="" >
2 <frame src="" /> <!--LeftFrame頁面-->
3 <frame src="" name="" /> <!--RightFrame頁面-->
4 </frameset>
3、在框架中至少有3個頁面;(很容易混淆,下例以垂直框架為例,這個主體頁面分為左右2個框架)
一個MainFrame頁面:用於顯示整個框架的主體頁面,在這個頁面內部划分各個小的frame框架,如上面的代碼就是在這個MainFrame頁面中編寫的。此頁面中重要之處是要在RightFrame的frame中添加name屬性,這是為了是LeftFrame通過點擊其頁面內的鏈接,被鏈接的頁面在RightFrame頁面中顯示出來。
另一個LeftFrame頁面:左邊的頁面放置類似導航的頁面,在這個頁面尤其是要注意添加target屬性,target的屬性值為在MainFrame頁面中提供顯示被導航頁面的中的name的屬性值,即RightFrame頁面中添加的name屬性的屬性值。
另一個RigthFrame頁面:提供被導航的頁面,可以是自己的制作的WEB頁面,也可以是Internet上的網頁。
具體的實例:
Mainframe頁面中的代碼:
<html>
<head>
<title>框架學習</title>
</head>
<frameset cols="20%,*" >
<frame src="LeftFrame.htm" />
<frame src="RightFrame.htm" name="showContent" />
</frameset>
</html>
LeftFrame頁面中的代碼:
<html>
<head>
<title>LeftFrame頁面</title>
</head>
<body>
<a href="#1" target="showContent" >鏈接一</a> <!--target屬性一定要填,否則不會在RightFrame中顯示出要連接到的頁面-->
<a href="#2" target="showContent" >鏈接二</a>
<a href="#1" target="showContent" >鏈接三</a>
</body>
</html>
RightFrame頁面是MainFrame頁面加載時,右邊框架顯示的默認頁面。當然其他的頁面或內容就可以根據需要進行新建制作了,創建好了,只需在LeftFrame頁面添加鏈接,即可以被導航到。
這個工作完成之后的效果,類似於CSDN開發者社區論壇的顯示效果。