DW使用框架布局網(wǎng)頁P(yáng)PT課件

1、2021/3/91第5章使用框架布局網(wǎng)頁布局網(wǎng)頁關(guān)于框架和框架集關(guān)于框架和框架集創(chuàng)建框架集創(chuàng)建框架集框架和框架集的基本操作框架和框架集的基本操作框架和框架集的屬性設(shè)置框架和框架集的屬性設(shè)置保存框架和框架集保存框架和框架集2021/3/92021/3/92 25.1 5.1 關(guān)于框架和框架集關(guān)于框架和框架集 框架網(wǎng)頁：框架網(wǎng)頁：是是種特殊的種特殊的HTMLHTML網(wǎng)頁，它可將瀏覽器窗口分網(wǎng)頁，它可將瀏覽器窗口分成不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的網(wǎng)頁，而且成不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的網(wǎng)頁，而且在替換窗口中的網(wǎng)頁文件時(shí)，各個(gè)窗口之間沒有影響。在替換窗口中的網(wǎng)頁文件時(shí)，各個(gè)窗口之間沒有影

2、響。一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁文件構(gòu)成：框架集（一個(gè)框架結(jié)構(gòu)有兩部分網(wǎng)頁文件構(gòu)成：框架集（Frameset Frameset ）和框架（）和框架（FrameFrame）。）?？蚣埽嚎蚣埽菏侵赣脕矸指艟W(wǎng)頁的窗格；每個(gè)框架都是瀏覽器中是指用來分隔網(wǎng)頁的窗格；每個(gè)框架都是瀏覽器中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口中所顯示內(nèi)容相的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口中所顯示內(nèi)容相關(guān)的關(guān)的htmlhtml文檔，是一個(gè)獨(dú)立的文檔，是一個(gè)獨(dú)立的htmlhtml頁面。每個(gè)框架包括頁面。每個(gè)框架包括框架高度、框架寬度、滾動(dòng)條和框架邊框，此外還可指框架高度、框架寬度、滾動(dòng)條和框架邊框，此外還可指定框架的內(nèi)邊距（框架與網(wǎng)

3、頁正文之間的距離）。定框架的內(nèi)邊距（框架與網(wǎng)頁正文之間的距離）。2021/3/93框架集：框架集：是指定義一組網(wǎng)頁布局結(jié)構(gòu)與屬性的是指定義一組網(wǎng)頁布局結(jié)構(gòu)與屬性的html html 頁頁面，其中包含了顯示在頁面中框架的數(shù)目、尺寸、裝面，其中包含了顯示在頁面中框架的數(shù)目、尺寸、裝入框架的頁面的來源及其他可定義的屬性的相關(guān)信息入框架的頁面的來源及其他可定義的屬性的相關(guān)信息?？蚣芗撁娌粫?huì)在瀏覽器中顯示，只是向?yàn)g覽器提。框架集頁面不會(huì)在瀏覽器中顯示，只是向?yàn)g覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。檔的有關(guān)信息?？蚣芎涂蚣芗年P(guān)系

4、：框架集文檔調(diào)用（引用）各個(gè)框架文檔。改變框架文件是指改變?cè)诳蚣苤写蜷_的文件。2021/3/94 為了更好的理解什么是框架和框架集，詳看下面的示意圖。這是一個(gè)左右結(jié)構(gòu)的框架，其結(jié)構(gòu)是由三個(gè)網(wǎng)頁文件組成的這是一個(gè)左右結(jié)構(gòu)的框架，其結(jié)構(gòu)是由三個(gè)網(wǎng)頁文件組成的。首先外部的框架是一個(gè)文件，用。首先外部的框架是一個(gè)文件，用index.htmindex.htm命名。左框架命名。左框架為為A A，指向的是一個(gè)網(wǎng)頁，指向的是一個(gè)網(wǎng)頁A.htmA.htm。右邊命名為。右邊命名為B B，指向的是一，指向的是一個(gè)網(wǎng)頁個(gè)網(wǎng)頁B.htmB.htm。2021/3/95 框架網(wǎng)頁的優(yōu)點(diǎn)：框架網(wǎng)頁的優(yōu)點(diǎn)： 訪問者的瀏覽器不需

5、要為每個(gè)頁面重新加載與導(dǎo)訪問者的瀏覽器不需要為每個(gè)頁面重新加載與導(dǎo)航相關(guān)的圖形（即固定網(wǎng)頁中的某些部分）航相關(guān)的圖形（即固定網(wǎng)頁中的某些部分） 。 框架集可以將網(wǎng)頁的內(nèi)容組織到相互獨(dú)立的框架集可以將網(wǎng)頁的內(nèi)容組織到相互獨(dú)立的HTMLHTML頁面內(nèi)，相對(duì)固定的內(nèi)容（比如導(dǎo)航欄、標(biāo)題欄頁面內(nèi)，相對(duì)固定的內(nèi)容（比如導(dǎo)航欄、標(biāo)題欄）和經(jīng)常變動(dòng)的內(nèi)容分別以不同的文件保存，將）和經(jīng)常變動(dòng)的內(nèi)容分別以不同的文件保存，將會(huì)大大提高網(wǎng)頁設(shè)計(jì)和維護(hù)的效率。會(huì)大大提高網(wǎng)頁設(shè)計(jì)和維護(hù)的效率。 每個(gè)框架都有自己的滾動(dòng)條，訪問者可以獨(dú)立滾每個(gè)框架都有自己的滾動(dòng)條，訪問者可以獨(dú)立滾動(dòng)框架。動(dòng)框架?；谏鲜鰞?yōu)點(diǎn)，框架通常用于

6、創(chuàng)建網(wǎng)站導(dǎo)航?；谏鲜鰞?yōu)點(diǎn)，框架通常用于創(chuàng)建網(wǎng)站導(dǎo)航。 2021/3/96框架網(wǎng)頁的缺點(diǎn)：框架網(wǎng)頁的缺點(diǎn)： 難以實(shí)現(xiàn)不同框架中個(gè)元素的精確圖形對(duì)齊。難以實(shí)現(xiàn)不同框架中個(gè)元素的精確圖形對(duì)齊。 使用框架制作的網(wǎng)頁很難被搜索引擎搜索到。使用框架制作的網(wǎng)頁很難被搜索引擎搜索到。 對(duì)導(dǎo)航測試可能很費(fèi)時(shí)間對(duì)導(dǎo)航測試可能很費(fèi)時(shí)間 各個(gè)帶有框架的頁面各個(gè)帶有框架的頁面URLURL不顯示在瀏覽器中，因此不顯示在瀏覽器中，因此可能難以將特定網(wǎng)頁設(shè)為書簽，除非使用了服務(wù)器可能難以將特定網(wǎng)頁設(shè)為書簽，除非使用了服務(wù)器代碼，允許訪問者加載特定的帶框架版本。代碼，允許訪問者加載特定的帶框架版本。2021/3/975.2

7、5.2 創(chuàng)建框架集創(chuàng)建框架集 用戶可以直接創(chuàng)建框架集，也可以在普通頁面用戶可以直接創(chuàng)建框架集，也可以在普通頁面中加載預(yù)定義的框架集。其中，直接創(chuàng)建框架中加載預(yù)定義的框架集。其中，直接創(chuàng)建框架集的方法與創(chuàng)建普通頁面的方法相似。集的方法與創(chuàng)建普通頁面的方法相似。選擇選擇“文件文件”“新新建建”菜單，打開菜單，打開“新建文檔新建文檔”對(duì)話框?qū)υ捒蛟谠凇邦悇e類別”列表中選擇列表中選擇“框架集框架集”選項(xiàng)，右側(cè)將顯選項(xiàng)，右側(cè)將顯示系統(tǒng)預(yù)定義的框架集類示系統(tǒng)預(yù)定義的框架集類型，選擇其中一種，然后型，選擇其中一種，然后單擊單擊“創(chuàng)建創(chuàng)建”按鈕按鈕2021/3/985.3 5.3 框架和框架集的基本操作框架和

8、框架集的基本操作 1 1認(rèn)識(shí)認(rèn)識(shí)“框架框架”面板面板 利用利用“框架框架”面板可以對(duì)框架和框架集進(jìn)行面板可以對(duì)框架和框架集進(jìn)行操作，選擇操作，選擇“窗口窗口”“框架框架”菜單，可以菜單，可以打開打開“框架框架”面板。面板。 2021/3/992 2選擇框架和框架集選擇框架和框架集 在文檔窗口中選擇框架的方法為，按住在文檔窗口中選擇框架的方法為，按住【AltAlt】鍵，然后在要選擇的框架內(nèi)單擊，被鍵，然后在要選擇的框架內(nèi)單擊，被選中的框架邊線將顯示為虛線。選中的框架邊線將顯示為虛線。 如要選擇框架集，單擊該框架集上的任意如要選擇框架集，單擊該框架集上的任意邊框即可，此時(shí)框架集的所有邊框都呈虛線邊

9、框即可，此時(shí)框架集的所有邊框都呈虛線顯示。顯示。 利用利用“框架框架”面板選擇框架時(shí)，直接在面面板選擇框架時(shí)，直接在面板中相應(yīng)區(qū)域單擊即可。選擇框架集時(shí)，在板中相應(yīng)區(qū)域單擊即可。選擇框架集時(shí)，在面板中單擊框架集的邊框即可。面板中單擊框架集的邊框即可。 2021/3/9103.3.刪除框架刪除框架 將光標(biāo)放在框架的邊框上，當(dāng)光標(biāo)變成垂直箭頭（或水平箭頭）時(shí)，按住鼠標(biāo)左鍵，將框架的邊框拖出父框架或頁面之外，即可將這個(gè)框架刪除。2021/3/92021/3/911115.4 5.4 框架和框架集的屬性設(shè)置框架和框架集的屬性設(shè)置 1 1設(shè)置框架屬性設(shè)置框架屬性 選中框架后，選中框架后，“屬性屬性”面板

10、上將顯示相應(yīng)框面板上將顯示相應(yīng)框架的屬性。架的屬性。 顯示框架顯示框架源文件的源文件的保存路徑保存路徑選擇是否選擇是否顯示框架顯示框架的邊框的邊框設(shè)置框設(shè)置框架滾動(dòng)架滾動(dòng)條的屬條的屬性性2021/3/9122 2設(shè)置框架集屬性設(shè)置框架集屬性 選中框架集，屬性面板中將顯示框架集的屬選中框架集，屬性面板中將顯示框架集的屬性。性。 該面板中各參數(shù)的含義同框架屬性面板基本該面板中各參數(shù)的含義同框架屬性面板基本相同，不同的是在相同，不同的是在“行行”或或“列列”文本框中文本框中可設(shè)置框架的行高或列寬，在可設(shè)置框架的行高或列寬，在“單位單位”下拉下拉列表框中可選擇具體單位。列表框中可選擇具體單位。 202

11、1/3/92021/3/913135.5 5.5 保存框架和框架集保存框架和框架集 保存框架和框架集：保存框架和框架集：一個(gè)包含一個(gè)包含n n個(gè)框架的網(wǎng)頁實(shí)際上個(gè)框架的網(wǎng)頁實(shí)際上由由 n+1 n+1 個(gè)獨(dú)立的個(gè)獨(dú)立的htmlhtml頁面組成，頁面組成，1 1個(gè)框架集文件和個(gè)框架集文件和n n個(gè)包含在框架中顯示的文件。這個(gè)包含在框架中顯示的文件。這 n+1 n+1 個(gè)頁面必須單個(gè)頁面必須單獨(dú)保存，才能在瀏覽器中正常工作。獨(dú)保存，才能在瀏覽器中正常工作。 插入的網(wǎng)頁元插入的網(wǎng)頁元素位于哪個(gè)框架，就保存在哪個(gè)框架的網(wǎng)頁中。素位于哪個(gè)框架，就保存在哪個(gè)框架的網(wǎng)頁中。2021/3/914 點(diǎn)擊點(diǎn)擊“文件

12、文件保存全部保存全部”，則打開幾個(gè)另存為對(duì)，則打開幾個(gè)另存為對(duì)話框，提示保存各個(gè)部分；設(shè)計(jì)視圖中的選擇線話框，提示保存各個(gè)部分；設(shè)計(jì)視圖中的選擇線（或說成陰影）也會(huì)自動(dòng)的移動(dòng)到對(duì)應(yīng)的被保存（或說成陰影）也會(huì)自動(dòng)的移動(dòng)到對(duì)應(yīng)的被保存的框架中，據(jù)此可以知道正在保存的是哪一個(gè)框的框架中，據(jù)此可以知道正在保存的是哪一個(gè)框架文件。架文件。 DwDw先保存框架集文件，再保存框架文件。先保存框架集文件，再保存框架文件。 若只保存了框架集，而未保存某個(gè)框架（即沒指若只保存了框架集，而未保存某個(gè)框架（即沒指定該載入該框架的文檔），可以直接選定該框架定該載入該框架的文檔），可以直接選定該框架，然后創(chuàng)建鏈接來指向要載入的文檔。類似于根，然后創(chuàng)建鏈接來指向要載入的文檔。類似于根據(jù)現(xiàn)有文檔創(chuàng)建框架頁。據(jù)現(xiàn)有