HTML從入門(mén)到精通 第10章 框架結(jié)構(gòu)_第1頁(yè)
HTML從入門(mén)到精通 第10章 框架結(jié)構(gòu)_第2頁(yè)
HTML從入門(mén)到精通 第10章 框架結(jié)構(gòu)_第3頁(yè)
HTML從入門(mén)到精通 第10章 框架結(jié)構(gòu)_第4頁(yè)
HTML從入門(mén)到精通 第10章 框架結(jié)構(gòu)_第5頁(yè)
已閱讀5頁(yè)，還剩19頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第10章—F 框架結(jié)構(gòu)窗口框架簡(jiǎn)介設(shè)置框架集的基本屬性設(shè)置窗口屬性浮動(dòng)框架框架與鏈接框架的最主要功能是用來(lái)“分割”頁(yè)面窗口，使每個(gè)“小窗口”能顯示不同的HTML文件，這樣的頁(yè)面結(jié)構(gòu)就稱為框架結(jié)構(gòu)的頁(yè)面，而這些“小窗口”就被稱為框架的“窗口”?？梢哉f(shuō)框架就是將網(wǎng)頁(yè)畫(huà)面分成幾個(gè)窗口，同時(shí)取得多個(gè)URL。本章將詳細(xì)講解各種框架標(biāo)記的使用。窗口框架簡(jiǎn)介10.1.1什么是框架如果頁(yè)面可以分為幾個(gè)部分，各個(gè)部分之間是相互獨(dú)立的頁(yè)面，卻又互相有關(guān)聯(lián)，用戶在瀏覽這種頁(yè)面時(shí)，當(dāng)對(duì)其中某一部分進(jìn)行操作，如瀏覽、下載時(shí)，其他頁(yè)面會(huì)保持不變，這樣的頁(yè)面就被稱為框架結(jié)構(gòu)的頁(yè)面，也稱為多窗口頁(yè)面。實(shí)際上框架對(duì)象本身也是一類(lèi)窗口，它繼承了窗口對(duì)象的所有特征，并擁有所有的屬性和方法。使用框架最主要的目的就是創(chuàng)建鏈接的結(jié)構(gòu)，最常見(jiàn)的框架結(jié)構(gòu)就是將網(wǎng)站的導(dǎo)航條作為一個(gè)單獨(dú)的框架窗口，當(dāng)用戶查看具體的內(nèi)容時(shí)，導(dǎo)航條窗口保持不變，這就為用戶的瀏覽提供了方便?？蚣艿幕窘Y(jié)構(gòu)框架主要包含兩個(gè)部分，一個(gè)是框架集，另一個(gè)就是具體的框架文件?？蚣芗褪怯脕?lái)定義這一HTML文件為框架模式，并設(shè)定視窗如何分割的文件。通俗一點(diǎn)地說(shuō)框架集就是存放框架結(jié)構(gòu)的文件，也是訪問(wèn)框架文件的入口文件。如果網(wǎng)頁(yè)由左右兩個(gè)框架組成，那么除了左右兩個(gè)網(wǎng)頁(yè)文件之外，還有一個(gè)總的框架集文件?？蚣苁琼?yè)面中定義的每一個(gè)顯示區(qū)域，也可以說(shuō)一個(gè)窗口就是一個(gè)框架?？蚣茼?yè)面中最基本的內(nèi)容就是框架集文件，它是整個(gè)框架頁(yè)面的導(dǎo)航文件，其基本語(yǔ)法如下；<html><head>vtitle>框架頁(yè)面的標(biāo)題v/title></head><frameset><frame><frame></frameset></html>從上面的語(yǔ)法結(jié)構(gòu)中可以看到，在使用框架的頁(yè)面中，<body>主體標(biāo)記被框架標(biāo)記vframeset>所代替。而對(duì)于框架頁(yè)面中包含的每一個(gè)框架，都是通過(guò)vframe>標(biāo)記來(lái)定義的。設(shè)置框架集的基本屬性框架頁(yè)面的結(jié)構(gòu)也是在框架集文件中定義的，一般情況下，根據(jù)框架的分割方式來(lái)分類(lèi)，主要包含3種框架結(jié)構(gòu)，分別是：水平分割窗口。垂直分割窗口。嵌套分割窗口。下面對(duì)框架集的結(jié)構(gòu)和一些基本屬性進(jìn)行詳細(xì)的說(shuō)明。水平分割窗口 rows水平分割窗口是將頁(yè)面沿水平方向切割，也就是將頁(yè)面分成上下排列的多個(gè)窗口語(yǔ)法：vframesetrows="框架窗口的高度，框架窗口的高度, "><frame><frame></frameset>說(shuō)明：在該語(yǔ)法中，rows中可以取多個(gè)值，每個(gè)值表示一個(gè)框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。但是要注意的是，一般設(shè)定了幾個(gè)rows的值，就需要有幾個(gè)框架，即需要有相應(yīng)數(shù)量的vframe>參數(shù)。實(shí)例代碼：<html><head><title>水平分割窗口的效果</title></head><framesetrows="30%,70%"><frame><frame></frameset></html>運(yùn)行代碼，可以看到頁(yè)面被分割成上下兩個(gè)窗口，效果如圖10-1所示。當(dāng)瀏覽器大小變化時(shí)，框圖10-1水平分割窗口垂直分割窗口——cols垂直分割窗口就是將頁(yè)面沿垂直方向分割成多個(gè)窗口，也就是將頁(yè)面分成左右排列的多個(gè)窗口語(yǔ)法：vframesetcols="框架窗口的寬度，框架窗口的寬度,……"><frame><frame></frameset>說(shuō)明：在該語(yǔ)法中，cols中可以取多個(gè)值，每個(gè)值表示一個(gè)框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。與水平分割窗口相同，一般設(shè)定了幾個(gè)cols的值，就需要有幾個(gè)框架，也就是有幾個(gè)<frame〉參數(shù)。實(shí)例代碼：<html><head>[1H計(jì)州11口IFia-H IMernetLHpkfcrn1卜店出--*J啟為氏曲血收射溯MSi址腦1>4申3犢訥昭5併V叫妙肘nJ111<title>垂直分割窗口的效果</title></head><framesetcols="20%,55%,25%"><frame><frame><frame></frameset></html>運(yùn)行代碼，可以看到頁(yè)面被分割成3個(gè)窗口，其中左右兩個(gè)寬度相同，效果如圖10-2所示。當(dāng)瀏覽器大小變化時(shí)，框架也會(huì)隨之 圖10-2垂直分割窗口等比例縮放。嵌套分割窗口嵌套分割窗口就是在一個(gè)頁(yè)面中，既有水平分割的框架，又有垂直分割的框架語(yǔ)法：vframesetrows="框架窗口的高度，框架窗口的高度, "><frame>vframesetcols="框架窗口的寬度，框架窗口的寬度,……">vframe>vframe>v/frameset>

?180?HTML?180?HTML網(wǎng)頁(yè)設(shè)計(jì)參考手冊(cè)</frameset>當(dāng)然，也可以先進(jìn)行垂直分割，再進(jìn)行水平分割。其語(yǔ)法如下：vframesetcols="框架窗口的寬度，框架窗口的寬度,……"><frame>vframesetrows="框架窗口的高度，框架窗口的高度, "><frame>vframe>v/frameset>vframe>v/frameset>這兩種結(jié)構(gòu)的原理與注意事項(xiàng)和另外兩種結(jié)構(gòu)相同，主要是需要注意窗口大小的設(shè)置與窗口個(gè)數(shù)的統(tǒng)一。實(shí)例代碼：<html><head><title>嵌套分割窗口的效果</title></head><framesetrows="30%,70%"><frame><framesetcols="20%,55%,25%"><frame><frame><frame></frameset></frameset></html>由代碼可以看出，首先將頁(yè)面進(jìn)行水平分割成上下兩個(gè)窗口，接著下面的框架又被垂直分割成個(gè)窗口。因此下面的框架標(biāo)記<frame>被框架集標(biāo)記己代替。運(yùn)行程序，效果如圖10-3所示。個(gè)窗口。勺由遼" i?Hft/￡)?」〔?」甲島14―2穴問(wèn)設(shè)置邊框 frameborder由前面的幾個(gè)實(shí)例可以看出，在默認(rèn)情況下，框架窗口的四周有一條邊框線，通過(guò)frameborder參數(shù)可以調(diào)整邊框線的顯示情況。語(yǔ)法：vframesetframeborder="是否顯示"〉或vframeframeborder="是否顯示"〉說(shuō)明：frameborder的取值只能為0或1。如果取值為0，那么邊框線將會(huì)被隱藏；如果取值為1邊框線將會(huì)顯示。在frameset中設(shè)置將會(huì)對(duì)整個(gè)框架有效，在frame中設(shè)置則只對(duì)當(dāng)前這個(gè)框架有效實(shí)例代碼：<html><head><title>設(shè)置框架窗口的邊框顯示效果</title></head><framesetrows="20%,55%,25%"><frameframeborder="1"><framesetcols="35%,65%"frameborder="0"><frame><frame></frameset><frameframeborder="0"></frameset></html>變成運(yùn)行這段代碼，可以看到頁(yè)面中的部分邊框被隱藏，如圖10-4所示。當(dāng)鼠標(biāo)移動(dòng)到窗口中間時(shí)會(huì)變成圖10-5按下鼠標(biāo)的效果按下鼠標(biāo)會(huì)看到隱藏的邊框，如圖10-5圖10-5按下鼠標(biāo)的效果疋件歸刪*他XM<L'衆(zhòng)現(xiàn)”"J*- ，彳，必固力豐"jJ收找典也秋￥|町Eh'ifec心01RnA矗盤(pán)件UgAtfr圖10-4隱藏框架的邊框框架的邊框?qū)挾?framespacing框架的邊框?qū)挾仍谀J(rèn)情況下是1像素，通過(guò)參數(shù)framespacing可以調(diào)整其大小。語(yǔ)法：vframesetframespacing="邊框?qū)挾?〉說(shuō)明：邊框?qū)挾染褪窃陧?yè)面中各個(gè)邊框之間的線條寬度，以像素為單位。而這一參數(shù)只能對(duì)框架集使用，對(duì)單個(gè)框架無(wú)效。

實(shí)例代碼：<html><head><title>設(shè)置框架的邊框?qū)挾?lt;/title></head>圖10-6設(shè)置框架的邊框?qū)挾葓D10-6設(shè)置框架的邊框?qū)挾?lt;frame><framesetcols="20%,55%,25%"framespacing="30"><frame><frame><frame></frameset></frameset></html>運(yùn)行這段程序，效果如圖10-6所示?？蚣艿倪吙蝾伾?bordercolor使用參數(shù)bordercolor可以設(shè)置框架集的邊框顏色。語(yǔ)法：vframesetbordercolor="顏色代碼"〉說(shuō)明：該參數(shù)同樣只對(duì)整個(gè)框架集有效，對(duì)于單個(gè)框架無(wú)效實(shí)例代碼：<html><head><title>設(shè)置框架的邊框顏色</title></head><framesetrows="30%,70%"framespacing="10"bordercolor="#CC99FF"><frame><framesetcols="20%,55%,25%"framespacing="30"bordercolor=<frame><frame><frame></frameset></frameset></html>運(yùn)行這段代碼，可以看到兩個(gè)框架集設(shè)置了不同的邊框顏色，效果如圖10-7所示。圖圖10-7設(shè)置邊框顏色設(shè)置窗口屬性在框架結(jié)構(gòu)的頁(yè)面中，每一個(gè)框架窗口都有一個(gè)顯示頁(yè)面，這個(gè)頁(yè)面稱為框架頁(yè)面?？蚣茼?yè)面的屬性設(shè)置都在<frame〉標(biāo)記里進(jìn)行。頁(yè)面源文件 src框架結(jié)構(gòu)中的各個(gè)頁(yè)面都是一個(gè)單獨(dú)的文件，而這些文件是通過(guò)src參數(shù)進(jìn)行設(shè)置的。語(yǔ)法：vframesrc="頁(yè)面源文件地址"〉說(shuō)明：頁(yè)面文件是框架頁(yè)面的具體內(nèi)容所在，對(duì)于沒(méi)有設(shè)置源文件的框架，只是空白頁(yè)面，是沒(méi)有任何作用的。頁(yè)面的源文件可以是正常的HTML文件，也可以是一個(gè)圖片或者其他的文件為了說(shuō)明框架的參數(shù)效果，首先設(shè)置一個(gè)框架頁(yè)面的內(nèi)容，代碼如下：<html><head><title>段落的縮進(jìn)效果</title></head><body>相傳，兩千五百年前，春秋時(shí)期的大音樂(lè)家俞伯牙，曾學(xué)琴于程廉先生，三年不成。后來(lái)他沿著孔子的足跡登游泰山，<blockquote>觀東海日出，看云霧變化，</blockquote><blockquotexblockquote>聞松風(fēng)長(zhǎng)嘯，聽(tīng)水濤咆哮，</blockquotex/blockquote><blockquotexblockquotexblockquote>拜大自然為師，琴藝大有長(zhǎng)進(jìn)，</blockquote></blockquote></blockquote><blockquote><blockquote><blockquote><blockquote>寫(xiě)出了著名的古琴曲高山和流水。</blockquote></blockquote></blockquote></blockquote></body></html>將這一文件命名為src01.html，將其保存在框架集文件的同一目錄下，然后再設(shè)置框架集文件的代碼如下：<html><head><title>設(shè)置頁(yè)面源文件</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"><framesrc="src01.html"></frameset></html>運(yùn)行這段代碼，效果如圖10-8所示圖10-8設(shè)置頁(yè)面的源文件?184?HTML?184?頁(yè)面名稱 name頁(yè)面名稱是為了便于頁(yè)面的查找和鏈接所提供的一個(gè)屬性?？蚣艿捻?yè)面名稱中不允許包含特殊字符、連字符-、空格等，必須是單個(gè)的單詞或者字母組合。語(yǔ)法：vframesrc="頁(yè)面文件地址"name="頁(yè)面名稱"〉實(shí)例代碼：<html><head><title>設(shè)置頁(yè)面名稱</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"name="pic"><framesrc="src01.html"name="text"></frameset></html>這段代碼分別為上下兩個(gè)框架頁(yè)面命名為pic和text，運(yùn)行代碼時(shí)并不會(huì)顯示框架名，因此不會(huì)影響框架的顯示效果。調(diào)整窗口的尺寸 noresize由圖10-5可以看出，當(dāng)用鼠標(biāo)拖動(dòng)框架的邊框時(shí)，框架窗口的尺寸就會(huì)隨之變化。如果希望框架窗口的大小保持不變，可以設(shè)置noresize參數(shù)。語(yǔ)法：vframesrc="頁(yè)面文件地址"noresize>說(shuō)明：在frame標(biāo)記中添加noresize參數(shù)，就表示框架窗口的尺寸不能改變。實(shí)例代碼：尊書(shū)we■口mx酉-匾j-mwtdw扈昨antu 尊書(shū)we■口mx酉-匾j-mwtdw扈昨antu 工取砂用2此大n誥為鄧琴誥丈焉桶寫(xiě)出t睪雖同占卻悲蕪山聞養(yǎng)弗」J空 上旳!匡占?曰J‘廣」 ?」■■■■1^：A□Itltd回 Tt和啦:s&e?苗榴傳.曲千直乃即IK.存牧?xí)r則的煒疾玄啟曲好.曾辛龍于柑廉先住三即慕股”盂來(lái)池甫辛禮卡的足悝餐廚泰山*現(xiàn)眾海巳出看盍『空憂.<head><title>禁止改變框架窗口的尺寸</title></head><framesetrows="30%,70%"><framesrc="pic01.gif"name="pic"noresize><framesrc="src01.html"name="text"></frameset></html>所示。運(yùn)行這段代碼后，將鼠標(biāo)放置在框架邊框上時(shí)，光標(biāo)不會(huì)變?yōu)殡p箭頭形狀，也無(wú)法拖動(dòng)框架的邊框，如圖10-9所示。圖10-9禁止調(diào)整窗口尺寸?185?第10?185?邊框與頁(yè)面內(nèi)容的水平邊距 marginwidth框架頁(yè)面與HTML中的表格一樣，也可以設(shè)置邊框與頁(yè)面內(nèi)容的水平邊距。語(yǔ)法：vframesrc="頁(yè)面文件地址"marginwidth="水平邊距">說(shuō)明：水平邊距用于設(shè)置頁(yè)面的左右邊緣與框架邊框的距離，單位是像素。首先創(chuàng)建一個(gè)src02.html頁(yè)面，代碼如下：<html><head><title>設(shè)置水平邊距</title></head><body><br><h3xfontcolor="#009933">美麗的江南小鎮(zhèn)</fontx/h3><hr><fontcolor="#009966"><br>穿鎮(zhèn)而過(guò)的狹窄河道，一座座雕刻精致的石橋，傍河而筑的民居，民居樓板底下就是水，石階的埠頭從樓板下一級(jí)級(jí)伸出來(lái)，女人正在埠頭上浣洗，而離他們只有幾尺遠(yuǎn)的烏蓬船上正升起一縷白白的炊煙，炊煙穿過(guò)橋洞飄到對(duì)岸，對(duì)岸河邊有又低又寬的石欄，可坐可躺，幾位老人滿臉寧?kù)o地坐在那里看著過(guò)往船只。比之于沈從文筆下的湘西河邊由吊腳樓組成的小鎮(zhèn)，江南小鎮(zhèn)少了那種渾樸奇險(xiǎn)，多了一點(diǎn)暢達(dá)平穩(wěn)。它們的前邊沒(méi)有險(xiǎn)灘，后邊沒(méi)有荒漠，因此雖然幽僻卻談不上什么氣勢(shì)；它們大多很有一些年代了，但始終比較滋潤(rùn)的生活方式并沒(méi)有讓它們保留下多少?gòu)U墟和遺跡，因此也聽(tīng)不出多少歷史的浩嘆；它們當(dāng)然有過(guò)升沉榮辱，但實(shí)在也未曾擺出過(guò)太堂皇的場(chǎng)面，因此也不容易產(chǎn)生類(lèi)似于朱雀橋、烏衣巷的滄桑之慨?？傊?，它們的歷史路程和現(xiàn)實(shí)風(fēng)貌都顯得平實(shí)而耐久，狹窄而悠久，就像經(jīng)緯著它們的條條石板街道。</font></body></html>創(chuàng)建框架頁(yè)面集代碼如下：<html><head><title>設(shè)置水平邊距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"marginwidth="70"></frameset></html>運(yùn)行這段代碼，可以看到右側(cè)的框架頁(yè)面中，文本內(nèi)容與框架的邊框之間設(shè)置了很大的空間，從而顯得寬松很多，如圖10-10所示。圖10-10設(shè)置水平邊距?186?HTML?186?邊框與頁(yè)面內(nèi)容的垂直邊距 marginheight與水平邊距類(lèi)似，通過(guò)marginheight參數(shù)可以設(shè)置邊框與頁(yè)面的垂直邊距。語(yǔ)法：vframesrc="頁(yè)面文件地址"marginheight="垂直邊距">說(shuō)明：垂直邊距用來(lái)設(shè)置頁(yè)面的上下邊緣與框架邊框的距離，單位是像素。實(shí)例代碼：<html><head><title>設(shè)置垂直邊距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"marginwidth="70"marginheight="90"></frameset></html>運(yùn)行這段代碼，可以看到右側(cè)的框架頁(yè)面中，文本內(nèi)容與框架的上下邊框之間設(shè)置了很大的空間，如圖10-11所示。.刪曲回p.g啊3垃沖悶.1如圖10-11所示。.刪曲回p.g啊3垃沖悶.1[BflrgrWdtH^亙盧丹睥俺麗帕杠雨小ifl鞅匡圾低白萼?妊凹柑板i￡商峽，?|過(guò)曲MU一而2*叩雀同I■一居下?柱対坐*書(shū)I亠匡毆i*.汁列可?一占E?'-的■醫(yī)A上上fi^TtT_河^■前^TFh■■s.:LTI]'Fru?的君乂〒*狂|<石人.哥以攸融卞：碗-ffr，女曲y制叵蘭%-n^^.^比-佈檢利.気有就鋰毛'■U也祗E鞏的甬訂口壯牙嵯下*門(mén)口.*口能一圖10-11設(shè)置垂直邊距的效果10.3.6設(shè)置框架滾動(dòng)條顯示——scrolling在默認(rèn)情況下，當(dāng)頁(yè)面的內(nèi)容超出瀏覽器窗口的大小時(shí)，頁(yè)面會(huì)自動(dòng)添加滾動(dòng)條以方便用戶瀏覽。但是有時(shí)用戶希望不顯示滾動(dòng)條，這可以通過(guò)設(shè)置scrolling參數(shù)來(lái)實(shí)現(xiàn)。語(yǔ)法：vframesrc="頁(yè)面源文件"scrolling—'是否顯示滾動(dòng)條"〉說(shuō)明：scrolling參數(shù)在這里只能取Yes、No或Auto三個(gè)值中的一個(gè)。其中，Yes表示一直顯示滾動(dòng)條，而No則表示無(wú)論什么情況都不顯示滾動(dòng)條；Auto是系統(tǒng)的默認(rèn)值，它是根據(jù)具體內(nèi)容來(lái)調(diào)整的，也就是說(shuō)當(dāng)頁(yè)面長(zhǎng)度超出瀏覽器窗口的范圍時(shí)就會(huì)自動(dòng)顯示滾動(dòng)條。實(shí)例代碼：<html><head>

<title>設(shè)置垂直邊距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"scrolling="Yes"><framesrc="src02.html"name="text"marginwidth="70"marginheight="90"scrolling="No"></frameset></html>圖10-12設(shè)置滾動(dòng)條的效果運(yùn)行這段代碼，可以看到如圖10-12所示的效果。與圖10-11相對(duì)比，可以看出設(shè)置scrolling為Yes時(shí)，即使頁(yè)面內(nèi)容遠(yuǎn)遠(yuǎn)小于瀏覽器的大小，也會(huì)顯示滾動(dòng)條；而當(dāng)scrolling設(shè)置為No時(shí)，即使內(nèi)容超出了瀏覽器的范圍，也沒(méi)有顯示滾動(dòng)夂圖10-12設(shè)置滾動(dòng)條的效果不支持框架標(biāo)記 noframes對(duì)于一些低版本的瀏覽器來(lái)說(shuō)，如果不支持框架結(jié)構(gòu)就無(wú)法打開(kāi)框架頁(yè)面，但這樣還不夠，因?yàn)樗⒉磺宄槭裁创虿婚_(kāi)頁(yè)面。通過(guò)noframes參數(shù)可以設(shè)置一些內(nèi)容（包括文字或圖片）來(lái)告訴瀏覽者其瀏覽器無(wú)法打開(kāi)框架頁(yè)面。語(yǔ)法：<html><head>vtitle>框架頁(yè)面的標(biāo)題v/title></head><frameset><frame><frame><noframe></noframe></frameset></html>說(shuō)明：在該語(yǔ)法中，<noframe>和</noframe>標(biāo)記之間的部分就是在不支持框架的瀏覽器中所要顯示的內(nèi)容。它可以與vbody>標(biāo)記一樣添加內(nèi)容。實(shí)例代碼：<html><head><title>設(shè)置水平邊距</title></head><framesetcols="35%,65%"><framesrc="pic02.jpg"name="pic"><framesrc="src02.html"name="text"><noframe>對(duì)喬起.您的瀏覽器不直持世裂更麗，囚此無(wú)法那不此更而i<center>對(duì)喬起.您的瀏覽器不直持世裂更麗，囚此無(wú)法那不此更而i<p>對(duì)不起，您的瀏覽器不支持框架頁(yè)面，因此無(wú)法顯示此頁(yè)面！</p>nuu<imgsrc="pic03.jpg">nuu</center></noframe></frameset>運(yùn)行這段代碼后，當(dāng)用戶的瀏覽器不支持框架結(jié)構(gòu)時(shí)，就是直接顯示<noframe>標(biāo)記內(nèi)如圖10-13所示的頁(yè)面內(nèi)容。 圖10-13顯示<noframe>標(biāo)記內(nèi)的內(nèi)容浮動(dòng)框架浮動(dòng)框架是一種較為特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個(gè)頁(yè)面并不是框架頁(yè)面，但是卻包含一個(gè)框架窗口，在框架窗口內(nèi)顯示相應(yīng)的頁(yè)面內(nèi)容。語(yǔ)法：<iframe頁(yè)面源文件"><iframe頁(yè)面源文件"></iframe>說(shuō)明?與普通框架結(jié)構(gòu)類(lèi)似，浮動(dòng)框架也可以設(shè)置很多參數(shù)，見(jiàn)表10-1表10-1浮動(dòng)框架的參數(shù)設(shè)置浮動(dòng)框架可以設(shè)置的參數(shù) 參數(shù)的含義 src 浮動(dòng)框架頁(yè)面的源文件地址width浮動(dòng)框架在頁(yè)面中顯示的寬度 height 浮動(dòng)框架在頁(yè)面中顯示的高度 浮動(dòng)框架頁(yè)面在瀏覽器中的對(duì)齊方式 可以為左allgll對(duì)齊、右對(duì)齊或居中對(duì)齊 name設(shè)定框架頁(yè)面的名稱marginwidth 設(shè)置頁(yè)面與邊框的水平間距marginheight 設(shè)置頁(yè)面與邊框的垂直間距續(xù)表浮動(dòng)框架可以設(shè)置的參數(shù)參數(shù)的含義scrolling設(shè)定浮動(dòng)框架頁(yè)面內(nèi)是否顯示滾動(dòng)條frameborder 設(shè)定浮動(dòng)框架的邊框從表10-1中可以看出，很多普通框架頁(yè)面的屬性在浮動(dòng)框架頁(yè)面中同樣適用，例如name、scrolling等，而在普通框架中只對(duì)框架集有效的一些參數(shù)在這里同樣可以設(shè)置，如frameborder等，此外浮動(dòng)框架頁(yè)面還可以設(shè)置大小和對(duì)齊方式。而對(duì)于浮動(dòng)框架來(lái)說(shuō)，框架邊框的寬度和顏色是無(wú)法設(shè)置的，即與普通框架相比，浮動(dòng)框架中不包含framespacing和bordercolor參數(shù)。本節(jié)將主要通過(guò)設(shè)置框架頁(yè)面的參數(shù)和不設(shè)置進(jìn)行對(duì)比，從而清晰地說(shuō)明各個(gè)參數(shù)的功能。為了達(dá)到這一目的，需要進(jìn)行如下的準(zhǔn)備工作：創(chuàng)建兩個(gè)普通的HTML頁(yè)面，其中一個(gè)作為浮動(dòng)框架的載體，命名為float.htm1;另一個(gè)作為浮動(dòng)框架頁(yè)面的源文件，命名為source.html。float.html文件的源代碼如下：<html><head><title>未添加浮動(dòng)框架的頁(yè)面</title〉</head><body><fontsize="5"color="#CCOOOO">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2></body></html>source.htm1文件的源代碼如下：<html><head><title>浮動(dòng)框架的頁(yè)面內(nèi)容</title></head><body><fontsize="5"color="#000099">經(jīng)典影片：魂斷藍(lán)橋</fontxbrxbr><imagesrc="pic04.jpg"align="left">《魂斷藍(lán)橋》作為電影史上三大凄美不朽愛(ài)情影片之一，是一部蕩氣回腸的愛(ài)情經(jīng)典之作，內(nèi)容雖有些傳奇化，但文藝氣息濃厚，具有甚高的催淚效果。<br>《魂斷藍(lán)橋》（又名《滑鐵盧橋》）是一部風(fēng)靡全球近半個(gè)世紀(jì)的美國(guó)愛(ài)情故事片，也是西方電影在東方獲得成功的經(jīng)典。<br><hr>劇情介紹：<br>一次偶然的機(jī)會(huì)，芭蕾舞女演員瑪亞在滑鐵盧橋邂逅了高級(jí)軍官羅伊。由于戰(zhàn)爭(zhēng)的原因，兩人決定馬上結(jié)婚，但就在婚禮即將舉行的前一天晚上，羅伊接到命令，部隊(duì)當(dāng)晚開(kāi)拔?，攣啛o(wú)意中看到了羅伊的名字在陣亡名單中。此時(shí)羅伊的母親來(lái)看她，盡管這位貴夫人非常和藹可親，但此時(shí)的瑪亞已情緒混亂、言語(yǔ)無(wú)禮、不知所云。為了維持生活，瑪亞和她的好友都淪為街頭應(yīng)招女郎。羅伊并沒(méi)有死，他回來(lái)了?，攣喌脑庥鍪顾裏o(wú)法面對(duì)與羅伊的婚姻及羅伊家族的顯赫地位。她來(lái)到滑鐵盧橋，毫無(wú)畏懼地向一輛輛飛馳的軍車(chē)走去。</body></html>完成了兩個(gè)頁(yè)面文件之后，下面開(kāi)始設(shè)置浮動(dòng)框架頁(yè)面的內(nèi)容。?190?HTML?190?必需參數(shù)：頁(yè)面源文件 src浮動(dòng)框架中最基本的參數(shù)就是src,它用來(lái)設(shè)置浮動(dòng)框架頁(yè)面的源文件地址，也是浮動(dòng)框架頁(yè)面必需的參數(shù)。因?yàn)橹挥性O(shè)置了源文件的內(nèi)容，浮動(dòng)框架才有意義。語(yǔ)法：viframesrc="頁(yè)面源文件"〉下面將文件source.html作為浮動(dòng)框架頁(yè)面的源文件插入到HTML文件float.html中，實(shí)例代碼如下<html><head><title>添加浮動(dòng)框架的頁(yè)面</title〉</head><body><fontsize="5"color="#CCOOOO">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2><iframesrc="source.html"></iframe></body></html>運(yùn)行程序，效果如圖10-14所示在這一個(gè)頁(yè)面中榕士誘孤一個(gè)存動(dòng)眶架頁(yè)而經(jīng)麹越片：魂斷譽(yù)橋運(yùn)行程序，效果如圖10-14所示在這一個(gè)頁(yè)面中榕士誘孤一個(gè)存動(dòng)眶架頁(yè)而經(jīng)麹越片：魂斷譽(yù)橋圖10-14在頁(yè)面中添加浮動(dòng)框架頁(yè)面下面介紹在浮動(dòng)框架頁(yè)面中可以設(shè)置的一些框架頁(yè)面不能設(shè)置的參數(shù)，稱為浮動(dòng)框架特有參數(shù)主要包括框架的頁(yè)面大小以及對(duì)齊方式。特有屬性：大小 width和height在普通框架結(jié)構(gòu)中，由于框架就是整個(gè)瀏覽器窗口，因此不需要設(shè)置其大小。但是在浮動(dòng)框架中，框架是插入到普通HTML頁(yè)面中的，所以可以調(diào)整整個(gè)框架的大小。語(yǔ)法：viframesrc="浮動(dòng)框架頁(yè)面源文件"width="頁(yè)面寬度"height="頁(yè)面高度"〉說(shuō)明：在該語(yǔ)法中，頁(yè)面的寬度和高度值都以像素為單位。下面在float.html文件的基礎(chǔ)上設(shè)置浮動(dòng)框架頁(yè)面的大小，實(shí)例代碼如下：<html><head>

<title>設(shè)置框架頁(yè)面的大小</title〉</head>圖10-15調(diào)整浮動(dòng)框架頁(yè)面的大小圖10-15調(diào)整浮動(dòng)框架頁(yè)面的大小<fontsize="5"color="#CCOOOO">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2><iframesrc="source.html"width="550"height="310"></iframe></body></html>運(yùn)行這段代碼，效果如圖10-15所示，與圖10-14相對(duì)比，可以看到頁(yè)面中的框架大小被調(diào)整得更加協(xié)調(diào)。特有屬性：對(duì)齊方式 align除了設(shè)置框架大小的參數(shù)之外，設(shè)置框架的對(duì)齊方式也是浮動(dòng)框架頁(yè)面所特有的參數(shù)。語(yǔ)法：viframesrc="浮動(dòng)框架頁(yè)面源文件"align—對(duì)齊方式"〉說(shuō)明：在該語(yǔ)法中，對(duì)齊方式用來(lái)設(shè)置浮動(dòng)框架頁(yè)面相對(duì)于瀏覽器窗口的水平位置。它可以取的值包括左對(duì)齊left、右對(duì)齊right和居中對(duì)齊center。下面在float.html文件的基礎(chǔ)上設(shè)置浮動(dòng)框架頁(yè)面的對(duì)齊方式，實(shí)例代碼如下：<html><head><title>設(shè)置對(duì)齊方式</title></head><body><fontsize="5"color="#CC0000">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"></iframe></body></html>運(yùn)行這段代碼，效果如圖10-16所示，與圖10-15相對(duì)比，可以看到頁(yè)面中的框架位置被調(diào)整，由圖10-16設(shè)置對(duì)齊方式共有參數(shù)設(shè)置普通框架頁(yè)面和浮動(dòng)框架頁(yè)面所共有的一些參數(shù)稱為浮動(dòng)框架的基本屬性，主要包括src、name、marginwidth、marginheight和scrolling。由于這些參數(shù)的設(shè)置方法與普通框架類(lèi)似，因此下面通過(guò)一個(gè)實(shí)例簡(jiǎn)單介紹。對(duì)于具體的參數(shù)可以參照10.3節(jié)的內(nèi)容。語(yǔ)法：viframe浮動(dòng)框架頁(yè)面源文件"name="頁(yè)面名稱"marginwidth="邊框與頁(yè)面的水平距離”marginheight="邊框與頁(yè)面的垂直距離"scrolling—，是否顯示滾動(dòng)條"〉v/iframe>說(shuō)明：在這里，這些參數(shù)的取值范圍與普通框架相同，因此不再重復(fù)，只通過(guò)下面的實(shí)例說(shuō)明這些屬性的設(shè)置效果。實(shí)例代碼：<html><head><title>設(shè)置框架的共有參數(shù)</title></head><body><fontsize="5"color="#CC0000">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"name="public"marginwidth="60"marginheight="40"scrolling="No"></iframe></body></html>運(yùn)行這段代碼，對(duì)比圖10-16，可以看到框架頁(yè)面的內(nèi)容與邊框增加了一定的空間，而且在頁(yè)面中雖然無(wú)法顯示全部的內(nèi)容，但是并沒(méi)有出現(xiàn)滾動(dòng)條，如圖10-17所示。其他參數(shù) frameborder在浮動(dòng)框架頁(yè)面中，還有另外一個(gè)特殊的參數(shù)可以設(shè)置，即框架邊框顯示屬性frameborder。在普通框架中，該參數(shù)既對(duì)整個(gè)框架集有效，也對(duì)單個(gè)框架有效。同樣地，在浮動(dòng)框架中也可以設(shè)置這一參數(shù)。語(yǔ)法：viframe浮動(dòng)框架頁(yè)面源文件"frameborder="是否顯示"〉</iframe>說(shuō)明：在這里，這些參數(shù)的取值范圍與普通框架相同。其中src是浮動(dòng)框架的頁(yè)面源文件；frameborder只能取0或1，0表示不顯示邊框，1為默認(rèn)取值，表示顯示邊框。下面只通過(guò)一個(gè)實(shí)例說(shuō)明這些屬性的設(shè)置效果。實(shí)例代碼：<html><head><title>設(shè)置框架頁(yè)面的邊框</title></head><body><fontsize="5"color="#CC0000">在這一個(gè)頁(yè)面中將會(huì)添加一個(gè)浮動(dòng)框架頁(yè)面</font><hrsize=2><iframesrc="source.html"width="550"height="310"align="center"name="public"marginwidth="60"marginheight="40"scrolling="No"frameborder="0"></iframe></body></html>運(yùn)行這段代碼，對(duì)比圖10-16，可以看到浮動(dòng)框架的頁(yè)面邊框不見(jiàn)了，如圖10-18所示?？蚣芘c鏈接大部分情況下，在頁(yè)面中添加框架是為了更好地對(duì)頁(yè)面內(nèi)容進(jìn)行導(dǎo)航，因此常常是通過(guò)框架進(jìn)行鏈接不同的內(nèi)容。對(duì)于框架頁(yè)面來(lái)說(shuō)，設(shè)置頁(yè)面的鏈接需要使用target參數(shù)，這一參數(shù)的取值不同于它在普通HTML頁(yè)面中的取值，下面進(jìn)行具體的介紹。10.5.1設(shè)置普通框架結(jié)構(gòu)的鏈接普通的框架結(jié)構(gòu)之間通過(guò)target參數(shù)互相鏈接起來(lái)。一般情況下，一個(gè)頁(yè)面中會(huì)有一個(gè)框架窗口作為導(dǎo)航頁(yè)面，里面添加了對(duì)另外一個(gè)框架的內(nèi)容的鏈接設(shè)置，而這些鏈接則是通過(guò)target實(shí)現(xiàn)的。下面通過(guò)一個(gè)具體的實(shí)例來(lái)講解關(guān)于框架之間的鏈接方法。首先需要設(shè)定一個(gè)框架集文件，用于確定框架頁(yè)面的整體布局，這里將文件命名為19layout.html。19layout.html的實(shí)例代碼如下：<html><head><title>框架頁(yè)面的整體結(jié)構(gòu)</title></head><framesetrows="150,*"><framesrc="navig.html"name="navig"scrolling="No"noresize><framesrc="content-1.html"name="content"></frameset></html>此處按照常見(jiàn)網(wǎng)站的上下結(jié)構(gòu)進(jìn)行布局，將頁(yè)面上面的框架窗口設(shè)置為150像素高，下面的窗口則分割剩下的部分。在該文件中，設(shè)置了上面的框架窗口頁(yè)面為導(dǎo)航頁(yè)面，命名為navig,同時(shí)設(shè)置其默認(rèn)打開(kāi)的頁(yè)面名為navig.htm1。同時(shí)還設(shè)置該頁(yè)面窗口不顯示滾動(dòng)條，而且不允許調(diào)整窗口大小。在該文件中還設(shè)置了下面的框架窗口為內(nèi)容頁(yè)面，命名為content，設(shè)置默認(rèn)打開(kāi)的頁(yè)面名content-1.html。下面就介紹這兩個(gè)文件的具體編碼。其中，navig.htm1文件將放置在框架的上方，作為頁(yè)面的導(dǎo)航頁(yè)，其代碼如下：<html><head><title>導(dǎo)航頁(yè)面</title></head><body><center><imgsrc="pic05.jpg"><br><br><ahref="content-1.html"target="content">白蛇傳</a>        <ahref="content-2.html"target="content">梅妻鶴子<倫>        <ahref="content-3.html"target="content">菊花仙子<倫></center></body></html>在這個(gè)文件代碼中‘target的值是設(shè)置將要顯示頁(yè)面內(nèi)容的框架名稱，此處設(shè)置為content,說(shuō)明設(shè)置的這3個(gè)內(nèi)容頁(yè)面將在content框架窗口中顯示。content-1.html文件是默認(rèn)的內(nèi)容頁(yè)面，其代碼如下：<html><head><title>內(nèi)容頁(yè)面</title></head><body><center><fontsize=5>白蛇傳</font><br><br></center>    清明時(shí)分，西湖岸邊花紅柳綠，斷橋上面游人如梭，真是一幅春光明媚的美麗畫(huà)面。突然，從西湖底悄悄升上來(lái)兩個(gè)如花似玉的姑娘，怎么回事？人怎么會(huì)從水里出來(lái)呢？原來(lái)，她們是兩條修煉成了人形的蛇精，雖然如此，但她們并無(wú)害人之心，只因羨慕世間的多彩人生，才一個(gè)化名叫白素貞，一個(gè)化名叫小青，來(lái)到西湖邊游玩。<br>    偏偏老天爺忽然發(fā)起脾氣來(lái)，霎時(shí)間下起了傾盆大雨，白素貞和小青被淋得無(wú)處藏身，正發(fā)愁呢，突然只覺(jué)頭頂多了一把傘，轉(zhuǎn)身一看，只見(jiàn)一位溫文爾雅、白凈秀氣的年輕書(shū)生撐著傘在為她們遮雨。白素貞和這小書(shū)生四目相交，都不約而同地紅了紅臉，相互產(chǎn)生了愛(ài)慕之情。小青看在眼里，忙說(shuō)：“多謝！請(qǐng)問(wèn)客官尊姓大名?！蹦切?shū)生道：“我叫許仙，就住在這斷橋邊。”白素貞和小青也趕忙作了自我介紹。從此，他們?nèi)顺３Ｒ?jiàn)面，白素貞和許仙的感情越來(lái)越好，過(guò)了不久，他們就結(jié)為夫妻，并開(kāi)了一間“保和堂”藥店，小日子過(guò)得可美了！<br>    由于"保和堂"治好了很多很多疑難病癥，而且給窮人看病配藥還分文不收，所以藥店的生意越來(lái)越紅火，遠(yuǎn)近來(lái)找白素貞治病的人越來(lái)越多，人們將白素貞親切地稱為白娘子?？墒?，“保和堂”的興隆、許仙和白娘子的幸福生活卻惹惱了一個(gè)人，誰(shuí)呢？那就是金山寺的法海和尚。因?yàn)槿藗兊牟《急话啄镒又魏昧?，到金山寺燒香求菩薩的人就少多了，香火不旺，法海和尚自然就高興不起來(lái)了。這天，他又來(lái)到“保和堂”前，看到白娘子正在給人治病，不禁心內(nèi)妒火中燒，再定睛一瞧，哎呀！原來(lái)這白娘子不是凡人，而是條白蛇變的！<br>    法海雖有點(diǎn)小法術(shù)，但他的心術(shù)卻不正。看出了白娘子的身份后，他就想拆散許仙白娘子夫婦、搞垮“保和堂”。于是，他偷偷把許仙叫到寺中，對(duì)他說(shuō)：“你娘子是蛇精變的，你快點(diǎn)和她分手吧，不然，她會(huì)吃掉你的！”許仙一聽(tīng)，非常氣憤，他想：我娘子心地善良，對(duì)我的情意比海還深。就算她是蛇精，也不會(huì)害我，何況她如今已有了身孕，我怎能離棄她呢！法海見(jiàn)許仙不上他的當(dāng)，惱羞成怒，便把許仙關(guān)在了寺里。<br>    在“保和堂”里，白娘子正焦急地等待許仙回來(lái)。一天、兩天，左等、右等，白娘子心急如焚。終于打聽(tīng)到原來(lái)許仙被金山寺的法海和尚給“留”住了，白娘子趕緊帶著小青來(lái)到金山寺，苦苦哀求，請(qǐng)法海放回許仙。法海見(jiàn)了白娘子，一陣?yán)湫?，說(shuō)道：“大膽妖蛇，我勸你還是快點(diǎn)離開(kāi)人間，否則別怪我不客氣了！”白娘子見(jiàn)法海拒不放人，無(wú)奈，只得拔下頭上的金釵，迎風(fēng)一搖，掀起滔滔大浪，向金山寺直逼過(guò)去。法海眼見(jiàn)水漫金山寺，連忙脫下袈裟，變成一道長(zhǎng)堤，攔在寺門(mén)外。大水漲一尺，長(zhǎng)堤就高一尺，大水漲一丈，長(zhǎng)堤就高一丈，任憑波浪再大，也漫不過(guò)去。再加上白娘子有孕在身，實(shí)在斗不過(guò)法海，后來(lái)，法海使出欺詐的手法，將白娘子收進(jìn)金缽，壓在了雷峰塔下，把許仙和白娘子這對(duì)恩愛(ài)夫妻活生生地拆散了。<br>    小青逃離金山寺后，數(shù)十載深山練功，最終打敗了法海，將他逼進(jìn)了螃蟹腹中，救出了白娘子，從此，她和許仙以及他們的孩子幸福地生活在一起，再也不分離了。</body></html>用同樣的方法添加另外兩個(gè)內(nèi)容頁(yè)面，分別命名為content-2.html和content-3.htm1，具體的代碼見(jiàn)?196?HTML?196?配套光盤(pán)相對(duì)應(yīng)的文件夾，這里不再過(guò)多介紹。完成這幾個(gè)文件之后，打開(kāi)框架集頁(yè)面，效果如圖10-19所示。單擊頁(yè)面中的鏈接文字“梅妻鶴子”，會(huì)在框架的下方頁(yè)面中顯示content-2.html文件的內(nèi)容，如31到IV白SE傳巧&嶽辻花葩湘和fffTiKfikftffi.工融T|■繪醴KSD員55ira?附“3CaH#-- ff*.攤百星刑昔肖醉成匚」*址科怛M，E3Z事#4的棗Y.』???「.! ?iU.宅測(cè)"-夷甘屯工.空號(hào)片廈竝％汝、ffs?iTi-Fe7**a-nT.o?!=^hir4ti?i^?n?工&卻為恵代軋龍盤(pán)呻事了一吃軌解勇*?少弋?勺込空卞就曰*畀耳抽年昨壬TtlH舉店力如:總叭B*f!fiir.h^Ti3lJrtTt.IF礎(chǔ)1崗用堆上了fJi.HIL*主丁豪事二陽(yáng)豐?■疋章皿忙世，-=#*■出問(wèn)15W：-^Silr ttfl<￡i2#i^w,*E*flf?.i*cj?irirrtift-.-s：?.ujt-說(shuō)川三扎當(dāng)鶯克工”三獻(xiàn)勺齢注乩力沽宦砧加”-ar^：*.-池豐改羞匕農(nóng)S>flST-K-^fcf巧馬"干.11磚可接Tinr-ffitir--w『鼻吉豪鳥(niǎo)軒耳桝sr, 的tjfikpkst.u乳比兄忖.白屋fiift.Rr-.^stas?干w屯 嶺丸程-譏泊m門(mén)坤于n卑泄叢勻距百了一;?「Wt?M童曲憫卻OiiuBAXfin.mmarFi^Ti"盤(pán)diW宋勵(lì)戰(zhàn)眇鼻T?■玄磁SMWM建財(cái)疋?甲鑑累了.1

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論