第6課框架實(shí)現(xiàn)多窗口頁(yè)面

1、PART-6 PART-6 框架實(shí)現(xiàn)多框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)窗口網(wǎng)頁(yè)第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.1 框架與框架集框架與框架集u 框架集也是一個(gè)網(wǎng)頁(yè)布局工具，使用框架集可以把瀏覽器窗口劃分成若干區(qū)域，分別在不同的區(qū)域顯示不同的網(wǎng)頁(yè)文檔。一個(gè)框架是一個(gè)獨(dú)立的HTML頁(yè)面，就是瀏覽器窗口中的一個(gè)區(qū)域。u 框架通過(guò)框架集的使用能夠很好的在一起運(yùn)作；u 框架集是由多個(gè)框架嵌套組合而成的，它包含同一網(wǎng)頁(yè)上多個(gè)框架的布局、鏈接和屬性信息。u 框架集文檔本身不包含要在瀏覽器中顯示的HTML內(nèi)容，但noframes部分除外。u 要在瀏覽器中查看一組框架，必須打開(kāi)框架集文檔。一、概述：一、概述

2、：分框分框?qū)g覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)將瀏覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)域可以單獨(dú)顯示一個(gè)域可以單獨(dú)顯示一個(gè)htmlhtml文件，各個(gè)區(qū)域也可相文件，各個(gè)區(qū)域也可相關(guān)連地顯示某一個(gè)內(nèi)容。關(guān)連地顯示某一個(gè)內(nèi)容。比如可以將索引放在一個(gè)區(qū)域，文件內(nèi)容顯示在比如可以將索引放在一個(gè)區(qū)域，文件內(nèi)容顯示在另一個(gè)區(qū)域。另一個(gè)區(qū)域。所謂框架所謂框架就是網(wǎng)頁(yè)頁(yè)面分成幾個(gè)窗口，同時(shí)就是網(wǎng)頁(yè)頁(yè)面分成幾個(gè)窗口，同時(shí)可取得多個(gè)可取得多個(gè)URL。只要使用標(biāo)記只要使用標(biāo)記和和設(shè)置設(shè)置即可，而所有框架標(biāo)記要放在一個(gè)總的即可，而所有框架標(biāo)記要放在一個(gè)總的html文檔文檔中，這個(gè)文檔只記錄了該框架是如何劃分的，而不中，這個(gè)文

3、檔只記錄了該框架是如何劃分的，而不會(huì)顯示任何其它的資料，所以不必放入會(huì)顯示任何其它的資料，所以不必放入 標(biāo)記，瀏覽該框架必須先讀取這個(gè)文檔。標(biāo)記，瀏覽該框架必須先讀取這個(gè)文檔。是用來(lái)劃分窗口的，每一窗口由是用來(lái)劃分窗口的，每一窗口由一個(gè)一個(gè) 標(biāo)記所標(biāo)識(shí)。標(biāo)記所標(biāo)識(shí)。 中的內(nèi)容顯示在不支中的內(nèi)容顯示在不支持分框的瀏覽器窗口中，因而這里需指向一個(gè)普持分框的瀏覽器窗口中，因而這里需指向一個(gè)普通版本的通版本的htmlhtml文件，以便供使用不支持分框?yàn)g覽文件，以便供使用不支持分框?yàn)g覽器的用戶閱讀。器的用戶閱讀。分框由分框由指定，并且可以嵌套，指定，并且可以嵌套，二、分框的基本結(jié)構(gòu)如下二、分框的基本結(jié)構(gòu)

4、如下: :例例1.基本語(yǔ)法基本語(yǔ)法標(biāo)記用來(lái)分割窗口，標(biāo)記用來(lái)分割窗口，在多窗口頁(yè)面中的地位就相當(dāng)于在多窗口頁(yè)面中的地位就相當(dāng)于在普通單在普通單窗口頁(yè)面中的地位窗口頁(yè)面中的地位在頁(yè)面中用在頁(yè)面中用標(biāo)志標(biāo)志頁(yè)面主體部分的起止位置。頁(yè)面主體部分的起止位置。標(biāo)記決定了怎樣劃分窗口，以及每個(gè)標(biāo)記決定了怎樣劃分窗口，以及每個(gè)窗口的位置和大小。窗口的位置和大小。 語(yǔ)法形式語(yǔ)法形式：. 作用作用： 用來(lái)標(biāo)記用來(lái)標(biāo)記HTML文件為框架模式，并設(shè)定視窗文件為框架模式，并設(shè)定視窗如何分割。如何分割。注注： vcols和和rows：決定頁(yè)面如何分割的兩個(gè)參數(shù)。分割左右：決定頁(yè)面如何分割的兩個(gè)參數(shù)。分割左右窗口用窗口用

5、cols，各幀的左右寬度用占窗口寬度的百分比來(lái)表示。，各幀的左右寬度用占窗口寬度的百分比來(lái)表示。分割上下窗口用分割上下窗口用rows，也用百分比來(lái)設(shè)定。，也用百分比來(lái)設(shè)定。vframeborder：設(shè)定各分窗口是（：設(shè)定各分窗口是（yes）否（）否（no）要加）要加邊框。邊框。vborder:如果加過(guò)框的話，則設(shè)定邊框的寬度。如果加過(guò)框的話，則設(shè)定邊框的寬度。vbordercolor:設(shè)定邊框的顏色。設(shè)定邊框的顏色。vframespacing：設(shè)定框架與框架間的保留空白的距離，：設(shè)定框架與框架間的保留空白的距離，默認(rèn)值是默認(rèn)值是0。 用用標(biāo)記把窗口分割好后，各窗口的標(biāo)記把窗口分割好后，各窗口的

6、屬性是用屬性是用HTML的的標(biāo)記來(lái)定義的，所標(biāo)記來(lái)定義的，所以以標(biāo)記中必須包含標(biāo)記中必須包含標(biāo)記，標(biāo)記，用以定義各子窗口的屬性。用以定義各子窗口的屬性。 語(yǔ)法形式語(yǔ)法形式： 作用作用：設(shè)定某一個(gè)子窗口的參數(shù)屬性。設(shè)定某一個(gè)子窗口的參數(shù)屬性。注注：qsrc：設(shè)定此窗口中要顯示的網(wǎng)頁(yè)文件名稱，每個(gè)窗設(shè)定此窗口中要顯示的網(wǎng)頁(yè)文件名稱，每個(gè)窗口一定要對(duì)應(yīng)著一個(gè)網(wǎng)頁(yè)文檔。你可使用絕對(duì)路徑或口一定要對(duì)應(yīng)著一個(gè)網(wǎng)頁(yè)文檔。你可使用絕對(duì)路徑或相對(duì)路徑來(lái)指定。相對(duì)路徑來(lái)指定。 qname：設(shè)定這個(gè)窗口的名稱，這樣才能指定框架設(shè)定這個(gè)窗口的名稱，這樣才能指定框架來(lái)作連結(jié)，必須但可任意命名。來(lái)作連結(jié)，必須但可任意命名

7、。 qframeborder：設(shè)定框架的邊框，其值只有設(shè)定框架的邊框，其值只有 0 和和 1 ， 0 表示不要邊框，表示不要邊框， 1 表示要顯示邊框，也可使用表示要顯示邊框，也可使用 yes 或或 no 。 qframespacing：設(shè)定框架與框架間的保留空白的設(shè)定框架與框架間的保留空白的距離。距離。 qbordercolor：設(shè)定框架的邊框顏色。設(shè)定框架的邊框顏色。 qscrolling：設(shè)定是否要顯示卷軸，設(shè)定是否要顯示卷軸，YES 表表示要顯示卷軸，示要顯示卷軸，NO 表示無(wú)論如何都不要顯表示無(wú)論如何都不要顯示，示， AUTO是視情況顯示。是視情況顯示。 qnoresize：設(shè)定不讓

8、瀏覽者改變這個(gè)邊框設(shè)定不讓瀏覽者改變這個(gè)邊框的大小。沒(méi)有設(shè)定此參數(shù)，瀏覽者則可以很的大小。沒(méi)有設(shè)定此參數(shù)，瀏覽者則可以很隨意地拉動(dòng)框架，改變其大小。隨意地拉動(dòng)框架，改變其大小。 qmarginhight：設(shè)定框架高度部份邊緣所設(shè)定框架高度部份邊緣所保留的空白空間。保留的空白空間。 qmarginwidth：設(shè)定框架寬度部份邊緣所設(shè)定框架寬度部份邊緣所保留的空白空間。保留的空白空間。3.舉例舉例 1.左小右大兩窗口左小右大兩窗口:分幀窗口示例分幀窗口示例 很抱歉！這是一個(gè)分幀頁(yè)面，但由于你的瀏覽器不支持，所以不能很抱歉！這是一個(gè)分幀頁(yè)面，但由于你的瀏覽器不支持，所以不能瀏覽！瀏覽！ 執(zhí)行執(zhí)行效果

9、： 2.一頂一左一右頁(yè)面一頂一左一右頁(yè)面 執(zhí)行執(zhí)行1.簡(jiǎn)介簡(jiǎn)介框架超級(jí)鏈接的優(yōu)點(diǎn)框架超級(jí)鏈接的優(yōu)點(diǎn)主要體現(xiàn)在站點(diǎn)導(dǎo)航上，主要體現(xiàn)在站點(diǎn)導(dǎo)航上，將要產(chǎn)生超級(jí)鏈接的文字或圖形置于左框架中，像菜將要產(chǎn)生超級(jí)鏈接的文字或圖形置于左框架中，像菜單一樣，當(dāng)你在做框架點(diǎn)選某個(gè)超級(jí)鏈接，被鏈接的單一樣，當(dāng)你在做框架點(diǎn)選某個(gè)超級(jí)鏈接，被鏈接的網(wǎng)頁(yè)將出現(xiàn)在右框加內(nèi)。網(wǎng)頁(yè)將出現(xiàn)在右框加內(nèi)。 左框架的頁(yè)面不會(huì)被別的頁(yè)面所覆蓋。這樣在進(jìn)行左框架的頁(yè)面不會(huì)被別的頁(yè)面所覆蓋。這樣在進(jìn)行多次超級(jí)鏈接時(shí)就不會(huì)迷失掉。多次超級(jí)鏈接時(shí)就不會(huì)迷失掉。二、框架超級(jí)鏈接二、框架超級(jí)鏈接2.分割框架分割框架首先通過(guò)首先通過(guò)標(biāo)記中的標(biāo)記中的

10、cols屬性設(shè)定左屬性設(shè)定左右兩個(gè)框架，寬度比為右兩個(gè)框架，寬度比為200:*。接著用接著用標(biāo)記的標(biāo)記的name屬性設(shè)定格框架的屬性設(shè)定格框架的名稱名稱 ，以及，以及src屬性設(shè)定各框架欲顯示的網(wǎng)頁(yè)文件，屬性設(shè)定各框架欲顯示的網(wǎng)頁(yè)文件，執(zhí)行結(jié)果如下圖：執(zhí)行結(jié)果如下圖：3.設(shè)定超級(jí)鏈接的目的頁(yè)設(shè)定超級(jí)鏈接的目的頁(yè)對(duì)于上圖程序如下：對(duì)于上圖程序如下：課程表課程表課程表課程表課程表課程表課程表課程表.實(shí)例實(shí)例具體程序如下：具體程序如下： 第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.1 框架與框架集框架與框架集第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作

11、6.2.1 6.2.1 在在HTMLHTML代碼中創(chuàng)建框架代碼中創(chuàng)建框架1.1.創(chuàng)建基本框架創(chuàng)建基本框架基本HTML中使用，和標(biāo)簽來(lái)定義框架。（1）框架集標(biāo)簽標(biāo)簽用于定義一個(gè)框架集，成對(duì)出現(xiàn)?？蚣芗淖饔檬菍⒁粋€(gè)窗口劃分成多個(gè)子窗口，即框架，每個(gè)框架都是一個(gè)獨(dú)立的頁(yè)面，又叫框架頁(yè)面。通過(guò)cols屬性和rows屬性來(lái)將一個(gè)窗口劃分為多個(gè)框架。（2）框架標(biāo)簽框架標(biāo)簽用于設(shè)定單個(gè)框架頁(yè)面，單個(gè)出現(xiàn)。也可以通過(guò)屬性設(shè)置框架的外觀第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作（3）標(biāo)簽使用該標(biāo)簽可以在用戶瀏覽器不支持框架顯示時(shí)告之用戶一些相關(guān)信息，以免瀏覽者對(duì)空白窗

12、口畫(huà)面感覺(jué)莫名其妙。標(biāo)簽是成對(duì)使用的，首尾標(biāo)簽之間的內(nèi)容就是告之瀏覽者的信息。（4）基本結(jié)構(gòu)標(biāo)簽是可以嵌套使用的，也就是說(shuō)，可以將其中某一個(gè)或幾個(gè)子窗口劃分為若干個(gè)更小的窗口。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作6.2.2 6.2.2 在在DreamweaverDreamweaver中創(chuàng)建框架中創(chuàng)建框架 Dreamweaver提供了兩種創(chuàng)建框架結(jié)構(gòu)網(wǎng)頁(yè)的方法，即：可以從若干預(yù)定義的框架集中選擇，也可以自己設(shè)計(jì)框架集。1.1.創(chuàng)建預(yù)定義的框架集創(chuàng)建預(yù)定義的框架集（1）選擇預(yù)定義框架集（2）為各個(gè)框架設(shè)置標(biāo)題2.2.自定義框架集自定義框架集自定義框架

13、集是指由網(wǎng)頁(yè)設(shè)計(jì)者根據(jù)需要，自己設(shè)置框架集中框架的數(shù)量、布局等屬性，適合于創(chuàng)建復(fù)雜框架結(jié)構(gòu)頁(yè)面。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作6.2.3 6.2.3 框架頁(yè)的選擇框架頁(yè)的選擇1 1在在“框架框架”面板中選擇框架和框架集面板中選擇框架和框架集u 選擇主菜單的【窗口】【框架】或者按下Ctrl+F10，打開(kāi)框架面板。u 在“框架”面板中點(diǎn)擊框架則可選取框架，若要在“框架”面板中選取框架頁(yè)，則需在“框架”面板中點(diǎn)擊環(huán)繞著框架的邊框。 2 2在在“文檔文檔”窗口中選擇框架和框架集窗口中選擇框架和框架集u 按住Alt鍵的同時(shí)單擊框架內(nèi)部；u 要選擇一個(gè)

14、框架集，則需單擊框架內(nèi)部的分隔線。u 通過(guò)單擊窗口左下角的標(biāo)簽選擇器來(lái)選擇相應(yīng)的框架或框架集。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作6.2.4 6.2.4 框架頁(yè)的保存框架頁(yè)的保存u 框架網(wǎng)頁(yè)由框架頁(yè)（也叫框架集）和（子）框架兩部分組成。u 框架頁(yè)定義框架的結(jié)構(gòu)、數(shù)量、尺寸及裝入框架的網(wǎng)頁(yè)文件。u 框架頁(yè)是一種特殊的網(wǎng)頁(yè)文件。其中，保存描述子框架數(shù)量，以及在各個(gè)子窗口中顯示網(wǎng)頁(yè)的文件名（路徑）等信息。u 子框架是子窗口、框架。每個(gè)子框架中打開(kāi)一個(gè)獨(dú)立的網(wǎng)頁(yè)文件。u 一個(gè)包含三個(gè)框架（子）窗口的網(wǎng)頁(yè)，由四個(gè)網(wǎng)頁(yè)文件組成。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)

15、框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作6.2.56.2.5指定框架網(wǎng)頁(yè)文件指定框架網(wǎng)頁(yè)文件 當(dāng)完成框架集的創(chuàng)建后，還需要為每個(gè)框架指定一個(gè)網(wǎng)頁(yè)文件，該操作的實(shí)質(zhì)就是把網(wǎng)頁(yè)文件放到相應(yīng)的框架中。當(dāng)這個(gè)框架中被保存后，所指定的文檔就成為在瀏覽器中打開(kāi)框架頁(yè)時(shí)該框架顯示的默認(rèn)網(wǎng)頁(yè)文檔。這些被放入框架中的網(wǎng)頁(yè)可以是空白網(wǎng)頁(yè)，也可以是事先編輯好的網(wǎng)頁(yè)文件。實(shí)際上，當(dāng)創(chuàng)建一個(gè)框架頁(yè)文件時(shí)，就已經(jīng)創(chuàng)建了框架所對(duì)應(yīng)的空白網(wǎng)頁(yè)文件。操作方法是：1.將插入點(diǎn)放在需要插入網(wǎng)頁(yè)的框架中；2.選擇【文件】【在框架中打開(kāi)】菜單命令，打開(kāi)“選擇HTML文件”對(duì)話框。3.在“選擇HTML文件”對(duì)話框中選擇要打

16、開(kāi)的網(wǎng)頁(yè)文件，單擊“確定”，即可完成網(wǎng)頁(yè)的插入。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.2 框架的基本操作框架的基本操作6.2.76.2.7設(shè)置框架中的鏈接設(shè)置框架中的鏈接 在框架中可以使用超鏈接，并且可以通過(guò)一個(gè)框架中的超鏈接改變另一個(gè)框架中的內(nèi)容，這種方法通常用于創(chuàng)建導(dǎo)航頁(yè)面。要在一個(gè)框架匯總使用超鏈接打開(kāi)另一個(gè)框架中的文檔，必須設(shè)置鏈接目標(biāo)。鏈接目標(biāo)用于確定鏈接內(nèi)容在哪里打開(kāi)。為框架網(wǎng)頁(yè)設(shè)置超鏈接的操作步驟如下：為框架網(wǎng)頁(yè)設(shè)置超鏈接的操作步驟如下：1.在網(wǎng)頁(yè)文件中選擇要設(shè)置鏈接的對(duì)象（如具體的文字、圖片等）；2.在屬性面板的“鏈接”選項(xiàng)中設(shè)置鏈接的網(wǎng)頁(yè)文件。3.在屬性面板的“

17、目標(biāo)”下拉列表中選擇打開(kāi)鏈接文件的窗口第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.3 框架的屬性框架的屬性設(shè)置框架集的屬性設(shè)置框架集的屬性（1）使用框架集屬性面板（2）設(shè)置框架集標(biāo)題首先選中要設(shè)置標(biāo)題的框架集，然后再在“文檔”工具欄的“標(biāo)題”框中鍵入框架集文檔的名稱即可。第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.3 框架的屬性框架的屬性2.2.設(shè)置框架屬性設(shè)置框架屬性第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.4 框架布局網(wǎng)頁(yè)實(shí)例框架布局網(wǎng)頁(yè)實(shí)例第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.4 框架布局網(wǎng)頁(yè)實(shí)例框架布局網(wǎng)頁(yè)實(shí)例第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)

18、現(xiàn)多窗口網(wǎng)頁(yè)6.5制作浮動(dòng)框架制作浮動(dòng)框架1.浮動(dòng)框架基礎(chǔ)u 浮動(dòng)框架又叫嵌入式框架，就是在HTML文檔中的一個(gè)區(qū)域內(nèi)插入一個(gè)HTML文檔，就像在HTML文檔的一部分區(qū)域中顯示圖像一樣。u 浮動(dòng)框架不需要在單獨(dú)的網(wǎng)頁(yè)中創(chuàng)建框架，而是通過(guò)標(biāo)簽建立的，其常用屬性屬性屬性說(shuō)明說(shuō)明srcsrc嵌入框架內(nèi)容的源嵌入框架內(nèi)容的源namename標(biāo)記框架名標(biāo)記框架名frameborderframeborder設(shè)置和隱藏框架邊界設(shè)置和隱藏框架邊界scrollingscrolling設(shè)置框架滾動(dòng)條，取值設(shè)置框架滾動(dòng)條，取值yesyes，nono或或autoautowidthwidth設(shè)置浮動(dòng)框架寬度，單位像素設(shè)

19、置浮動(dòng)框架寬度，單位像素heightheight設(shè)置浮動(dòng)框架高度，單位像素設(shè)置浮動(dòng)框架高度，單位像素第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.5制作浮動(dòng)框架制作浮動(dòng)框架2.在記事本中制作浮動(dòng)框架執(zhí)行 嵌入式框架 美好回憶 第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.5制作浮動(dòng)框架制作浮動(dòng)框架3.在Dreamweaver中制作浮動(dòng)框架（1）插入浮動(dòng)框架（2）將光標(biāo)定位在“代碼”模式中已插入的“”標(biāo)簽內(nèi)，然后按回車鍵，自動(dòng)打開(kāi)下拉列表，選擇“src”選項(xiàng)，（3）接著顯示“瀏覽”按鈕（4）依照前兩個(gè)步驟或以直接輸入的方法，編寫(xiě)代碼“width=300 height=400”，設(shè)置浮

20、動(dòng)框架的寬度和高度，（5）保存該網(wǎng)頁(yè)，按F12在瀏覽器中預(yù)覽，第第6章章 框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)框架實(shí)現(xiàn)多窗口網(wǎng)頁(yè)6.5制作浮動(dòng)框架制作浮動(dòng)框架第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.1 用框架布局頁(yè)面用框架布局頁(yè)面返回本節(jié)返回本節(jié) 要制作框架網(wǎng)頁(yè)，就要建立框架集?？蚣芗墙M織頁(yè)面內(nèi)容的常見(jiàn)方法，通過(guò)框架集可以將網(wǎng)頁(yè)的內(nèi)容組織到相互獨(dú)立的HTML頁(yè)面內(nèi)，相對(duì)固定的內(nèi)容（比如導(dǎo)航欄、標(biāo)題欄）和經(jīng)常變動(dòng)的內(nèi)容分別以不同的文件保存將會(huì)大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率。 本節(jié)制作一個(gè)簡(jiǎn)單的框架網(wǎng)頁(yè)，先對(duì)框架集和框架等概念有一個(gè)概括的認(rèn)識(shí)。 1 1建立框架集建立框架集 2 2保存框架和框架集保存框架和框架集 3 3

21、理解框架集理解框架集HTMLHTML代碼代碼第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.1 用框架布局頁(yè)面用框架布局頁(yè)面返回本節(jié)返回本節(jié) 打開(kāi)文件7.3.1.html，切換到代碼視圖，如圖7-49所示。為了便于閱讀，圖中的代碼進(jìn)行了折疊。定義框架集的HTML標(biāo)簽是，含有這對(duì)標(biāo)簽的源代碼存放在框架集文件中。 圖7-49 框架集源代碼 中含有標(biāo)簽，每個(gè)標(biāo)簽定義一個(gè)框架，并為框架設(shè)置名稱、源文件等屬性，如圖7-50所示。 示例圖7-50 標(biāo)簽 第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.2 創(chuàng)建框架和框架集創(chuàng)建框架和框架集返回本節(jié)返回本節(jié) 每一個(gè)框架都是一個(gè)獨(dú)立的 HTML 頁(yè)面，它是瀏覽器窗口中的一個(gè)區(qū)域，可以顯

22、示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的HTML 文檔。通過(guò)框架集的使用，這些框架能夠很好的在一起運(yùn)作。所謂框架集就是指定義網(wǎng)頁(yè)結(jié)構(gòu)與屬性的HTML頁(yè)面，這其中包含了顯示在頁(yè)面中框架的數(shù)目，框架的尺寸，裝入框架的頁(yè)面的來(lái)源，以及其他一些可定義的屬性的相關(guān)信息?？蚣芗?yè)面不會(huì)在瀏覽器中顯示（noframes 部分除外），它只是向?yàn)g覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。 在 Dreamweaver 中有兩種創(chuàng)建框架集的方法：既可以從若干預(yù)定義的框架集中選擇，也可以自己設(shè)計(jì)框架集。 1 1使用預(yù)定義的框架集使用預(yù)定義的框架集 1）創(chuàng)建新的空預(yù)定義框架集 2）在現(xiàn)在有文檔

23、中創(chuàng)建預(yù)定義的框架集 2 2自己設(shè)計(jì)框架集自己設(shè)計(jì)框架集 3 3拆分或刪除框架拆分或刪除框架 4 4創(chuàng)建嵌套框架創(chuàng)建嵌套框架第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.3 設(shè)置框架及框架集屬性設(shè)置框架及框架集屬性返回本節(jié)返回本節(jié) 框架和框架集是一些獨(dú)立的HTML 文檔。可以通過(guò)設(shè)置某些框架或框架集的屬性來(lái)對(duì)框架或框架集進(jìn)行修改。 1 1選取要進(jìn)行更改的框架和框架集選取要進(jìn)行更改的框架和框架集 2 2設(shè)置框架屬性設(shè)置框架屬性 選取框架，打開(kāi)框架的【屬性】面板。如圖7-55所示。圖7-55框架屬性面板 框架名稱：為當(dāng)前框架命名（為了便于確定超鏈接應(yīng)給框架命名）。 源文件：確定框架的源文檔?？梢灾苯釉谖谋究?/p>

24、中輸入文件路徑，也可以單擊文件夾圖標(biāo)查找并選取文件。還可以通過(guò)將插入點(diǎn)放在框架內(nèi)并執(zhí)行【文件】|【在框架中打開(kāi)】命令來(lái)打開(kāi)文件第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.3 設(shè)置框架及框架集屬性設(shè)置框架及框架集屬性返回本節(jié)返回本節(jié) 邊框：用來(lái)控制當(dāng)前框架有無(wú)邊框。選項(xiàng)有“是”（顯示邊框）、“否”（隱藏邊框）和“默認(rèn)值”。大多數(shù)瀏覽器默認(rèn)為顯示邊框，除非父框架集已將“邊框”設(shè)置為“否”。只有當(dāng)共享該邊框的所有框架都將“邊框”設(shè)置為“否”時(shí)，或者當(dāng)父框架集的“邊框”屬性設(shè)置為“否”并且共享該邊框的框架都將“邊框”設(shè)置為“默認(rèn)值”時(shí)，邊框才是隱藏的。 滾動(dòng)：確定當(dāng)框架內(nèi)的內(nèi)容顯示不下的時(shí)候是否出現(xiàn)滾動(dòng)條。選

25、項(xiàng)有“是”、“否”、“自動(dòng)”和“默認(rèn)”?！笆恰北硎撅@示滾動(dòng)條，“否”表示不顯示滾動(dòng)條，“自動(dòng)”則是自動(dòng)顯示，也就是當(dāng)該框架內(nèi)的內(nèi)容超過(guò)當(dāng)前屏幕上下或左右邊界時(shí)，滾動(dòng)條才會(huì)顯示，否則不顯示?！澳J(rèn)”將不設(shè)置相應(yīng)屬性的值，從而使各個(gè)瀏覽器使用其默認(rèn)值。 不能調(diào)整大?。合薅蚣艹叽?，令訪問(wèn)者無(wú)法通過(guò)拖動(dòng)框架邊框在瀏覽器中調(diào)整框架大小。在 Dreamweaver 中始終可以調(diào)整邊框大小，該選項(xiàng)僅適用于在瀏覽器中查看框架的訪問(wèn)者。 邊框顏色：為所有框架的邊框設(shè)置邊框顏色。此顏色應(yīng)用于和框架接觸的所有邊框，并且重寫(xiě)框架集的指定邊框顏色。 邊界寬度：設(shè)置以像素為單位的框架邊框和內(nèi)容之間左右邊距。 邊界高度：

26、設(shè)置以像素為單位的框架邊框和內(nèi)容之間上下邊距。 第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.3 設(shè)置框架及框架集屬性設(shè)置框架及框架集屬性返回本節(jié)返回本節(jié)3 3設(shè)置框架集屬性設(shè)置框架集屬性選取框架集，打開(kāi)框架集的【屬性】面板。如圖7-56所示。 邊框：在邊框下拉列表中選擇在瀏覽器中查看時(shí)是否顯示框架邊框。 邊框顏色：設(shè)置邊框的顏色。 邊框?qū)挾龋褐付蚣芗兴羞吙虻膶挾取?框架大?。?jiǎn)螕簟拘辛羞x擇范圍】區(qū)域左側(cè)或頂部的選項(xiàng)卡；然后在“值”文本框中，輸入高度或?qū)挾取?單位：包括“像素”、“百分比”和“相對(duì)”?！跋袼亍睂⑦x定列或行的大小設(shè)置為一個(gè)絕對(duì)值。對(duì)于應(yīng)始終保持相同大小的框架（例如導(dǎo)航條）而言，此選項(xiàng)是最佳選擇。“百分比”指定選定列或行應(yīng)相當(dāng)于其框架集的總寬度或總高度的百分比?！跋鄬?duì)”指定在為“像素”和“百分比”框架分配空間后，為選定列或行分配其余可用空間。圖7-56框架集屬性面板 第第5章章 網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局7.3.4 保存框架和框架集保存框架和框架集返回本節(jié)返回本節(jié) 框架集