網頁設計必學:快速精通網頁架構FRAME

來源:互聯網
上載者:User
設計|網頁|網頁設計

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

  建立基本的FRAMESET

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

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

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

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

<HTML>
<HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
<FRAME name="TopRight" src="green.htm">
<FRAME name="BotLeft" src="blue.htm">
<FRAME name="BotRight" src="white.htm">
</FRAMESET>
</HTML>
<FRAMESET rows="105,*">
<FRAME name="adbanner" src="ad.html">
<FRAMESET cols="40%,60%">
<FRAME name="left" src="red.htm">
<FRAMESET rows="*,*">
<FRAME name="top" src="blue.htm">
<FRAME name="bottom" src="white.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET>

  FRAME間的連結

  一個FRAMESET結構的頁面,新文檔只轉載進視窗的一部分中,而其他頁面則保持靜態不變。當使用者點擊FRAME中的連結時,新內容就在同一FRAME內開啟。要讓新內容在其他FRAME中開啟,可以設定<A>標記的target屬性值為那個FRAME的name值。

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

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

<HTML>
<HEAD><TITLE>FrommCo home page</TITLE></HEAD>
<FRAMESET cols="115,*">
<FRAME src="menu.htm">
<FRAME name="content" src="main.htm">
</FRAMESET>
</HTML>

  檔案menu.htm在左邊的FRAME中,其中有一系列連結,點擊它們後新內容將在右邊的叫做content的FRAME中開啟。下面是menu.html的代碼:

<HTML><HEAD></HEAD>
<BODY><P><BR>
<IMG src="http://www.webjx.com/htmldata/2007-06-20/Images/tmp_logo.gif" alt="FrommCo"><P>
<A href="main.htm" target="content">Main page</A><P>
<A href="mission.htm" target="content">Our mission</A><P>
<A href="staff.htm" target="content">Our staff</A><P>
<A href="splash.htm" target="_parent">FrommCo splash page</A>
</BODY></HTML>

  請注意最後一個連結中target的定義為_parent,這屬於4個特殊的保留值。它們是:

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

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

  <AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page">

  還有一種經常的情況是:Web頁面中的大部分或者全部連結都要求在一個特別的FRAME中開啟。這時,可以在頁面的<HEAD>代碼區使用<BASE>標記設定預設的target,然後再分別定義特殊連結的target值。

  修飾FRAME

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

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

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

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

<HTML>
<HEAD><TITLE>FrommCo home page</TITLE></HEAD>
<FRAMESET cols="115,*" FRAMEspacing=0 border=0>
<FRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no>
<FRAME name="content" src="main.htm" FRAMEborder=0>
</FRAMESET>
</HTML>

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

  浮動FRAME

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

  不象FRAMESET表示的分割區樣子,一個浮動FRAME作為一個內建對象存在於Web頁面上,其樣式就象一個頁面上的一個圖形或者一個applet。浮動FRAME使用<IFRAME>標記,它具有與<FRAME>相同的大多數屬性設定,包括:name、src、marginwidth、marginheight、FRAMEborder以及scrolling。同時,它還具有與圖形或者applet一樣的height、width和align屬性。

  而且,浮動FRAME遵循與普通FRAME一樣的target原則:我們可以通過它的name來指向它。本原則適用於在任一類型FRAME中的浮動FRAME,反之易然。浮動FRAME中的沒有traget的連結指向它本身,而_parent連結則指向包含<IFRAME>的文檔所在的FRAME或者視窗。比如:

<IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left>
<IMG src="http://www.webjx.com/htmldata/2007-06-20/Images/noFRAME.gif" alt="You can't see the floating FRAME"
width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href="one.htm" target="floater">Show one.htm</A><P>
<A href="two.htm" target="floater">Show two.htm</A><P>
<A href="start.htm" target="floater">Bring back start.htm</A>

  注意,對應支援<IFRAME>標記的瀏覽器,任何位於<IFRAME>和</IFRAME>間的內容都將忽略。反之,其中的內容將顯示出來,這可以用作解釋當前瀏覽器不支援<IFRAME>。

  何時使用FRAME

  我們知道,FRAMESET的基本用途就是分割瀏覽器視窗,使得視窗的一部分內容改變,而其他部分保持不變。利用這個特性,就可以實現工具列導航功能,一個FRAME內放置靜態菜單頁面,使用者點擊其中的項目後,在另外的FRAME內顯示相關的內容。這樣就可以從整體上減少檔案大小,因為不必在每個內容頁面中再包含功能表項目。

  FRAME有2個明顯的不足:

  FRAME從另外的層級上增加了網站的管理,原因在於超級連結不僅僅要指向適當的頁面,而且也會裝載到相關的FRAME內。

  另外,大多數瀏覽器在執行“添加書籤”的操作時,只能記錄下FRAMESET的初始位置。不管添加書籤時是位於多麼深的FRAMESET中,當再次選擇這個書籤時,就會返回到FRAMESET的初始頁面。這就加大了訪問者瀏覽指定內容的難度。

  但是,如果好好地組織網站資訊,使導航操作只有不深的幾層,那麼,使用FRAME就能很好地為訪問者服務。記住:訪問者都希望簡潔的導航資訊。

  當然,導航並非是使用FRAME的唯一原因,也可以使用FRAME建立交換工具和交換頁面。而且,FRAME的多文檔架構結構非常適於被JavaScript應用程式所操作。

  用FRAME設計網站

  最常用的FRAME結構就是“菜單-內容”FRAMESET。一個FRAME內放置導覽功能表,另一個FRAME內轉載子功能表,每個子功能表的連結就指向本身。唯一的有target的連結都在菜單FRAME內。 請看下面的常式代碼:

<HTML><HEAD>
<TITLE>Welcome to my site!</TITLE>
</HEAD>
<FRAMESET cols="150,*">
<FRAME name="menu" src="menu.htm">
<FRAME name="content" src="intro.htm">
</FRAMESET>
<BODY>
<!--如果是支援FRAME的瀏覽器,則不會顯示下面的內容;否則,也顯示出簡單菜單頁面-->
Welcome to my site.<P>
<A href="intro.htm">Introduction</A>
<A href="products.htm">Products</A>
<A href="reviews.htm">Reviews</A>
</BODY></HTML>

  用指令碼控制導航FRAME

  上面介紹了FRAME的HTML代碼結構,現在開始走向更深一步:使用指令碼程式控制FRAME。

  每個Window對象有一個FRAMEs數組。對於普通的Web頁面,這個數組是空的,其屬性length為0。帶有FRAMESET的頁面,按照其上<FRAME>標記的前後順序,產生一個FRAME數組。由於FRAMESET所在頁面是每個FRAME的parent視窗,數組索引從0開始,所以從FRAMESET中引用第3個FRAME時就使用self.FRAMEs[2],從其他FRAME文檔中引用第3個FRAME時就使用parent.FRAMEs[2]。

  FRAME數組中的每一個成員都是一個視窗,它們具有普通視窗的一切方法、事件以及屬性,並且包括它自己的FRAME數組(當它包含另外一個FRAMESET時)。因此,用指令碼去修改一個FRAME的內容就象修改它的location.href一樣簡單。

  下面舉例說明,假設一個FRAMESET包含3個同樣的FRAME,都位於視窗下部:

<FRAMESET rows="60%,40%">
<FRAME name="link" src="link.htm">
<FRAMESET cols="*,*,*">
<FRAME name="blank1" src="blank.htm">
<FRAME name="blank2" src="blank.htm">
<FRAME name="blank3" src="blank.htm">
</FRAMESET>
</FRAMESET>

  第一個FRAME中的文檔叫做link.htm,使用點擊其中的單一連結就可以修改其他三個FRAME中的內容。實現代碼如下:

<a href="javascript:navAll()">修改下面3個FRAME的內容</a>
<SCRIPT language="JavaScript"><!--
function navAll() {
parent.FRAMEs[1].location.href="red.htm";
parent.FRAMEs[2].location.href="blue.htm";
parent.FRAMEs[3].location.href="white.htm"; }
// --></SCRIPT>

  用指令碼控制動態FRAME

  如果FRAME中變化的內容不多,就可以考慮使用指令碼程式動態產生其內容。這樣就不用再建立單獨的小HTML頁面,無需從伺服器上下載。建立內容的方法與在任何視窗中書寫內容一樣,都是通過document對象。

  舉個例子說明一下。假設要在一個FRAME內顯示小組成員的相片,並在其下的一個小FRAME內顯示該成員的名字等資訊。首先建立資訊數組:

empID = new Array();
empID[0] = 'Dana Corolla, CEO';
empID[1] = 'Arturo Montero, senior editor';
empID[2] = 'Percy Tercel, head designer';
empID[3] = 'Angus Coupedeville, astrologer';

  然後,建立小組成員照片的圖形地圖,將每個<AREA>連結到函數showMe(n),由它負責根據索引資料建立資訊:

part1 = '<HTML><HEAD></HEAD>';
part1+= '<BODY bgcolor=#ffffff><DIV align=center>';
part2 = '</DIV></BODY></HTML>';
function showMe(n) {
parent.FRAMEs[1].document.open();
parent.FRAMEs[1].document.write(part1);
parent.FRAMEs[1].document.write(empID[n]);
parent.FRAMEs[1].document.writeln(part2);
parent.FRAMEs[1].close();
}

  FRAME間的指令碼控制

  使用JavaScript,我們既可以從建立視窗的頁面訪問那個視窗,也可以從這個視窗建立的視窗訪問它。另一方面,FRAMESET中的文檔(包括FRAMESET本身)總是可以訪問和操縱其中每個的JavaScript函數和變數。比如說,第三個FRAME中有函數sayGobble(vol),那麼在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)來引用它。同樣,FRAMESET頁面中的變數myName可以被任何FRAME以parent.myName="Imelda"的命令進行設定。

  不管在其他FRAME中的內容如何,在靜態FRAME或者FRAMESET中的函數和變數始終保持可用。這個特徵非常有價值,不僅可以將通用函數儲存在其中從而壓縮代碼,而且,還可以實現頁面間轉換時的狀態保持。

  下面的FRAMESET頁面只有一個FRAME叫做query.htm,並且定義了一個JavaScript變數myWord:

<HTML><HEAD>
<TITLE>Passing data</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
myWord="";
//--></SCRIPT>
</HEAD>
<FRAMESET rows="*,1" FRAMEBORDER=no>
<FRAME name="active" src="query.htm">
<FRAME name="dummy">
</FRAMESET>
</HTML>

  頁面query.htm有一個文本輸入框以及一個到result.htm的連結,連結的onClick事件將設定FRAMESET頁面的myWord變數為文本輸入框的內容。代碼如下:

<HTML><HEAD></HEAD>
<BODY>
<FORM name="myForm">
<INPUT type=text size=12 name="myText">
<P>
<A
href="result.htm">See it in yellow on blue!</A>
</FORM>
</BODY></HTML>

  頁面result.htm取回並列印出myWord的數值,代碼是:

<HTML>
<HEAD></HEAD>
<BODY bgcolor=#0000cc vlink=#99ffff>
<FONT size=+3 color=#ffff00>
<SCRIPT language="JavaScript"><!--
document.write(parent.myWord);
//--></SCRIPT>
</FONT><P>
<A href="query.htm">Do it again</a>
</BODY></HTML>

  這個例子很有實用價值。比如說,你可以設定訪問者按一定的次序開啟頁面,收集使用者資訊,最後定製出使用者特製的顯示內容。

  談到狀態維護功能,這個方法不會比使用cookie或CGI更好,因為當FRAMESET重載或者退出時,變數值就丟失了。但是,它不要求伺服器端響應,也不存在安全問題,因此還是可以小試一把的。

  用指令碼控制浮動FRAME

  用指令碼控制普通FRAME與浮動FRAME的方法基本相同,唯一的差別是浮動FRAME按<IFRAME>出現的順序定義索引位置。如果FRAMEs.length不為0,就表示可以安全地處理浮動FRAME。比如說,在下面的代碼中,如果存在叫做floater的浮動FRAME,連結就指向它;否則就指向"_top":

<IFRAME name="floater" src="trog.htm" width=200 height=200></IFRAME>
<A href="grot.html" target="floater" >See grot.htm</A>

  帶有浮動FRAME的Web頁面是FRAME文檔的parent視窗,因此,多個浮動FRAME仍然可以通過parent.FRAME數組去訪問每一個FRAME。

  預防指令碼編程錯誤

  儘管FRAME是HTML的一個穩定規範說明,但DOM模型只把它們當做HTML元素而不是視窗,因此圍繞FRAME的指令碼編程並不是能很周全地定義。這個不足導致了當裝載FRAME時會發生一些指令碼執行方面的衝突。

  立即修改FRAME內容的指令碼經常會產生錯誤。原因在於:瀏覽器通常是先執行指令碼命令,然後在按照src所示裝入頁面內容。

  解決方案很直接,就是判斷FRAME內容是否裝載完畢。有一個好的處理技巧是以HTML頁面開始所有的FRAME,由它象主FRAMESET報告裝載請看。比如說,有一個FRAMESET頁面,要等裝載完所有的FRAME後才能執行函數goToIt(),那麼就將下面的JavaScript程式段放進FRAMESET文檔中:

countDown=FRAMEs.length;
function soundOff() {
countDown--;
if (countDown==0) {
goToIt();
}
}
  然後,在每個FRAME頁面的<BODY>標記中設定上。當FRAME頁面裝載並執行soundOFF()後,等到countDown 為0時,就表示FRAME完全裝載完畢。

  總結

  FRAME是雙刃劍,使用不好會造成混亂的網站結構和外觀,使用得當將大大方便使用者的操作方式以及形成清晰的頁面風格。相信你看完本文後,會對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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。