Dreamweaver網(wǎng)頁設計之：框架課件

第7章框架在設計網(wǎng)頁頁面布局的時候，一般我們可以通過表格來進行排版，但還有一類網(wǎng)頁可以使用框架來設計。利用框架設計的頁面，可以將不同的信息內(nèi)容分類顯示在不同的區(qū)域內(nèi)，那樣可以簡化操作，使頁面布局合理，訪問者瀏覽查看也更方便。學習目標理解框架和框架集的概念；掌握使用框架設計網(wǎng)頁的方法。第7章框架在設計網(wǎng)頁頁面布局的時候，一般我們1Dreamweaver網(wǎng)頁設計之：框架課件2Dreamweaver網(wǎng)頁設計之：框架課件3本章內(nèi)容

認識框架網(wǎng)頁創(chuàng)建框架集為框架添加內(nèi)容保存框架和框架集框架和框架集的選擇編輯框架或框架集設置框架和框架集屬性利用HTML創(chuàng)建網(wǎng)頁框架本章內(nèi)容認識框架網(wǎng)頁4認識框架網(wǎng)頁框架是在同一個瀏覽窗口中顯示多個網(wǎng)頁的技術，框架網(wǎng)頁是一種特殊的網(wǎng)頁。框架將窗口劃分為不同的部分，各部分中都有各自的網(wǎng)頁，總體構架出一個框架集。此外，通過為超鏈接指定目標框架，可以在框架之間建立起以內(nèi)容為媒介的聯(lián)系，因而實現(xiàn)頁面導航的功能。

認識框架網(wǎng)頁框架是在同一個瀏覽窗口中顯示多個網(wǎng)頁的5認識框架網(wǎng)頁框架（Frames）技術由框架集（Frameset）和框架（Frame）兩部分組成。框架不是文件，它是瀏覽器窗口中的一個區(qū)域，是存放文檔的容器，可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關的HTML文檔?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的URL。返回認識框架網(wǎng)頁框架（Frames）技術由框架集（Fr6創(chuàng)建框架集1、插入預置框架樣式單擊【插入】工具欄【布局】類別中的【框架】按鈕，在彈出的下拉菜單中選擇所需的框架類型，即可在頁面上插入相應的框架，并彈出【框架標簽輔助功能屬性】對話框，可為框架指定框架名稱。框架下拉菜單創(chuàng)建框架集1、插入預置框架樣式框架下拉菜單7創(chuàng)建框架集2、直接新建預定義框架文件執(zhí)行“文件/新建”命令，再彈出的“新建文檔”對話框“類別”列表框中選擇“框架集”選項，在右側選擇預定義的框架集類型。新建文檔對話框創(chuàng)建框架集2、直接新建預定義框架文件新建文檔對話框8創(chuàng)建框架集3、自定義框架樣式先選擇【查看】|【可視化助理】|【框架邊框】命令，在頁面中顯示出框架的邊框，然后將光標放置在框架的的邊框線上，當指針變?yōu)殡p指的箭頭時，按住鼠標左鍵拖動邊框到欲建框架的位置。創(chuàng)建框架集3、自定義框架樣式9創(chuàng)建框架集4、創(chuàng)建嵌套框架先在頁面中創(chuàng)建一個框架，將插入點置于要創(chuàng)建嵌套的框架區(qū)域，再次執(zhí)行創(chuàng)建框架的操作。返回創(chuàng)建框架集4、創(chuàng)建嵌套框架返回10為框架添加內(nèi)容

當窗口被分割為幾個框架以后，每個框架都可以作為獨立的網(wǎng)頁進行編輯，也可以直接把某個已經(jīng)存在的頁面賦給一個框架。也可在框架中打開已有的HTML文檔，具體操作步驟如下。（1）在文檔窗口中，將光標放置在某一框架內(nèi)。（2）選擇“文件>在框架中打開”命令，打開一個已有文檔。返回為框架添加內(nèi)容當窗口被分割為幾個框架以后，每個框架都可以11保存框架和框架集框架集文件和與之相關的框架文件必須先保存，才能在瀏覽器中預覽整個框架網(wǎng)頁內(nèi)容?？梢苑謩e保存框架集頁面或框架頁面，也可以同時保存所有打開的框架文件和框架集頁面。保存框架集文件——選擇框架集，然后選擇【文件】|【保存框架頁】命令。保存框架中顯示的文檔——在框架中單擊，然后選擇【文件】|【保存框架】命令。保存所有文件——選擇【文件】|【保存全部】命令。返回保存框架和框架集框架集文件和與之相關的框架文件必須先保存，才12框架和框架集的選擇在對框架或框架集進行操作之前，必須先選擇框架或框架集。選擇框架按住Alt鍵同時鼠標左鍵單擊欲選擇的框架；“窗口>框架”，啟用框架控制面板，在面板中用鼠標左鍵單擊欲選擇的框架。選擇框架集在框架面板中鼠標左鍵單擊框架集的邊框在文檔窗口中鼠標左鍵單擊框架的邊框。返回框架和框架集的選擇在對框架或框架集進行操作之前，必須先選131、編輯框架對框架頁面的編輯與對普通頁面的編輯相同，包括輸入文本、插入圖像、添加表格和表單的方法都是相同的。此外，還有一種比較簡便的編輯框架的方法，即先創(chuàng)建好整個框架集中各部分框架頁面，然后將其在框架集中對應的窗口打開。編輯框架或框架集1、編輯框架編輯框架或框架集142、調(diào)整框架的大小通常調(diào)整框架的大小的方法有兩種，即通過拖動框架的邊框或指定想要的確切設置來調(diào)整框架的大小。

（1）拖動框架的邊框調(diào)整框架大小將光標放在要調(diào)整的框架邊框上，當光標變?yōu)椤啊毙螤顣r，按住鼠標左鍵，并拖動。

（2）通過屬性面板可精確調(diào)整框架大小。

編輯框架或框架集2、調(diào)整框架的大小編輯框架或框架集153、拆分框架在框架網(wǎng)頁中不但可以調(diào)整框架的大小，還可以設置網(wǎng)頁中顯示的框架的多少。在框架網(wǎng)頁中可以任意地拆分框架。先將光標置于要拆分的框架窗口中，然后選擇“修改>框架集”命令，彈出其子菜單，其中有4種拆分方式。先將光標置于要拆分的框架窗口中，然后單擊“插入”面板“布局”選項卡中“框架”按鈕右側的黑色箭頭，在彈出的菜單中選擇一種拆分框架的方式，將框架窗口再劃分。選定要拆分的框架集，按住<Alt>鍵的同時，將鼠標指針放到框架的邊框上，當鼠標指針呈雙向箭頭時，拖曳鼠標拆分框架。編輯框架或框架集3、拆分框架編輯框架或框架集164、刪除框架

當加入了一條邊線后，發(fā)現(xiàn)加錯了，如何去掉這條線一種方法是修改HTML代碼，把相關的語句刪除；還有一種方法是用鼠標把要刪除的邊線拖曳到父框架的邊框上，這條邊線就被刪除了。編輯框架或框架集返回4、刪除框架編輯框架或框架集返回17設置框架和框架集屬性框架屬性確定了框架集內(nèi)各個框架的名稱、源文件、邊框的框架能否調(diào)整大小等。框架集屬性確定框架的大小和框架之間的邊框?qū)挾群皖伾?。在框架結構文檔中，框架和框架集都有各自的屬性設置面板，它們的屬性應該分別進行設置。設置框架和框架集屬性框架屬性確定了框架集內(nèi)各個框架的181、設置框架的屬性在【框架】面板中單擊某一框架區(qū)域，即可在頁面中選擇此框架，然后可在屬性檢查器中設置其屬性。設置框架及框架集的屬性1、設置框架的屬性設置框架及框192、設置框架集的屬性單擊框架的邊框，選擇框架集，然后在屬性檢查器中設置此框架集的屬性。框架集的屬性檢查器設置框架及框架集的屬性返回2、設置框架集的屬性框架集的屬性檢查器設置框架及201、指定框架結構在框架集網(wǎng)頁中，除了基本的HTML、HEAD等標記符以外，主要包括框架集標記符FRAMESET（必須有結束標記符<／FRAMESET>）和框架標記符FRAME（沒有結束標記符）。由于框架是按照行或列排列的，所以在建立框架結構時，使用FRAMESET標記符的rows屬性或cols屬性分別可以構造出橫向分隔框架和縱向分隔框架。利用HTML創(chuàng)建網(wǎng)頁框架1、指定框架結構利用HTML創(chuàng)建網(wǎng)頁框架212．框架的初始化框架初始化是指為各個框架指定初始顯示的頁面，此時應使用FRAME標記的src屬性，將該屬性的值指定為要在框架中顯示的頁面即可。<framesetrows=“30%,*”><framesrc=“1.html”><framesrc=“2.html”></frameset>利用HTML創(chuàng)建網(wǎng)頁框架2．框架的初始化利用HTML創(chuàng)建網(wǎng)頁框架223．框架的嵌套如果網(wǎng)頁設計者需要創(chuàng)建一些復雜的框架集，即同時包含橫向和縱向的框架，此時可以使用框架嵌套。框架嵌套是使用FRAMESET標記的嵌套來實現(xiàn)的。<framesetrows=“30%,*”><framesetcols=“40%,*”>……</frameset></frameset>利用HTML創(chuàng)建網(wǎng)頁框架3．框架的嵌套利用HTML創(chuàng)建網(wǎng)頁框架234、邊框效果

（1）框架邊框的設置

border屬性可以用于設置邊框的寬度，其值為像素數(shù)。（2）框架滾動條的設置使用FRAME標記符的scrolling屬性可以控制是否在框架內(nèi)加入滾動條，其值可以取為yes、no、auto。（3）設置邊框的不可移動屬性使用FRAME標記符的noresize屬性，該屬性不需要任何取值，即：<FRAMEnoresize>（4）設置框架空白FRAME標記符的marginwidth和marginheight屬性可以控制框架邊框與數(shù)據(jù)之間的距離，這個屬性的取值都是像素數(shù)。利用HTML創(chuàng)建網(wǎng)頁框架4、邊框效果利用HTML創(chuàng)建網(wǎng)頁框架245．指定超鏈接的目標框架控制超鏈接的目標文件在哪一個框架內(nèi)顯示的方法是在a標記符內(nèi)使用target屬性，格式為：<ahref="目標文件"target="目標框架名">超鏈接內(nèi)容<／a>利用HTML創(chuàng)建網(wǎng)頁框架返回5．指定超鏈接的目標框架利用HTML創(chuàng)建網(wǎng)頁框架返回25解決瀏覽器無法顯示框架的問題

在Dreamweaver中允許指定在不支持框架的瀏覽器中編輯內(nèi)容。選擇【修改】|【框架頁】|【編輯無框架內(nèi)容】命令，然后在文檔窗口中像處理普通文檔一樣輸入或插入提示內(nèi)容。解決瀏覽器無法顯示框架的問題在Dreamweaver26課堂實踐與練習：制作論壇框架課堂實踐與練習：制作論壇框架27小結框架提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同HTML文檔的方法。利用框架設計的頁面，可以將不同的信息內(nèi)容分類顯示在不同的區(qū)域內(nèi)，使頁面布局合理，訪問者瀏覽查看也更方便。框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的URL。創(chuàng)建一個框架頁面大致需要5個步驟，分別是：創(chuàng)建框架、指定框架頁、修改框架樣式、保存框架、鏈接框架。小結框架提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯28第7章框架在設計網(wǎng)頁頁面布局的時候，一般我們可以通過表格來進行排版，但還有一類網(wǎng)頁可以使用框架來設計。利用框架設計的頁面，可以將不同的信息內(nèi)容分類顯示在不同的區(qū)域內(nèi)，那樣可以簡化操作，使頁面布局合理，訪問者瀏覽查看也更方便。學習目標理解框架和框架集的概念；掌握使用框架設計網(wǎng)頁的方法。第7章框架在設計網(wǎng)頁頁面布局的時候，一般我們29Dreamweaver網(wǎng)頁設計之：框架課件30Dreamweaver網(wǎng)頁設計之：框架課件31本章內(nèi)容

認識框架網(wǎng)頁創(chuàng)建框架集為框架添加內(nèi)容保存框架和框架集框架和框架集的選擇編輯框架或框架集設置框架和框架集屬性利用HTML創(chuàng)建網(wǎng)頁框架本章內(nèi)容認識框架網(wǎng)頁32認識框架網(wǎng)頁框架是在同一個瀏覽窗口中顯示多個網(wǎng)頁的技術，框架網(wǎng)頁是一種特殊的網(wǎng)頁?？蚣軐⒋翱趧澐譃椴煌牟糠郑鞑糠种卸加懈髯缘木W(wǎng)頁，總體構架出一個框架集。此外，通過為超鏈接指定目標框架，可以在框架之間建立起以內(nèi)容為媒介的聯(lián)系，因而實現(xiàn)頁面導航的功能。

認識框架網(wǎng)頁框架是在同一個瀏覽窗口中顯示多個網(wǎng)頁的33認識框架網(wǎng)頁框架（Frames）技術由框架集（Frameset）和框架（Frame）兩部分組成?？蚣懿皇俏募菫g覽器窗口中的一個區(qū)域，是存放文檔的容器，可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關的HTML文檔?？蚣芗荋TML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的URL。返回認識框架網(wǎng)頁框架（Frames）技術由框架集（Fr34創(chuàng)建框架集1、插入預置框架樣式單擊【插入】工具欄【布局】類別中的【框架】按鈕，在彈出的下拉菜單中選擇所需的框架類型，即可在頁面上插入相應的框架，并彈出【框架標簽輔助功能屬性】對話框，可為框架指定框架名稱?？蚣芟吕藛蝿?chuàng)建框架集1、插入預置框架樣式框架下拉菜單35創(chuàng)建框架集2、直接新建預定義框架文件執(zhí)行“文件/新建”命令，再彈出的“新建文檔”對話框“類別”列表框中選擇“框架集”選項，在右側選擇預定義的框架集類型。新建文檔對話框創(chuàng)建框架集2、直接新建預定義框架文件新建文檔對話框36創(chuàng)建框架集3、自定義框架樣式先選擇【查看】|【可視化助理】|【框架邊框】命令，在頁面中顯示出框架的邊框，然后將光標放置在框架的的邊框線上，當指針變?yōu)殡p指的箭頭時，按住鼠標左鍵拖動邊框到欲建框架的位置。創(chuàng)建框架集3、自定義框架樣式37創(chuàng)建框架集4、創(chuàng)建嵌套框架先在頁面中創(chuàng)建一個框架，將插入點置于要創(chuàng)建嵌套的框架區(qū)域，再次執(zhí)行創(chuàng)建框架的操作。返回創(chuàng)建框架集4、創(chuàng)建嵌套框架返回38為框架添加內(nèi)容

當窗口被分割為幾個框架以后，每個框架都可以作為獨立的網(wǎng)頁進行編輯，也可以直接把某個已經(jīng)存在的頁面賦給一個框架。也可在框架中打開已有的HTML文檔，具體操作步驟如下。（1）在文檔窗口中，將光標放置在某一框架內(nèi)。（2）選擇“文件>在框架中打開”命令，打開一個已有文檔。返回為框架添加內(nèi)容當窗口被分割為幾個框架以后，每個框架都可以39保存框架和框架集框架集文件和與之相關的框架文件必須先保存，才能在瀏覽器中預覽整個框架網(wǎng)頁內(nèi)容?？梢苑謩e保存框架集頁面或框架頁面，也可以同時保存所有打開的框架文件和框架集頁面。保存框架集文件——選擇框架集，然后選擇【文件】|【保存框架頁】命令。保存框架中顯示的文檔——在框架中單擊，然后選擇【文件】|【保存框架】命令。保存所有文件——選擇【文件】|【保存全部】命令。返回保存框架和框架集框架集文件和與之相關的框架文件必須先保存，才40框架和框架集的選擇在對框架或框架集進行操作之前，必須先選擇框架或框架集。選擇框架按住Alt鍵同時鼠標左鍵單擊欲選擇的框架；“窗口>框架”，啟用框架控制面板，在面板中用鼠標左鍵單擊欲選擇的框架。選擇框架集在框架面板中鼠標左鍵單擊框架集的邊框在文檔窗口中鼠標左鍵單擊框架的邊框。返回框架和框架集的選擇在對框架或框架集進行操作之前，必須先選411、編輯框架對框架頁面的編輯與對普通頁面的編輯相同，包括輸入文本、插入圖像、添加表格和表單的方法都是相同的。此外，還有一種比較簡便的編輯框架的方法，即先創(chuàng)建好整個框架集中各部分框架頁面，然后將其在框架集中對應的窗口打開。編輯框架或框架集1、編輯框架編輯框架或框架集422、調(diào)整框架的大小通常調(diào)整框架的大小的方法有兩種，即通過拖動框架的邊框或指定想要的確切設置來調(diào)整框架的大小。

（1）拖動框架的邊框調(diào)整框架大小將光標放在要調(diào)整的框架邊框上，當光標變?yōu)椤啊毙螤顣r，按住鼠標左鍵，并拖動。

（2）通過屬性面板可精確調(diào)整框架大小。

編輯框架或框架集2、調(diào)整框架的大小編輯框架或框架集433、拆分框架在框架網(wǎng)頁中不但可以調(diào)整框架的大小，還可以設置網(wǎng)頁中顯示的框架的多少。在框架網(wǎng)頁中可以任意地拆分框架。先將光標置于要拆分的框架窗口中，然后選擇“修改>框架集”命令，彈出其子菜單，其中有4種拆分方式。先將光標置于要拆分的框架窗口中，然后單擊“插入”面板“布局”選項卡中“框架”按鈕右側的黑色箭頭，在彈出的菜單中選擇一種拆分框架的方式，將框架窗口再劃分。選定要拆分的框架集，按住<Alt>鍵的同時，將鼠標指針放到框架的邊框上，當鼠標指針呈雙向箭頭時，拖曳鼠標拆分框架。編輯框架或框架集3、拆分框架編輯框架或框架集444、刪除框架

當加入了一條邊線后，發(fā)現(xiàn)加錯了，如何去掉這條線一種方法是修改HTML代碼，把相關的語句刪除；還有一種方法是用鼠標把要刪除的邊線拖曳到父框架的邊框上，這條邊線就被刪除了。編輯框架或框架集返回4、刪除框架編輯框架或框架集返回45設置框架和框架集屬性框架屬性確定了框架集內(nèi)各個框架的名稱、源文件、邊框的框架能否調(diào)整大小等?？蚣芗瘜傩源_定框架的大小和框架之間的邊框?qū)挾群皖伾取Ｔ诳蚣芙Y構文檔中，框架和框架集都有各自的屬性設置面板，它們的屬性應該分別進行設置。設置框架和框架集屬性框架屬性確定了框架集內(nèi)各個框架的461、設置框架的屬性在【框架】面板中單擊某一框架區(qū)域，即可在頁面中選擇此框架，然后可在屬性檢查器中設置其屬性。設置框架及框架集的屬性1、設置框架的屬性設置框架及框472、設置框架集的屬性單擊框架的邊框，選擇框架集，然后在屬性檢查器中設置此框架集的屬性。框架集的屬性檢查器設置框架及框架集的屬性返回2、設置框架集的屬性框架集的屬性檢查器設置框架及481、指定框架結構在框架集網(wǎng)頁中，除了基本的HTML、HEAD等標記符以外，主要包括框架集標記符FRAMESET（必須有結束標記符<／FRAMESET>）和框架標記符FRAME（沒有結束標記符）。由于框架是按照行或列排列的，所以在建立框架結構時，使用FRAMESET標記符的rows屬性或cols屬性分別可以構造出橫向分隔框架和縱向分隔框架。利用HTML創(chuàng)建網(wǎng)頁框架1、指定框架結構利用HTML創(chuàng)建網(wǎng)頁框架492．框架的初始化框架初始化是指為各個框架指定初始顯示的頁面，此時應使用FRAME標記的src屬性，將該屬性的值指定為要在框架中顯示的頁面即可。<framesetrows=“30%,*”><framesrc=“1.html”><framesrc=“2.html”></frameset>利用HTML創(chuàng)建網(wǎng)頁框架2．框架的初始化利用HTML創(chuàng)建網(wǎng)頁框架503．框架的嵌套如果網(wǎng)頁設計者需要創(chuàng)建一些復雜的框架集，即同時包含橫向和縱向的框架，此時可以使用框架嵌套。框架嵌套是使用FRAMESET標記的嵌套來實現(xiàn)的。<framesetrows=“30%,*”><framesetcols=“40%,*”>……</frameset></frameset>利用HTML創(chuàng)建網(wǎng)頁框架3．框架的