05-利用框架技術制作網(wǎng)頁

1、通過本章學習，應該掌握以下內(nèi)容：通過本章學習，應該掌握以下內(nèi)容： 認識框架網(wǎng)頁認識框架網(wǎng)頁 創(chuàng)建框架網(wǎng)頁的方法創(chuàng)建框架網(wǎng)頁的方法 編輯框架網(wǎng)頁的方法編輯框架網(wǎng)頁的方法 1. 設置框架屬性的方法設置框架屬性的方法 框架網(wǎng)頁是框架網(wǎng)頁是種特殊的種特殊的HTML網(wǎng)頁，它可將瀏網(wǎng)頁，它可將瀏 覽器窗口分成不同的區(qū)域，稱為框架區(qū)域。每個區(qū)域覽器窗口分成不同的區(qū)域，稱為框架區(qū)域。每個區(qū)域 都可以顯示不同的網(wǎng)頁。都可以顯示不同的網(wǎng)頁。 在框架網(wǎng)頁中，用來分隔網(wǎng)頁的窗格稱為框架。在框架網(wǎng)頁中，用來分隔網(wǎng)頁的窗格稱為框架。 每個框架包括框架高度、框架寬度、滾動條和框架邊每個框架包括框架高度、框架寬度、滾動條和框

2、架邊 框，此外還可指定框架的內(nèi)邊距（框架與網(wǎng)頁正文之框，此外還可指定框架的內(nèi)邊距（框架與網(wǎng)頁正文之 間的距離）。間的距離）。 （1 1）只要單擊某一個框架區(qū)域內(nèi)的超鏈接，其）只要單擊某一個框架區(qū)域內(nèi)的超鏈接，其 指向的網(wǎng)頁就會在另一個框架區(qū)域中顯示，而不必將指向的網(wǎng)頁就會在另一個框架區(qū)域中顯示，而不必將 整個瀏覽器窗口中的內(nèi)容更換一遍。整個瀏覽器窗口中的內(nèi)容更換一遍。 （2 2）固定網(wǎng)頁中的某些內(nèi)容。）固定網(wǎng)頁中的某些內(nèi)容。 （3 3）并不是所有的瀏覽器都能顯示框架網(wǎng)頁，）并不是所有的瀏覽器都能顯示框架網(wǎng)頁， 這也是框架網(wǎng)頁的一個局限。這也是框架網(wǎng)頁的一個局限。 1框架網(wǎng)頁的特點框架網(wǎng)頁的特點

3、 2框架網(wǎng)頁的結構框架網(wǎng)頁的結構 根據(jù)框架分布的不同和各框架作用的不同，框根據(jù)框架分布的不同和各框架作用的不同，框 架網(wǎng)頁被分為多種類型。常用到的框架結構有：左架網(wǎng)頁被分為多種類型。常用到的框架結構有：左 側框架、右側框架、頂部框架、底部框架、上方和側框架、右側框架、頂部框架、底部框架、上方和 下方框架以及各種嵌套框架結構。下方框架以及各種嵌套框架結構。 在在Dreamweaver MXDreamweaver MX中創(chuàng)建框架的具體操作步驟中創(chuàng)建框架的具體操作步驟 如下：如下： （1 1）選擇主菜單中的）選擇主菜單中的“文件文件”| |“新建新建”命令，打開一命令，打開一 個新文檔窗。個新文檔窗

4、。 （2 2）將插入面板切換到）將插入面板切換到“框架框架”類，插入面板如圖所類，插入面板如圖所 示。示。 5.2 利用利用Dreamweaver MX處理框架處理框架 5.2.1 創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁 1. 建立框架建立框架 （3）執(zhí)行以下操作之一，即可創(chuàng)建框架。）執(zhí)行以下操作之一，即可創(chuàng)建框架。 選擇選擇“插入插入”|“框架框架”命令，從彈出的子菜單中選命令，從彈出的子菜單中選 擇任意一個選項。擇任意一個選項。 選擇選擇“修改修改”|“框架頁框架頁”命令，從彈出的子菜單中命令，從彈出的子菜單中 選擇任意一個選項。選擇任意一個選項。 單擊插入單擊插入“框架框架”面板上的任一種插入框架圖標

5、按面板上的任一種插入框架圖標按 鈕。鈕。 2建立嵌套的框架組建立嵌套的框架組 一個框架組嵌套在另一個框架組內(nèi)稱之為嵌套框架一個框架組嵌套在另一個框架組內(nèi)稱之為嵌套框架 組，使用嵌套框架組可以為一個文檔創(chuàng)建多個框架。組，使用嵌套框架組可以為一個文檔創(chuàng)建多個框架。 要創(chuàng)建嵌套的框架組，可執(zhí)行以下操作操作步驟：要創(chuàng)建嵌套的框架組，可執(zhí)行以下操作操作步驟： （1 1）將光標放到與插入嵌套框架組的框架中。）將光標放到與插入嵌套框架組的框架中。 （2 2）執(zhí)行以下操作之一，即可創(chuàng)建嵌套的框架組。）執(zhí)行以下操作之一，即可創(chuàng)建嵌套的框架組。 選擇選擇“插入插入”| |“框架框架”命令，從彈出的子菜單中選命令，

6、從彈出的子菜單中選 擇任意一個選項。擇任意一個選項。 選擇選擇“修改修改”| |“框架頁框架頁”命令，從彈出的子菜單中命令，從彈出的子菜單中 選擇任意一個選項。選擇任意一個選項。 單擊插入單擊插入“框架框架”面板中的插入框架圖標按鈕。面板中的插入框架圖標按鈕。 （1）選擇整個框架）選擇整個框架 要選擇整個框架可執(zhí)行以下操作之一：要選擇整個框架可執(zhí)行以下操作之一： 將鼠標指針移到整個邊框位置的同時，按住將鼠標指針移到整個邊框位置的同時，按住AltAlt鍵，鍵， 當鼠標指針變?yōu)榇怪奔^（或水平箭頭）時，單擊邊當鼠標指針變?yōu)榇怪奔^（或水平箭頭）時，單擊邊 框即可選中整個框架。框即可選中整個框架。

7、如果當前選擇的是一個子框架，需要重新選擇整個如果當前選擇的是一個子框架，需要重新選擇整個 框架，可以將鼠標指針移到第一次分割框架的邊框位框架，可以將鼠標指針移到第一次分割框架的邊框位 置，當鼠標指針變?yōu)榇怪奔^（或水平箭頭）時，單置，當鼠標指針變?yōu)榇怪奔^（或水平箭頭）時，單 擊邊框即可選中整個框架組。擊邊框即可選中整個框架組。 除了上述方法之外，選擇框架還可以通過除了上述方法之外，選擇框架還可以通過“框架框架” 面板來完成。面板來完成。 3選擇框架選擇框架 （2）選擇子框架）選擇子框架 在文檔窗口中按住在文檔窗口中按住Alt鍵，然后用鼠標單擊欲選擇鍵，然后用鼠標單擊欲選擇 的子框架。文檔窗口

8、中該子框架的周圍被虛線包圍，的子框架。文檔窗口中該子框架的周圍被虛線包圍， 表示它已經(jīng)被選中，同時在狀態(tài)欄上加黑顯示標記符表示它已經(jīng)被選中，同時在狀態(tài)欄上加黑顯示標記符 。 同樣也可以通過同樣也可以通過“框架框架”面板來選擇子框架。只面板來選擇子框架。只 要在框架面板中單擊相應的子框架即可，要在框架面板中單擊相應的子框架即可， 4刪除框架刪除框架 將光標放在框架的邊框上，當光標變成垂直箭頭將光標放在框架的邊框上，當光標變成垂直箭頭 （或水平箭頭）時，按住鼠標左鍵，將框架的邊框拖（或水平箭頭）時，按住鼠標左鍵，將框架的邊框拖 出父框架或頁面之外，即可將這個框架刪除。出父框架或頁面之外，即可將這個

9、框架刪除。 5.2.2 編輯框架網(wǎng)頁編輯框架網(wǎng)頁 框架創(chuàng)建好以后，就可以對框架進行編輯了。每框架創(chuàng)建好以后，就可以對框架進行編輯了。每 一個框架里都是一個文檔，可以直接添加內(nèi)容，也可一個框架里都是一個文檔，可以直接添加內(nèi)容，也可 以在框架內(nèi)打開已經(jīng)存在的文檔以在框架內(nèi)打開已經(jīng)存在的文檔。 演示編輯框架網(wǎng)頁演示編輯框架網(wǎng)頁 5.2.3 保存框架網(wǎng)頁保存框架網(wǎng)頁 每一個框架都包含一個文檔，因此一個框架集會每一個框架都包含一個文檔，因此一個框架集會 包含多個文檔。在保存文檔的時候，不能只簡單地保包含多個文檔。在保存文檔的時候，不能只簡單地保 存一個文檔，要將整個網(wǎng)頁文檔都保存下來。存一個文檔，要將整

10、個網(wǎng)頁文檔都保存下來。 演示編輯框架網(wǎng)頁演示編輯框架網(wǎng)頁 5.2.4 框架屬性及框架組屬性設置框架屬性及框架組屬性設置 1框架屬性框架屬性 利用框架屬性面板可以查看和設置框架的屬性，利用框架屬性面板可以查看和設置框架的屬性， 如為框架命名、設置框架的邊框及顏色等。如為框架命名、設置框架的邊框及顏色等。 首先選擇首先選擇“窗口窗口”|“|“其它其它”|“|“框架框架”命令，命令， 或按快捷鍵或按快捷鍵“Shift+F2”Shift+F2”，打開，打開“框架框架”面板；面板； 然后在框架面板中選中框架，此時屬性面板所顯然后在框架面板中選中框架，此時屬性面板所顯 示的即為框架的屬性面板，如圖所示。示

11、的即為框架的屬性面板，如圖所示。 在框架屬性面板中設定框架的屬性。在框架屬性面板中設定框架的屬性。 新創(chuàng)建的框架組默認屬性值為：無邊框，無滾動新創(chuàng)建的框架組默認屬性值為：無邊框，無滾動 條，在瀏覽器中無法看到創(chuàng)建的框架，要改變這條，在瀏覽器中無法看到創(chuàng)建的框架，要改變這 些屬性，需在屬性面板中修改相應的選項。些屬性，需在屬性面板中修改相應的選項。 首先單擊框架的邊框，選中框架組，此時屬首先單擊框架的邊框，選中框架組，此時屬 性面板中將自動切換顯示框架組的屬性，如圖所性面板中將自動切換顯示框架組的屬性，如圖所 示。示。 在框架組屬性面板中設定框架組的屬性。在框架組屬性面板中設定框架組的屬性。 2

12、框架組屬性框架組屬性 3設置框架的大小設置框架的大小 調(diào)整框架尺寸可以拖動框架的邊框來調(diào)整，但在需要調(diào)整框架尺寸可以拖動框架的邊框來調(diào)整，但在需要 精確定義框架尺寸的大小時，可以在屬性面板中進精確定義框架尺寸的大小時，可以在屬性面板中進 行框架尺寸的設置。設置框架尺寸的步驟如下：行框架尺寸的設置。設置框架尺寸的步驟如下： （1 1）單擊框架邊界，選定一個框架組。）單擊框架邊界，選定一個框架組。 （2 2）選擇）選擇“窗口窗口”| |“屬性屬性”命令，打開框架組屬性命令，打開框架組屬性 面板。面板。 （3 3）單擊框架組屬性面板右側圖框中的區(qū)域，選定）單擊框架組屬性面板右側圖框中的區(qū)域，選定 框

13、架組中的行或列?？蚣芙M中的行或列。 （4 4）在）在“值值”文本框中輸入調(diào)整框架尺寸的數(shù)值，文本框中輸入調(diào)整框架尺寸的數(shù)值， 然后在然后在“單位單位”下拉列表框中選擇一種度量單位。下拉列表框中選擇一種度量單位。 4設置框架和框架組的邊框設置框架和框架組的邊框 （1 1）設置框架邊框的屬性）設置框架邊框的屬性 設置框架邊框屬性的步驟如下：設置框架邊框屬性的步驟如下： 在文檔窗口按住在文檔窗口按住AltAlt鍵，然后單擊一個框架，或通鍵，然后單擊一個框架，或通 過過“框架框架”面板來選擇一個框架。面板來選擇一個框架。 在框架屬性面板上的在框架屬性面板上的“邊框邊框”下拉列表項中選擇下拉列表項中選擇

14、 任意一個選項。任意一個選項。 在在“邊框顏色邊框顏色”文本框中設置當前框架的邊框顏文本框中設置當前框架的邊框顏 色，也可單擊其后面的按鈕色，也可單擊其后面的按鈕 ，打開顏色選擇面，打開顏色選擇面 板來選擇所需顏色。板來選擇所需顏色。 （2 2）設置框架組邊框的屬性）設置框架組邊框的屬性 在文檔窗口單擊一個框架邊框，或通過在文檔窗口單擊一個框架邊框，或通過“框架框架” 面板來選擇一個框架組。面板來選擇一個框架組。 在框架組屬性面板上的在框架組屬性面板上的“邊框邊框”下拉列表項中選下拉列表項中選 擇任意一個選項，用于控制當前框架組的邊框顯示。擇任意一個選項，用于控制當前框架組的邊框顯示。 在在“

15、邊框顏色邊框顏色”文本框中設置當前框架組中所有文本框中設置當前框架組中所有 框架的邊框顏色，但是這一設置將被單個框架的邊框架的邊框顏色，但是這一設置將被單個框架的邊 框顏色所覆蓋?？蝾伾采w。 在在“邊框寬度邊框寬度”文本框中設置當前框架組中所有文本框中設置當前框架組中所有 框架的邊框寬度，如輸入為框架的邊框寬度，如輸入為0 0，表示不顯示邊框。，表示不顯示邊框。 5.2.5 設置框架中的鏈接目標設置框架中的鏈接目標 在框架網(wǎng)頁中建立超鏈接的操作步驟如下：在框架網(wǎng)頁中建立超鏈接的操作步驟如下： （1 1）選中要創(chuàng)建超鏈接的文本（或圖像），打開其）選中要創(chuàng)建超鏈接的文本（或圖像），打開其 屬性

16、面板。屬性面板。 （2 2）在）在“鏈接鏈接”文本框中輸入要鏈接文件的文本框中輸入要鏈接文件的URLURL地址，地址， 或單擊按鈕或單擊按鈕 ，選取要鏈接的文件。，選取要鏈接的文件。 （3 3）單擊）單擊“目標目標”下拉列表，選擇一種框架名稱，下拉列表，選擇一種框架名稱， 鏈接文件將在該框架中打開。鏈接文件將在該框架中打開。 （4 4）保存框架網(wǎng)頁，瀏覽頁面。）保存框架網(wǎng)頁，瀏覽頁面。 5.3 5.3 利用利用HTMLHTML創(chuàng)建網(wǎng)頁框架創(chuàng)建網(wǎng)頁框架 5.3.1 利用利用HTML創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁 利用利用HTML創(chuàng)建框架網(wǎng)頁時首先要指定框架結創(chuàng)建框架網(wǎng)頁時首先要指定框架結 構。即必須有

17、一個網(wǎng)頁用于指定整個瀏覽器窗口如何構。即必須有一個網(wǎng)頁用于指定整個瀏覽器窗口如何 劃分，也就是所謂的框架集網(wǎng)頁。在框架集網(wǎng)頁中不劃分，也就是所謂的框架集網(wǎng)頁。在框架集網(wǎng)頁中不 包含任何可顯示的內(nèi)容，而只是包含如何組織各個框包含任何可顯示的內(nèi)容，而只是包含如何組織各個框 架的信息和框架中的初始頁面信息。架的信息和框架中的初始頁面信息。 1指定框架的結構指定框架的結構 在框架集網(wǎng)頁中，除了基本的在框架集網(wǎng)頁中，除了基本的HTML、HEAD等等 標記符以外，主要包括框架集標記符標記符以外，主要包括框架集標記符FRAMESET （必須有結束標記符必須有結束標記符）和框架標記符和框架標記符 FRAME（

18、沒有結束標記符沒有結束標記符）。 使用使用FRAMESET標記符的標記符的rows屬性或屬性或cols屬性分別屬性分別 可以構造出橫向分隔框架和縱向分隔框架；根據(jù)可以構造出橫向分隔框架和縱向分隔框架；根據(jù)rows 屬性或屬性或cols屬性的取值，可以確定框架結構中包含多屬性的取值，可以確定框架結構中包含多 少框架，相應也就必須設置對應個數(shù)的少框架，相應也就必須設置對應個數(shù)的FRAME標記標記 符。符。 5.3.2 框架結構的定義框架結構的定義 rows屬性和屬性和cols屬性的取值包括三種類型，一是屬性的取值包括三種類型，一是 直接指定像素數(shù)；二是指定百分數(shù)（即相對于瀏覽器直接指定像素數(shù)；二是

19、指定百分數(shù)（即相對于瀏覽器 窗口大小的百分數(shù)）；三是使用窗口大小的百分數(shù)）；三是使用n*（其中其中n是是1的整的整 數(shù)數(shù)）指定相對大小。指定屬性值時，數(shù)值之間用逗號指定相對大小。指定屬性值時，數(shù)值之間用逗號 分開并且不能有空格，根據(jù)值的個數(shù)和設置可以確定分開并且不能有空格，根據(jù)值的個數(shù)和設置可以確定 框架數(shù)目和位置?？蚣軘?shù)目和位置。 當屬性值為當屬性值為n時，表示框架的大小為由前兩種方時，表示框架的大小為由前兩種方 法（即像素數(shù)或百分數(shù)）指定框架大小后瀏覽器窗口法（即像素數(shù)或百分數(shù)）指定框架大小后瀏覽器窗口 的剩余部分。如果取值包括多個的剩余部分。如果取值包括多個n*，那么，那么n*表示框表示

20、框 架之間的比例關系。架之間的比例關系。 如果網(wǎng)頁設計者需要創(chuàng)建一些復雜的框架集，如果網(wǎng)頁設計者需要創(chuàng)建一些復雜的框架集， 即同時包含橫向和縱向的框架，此時可以使用框架嵌即同時包含橫向和縱向的框架，此時可以使用框架嵌 套?？蚣芮短讜r只要在要使用套?？蚣芮短讜r只要在要使用FRAME標記時再使用標記時再使用 FRAMESET標記一個框架集即可。標記一個框架集即可。 2框架的嵌套框架的嵌套 框架初始化是指為各個框架指定初始顯示的框架初始化是指為各個框架指定初始顯示的 頁面，此時應使用頁面，此時應使用FRAME標記的標記的src屬性，將該屬性，將該 屬性的值指定為要在框架中顯示的頁面即可。指屬性的值指

21、定為要在框架中顯示的頁面即可。指 定頁面時可以使用相對路徑，也可以使用絕對路定頁面時可以使用相對路徑，也可以使用絕對路 徑，徑， 5.3.3 框架屬性設置框架屬性設置 1框架的初始化框架的初始化 （1）框架邊框的設置）框架邊框的設置 border屬性可以用于設置邊框的寬度，其值為像屬性可以用于設置邊框的寬度，其值為像 素數(shù)。素數(shù)。 使用使用FRAMEFRAME標記符的標記符的frameborderframeborder屬性可以控制是否屬性可以控制是否 顯示框架邊框，該屬性的取值為顯示框架邊框，該屬性的取值為1 1或或0 0。如果取值為。如果取值為1 1， 表示生成表示生成3D3D邊框邊框（此為

22、默認設置此為默認設置）；如果取值為；如果取值為0 0， 如如frameborder=0frameborder=0，則不顯示邊框。只有將所有相，則不顯示邊框。只有將所有相 鄰框架的邊框都設置為鄰框架的邊框都設置為0 0，才能隱藏邊框。，才能隱藏邊框。 2邊框效果邊框效果 （2）框架滾動條的設置）框架滾動條的設置 使用使用FRAME標記符的標記符的scrolling屬性可以控制是屬性可以控制是 否在框架內(nèi)加入滾動條，其值可以取為否在框架內(nèi)加入滾動條，其值可以取為yes、no、 auto。yes表示強制加垂直滾動條和水平滾動條；表示強制加垂直滾動條和水平滾動條；no 表示框架內(nèi)不加滾動條；表示框架內(nèi)不加滾動條；auto表示需要時加滾動條表示需要時加滾動條 （默認設置默認設置）。一般情況下采用默認設置即可。一般情況下采用默認設置即可。 （3）設置邊框的不可移動屬性）設置邊框的不可移動屬性 一般而言，瀏覽者可以使用鼠標移動框架的邊框，一般而言，瀏覽者可以使用鼠標移動框架的邊框， 以便查看內(nèi)容。但很多時候為了保持頁面的整體效以便查看內(nèi)容。但很多時候為了保持頁面的整體效