網(wǎng)頁調(diào)用淺析

摘要：通過長期的教學(xué)與觀察，該文對現(xiàn)今在網(wǎng)絡(luò)上流行的常用的網(wǎng)頁調(diào)用手段進(jìn)行了歸納總結(jié)，并配以實例對每種方法進(jìn)行了簡要地介紹。論文還對其應(yīng)用中的注意事項進(jìn)行了詳細(xì)的說明，以期給網(wǎng)站開發(fā)人員在制作網(wǎng)頁時提供幫助。

關(guān)鍵詞：網(wǎng)頁調(diào)用；框架網(wǎng)頁；浮動窗口；JS文檔；包含指令

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2008)34-2045-04

Brief Analysis Homepage Transfer

LIU Wan-jun

(Yiyang Vocational And Technical College， Yiyang 413049， China)

Abstract: Through the long-term teaching and the observation， this paper has summarized the commonly used method of homepage transfer to today’s popular on the web page in the network， and briefly introduced each method matched by the examples. The paper has also carried on the detailed explanation to its application's matters needing attention， and can provide the help of manufactures the homepage to the website development personnel.

Key words: homepage transfer; frame homepage; fluctuation window; JS documents; includes instruction

在一個網(wǎng)頁中調(diào)用另一個網(wǎng)頁，是網(wǎng)頁中常見的一種現(xiàn)象，也是網(wǎng)站設(shè)計者制作網(wǎng)頁時常用的一種處理技巧。它的出現(xiàn)使網(wǎng)站的分工越來越細(xì)膩。下面就現(xiàn)今在網(wǎng)頁制作中常用的幾種網(wǎng)頁調(diào)用方法分別進(jìn)行闡述。

1 框架網(wǎng)頁

所謂框架是將網(wǎng)頁劃分為幾個窗口，同時取得多個URL。只需要 ＜FRAMESET＞ ＜FRAME＞ 即可，而所有框架標(biāo)記需要放在一個總的 HTML文檔中，瀏覽這框架必須讀取這文檔。＜FRAMESET＞ 是用來劃分框窗，每一框窗均由一個 ＜FRAME＞ 所標(biāo)記，＜FRAME＞必須在 ＜FRAMESET＞ 范圍中使用。例如：

＜frameset cols=\"10%，*\"＞＜frame name=\"hnyyzy01\" src=\"left.html\"＞＜frame name=\"hnyyzy02\" src=\"main.html\"＞＜/frameset＞

上例中 ＜FRAMESET＞ 把畫面分成左右兩部分，左便是顯示left.html，右邊則會顯示main.html 這個網(wǎng)頁文檔。＜FRAMESET＞分出來的幾個窗口內(nèi)容并不是靜止不變的，往往一個窗口的內(nèi)容隨著另一個窗口的要求而不斷變化，這就提高了其利用價值。為了完成各窗口之間的相互操作，我們得為每一個窗口起一個名字，這個名字用屬性Name來定義。

其語法格式為：

＜FRAMESETCOLS=\"垂直切割畫面(如 COLS=’60，*，50%’ 可以切成三個視窗，第一個視窗是60像素的寬度，為絕對分割，第二個視窗是當(dāng)分配完第一及第三個視窗后剩下的空間)，可接受整數(shù)值、百分?jǐn)?shù)，* 則代表占用剩余的空間。數(shù)值的個數(shù)代表分成的視窗數(shù)目且以逗號分隔\"ROWS=\"橫向切割，將畫面上下分開，數(shù)值設(shè)定同上。 COLS 與 ROWS 兩參數(shù)盡量不要放在同一個 ＜FRAMESET＞ 標(biāo)記中，盡量采用多重分割\" frameborder=\"設(shè)定框架的邊框，其值只有0和1，0表示不要邊框，1表示要顯示邊框0\" border=\"設(shè)定框架的邊框厚度，以像素為單位\" bordercolor=\"設(shè)定框架的邊框顏色（16進(jìn)制表示，如#008000）\" framespacing=\"框架與框架間保留的空白的距離\" ＞

＜FRAME SRC=\"設(shè)定此框窗中要顯示的網(wǎng)頁文檔名稱，每個框窗對應(yīng)一個網(wǎng)頁文檔\"

NAME=\"設(shè)定這個框窗的名稱，以此用作鏈接\" frameborder=”設(shè)定框架的邊框，其取值有yes、no或0、1，yes或者1表示有邊框，no或者0表示沒邊框”framespacing=\"設(shè)定框架與框架之間保留的空白距離\"bordercolor=\"設(shè)定框架的邊框顏色（16進(jìn)制表示，如#008000）\" scrolling=\"設(shè)定是否要顯示卷軸，YES表示要顯示卷軸，NO表示無論如何都不要顯示卷軸，AUTO表示視情況而定\" noresize=”設(shè)定不讓使用者可以改變這個框框的大小，如沒有設(shè)定此參數(shù)，使用者可隨意地拉動框架改變其大小” marginhight=”表示框架高度部分邊緣所保留的空間”marginwidth=”表示框架寬度部分邊緣所保留的空間”＞

……

＜/FRAMESET＞

在含有＜FRAMESET＞標(biāo)記結(jié)構(gòu)的HTML文件中，其文檔整體結(jié)構(gòu)為：

＜HTML＞

＜HEAD＞ ＜TITLE＞網(wǎng)頁文檔標(biāo)題＜/TITLE＞ ＜/HEAD＞

＜FRAMESET＞

＜FRAME SRC=\"url\"＞

＜FRAME SRC=\"url\"＞

......

＜/FRAMESET＞

＜/HTML＞

實例列舉：

＜html＞

＜frameset rows=\"11%，*\"＞

＜frame marginwidth=5 marginheight=5 scrolling=no src=\"top.html\"＞

＜frameset cols=\"12%，*\"＞

＜frame frameborder=\"1\" src=\"left.html\"name=\"left\"＞

＜frame frameborder=\"yes\" src=\"right.html\" name=\"right\"＞

＜/frameset＞

＜/frameset＞

＜/html＞

注意事項：

1) ＜FRAMESET＞可以嵌套。

2) ＜FRAME＞標(biāo)記所標(biāo)示的框窗遵循由上而下、由左至右的次序分配；同時＜FRAME＞無結(jié)束標(biāo)識。

3) 使用框架時， ＜FRAMESET＞只記錄了該框架的分割情況，不會顯示任何資料，所以不能有＜BODY＞ ＜/ BODY＞ 標(biāo)記。

4) 對于使用了防止被框架集引用的頁面不可以使用框架調(diào)用。防止被框架集引用關(guān)鍵代碼如下：

If(top!=self){

Top.location=self.location;

}

2 浮動窗口

浮動窗口（Iframe標(biāo)記，又叫浮動幀標(biāo)記）也應(yīng)算是框架的一種形式，你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同于Frame標(biāo)記最大的特征即這個標(biāo)記所引用的HTML文件不是與另外的HTML文件相互獨(dú)立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內(nèi)容相互融合，成為一個整體，另外，還可以多次在一個頁面內(nèi)顯示同一內(nèi)容，而不必重復(fù)寫內(nèi)容，一個形象的比喻即“畫中畫“電視。

其語法格式為：

＜Iframesrc=\"起始鏈接文件的路徑，既可使用相對路徑也可使用絕對路徑\" width=\"浮動窗口可見區(qū)域的寬\" height=\"浮動窗口可見區(qū)域的高\(yùn)" scrolling=\"當(dāng)SRC的鏈接的文件在指定的區(qū)域顯示不完時，滾動選項：如果設(shè)置為NO，則不出現(xiàn)滾動條；如為Auto，則自動出現(xiàn)滾動條；如為Yes，則顯示;如果省略這個參數(shù)，則默認(rèn)為Auto \" frameborder=\"浮動窗口邊框的寬度，為了讓其與鄰近的內(nèi)容相融合，常設(shè)置為0\"name=”框架的名字，用來進(jìn)行識別”＞＜/Iframe＞

實例列舉：

＜html＞＜head＞＜title＞Iframe的使用＜/title＞＜/head＞

＜body background=\"bg.gif\"＞

＜p＞ ＜/p＞

＜table width=\"80%\" border=\"0\" align=\"center\"＞

＜tr＞

＜td＞ ＜div align=\"center\"＞

＜iframe src=Readme.txt name=liuwanjun width=63% height=300

frameborder=0 marginwidth=0 marginheight=0 scrolling=auto

allowtransparency=true＞＜/iframe＞

＜/div＞＜/td＞

＜/tr＞

＜tr＞

＜td＞＜div align=\"center\"＞＜a href=\"a1.jpg\" target=\"liuwanjun\"＞魔圖1＜/a＞ ＜a href=\"a2.jpg\" target=\"liuwanjun\"＞魔圖2＜/a＞

＜a href=\"a3.jpg\" target=\"liuwanjun\"＞魔圖3＜/a＞ ＜a href=\"a4.jpg\" target=\"liuwanjun\"＞魔圖4＜/a＞

＜a href=\"a5.jpg\" target=\"liuwanjun\"＞魔圖5＜/a＞ ＜a href=\"a6.jpg\" target=\"liuwanjun\"＞魔圖6＜/a＞＜/div＞＜/td＞

＜/tr＞

＜/table＞＜/body＞＜/html＞

注意事項：

1) 被調(diào)用的可以是HTML文件，也可以是ASP等動態(tài)網(wǎng)頁文檔，甚至文本文件。

2) Nestscape瀏覽器不支持Iframe標(biāo)記。

3 JS調(diào)用

JS調(diào)用是眾多網(wǎng)頁間調(diào)用方式中常用的一種方式。具體操作為將被調(diào)用的網(wǎng)頁文檔的主文檔部分（HTML文檔代碼標(biāo)記＜body＞與＜/body＞之間的部分）作為JavaScript腳本語言document對象的write方法的參數(shù)，然后將其保存為以.js為擴(kuò)展名的文件。

其語法格式為：

方式一＜script type=\"text/javascript\" src=\"js.js\"＞＜/script＞

方式二＜script language=\"javascript\"src=\"js/名稱\" ＞＜/script＞

下面以方式二為例舉例說明：

源文件（index.htm）：

＜!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"＞

＜html＞

＜head＞

＜meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\"＞

＜title＞網(wǎng)頁間的調(diào)用02＜/title＞

＜/head＞

＜body leftmargin=\"0\"＞

＜div align=\"center\"＞

＜font color=\"#0000FF\"＞本實例是通過JS腳本來實現(xiàn)網(wǎng)頁之間的調(diào)用＜/font＞

＜br＞

＜table width=\"778\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"＞

＜tr＞

＜td＞＜script language=\"JavaScript\" src=\"liuwanjun.js\"＞＜/script＞＜/td＞

＜/tr＞

＜/table＞

＜p＞關(guān)鍵代碼(紅字部分):＜td＞＜font color=\"#FF0000\"＞＜strong＞＜script language=\"JavaScript\"

src=\"yyvtc.js\"＞＜/script＞＜/strong＞＜/font＞＜/td＞＜/p＞

＜/div＞

＜/body＞

＜/html＞

被調(diào)用文件（yyvtc.js）：

document.write(\"＜table width='778' border='0' cellpadding='0' cellspacing='0'background='bg.jpg'＞＜tr＞＜td＞

＜o(jì)bject classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'

codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6，0，29，0' width='419' height='122'＞

＜param name='movie' value='hnyyny.swf'＞＜param name='quality' value='best'＞

＜param name='wmode' value='transparent'＞＜param name='menu' value='1'＞

＜embed src='hnyyny.swf' quality='high' type='application/x-shockwave-flash'

pluginspage='http://www.macromedia.com/go/getflashplayer'width='419'height='122'＞＜/embed＞＜/object＞＜/td＞＜/tr＞＜/table＞\")

注意事項：

用JavaScript腳本語言document對象的write方法來實現(xiàn)網(wǎng)頁之間的調(diào)用時，要注意兩點(diǎn)：

1) 方法內(nèi)的代碼不論多長只能寫一行。

2) 注意雙引號與單引號的使用。雙引號包含單引號，否則會出問題！即不能出現(xiàn)下列情形(雙引號里又嵌套包含雙引號)。

document.write(“＜td＞＜font size=”4”＞益陽職業(yè)技術(shù)學(xué)院＜/font＞＜/td＞”)

此外，HTML頁面編碼格式、HTML文件編碼格式和調(diào)用的JS編碼格式是否全部統(tǒng)一。如果你的頁面編碼格式和文件編碼格式?jīng)_突，調(diào)用常顯示顯示為亂碼。

4 對象標(biāo)記

＜o(jì)bject＞標(biāo)記用來在網(wǎng)頁中插入系統(tǒng)物件（系統(tǒng)模塊），〈object〉標(biāo)記不僅可以用來在頁面中插入ActiveX控件，還可以插入其他的OLE對象，如圖像、文檔、動畫、小程序等等。

其語法格式為：

＜o(jì)bject type=\"指定媒體類型\" width=\"寬\"height=\"高\(yùn)" data=\"被調(diào)用的網(wǎng)頁文件\"＞，它的各種屬性分別用來設(shè)定插入對象的類型、路徑、在頁面中顯示的大小、位置等。采用對象標(biāo)記＜o(jì)bject＞一樣可實現(xiàn)網(wǎng)頁之間的調(diào)用。

實例列舉：

＜html＞＜head＞＜title＞＜/title＞＜/head＞

＜body＞

＜o(jì)bject type=\"text/x-scriptlet\" width=\"600\"height=\"1000\" data=\"http://www.yyvtc.cn/\" ＞

＜/object＞＜P＞看到效果了嗎?＜/p＞

＜/body＞

＜/html＞

5 包含指令

在動態(tài)網(wǎng)頁（如ASP、CGI、PHP等）中，有好多時候在每一個網(wǎng)頁中都要使用同一重復(fù)的內(nèi)容。例如標(biāo)題、頁腳和導(dǎo)航欄等。此時，我們通常會考慮使用Include包含指令來實現(xiàn)網(wǎng)頁之間的調(diào)用。其最大的好處是修改被調(diào)用文件可對所有調(diào)用文檔做同步修改。

其語法格式為：

＜!--#include file=\"被調(diào)用的文件\" --＞

源文件（index.asp）：

＜html＞

＜head＞＜title＞包含指令實例＜/title＞＜/head＞

＜body＞

＜h1＞益陽職院奧運(yùn)戰(zhàn)報＞＞＜/h1＞

＜P＞＜!--#include file=\"news.txt\"--＞

＜/p＞

＜p＞新聞上次更新時間：＜!--#flastmod file=\"news.txt\"--＞

＜/p＞

＜/body＞

＜/html＞

被調(diào)用文件（news.txt）：

＜h2＞＜center＞ ＜font color=green＞第二十九屆奧林匹克運(yùn)動會在北京圓滿閉幕＜/font＞＜/center＞ ＜/h2＞＜hr align=center color=blue＞

＜center＞＜font size=3 color=red＞http://www.sohu.com 2008年08月25日03:10 搜狐2008奧運(yùn)＜/font＞＜/center＞

＜Font size=4 color=green＞＜p＞美新華網(wǎng)北京8月24日奧運(yùn)專電（記者 孫承斌汪涌高鵬）體壇盛會精彩閉幕，＜img align=left src=\"sa.gif\"＞奧運(yùn)圣火永存心中。第二十九屆奧林匹克運(yùn)動會閉幕式24日晚在國家體育場隆重舉行，來自各國各地區(qū)的運(yùn)動員、教練員和來賓在團(tuán)結(jié)、歡樂、和諧的氣氛中，共同慶祝北京奧運(yùn)會取得圓滿成功。＜p＞胡錦濤、江澤民、吳邦國、溫家寶等黨和國家領(lǐng)導(dǎo)人，國際奧委會主席羅格、終身名譽(yù)主席薩馬蘭奇，以及來自世界各地的領(lǐng)導(dǎo)人和貴賓出席閉幕式。＜p＞ 北京奧運(yùn)會是在奧林匹克運(yùn)動史上留下輝煌一頁的體育盛會。來自204個國家和地區(qū)的1萬余名運(yùn)動員在過去16天里挑戰(zhàn)極限、攀越新高，刷新了38項世界紀(jì)錄和85項奧運(yùn)會紀(jì)錄，多個國家和地區(qū)實現(xiàn)了奧運(yùn)會金牌和獎牌零的突破，奏響了更快、更高、更強(qiáng)的激情樂章，描繪了團(tuán)結(jié)、友誼、和平的壯麗畫卷。作為東道主的中國，為把北京奧運(yùn)會辦成一屆有特色、高水平的奧運(yùn)會作出了巨大努力，完善的比賽場館設(shè)施，出色的組織服務(wù)工作，贏得了奧林匹克大家庭和國際社會的廣泛好評。中國體育代表團(tuán)取得了51枚金牌、100枚獎牌的優(yōu)異成績，第一次名列奧運(yùn)會金牌榜首位，創(chuàng)造了中國體育代表團(tuán)參加奧運(yùn)會以來的最好成績 ＜p＞出席閉幕式的各國貴賓有：冰島總統(tǒng)格里姆松、多米尼克總統(tǒng)利物浦、芬蘭總統(tǒng)哈洛寧、瑞典國王卡爾十六世?古斯塔夫、澳大利亞總督杰弗里、比利時首相萊特姆、立陶宛總理基爾基拉斯、尼泊爾總理普拉昌達(dá)、多米尼克總理斯凱里特、拉脫維亞總理戈德馬尼斯、英國首相布朗、蒙古總理巴亞爾等。＜p＞國際奧委會、國際各單項體育聯(lián)合會負(fù)責(zé)人等出席閉幕式。＜/Font＞

注意事項：

1) 包含文件是動態(tài)的，不能是.html的，而被包含的網(wǎng)頁文件不做要求。如index.asp 包含default.asp 可以；index.asp 包含default.html 可以；index.shtml 包含default.shtml 可以；而default.html 包含index.asp 則不可以。

2) 包含指令可以包含文本文件（如上例中的＜--#include file=\"news.txt\"--＞）。

3) 在JSP中include有兩種形式，分別是

＜%@ include file=\"xxx.xxx\"%＞和＜jsp:include page=\"xxx.xxx\" flush=\"true\" /＞

其區(qū)別為前者是指令元素、后者是行為元素。

6 總結(jié)

網(wǎng)頁調(diào)用是網(wǎng)站建設(shè)過程中常用的表現(xiàn)手法和制作技巧，筆者在此列舉了幾種常見的實現(xiàn)途徑，不足之處還望后來者批評指正。

參考資料：

[1] 董明，李勁，周明濤.Dreamweaver 4案例教程[M].北京:中科多媒體電子出版社，2001.

[2] 楊正華.動態(tài)網(wǎng)頁設(shè)計案例教程[M].北京:中科多媒體電子出版社，2001.

[3] 肖金秀，馮沃輝，施鴻翔.JSP程序設(shè)計教程[M].北京:冶金工業(yè)出版社，2004.

[4] 唐紅亮，廖建華，秦戈亮.ASP動態(tài)網(wǎng)頁設(shè)計應(yīng)用教程[M].北京:電子工業(yè)出版社，2007.