幀窗口應用技巧

作者：佚名　來源：網絡　時間：2007-10-06　標簽： 幀窗口

　　幀窗口是一種復雜的頁面技術，應用幀窗口使得用戶可以在同一個瀏覽器窗口中瀏覽不同網站的內容，可以在一個小窗口中發出查詢命令而在另一個小窗口中接收查詢結果。實現幀窗口的思路是將瀏覽器窗口按照功能分割成多個小窗口。每個窗口都對應有自己的HTML頁面，按照一定的組合方式組合在一起，以實現特殊的效果。
　　在HTML中用<frameset>（分割窗口標記）來分割窗口，<frameset>在多窗口頁面中的地位就相當于<body>在普通單窗口頁面中的地位，在頁面中用<frameset>……</frameset>標志頁面主體部分的起止位置。而且，<frameset>標記決定了怎樣劃分窗口，以及每個窗口的位置和大小。其基本語法結構如下：

<frameset
cols＝n
rows=n
frameborder=yes|no
border＝n
bordercolor＝#n
framespacing=n>


　　cols和rows：是決定頁面如何分割的兩個參數。分割左右窗口用cols，各幀的左右寬度用占窗口寬度的百分比來表示。比如：cols="30%,40%,*"就表示水平方向分割成三個窗口，各自所占總寬度的百分比依次是30%，40%和30%。其中"*"表示剩余部分，也就是說"*"對應的小窗口寬度為剩余的寬度。分割上下窗口用rows，同樣采用百分比的設定方法。

　　frameborder：是指定各分窗口是（ye）否（no）要加邊框；如果加過框的話，則用 border參數指定邊框的寬度，bordercolor指定邊框的顏色。

　　framespacing：用于設定各分窗口之間的間隔大小，默認值是0。

　　用<frameset>標記把窗口分割好后，各窗口的屬性是用HTML的<frame>標記來定義的，所以<frameset>標記中必須包含<frame>標記，用以定義各分窗口的屬性。其語法如下：

<frame
align=left|center|right|top|bottomv name=framename
src＝url
noresize
scrolling＝yes|on|auto
frameborder=yes|no
bordercolor＝＃n
marginheight=n
marginwidth＝n>


　　align：設定分窗口的位置是靠左（left）、靠右（right）、居中（center）、靠上（top）還是靠底（bottom）。

　　name：用于指定分窗口的名稱，src則用于指定分窗口所對應的HTML頁面地址。

　　noresize：是對用戶來說的，當<frame>標記中包含此參數的時候，用戶就不能用鼠標調整修改各分窗口的大小。

　　scrolling：設定分窗口是否要滾動條。scrolling=no時不要滾動條，scrolling＝yes時表示要滾動條，scrolling＝auoto時表示根據實際情況自動設置滾動條。

　　frameborder和bordercolor：是設定分窗口有無邊框和邊框顏色的。但對象只限于用<frame>標記的分窗口。

　　marginheight和marginwidth：分別用于設定分窗口的上下邊緣和左右邊緣的寬度。

　　用上面的兩個標記，就能夠實現多窗口頁面，下面將舉例說明。

　　1、左小右大兩窗口



　　這種頁面一般在左邊的窗口放一個網站導航頁，右面放網站頁面內容。制作方法：

　　先用<frameset>標記并通過設置其cols參數，沿水平方向分割成兩個窗口，左邊的窗口占20%，右邊的窗口取剩余部分，再用<frame>標記分別定義兩個窗口的屬性。完成后的分幀頁面源代碼如下：

<html>
<head>
<title>分幀窗口示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset cols="20%,*" > 
<frame name="leftFrame" noresize src="ahtml.htm">
<frame name="mainFrame" noresize src="bhtml.htm">
</frameset>
<noframes>
<body>
<p>很抱歉！這是一個分幀頁面，但由于你的瀏覽器不支持，所以不能瀏覽！ </p>
<p>Sorry!This page uses frames,but your browser doesn't support them .
</body></noframes>
</html> 


　　從上面的代碼看，設計幀窗口頁面并沒有想象得那么復雜，但以下幾點在具體操作時要注意：

　　1）用<frame>標記定義分窗口屬性時，要注意其在<frameset>標記中的順序，切不要搞亂了；

　　2）分窗口的名稱雖可隨意定，但最好是以其所在位置命名比較好；

　　3）分窗口的scrolling（滾動條）一般取其默認值"auto"比較好；

　　4）雖然在最終往往不要分窗口的邊框，但在設計階段，還是設置為有邊框比較好，這樣在編輯時一目了然；

　　5）上面頁面代碼中后面那句話一般加上為好，因為有的瀏覽器版本不支持分幀頁面，若沒加那名話，用戶的瀏覽器若不支持分幀時，看到的是一片空白，不知是怎么一回事了，有那句話提示一下就明白了。

　　2、一頂一左一右頁面

　　先看這種分幀頁面的源代碼：

<frameset rows="20%,*"> 
<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" >
<frameset cols="18%,*"> 
<frame name="leftFrame" noresize src="leftpage.htm">
<frame name="mainFrame" src="mainpage.htm">
</frameset>
</frameset> 


　　從上面的代碼中可看出，建立復雜分幀頁面的方法是由簡到繁，如本例中，先用<frameset>定義其“rows”參數，把窗口分成上下兩個窗口，再用<frame>標記定義上部窗口，因下部窗口還需再分，所以不用<frame>定義其屬性，而是用<frameset>標記設置其cols參數，把它再分成左右兩個窗口，因已達目的，所以開始用<frame>標記定義左右兩個窗口的屬性。

　　只要記住：先粗分，后細分，cols橫向分， rows縱向分，無需再分的窗口用<frame>定義屬性，這些基本原則，制作分幀窗口頁面就會輕松自如。

相關文章：

推薦設計

最新文章