快速精通掌握FRAME的使用_第1頁(yè)
快速精通掌握FRAME的使用_第2頁(yè)
快速精通掌握FRAME的使用_第3頁(yè)
快速精通掌握FRAME的使用_第4頁(yè)
快速精通掌握FRAME的使用_第5頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

FRAME（框架）是Web上經(jīng)常會(huì)看到的頁(yè)面結(jié)構(gòu)。使用可視Web開發(fā)工具（比如Dreamweaver或者Frontpage）,雖然可以在WYSIWYG環(huán)境中通過簡(jiǎn)單的鼠標(biāo)托拽完成FRAME的構(gòu)建，但是要實(shí)現(xiàn)真正細(xì)致甚至強(qiáng)大的功能，仔細(xì)理解FRAME的代碼結(jié)構(gòu)至關(guān)重要！你將發(fā)現(xiàn)，F(xiàn)RAME原來是這樣的親切易用。創(chuàng)建基本的FRAMESETFRAMESET頁(yè)面與普遍的Web頁(yè)面有些不同。雖然仍舊以<HTML>和包含標(biāo)題的<HEAD>標(biāo)記以及其他腳本開始，但是其內(nèi)容僅僅是表示的各個(gè)頁(yè)面的版式設(shè)計(jì)。因此，不再需要有<BODY>元素，只需要<FRAMESET>標(biāo)記。通過〈FRAMESET>標(biāo)記的<rows>和<cols>屬性，瀏覽器窗口被分割為一個(gè)個(gè)格子。<rows>和<cols>的設(shè)置值可以是固定的像素值，可以是總空間的百分比值，還可以是用*以及一個(gè)數(shù)字相乘表示的分割剩余空間的比例值。比如說：cols=”80,20%,*”分為3列，寬度分別為80像素，窗口寬度的20%，以及剩余寬度rows=”25%,75%”分為2列，寬度分別為窗口寬度的25%和75%rows=”*,3*”與上述第2個(gè)表示的一樣，分為2列，但表示方法不同：第一列寬度為第二列的1/3在<FRAMESET〉和</FRAMESET>之間，用多個(gè)〈FRAME>標(biāo)記表示每個(gè)分割區(qū)。col表示從左到右的列，row表示從上到下的行。每個(gè)〈FRAME>有一個(gè)src屬性，給出了這個(gè)FRAME的內(nèi)容。它可以是瀏覽器能顯示的任何一個(gè)合法URL，或者是另外一個(gè)FRAMESET。為預(yù)防遞歸現(xiàn)象，一個(gè)FRAME不能包含它本身所在的FRAMESET頁(yè)面。要用name屬性定義FRAME的名字，這樣就可以在代碼或者腳本程序中引用它。請(qǐng)看一段基本的FRAMESET代碼：<HTML><HEAD><TITLE>SimpleFRAMESET</TITLE></HEAD><FRAMESETcols=”40%,60%”rows=”2*,*”><FRAMEname=”TopLeft”src=”red.htm”><FRAMEname="TopRight"src="green.htm”><FRAMEname="BotLeft"src="blue.htm"><FRAMEname="BotRight"src="white.htm"></FRAMESET></HTML><FRAMESETrows="105,*"><FRAMEname="adbanner"src="ad.html"><FRAMESETcols="40%,60%"><FRAMEname="left"src="red.htm"><FRAMESETrows="*,*"><FRAMEname="top"src="blue.htm"><FRAMEname="bottom"src="white.htm"></FRAMESET></FRAMESET></FRAMESET>FRAME間的鏈接一個(gè)FRAMESET結(jié)構(gòu)的頁(yè)面，新文檔只轉(zhuǎn)載進(jìn)窗口的一部分中，而其他頁(yè)面則保持靜態(tài)不變。當(dāng)用戶點(diǎn)擊FRAME中的鏈接時(shí)，新內(nèi)容就在同一FRAME內(nèi)打開。要讓新內(nèi)容在其他FRAME中打開，可以設(shè)置<A>標(biāo)記的target屬性值為那個(gè)FRAME的name值。而且，我們還可以設(shè)置打開目標(biāo)為當(dāng)前可見的任意一個(gè)FRAME，而不局限于本身的FRAMESET。目標(biāo)可能是一個(gè)嵌套的FRAMESET中的FRAME，也可能是其他窗口中的FRAME。但是如果目標(biāo)FRAME不存在，就會(huì)產(chǎn)生一個(gè)帶有目標(biāo)FRAME名字的新窗口。下面舉個(gè)例子說明一下，假設(shè)有一個(gè)簡(jiǎn)單含2-FRAME的FRAMESET，文件名叫做home.html，代碼如下：<HTML>HEAD><TITLE>FrommCohomepage</TITLE></HEAD>FRAMESETcols=”115,*”><FRAMEsrc="menu.htm”><FRAMEname="content"src="main.htm"></FRAMESET></HTML>文件menu.htm在左邊的FRAME中，其中有一系列鏈接，點(diǎn)擊它們后新內(nèi)容將在右邊的叫做content的FRAME中打開。下面是menu.html的代碼：HTML><HEAD></HEAD><BODY><P><BR><IMGsrc="Images/tmp_logo.gif"alt="FrommCo"><P><Ahref="main.htm"target="content">Mainpage</A><P><Ahref="mission.htm"target="content">Ourmission</A><P><Ahref="staff.htm"target="content">Ourstaff</A><P><Ahref="splash.htm"target="_parent">FrommCosplashpage</A></BODY></HTML>請(qǐng)注意最后一個(gè)鏈接中target的定義為_parent，這屬于4個(gè)特殊的保留值。它們是：_parent：在當(dāng)前FRAMESET位置顯示新href。_top:在當(dāng)前整個(gè)窗口位置顯示新href，比如本身FRAMESET位于另一個(gè)FRAMESET中。_self：強(qiáng)制在當(dāng)前FRAME中顯示新href。_blank:在新窗口中顯示href。表示客戶端圖形地圖的<AREA>標(biāo)記同樣可以應(yīng)用target屬性，比如：<AREAshape=circlecoords="75,75,50〃href="main.htm"target="content"alt="Mainpage">還有一種經(jīng)常的情況是：Web頁(yè)面中的大部分或者全部鏈接都要求在一個(gè)特別的FRAME中打開。這時(shí)，可以在頁(yè)面的<HEAD>代碼區(qū)使用<BASE>標(biāo)記設(shè)置默認(rèn)的target，然后再分別定義特殊鏈接的target值。修飾FRAMEframeset不僅在寬度、高度等方面具有可控制的數(shù)值，在美觀方面也同樣可以精確設(shè)置。默認(rèn)情)兄下，F(xiàn)RAMESET的FRAME間有一個(gè)凸起的邊沿，表示分割效果。如果不喜歡這個(gè)，想營(yíng)造“無縫連接”的效果，可以在<FRAME>標(biāo)記中設(shè)置FRAMEborder=0來消除它。在3.0及高版本的Navigator和InternetExplorer中，如果在<FRAMESET>標(biāo)記中設(shè)置FRAMEborder=0，那么除了設(shè)置為FRAMEborder=1的FRAME外，所有其他FRAME的邊沿都將消失。雖然設(shè)置了FRAMEborder=0,有些瀏覽器仍舊會(huì)在FRAME間保留一些邊沿的顏色痕跡。這時(shí)，可以在<FRAMESET>標(biāo)記中添加FRAMEspacing=0(對(duì)InternetExplorer)或者border=0(對(duì)Navigator和Opera)實(shí)現(xiàn)真正的無縫連接。請(qǐng)看下面的代碼是如何使用這些屬性的：<HTML>HEAD><TITLE>FrommCohomepage</TITLE></HEAD>FRAMESETcols="115,*”FRAMEspacing=0border=0>FRAMEsrc="menu.htm”FRAMEborder=0noresizescrolling=no>FRAMEname="content"src="main.htm”FRAMEborder=0></FRAMESET></HTML>上面的代碼中有2個(gè)新的屬性：noresize表示鎖住FRAME而不允許使用鼠標(biāo)改變大小，scrolling=no表示屏蔽FRAME的滾動(dòng)條，scrolling=yes表示允許，scrolling=auto表示根據(jù)顯示內(nèi)容需要自動(dòng)顯示滾動(dòng)條。浮動(dòng)FRAME浮動(dòng)FRAME是HTML4.0規(guī)范中的一個(gè)定義，目前的瀏覽器都支持它。不象FRAMESET表示的分割區(qū)樣子，一個(gè)浮動(dòng)FRAME作為一個(gè)內(nèi)置對(duì)象存在于Web頁(yè)面上，其樣式就象一個(gè)頁(yè)面上的一個(gè)圖形或者一個(gè)applet。浮動(dòng)FRAME使用<IFRAME>標(biāo)記，它具有與<FRAME>相同的大多數(shù)屬性設(shè)置，包括：name、src、marginwidth、marginheight、FRAMEborder以及scrolling。同時(shí)，它還具有與圖形或者applet一樣的height、width和align屬性。而且，浮動(dòng)FRAME遵循與普通FRAME-樣的target原則：我們可以通過它的name來指向它。本原則適用于在任一類型FRAME中的浮動(dòng)FRAME，反之易然。浮動(dòng)FRAME中的沒有traget的鏈接指向它本身，而_parent鏈接則指向包含<IFRAME>的文檔所在的FRAME或者窗口。比如：<IFRAMEname="floater"src="start.htm"width=150height=200hspace=10align=left><IMGsrc="Images/noFRAME.gif"alt="Youcan’tseethefloatingFRAME"width=150height=200hspace=10align=right></IFRAME><BR><Ahref="one.htm"target="floater">Showone.htm</A><P><Ahref="two.htm"target="floater">Showtwo.htm</A><P><Ahref="start.htm"target="floater">Bringbackstart.htm</A>注意，對(duì)應(yīng)支持<IFRAME>標(biāo)記的瀏覽器，任何位于<IFRAME>和</IFRAME>間的內(nèi)容都將忽略。反之，其中的內(nèi)容將顯示出來，這可以用作解釋當(dāng)前瀏覽器不支持<IFRAME>。何時(shí)使用FRAME我們知道，F(xiàn)RAMESET的基本用途就是分割瀏覽器窗口，使得窗口的一部分內(nèi)容改變，而其他部分保持不變。利用這個(gè)特性，就可以實(shí)現(xiàn)工具欄導(dǎo)航功能，一個(gè)FRAME內(nèi)放置靜態(tài)菜單頁(yè)面，用戶點(diǎn)擊其中的項(xiàng)目后，在另外的FRAME內(nèi)顯示相關(guān)的內(nèi)容。這樣就可以從整體上減少文件大小，因?yàn)椴槐卦诿總€(gè)內(nèi)容頁(yè)面中再包含菜單項(xiàng)目。FRAME有2個(gè)明顯的不足：FRAME從另外的級(jí)別上增加了站點(diǎn)的管理，原因在于超級(jí)鏈接不僅僅要指向適當(dāng)?shù)捻?yè)面，而且也會(huì)裝載到相關(guān)的FRAME內(nèi)。另外，大多數(shù)瀏覽器在執(zhí)行“添加書簽”的操作時(shí)，只能記錄下FRAMESET的初始位置。不管添加書簽時(shí)是位于多么深的FRAMESET中，當(dāng)再次選擇這個(gè)書簽時(shí)，就會(huì)返回到FRAMESET的初始頁(yè)面。這就加大了訪問者瀏覽指定內(nèi)容的難度。但是，如果好好地組織站點(diǎn)信息，使導(dǎo)航操作只有不深的幾層，那么，使用FRAME就能很好地為訪問者服務(wù)。記?。涸L問者都希望簡(jiǎn)潔的導(dǎo)航信息。當(dāng)然，導(dǎo)航并非是使用FRAME的唯一原因，也可以使用FRAME創(chuàng)建交換工具和交換頁(yè)面。而且，F(xiàn)RAME的多文檔框架結(jié)構(gòu)非常適于被javascript應(yīng)用程序所操作。用FRAME設(shè)計(jì)站點(diǎn)最常用的FRAME結(jié)構(gòu)就是“菜單一內(nèi)容”FRAMESETo一個(gè)FRAME內(nèi)放置導(dǎo)航菜單，另一個(gè)FRAME內(nèi)轉(zhuǎn)載子菜單，每個(gè)子菜單的鏈接就指向本身。唯一的有target的鏈接都在菜單FRAME內(nèi)。請(qǐng)看下面的例程代碼：HTML><HEAD><TITLE>Welcometomysite!</TITLE></HEAD>FRAMESETcols=”150,*”><FRAMEname="menu”src="menu.htm”><FRAMEname="content"src="intro.htm"></FRAMESET><BODY><!-如果是支持FRAME的瀏覽器，則不會(huì)顯示下面的內(nèi)容；否則，也顯示出簡(jiǎn)單菜單頁(yè)面->Welcometomysite.<P><Ahref="intro.htm">Introduction</A><Ahref="products.htm">Products</A><Ahref="reviews.htm">Reviews</A></BODY></HTML>用腳本控制導(dǎo)航FRAME上面介紹了FRAME的HTML代碼結(jié)構(gòu)，現(xiàn)在開始走向更深一步：使用腳本程序控制FRAME。每個(gè)Window對(duì)象有一個(gè)FRAMEs數(shù)組。對(duì)于普通的Web頁(yè)面，這個(gè)數(shù)組是空的，其屬性length為0。帶有FRAMESET的頁(yè)面，按照其上<FRAME>標(biāo)記的前后順序，生成一個(gè)FRAME數(shù)組。由于FRAMESET所在頁(yè)面是每個(gè)FRAME的parent窗口，數(shù)組索引從0開始，所以從FRAMESET中引用第3個(gè)FRAME時(shí)就使用self.FRAMEs[2],從其他FRAME文檔中引用第3個(gè)FRAME時(shí)就使用parent.FRAMEs[2]。FRAME數(shù)組中的每一個(gè)成員都是一個(gè)窗口，它們具有普通窗口的一切方法、事件以及屬性，并且包括它自己的FRAME數(shù)組(當(dāng)它包含另外一個(gè)FRAMESET時(shí))。因此，用腳本去修改一個(gè)FRAME的內(nèi)容就象修改它的location.href一樣簡(jiǎn)單。下面舉例說明，假設(shè)一個(gè)FRAMESET包含3個(gè)同樣的FRAME，都位于窗口下部：<FRAMESETrows=”60%,40%”><FRAMEname=”link”src=”link.htm"><FRAMESETcols=”*,*,*”><FRAMEname=”blank"src=”blank.htm”><FRAMEname=”blank2〃src=”blank.htm”><FRAMEname=”blank3〃src=”blank.htm”></FRAMESET></FRAMESET>第一個(gè)FRAME中的文檔叫做link.htm，使用點(diǎn)擊其中的單一鏈接就可以修改其他三個(gè)FRAME中的內(nèi)容。實(shí)現(xiàn)代碼如下：<ahref=”javascript:navAll()”>修改下面3個(gè)FRAME的內(nèi)容</a><SCRIPTlanguage=”javascript”><!-functionnavAll(){parent.FRAMEs[1].location.href="red.htm”;parent.FRAMEs[2].location.href="blue.htm";parent.FRAMEs[3].location.href="white.htm";}//-></SCRIPT>用腳本控制動(dòng)態(tài)FRAME如果FRAME中變化的內(nèi)容不多，就可以考慮使用腳本程序動(dòng)態(tài)生成其內(nèi)容。這樣就不用再創(chuàng)建單獨(dú)的小HTML頁(yè)面，無需從服務(wù)器上下載。創(chuàng)建內(nèi)容的方法與在任何窗口中書寫內(nèi)容一樣，都是通過document對(duì)象。舉個(gè)例子說明一下。假設(shè)要在一個(gè)FRAME內(nèi)顯示小組成員的相片，并在其下的一個(gè)小FRAME內(nèi)顯示該成員的名字等信息。首先建立信息數(shù)組：empID=newArray();empID[0]=‘DanaCorolla,CEO’;empID[1]=‘ArturoMontero,senioreditor’;empID[2]=‘PercyTercel,headdesigner’;empID[3]=‘AngusCoupedeville,astrologer’;然后，建立小組成員照片的圖形地圖，將每個(gè)<AREA>鏈接到函數(shù)showMe(n)，由它負(fù)責(zé)根據(jù)索引數(shù)據(jù)創(chuàng)建信息：part1=‘<HTML><HEAD></HEAD>,;part1+=‘<BODYbgcolor=#ffffff><DIValign=center>’part2=‘</DIV></BODY></HTML>^;functionshowMe(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,我們既可以從創(chuàng)建窗口的頁(yè)面訪問那個(gè)窗口，也可以從這個(gè)窗口創(chuàng)建的窗口訪問它。另一方面，F(xiàn)RAMESET中的文檔(包括FRAMESET本身)總是可以訪問和操縱其中每個(gè)的javascript函數(shù)和變量。比如說，第三個(gè)FRAME中有函數(shù)sayGobble(vol),那么在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)來引用它。同樣，F(xiàn)RAMESET頁(yè)面中的變量myName可以被任何FRAME以parent.myName="Imelda”的命令進(jìn)行設(shè)置。不管在其他FRAME中的內(nèi)容如何，在靜態(tài)FRAME或者FRAMESET中的函數(shù)和變量始終保持可用。這個(gè)特征非常有價(jià)值，不僅可以將通用函數(shù)保存在其中從而壓縮代碼，而且，還可以實(shí)現(xiàn)頁(yè)面間轉(zhuǎn)換時(shí)的狀態(tài)保持。下面的FRAMESET頁(yè)面只有一個(gè)FRAME叫做query.htm，并且定義了一個(gè)javascript變量myWord:<HTML><HEAD><TITLE>Passingdata</TITLE><SCRIPTLANGUAGE=”javascript”><!-myWord="”;//-></SCRIPT></HEAD><FRAMESETrows=”*,1"FRAMEBORDER=no><FRAMEname="active"src="query.htm”>FRAMEname="dummy"></FRAMESET></HTML>頁(yè)面query.htm有一個(gè)文本輸入框以及一個(gè)到result.htm的鏈接，鏈接的onClick事件將設(shè)置FRAMESET頁(yè)面的myWord變量為文本輸入框的內(nèi)容。代碼如下：HTML><HEAD></HEAD><BODY><FORMname="myForm"><INPUTtype=textsize=12name="myText”><P><AonClick="parent.myWord=myText.value”href="result.htm">Seeitinyellowonblue!</A></FORM></BODY></HTML>頁(yè)面result.htm取回并打印出myWord的數(shù)值，代碼是：<HTML><HEAD></HEAD><BODYbgcolor=#0000ccvlink=#99ffff><FONTsize=+3color=#ffff00><SCRIPTlanguage=”javascript"><!-document.write(parent.myWord);//-></SCRIPT></FONT><P><Ahref=”query.htm”>Doitagain</a></BODY></HTML>這個(gè)例子很有實(shí)用價(jià)值。比如說，你可以設(shè)定訪問者按一定的次序打開頁(yè)面，收集用戶信息，最后定制出用戶特制的顯示內(nèi)容。談到狀態(tài)維護(hù)功能，這個(gè)方法不會(huì)比使用cookie或CGI更好，因?yàn)楫?dāng)FRAMESET重載或者退出時(shí)，變量值就丟失了。但是，它不要求服務(wù)器端響應(yīng)，也不存在安全問題，因此還是可以小試一把的。用腳本控制浮動(dòng)FRAME用腳本控制普通FRAME與浮動(dòng)FRAME的方法基本相同，唯一的差別是浮動(dòng)FRAME按<IFRAME>出現(xiàn)的順序定義索引位置。如果FRAMEs.length不為0，就表示可以安全地處理浮動(dòng)FRAM

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論