DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 網頁制作基礎技巧 框架(幀窗口)技巧
網頁制作基礎技巧 框架(幀窗口)技巧
編輯:CSS進階教程     
  幀窗口是一種復雜的頁面技術,應用幀窗口使得用戶可以在同一個浏覽器窗口中浏覽不同網站的內容,可以在一個小窗口中發出查詢命令而在另一個小窗口中接收查詢結果。實現幀窗口的思路是將浏覽器窗口按照功能分割成多個小窗口。每個窗口都對應有自己的HTML頁面,按照一定的組合方式組合在一起,以實現特殊的效果。

  在HTML中用<frameset>(分割窗口標記)來分割窗口,<frameset>在多窗口頁面中的地位就相當於<body>在普通單窗口頁面中的地位,在頁面中用<frameset>……</frameset>標志頁面主體部分的起止位置。而且,<frameset>標記決定了怎樣劃分窗口,以及每個窗口的位置和大小。其基本語法結構如下:

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

  frameborder:是指定各分窗口是(ye)否(no)要加邊框;如果加過框的話,則用 border參數指定邊框的寬度,bordercolor指定邊框的顏色。

  framespacing:用於設定各分窗口之間的間隔大小,默認值是0。

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

  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>標記分別定義兩個窗口的屬性。完成後的分幀頁面源代碼如下:

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

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

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

  3)分窗口的scrolling(滾動條)一般取其默認值"auto"比較好;

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

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

  2、一頂一左一右頁面

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

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved