網頁製作基礎技巧 架構(幀視窗)技巧

來源:互聯網
上載者:User
技巧|網頁   幀視窗是一種複雜的頁面技術,應用幀視窗使得使用者可以在同一個瀏覽器視窗中瀏覽不同網站的內容,可以在一個小視窗中發出查詢命令而在另一個小視窗中接收查詢結果。實現幀視窗的思路是將瀏覽器視窗按照功能分割成多個小視窗。每個視窗都對應有自己的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>定義屬性,這些基本原則,製作分幀視窗頁面就會輕鬆自如。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。