1、1第第6 6章章 設(shè)計框架網(wǎng)頁設(shè)計框架網(wǎng)頁 Web頁的設(shè)計方式中，包含有框架網(wǎng)頁設(shè)計。它可以將Web瀏覽器窗口分為不同的可滾動的區(qū)域。這些區(qū)域可獨立顯示幾個Web頁。一個窗口可保持不變，而其他窗口根據(jù)用戶選擇的超鏈接變化。 而目前，框架網(wǎng)頁多數(shù)用在網(wǎng)站后面的界面中，可以通過左側(cè)的欄目導(dǎo)航，在右則顯示不同的設(shè)置數(shù)據(jù)頁面。除此之外，還有Iframe內(nèi)嵌框架方式，而這種多數(shù)應(yīng)用于前臺的主頁中。它可將主頁不同功能版塊分割成不同的單個文件，這樣便于修改網(wǎng)頁內(nèi)容。本章學(xué)習(xí)要點：本章學(xué)習(xí)要點：2 創(chuàng)建框架 編輯框架集 設(shè)置框架的屬性 內(nèi)嵌框架應(yīng)用6.1 6.1 框架網(wǎng)頁框架網(wǎng)頁3 框架提供將一個瀏覽器窗口劃

2、分為多個區(qū)域、每個區(qū)域都可以顯示不同HTML文檔的方法。使用框架的最常見情況就是，一個框架顯示包含導(dǎo)航菜單的文檔，而另一個框架顯示包含內(nèi)容的文檔。6.1.1 6.1.1 框架網(wǎng)頁概述框架網(wǎng)頁概述4 很多用戶可能將網(wǎng)頁中的框架看成是一個文件，但實際上文檔不是框的一部分，而框是存放文檔的容器。1 1框架集框架集 框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及最初在每個框架中顯示的頁面的URL。52 2框架集的優(yōu)勢框架集的優(yōu)勢3 3嵌套的框架集嵌套的框架集 框架的最常見用途就是導(dǎo)航。一組框架通常包括一個含有導(dǎo)航條的框架和另一個要顯示主要內(nèi)容頁面的框架。 在另一

3、個框架集中的框架集稱為嵌套框架集。一個框架集文件可以包含多個嵌套的框架集。大多數(shù)使用框架的Web頁實際上都使用嵌套的框架，并且在Dreamweaver中大多數(shù)預(yù)定義的框架集也使用嵌套。如果在一組框架里，不同行或不同列中有不同數(shù)目的框架，則要求使用嵌套的框架集。6.1.2 6.1.2 創(chuàng)建各種框架創(chuàng)建各種框架 在Dreamweaver中有兩種創(chuàng)建框架集的方法：既可以從若干預(yù)定義的框架集中選擇，也可以自己設(shè)計框架集。 671 1創(chuàng)建框架集創(chuàng)建框架集在Dreamweaver中，創(chuàng)建框架集是非常簡單的。82 2創(chuàng)建嵌套框架集創(chuàng)建嵌套框架集 將光標(biāo)放置框架集的頂部中，單擊【框架】下拉按鈕，然后在列表中選

4、擇一種框架布局方式，則該框架集就是嵌套框架集。93 3創(chuàng)建浮動框架創(chuàng)建浮動框架 要想在一個HTML網(wǎng)頁的局部顯示另外一個HTML網(wǎng)頁，就需要用到浮動框架。浮動框架是一個HTML網(wǎng)頁在另外一個HTML網(wǎng)頁中顯示的容器。浮動框架可以在空白頁面中創(chuàng)建，也可以在表格中創(chuàng)建。6.1.3 6.1.3 編輯框架集編輯框架集 【框架】面板提供框架集內(nèi)各框架的可視化表示形式。它能夠顯示框架集的層次結(jié)構(gòu)，而這種層次結(jié)構(gòu)在【文檔】窗口中的顯示可能不夠直觀。 在【框架】面板中，環(huán)繞每個框架集的邊框非常粗；而環(huán)繞每個框架的是較細的灰線，并且每個框架由框架名稱標(biāo)識。101 1在面板中選擇框架在面板中選擇框架2 2選擇布局

5、框架選擇布局框架3 3選擇不同的框架選擇不同的框架6.1.4 6.1.4 向框架中添加內(nèi)容向框架中添加內(nèi)容 在選擇框架后，可以向框架不同部分的文件框架中每一個部分，都是一個獨立的文件。）中添加內(nèi)容，也可以指定為現(xiàn)在文件。111 1添加框架文檔添加框架文檔2 2為框架添加內(nèi)容為框架添加內(nèi)容 用戶可以通過將新內(nèi)容插入框架的空文檔中，或通過在框架中打開現(xiàn)有文檔，來指定框架的初始內(nèi)容。 無論是框架還是框架集，均是顯示HTML網(wǎng)頁的容器。要添加網(wǎng)頁元素則是在框架網(wǎng)頁中，而在框架網(wǎng)頁中添加元素，與普通網(wǎng)頁的操作方法相同，同樣可以在其中插入表格、文本、圖像、多媒體等。6.1.5 6.1.5 保存框架集保存框

6、架集 如果一個站點在瀏覽器中顯示為包含兩個框架的單個頁面，則實際上至少由三個HTML文檔組成：框架集文件以及兩個文檔，這兩個文檔包含最初在這些框架內(nèi)顯示的內(nèi)容。在Dreamweaver中設(shè)計使用框架集的頁面時，必須保存所有這三個文件，該頁面才能在瀏覽器中正常顯示。121 1框架集保存框架集保存2 2嵌套框架集保存嵌套框架集保存6.2 6.2 框架屬性框架屬性 選擇不同的框架部分，會得到不同的屬性。而框架集網(wǎng)頁中，有些框架網(wǎng)頁為固定網(wǎng)頁，而框架集中的mailFrame框架網(wǎng)頁為活動網(wǎng)頁，所以框架集的超級鏈接目標(biāo)與普通網(wǎng)頁會有所不同。136.2.1 6.2.1 布局框架基本屬性布局框架基本屬性 由

7、于布局框架中包括框架集和框架，所以在設(shè)置其屬性時也不盡相同。而某些框架屬性還會覆蓋框架集中的某些屬性，所以在設(shè)置過程中要有所注意。141 1框架集屬性框架集屬性2 2框架屬性框架屬性 結(jié)合Alt鍵單擊某個框架選中該框架后，在【屬性】檢查器面板中會顯示相應(yīng)的屬性參數(shù)。 當(dāng)選擇框架集后，【屬性】檢查器面板中顯示的是其各個屬性參數(shù)。6.2.2 6.2.2 框架鏈接框架鏈接 框架頁的超級鏈接之所以要特別指出，是因為框架網(wǎng)頁少則2個，多則幾個框架，鏈接的網(wǎng)頁在哪一個框架中打開，是需要設(shè)定的。在創(chuàng)建框架集后，在【框架】面板中會顯示每個框架網(wǎng)頁的默認名稱。156.2.3 6.2.3 框架標(biāo)簽框架標(biāo)簽 創(chuàng)建框

8、架集后，在【代碼】視圖中發(fā)現(xiàn)，選擇單個框架與選擇框架集的代碼是不同的，因為頁面所有框架標(biāo)簽需要放在一個HTML的文檔，這個檔案只記錄了該框架如何分割，不會顯示任何資料。 在布局框架代碼中，為框架集標(biāo)簽，為框架標(biāo)簽，為瀏覽器不支持框架時的標(biāo)簽，以及脫離框架集的浮動框架標(biāo)簽。16171 1標(biāo)簽標(biāo)簽2 2標(biāo)簽標(biāo)簽 當(dāng)瀏覽者使用的瀏覽器版本過低，不支持框架功能時，看到的將是一片空白。為了避免這種情況，可以使用這個標(biāo)簽，當(dāng)瀏覽者的瀏覽器看不到框架時，就會看到與之間的內(nèi)容，而不是一片空白。 是框架集的標(biāo)簽，把畫面分成左右兩個部分，左部是顯示leftFrame，右部則會顯示mainFrame。在標(biāo)簽中，包含

9、一些參數(shù)。3 3標(biāo)簽標(biāo)簽 標(biāo)簽為單個框架標(biāo)簽，是包含在標(biāo)簽中的，并且該標(biāo)簽為空標(biāo)簽，不需要關(guān)閉標(biāo)簽。在標(biāo)簽包括設(shè)置框架的屬性參數(shù)。186.3 6.3 內(nèi)嵌框架內(nèi)嵌框架IframeIframe IFRAME元素也就是文檔中的文檔，或者好像浮動的框架(FRAME)。frames集合提供了對IFRAME內(nèi)容的訪問。使用frames集合讀寫IFRAME內(nèi)包含的元素。196.3.1 6.3.1 關(guān)于關(guān)于IframeIframe 浮動框架iframe又被稱做嵌入幀，是一種特殊的框架結(jié)構(gòu)。其可以象層一樣插入到普通的XHTML網(wǎng)頁中，并且可以自由地移動位置?？梢詫⑵淅斫鉃橐环N可在網(wǎng)頁中浮動的框架。201 1浮動框架概述浮動框架概述2 2插入浮動框架插入浮動框架 浮動框架是一種靈活的框架，是一種塊狀對象，其與層div的屬性非常類似，所有普通塊狀對象的屬性都可以應(yīng)用在浮動框架中。6.3.2 Iframe6.3.2 Iframe屬性屬性 浮動框架除了可以使用普通塊狀對象的屬性，也可以使用一些專有的屬性，例如，框架獨有的屬性和浮動框架獨有的屬性。浮動框架的各種屬性如下所示。21屬性值屬性值說明說明top頂部對齊，使用此屬性值后，