DW-第8章網(wǎng)頁(yè)中框架

1、Dreamweaver網(wǎng)頁(yè)制作網(wǎng)頁(yè)制作主講：孫洪娟第8章 網(wǎng)頁(yè)中框架的使用本章目標(biāo)本章目標(biāo) 8.1框架和框架集框架和框架集 8.2創(chuàng)建框架集與應(yīng)用創(chuàng)建框架集與應(yīng)用 任務(wù)實(shí)例任務(wù)實(shí)例框架概述框架網(wǎng)頁(yè)：框架網(wǎng)頁(yè)：是是種特殊的種特殊的HTML網(wǎng)頁(yè)，它可將瀏覽器網(wǎng)頁(yè)，它可將瀏覽器窗口分成不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的窗口分成不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的網(wǎng)頁(yè)，而且在替換窗口中的網(wǎng)頁(yè)文件時(shí)，各個(gè)窗口網(wǎng)頁(yè)，而且在替換窗口中的網(wǎng)頁(yè)文件時(shí)，各個(gè)窗口之間沒(méi)有影響。之間沒(méi)有影響。一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁(yè)文件構(gòu)一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁(yè)文件構(gòu)成：框架集（成：框架集（Frameset ）和框架（）和框架（F

2、rame）。框架：框架：是指用來(lái)分隔網(wǎng)頁(yè)的窗格；每個(gè)框架都是瀏覽是指用來(lái)分隔網(wǎng)頁(yè)的窗格；每個(gè)框架都是瀏覽器中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口中所顯器中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口中所顯示內(nèi)容相關(guān)的示內(nèi)容相關(guān)的html文檔，是一個(gè)獨(dú)立的文檔，是一個(gè)獨(dú)立的html頁(yè)面。頁(yè)面。每個(gè)框架包括框架高度、框架寬度、滾動(dòng)條和框架每個(gè)框架包括框架高度、框架寬度、滾動(dòng)條和框架邊框，此外還可指定框架的內(nèi)邊距（框架與網(wǎng)頁(yè)正邊框，此外還可指定框架的內(nèi)邊距（框架與網(wǎng)頁(yè)正文之間的距離）。文之間的距離）?？蚣芨攀隹蚣芗嚎蚣芗菏侵付x一組網(wǎng)頁(yè)布局結(jié)構(gòu)與屬性的是指定義一組網(wǎng)頁(yè)布局結(jié)構(gòu)與屬性的html 頁(yè)面，其中包含

3、了顯示在頁(yè)面中框架的數(shù)目、尺寸、頁(yè)面，其中包含了顯示在頁(yè)面中框架的數(shù)目、尺寸、裝入框架的頁(yè)面的來(lái)源及其他可定義的屬性的相關(guān)信裝入框架的頁(yè)面的來(lái)源及其他可定義的屬性的相關(guān)信息。框架集頁(yè)面不會(huì)在瀏覽器中顯示，只是向?yàn)g覽器息。框架集頁(yè)面不會(huì)在瀏覽器中顯示，只是向?yàn)g覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些提供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。文檔的有關(guān)信息。框架和框架集的關(guān)系：框架和框架集的關(guān)系：框架集文檔調(diào)用（引用）各個(gè)框架集文檔調(diào)用（引用）各個(gè)框架文檔。改變框架文件是指改變?cè)诳蚣苤写蜷_(kāi)的文框架文檔。改變框架文件是指改變?cè)诳蚣苤写蜷_(kāi)的文件。件?？蚣芨攀鰹榱烁玫睦斫?/p>

4、什么是框架和框架集，詳看下面的示意圖。為了更好的理解什么是框架和框架集，詳看下面的示意圖。這是一個(gè)左右結(jié)構(gòu)的框架，其結(jié)構(gòu)是由三個(gè)網(wǎng)頁(yè)文件組成的。這是一個(gè)左右結(jié)構(gòu)的框架，其結(jié)構(gòu)是由三個(gè)網(wǎng)頁(yè)文件組成的。首先外部的框架是一個(gè)文件，用首先外部的框架是一個(gè)文件，用index.htm命名。左框架為命名。左框架為A，指向的是一個(gè)網(wǎng)頁(yè)指向的是一個(gè)網(wǎng)頁(yè)A.htm。右邊命名為。右邊命名為B，指向的是一個(gè)網(wǎng)頁(yè)，指向的是一個(gè)網(wǎng)頁(yè)B.htm?？蚣芨攀隹蚣芫W(wǎng)頁(yè)的優(yōu)點(diǎn)：框架網(wǎng)頁(yè)的優(yōu)點(diǎn)：訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形（即固定網(wǎng)頁(yè)中的某些部分）航相關(guān)的圖形（即固

5、定網(wǎng)頁(yè)中的某些部分） 。框架集可以將網(wǎng)頁(yè)的內(nèi)容組織到相互獨(dú)立的框架集可以將網(wǎng)頁(yè)的內(nèi)容組織到相互獨(dú)立的HTML頁(yè)面內(nèi)，相對(duì)固定的內(nèi)容（比如導(dǎo)航欄、標(biāo)題欄）頁(yè)面內(nèi)，相對(duì)固定的內(nèi)容（比如導(dǎo)航欄、標(biāo)題欄）和經(jīng)常變動(dòng)的內(nèi)容分別以不同的文件保存，將會(huì)和經(jīng)常變動(dòng)的內(nèi)容分別以不同的文件保存，將會(huì)大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率。大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率。每個(gè)框架都有自己的滾動(dòng)條，訪問(wèn)者可以獨(dú)立滾每個(gè)框架都有自己的滾動(dòng)條，訪問(wèn)者可以獨(dú)立滾動(dòng)框架。動(dòng)框架?；谏鲜鰞?yōu)點(diǎn)，框架通常用于創(chuàng)建網(wǎng)站導(dǎo)航?；谏鲜鰞?yōu)點(diǎn)，框架通常用于創(chuàng)建網(wǎng)站導(dǎo)航?？蚣芨攀隹蚣芫W(wǎng)頁(yè)的缺點(diǎn)：框架網(wǎng)頁(yè)的缺點(diǎn)：難以實(shí)現(xiàn)不同框架中個(gè)元素的精確圖形對(duì)齊。

6、難以實(shí)現(xiàn)不同框架中個(gè)元素的精確圖形對(duì)齊。使用框架制作的網(wǎng)頁(yè)很難被搜索引擎搜索到。使用框架制作的網(wǎng)頁(yè)很難被搜索引擎搜索到。對(duì)導(dǎo)航測(cè)試可能很費(fèi)時(shí)間對(duì)導(dǎo)航測(cè)試可能很費(fèi)時(shí)間各個(gè)帶有框架的頁(yè)面各個(gè)帶有框架的頁(yè)面URL不顯示在瀏覽器中，因此可能難不顯示在瀏覽器中，因此可能難以將特定網(wǎng)頁(yè)設(shè)為書(shū)簽，除非使用了服務(wù)器代碼，允許訪以將特定網(wǎng)頁(yè)設(shè)為書(shū)簽，除非使用了服務(wù)器代碼，允許訪問(wèn)者加載特定的帶框架版本。問(wèn)者加載特定的帶框架版本?？蚣芨攀鲇脩艨梢灾苯觿?chuàng)建框架集，也可以在普通頁(yè)面中加載預(yù)定義用戶可以直接創(chuàng)建框架集，也可以在普通頁(yè)面中加載預(yù)定義的框架集。其中，直接創(chuàng)建框架集的方法與創(chuàng)建普通頁(yè)面的的框架集。其中，直接創(chuàng)

7、建框架集的方法與創(chuàng)建普通頁(yè)面的方法相似。方法相似。選擇“文件”“新建”菜單，打開(kāi)“新建文檔”對(duì)話框在“類別”列表中選擇“框架集”選項(xiàng)，右側(cè)將顯示系統(tǒng)預(yù)定義的框架集類型，選擇其中一種，然后單擊“創(chuàng)建”按鈕框架概述1認(rèn)識(shí)認(rèn)識(shí)“框架框架”面板面板利用利用“框架框架”面板可以對(duì)框架和框架集進(jìn)行操作，選面板可以對(duì)框架和框架集進(jìn)行操作，選擇擇“窗口窗口”“框架框架”菜單，可以打開(kāi)菜單，可以打開(kāi)“框架框架”面板。面板?？蚣芨攀?選擇框架和框架集選擇框架和框架集 在文檔窗口中選擇框架的方法為，按住在文檔窗口中選擇框架的方法為，按住【Alt】鍵，鍵，然后在要選擇的框架內(nèi)單擊，被選中的框架邊線將然后在要選擇的框架

8、內(nèi)單擊，被選中的框架邊線將顯示為虛線。顯示為虛線。 如要選擇框架集，單擊該框架集上的任意邊框即如要選擇框架集，單擊該框架集上的任意邊框即可，此時(shí)框架集的所有邊框都呈虛線顯示?？桑藭r(shí)框架集的所有邊框都呈虛線顯示。 利用利用“框架框架”面板選擇框架時(shí)，直接在面板中相面板選擇框架時(shí)，直接在面板中相應(yīng)區(qū)域單擊即可。選擇框架集時(shí)，在面板中單擊框應(yīng)區(qū)域單擊即可。選擇框架集時(shí)，在面板中單擊框架集的邊框即可。架集的邊框即可。 3.刪除框架刪除框架 將光標(biāo)放在框架的邊框上，當(dāng)光標(biāo)變成垂直將光標(biāo)放在框架的邊框上，當(dāng)光標(biāo)變成垂直箭頭（或水平箭頭）時(shí)，按住鼠標(biāo)左鍵，將箭頭（或水平箭頭）時(shí)，按住鼠標(biāo)左鍵，將框架的邊框

9、拖出父框架或頁(yè)面之外，即可將框架的邊框拖出父框架或頁(yè)面之外，即可將這個(gè)框架刪除。這個(gè)框架刪除?？蚣芨攀鲈O(shè)置框架屬性設(shè)置框架屬性 選中框架后，選中框架后，“屬性屬性”面板上將顯示相應(yīng)框面板上將顯示相應(yīng)框架的屬性。架的屬性。 顯示框架源文件的保存路徑選擇是否顯示框架的邊框設(shè)置框架滾動(dòng)條的屬性框架概述選中框架集，屬性面板中將顯示框架集的屬性。選中框架集，屬性面板中將顯示框架集的屬性。 該面板中各參數(shù)的含義同框架屬性面板基本相同，該面板中各參數(shù)的含義同框架屬性面板基本相同，不同的是在不同的是在“行行”或或“列列”文本框中可設(shè)置框文本框中可設(shè)置框架的行高或列寬，在架的行高或列寬，在“單位單位”下拉列表框

10、中可下拉列表框中可選擇具體單位。選擇具體單位。 框架概述保存框架和框架集：保存框架和框架集：一個(gè)包含一個(gè)包含n個(gè)框架的網(wǎng)個(gè)框架的網(wǎng)頁(yè)實(shí)際上由頁(yè)實(shí)際上由 n+1 個(gè)獨(dú)立的個(gè)獨(dú)立的html頁(yè)面組成，頁(yè)面組成，1個(gè)框架集文件和個(gè)框架集文件和n個(gè)包含在框架中顯示的文個(gè)包含在框架中顯示的文件。這件。這 n+1 個(gè)頁(yè)面必須單獨(dú)保存，才能在瀏個(gè)頁(yè)面必須單獨(dú)保存，才能在瀏覽器中正常工作。覽器中正常工作。 插入的網(wǎng)頁(yè)元素位于哪個(gè)插入的網(wǎng)頁(yè)元素位于哪個(gè)框架，就保存在哪個(gè)框架的網(wǎng)頁(yè)中?？蚣埽捅４嬖谀膫€(gè)框架的網(wǎng)頁(yè)中。框架概述點(diǎn)擊點(diǎn)擊“文件文件保存全部保存全部”，則打開(kāi)幾個(gè)另存為對(duì)，則打開(kāi)幾個(gè)另存為對(duì)話框，提示保存各個(gè)部分；設(shè)計(jì)視圖中的選擇線話框，提示保存各個(gè)部分；設(shè)計(jì)視圖中的選擇線（或說(shuō)成陰影）也會(huì)自動(dòng)的移動(dòng)到對(duì)應(yīng)的被保存的（或說(shuō)成陰影）也會(huì)自動(dòng)的移動(dòng)到對(duì)應(yīng)的被保存的框架中，據(jù)此可以知道正在保存的是哪一個(gè)框架文框架中，據(jù)此可以知道正在保存的是哪一個(gè)框架文件。件。Dw先保存框架集文件，再保存框架文件。先保存框架集文