快速精通網頁框架FRAME

主頁 > 學習 > HTML >

次瀏覽

摘要:FRAME(框架)是Web上經常會看到的頁面結構。使用可視Web開發工具(比如Dreamweaver或者Frontpage),雖然可以在 WYSIWYG環境中通過簡單的鼠標托拽完成FRAME的構建,但是要實現真正細致甚至強大的功能,仔細理解FRAME的代碼結構至關重要!你將發現, FRAME原

FRAME(框架)是Web上經常會看到的頁面結構。使用可視Web開發工具(比如Dreamweaver或者Frontpage),雖然可以在 WYSIWYG環境中通過簡單的鼠標托拽完成FRAME的構建,但是要實現真正細致甚至強大的功能,仔細理解FRAME的代碼結構至關重要!你將發現, FRAME原來是這樣的親切易用。

  創建基本的FRAMESET

  FRAMESET頁面與普遍的Web頁面有些不同。雖然仍舊以和包含標題的標記以及其他腳本開始,但是其內容僅僅是表示的各個頁面的版式設計。因此,不再需要有元素,只需要標記。

  通過標記的屬性,瀏覽器窗口被分割為一個個格子。 的設置值可以是固定的像素值,可以是總空間的百分比值,還可以是用*以及一個數字相乘表示的分割剩余空間的比例值。比如說:

cols="80,20%,*" 分為3列,寬度分別為80像素,窗口寬度的20%,以及剩余寬度
rows="25%,75%" 分為2列,寬度分別為窗口寬度的25%和75%
rows="*,3*" 與上述第2個表示的一樣,分為2列,但表示方法不同:第一列寬度為第二列的1/3

  在和之間,用多個標記表示每個分割區。col 表示從左到右的列,row表示從上到下的行。每個有一個src屬性,給出了這個FRAME的內容。它可以是瀏覽器能顯示的任何一個合法URL,或者是另外一個FRAMESET。為預防遞歸現象,一個FRAME不能包含它本身所在的FRAMESET頁面。要用name屬性定義 FRAME的名字,這樣就可以在代碼或者腳本程序中引用它。 請看一段基本的FRAMESET代碼:



Simple FRAMESET

















  FRAME間的鏈接

  一個FRAMESET結構的頁面,新文檔只轉載進窗口的一部分中,而其他頁面則保持靜態不變。當用戶點擊FRAME中的鏈接時,新內容就在同一 FRAME內打開。要讓新內容在其他FRAME中打開,可以設置標記的target屬性值為那個FRAME的name值。

  而且,我們還可以設置打開目標為當前可見的任意一個FRAME,而不局限于本身的FRAMESET。目標可能是一個嵌套的FRAMESET中的 FRAME,也可能是其他窗口中的FRAME。但是如果目標FRAME不存在,就會產生一個帶有目標FRAME名字的新窗口。

  下面舉個例子說明一下,假設有一個簡單含2-FRAME的FRAMESET,文件名叫做home.html,代碼如下:


FrommCo home page




  文件menu.htm在左邊的FRAME中,其中有一系列鏈接,點擊它們后新內容將在右邊的叫做content的FRAME中打開。下面是menu.html的代碼:




FrommCo


Main page


Our mission


Our staff


FrommCo splash page
急速赛车收

  請注意最后一個鏈接中target的定義為_parent,這屬于4個特殊的保留值。它們是:

_parent:在當前FRAMESET位置顯示新href。
_top:在當前整個窗口位置顯示新href,比如本身FRAMESET位于另一個FRAMESET中。
_self:強制在當前FRAME中顯示新href。
_blank:在新窗口中顯示href。

  表示客戶端圖形地圖的標記同樣可以應用target屬性,比如:

  Main page

  還有一種經常的情況是:Web頁面中的大部分或者全部鏈接都要求在一個特別的FRAME中打開。這時,可以在頁面的代碼區使用標記設置默認的target,然后再分別定義特殊鏈接的target值。

  修飾FRAME

  FRAMESET不僅在寬度、高度等方面具有可控制的數值,在美觀方面也同樣可以精確設置。

  默認情況下,FRAMESET的FRAME間有一個凸起的邊沿,表示分割效果。如果不喜歡這個,想營造“無縫連接”的效果,可以在< FRAME>標記中設置FRAMEborder=0來消除它。在3.0及高版本的Navigator和Internet Explorer中,如果在標記中設置FRAMEborder=0,那么除了設置為FRAMEborder=1的 FRAME外,所有其他FRAME的邊沿都將消失。

  雖然設置了FRAMEborder=0,有些瀏覽器仍舊會在FRAME間保留一些邊沿的顏色痕跡。這時,可以在< FRAMESET>標記中添加FRAMEspacing=0(對Internet Explorer)或者border=0(對Navigator和Opera)實現真正的無縫連接。

  請看下面的代碼是如何使用這些屬性的:


FrommCo home page




  上面的代碼中有2個新的屬性:noresize表示鎖住FRAME而不允許使用鼠標改變大小,scrolling=no表示屏蔽FRAME的滾動條,scrolling=yes表示允許,scrolling=auto表示根據顯示內容需要自動顯示滾動條。

  浮動FRAME

  浮動FRAME是HTML4.0規范中的一個定義,目前的瀏覽器都支持它。

  不象FRAMESET表示的分割區樣子,一個浮動FRAME作為一個內置對象存在于Web頁面上,其樣式就象一個頁面上的一個圖形或者一個 applet。浮動FRAME使用

Show one.htm


Show two.htm


Bring back start.htm

  注意,對應支持間的內容都將忽略。反之,其中的內容將顯示出來,這可以用作解釋當前瀏覽器不支持