Dreamweaver課件第九章框架、模板和庫第九章框架、模板和庫9.1框架和框架集的介紹9.2創(chuàng)建框架和框架集9.3選擇和刪除框架和框架集9.4設(shè)置框架和框架集屬性9.5創(chuàng)建模板9.6定義模板編輯區(qū)域9.7創(chuàng)建與應(yīng)用庫項目9.8總結(jié)9.1框架和框架集的介紹

框架可以將一個瀏覽器窗口劃分為多個區(qū)域，且每個區(qū)域都可以顯示不同的HTML文檔。其效果是在瀏覽網(wǎng)頁時，網(wǎng)頁中一部分區(qū)域（如公司Logo、導(dǎo)航條）內(nèi)容不改變，而其他區(qū)域內(nèi)容在不斷發(fā)生改變。一般大型的論壇會用到框架集。

9.1框架和框架集的介紹框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔。框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小、位置以及在框架中初始顯示頁面的地址?？蚣芗募旧聿话跒g覽器中顯示的網(wǎng)頁內(nèi)容，框架集文件只是向瀏覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁的有關(guān)信息。

作用：可以將幾個獨立的頁面同時顯示在瀏覽器中。增強(qiáng)網(wǎng)頁的導(dǎo)航功能9.2創(chuàng)建框架和框架集9.2.1插入預(yù)定義框架集9.2.2創(chuàng)建嵌套框架集9.2.3保存框架和框架集文件9.2.1插入預(yù)定義框架集在Dreamweaver中預(yù)定義了一些框架集樣式，需要使用時直接插入即可。執(zhí)行“插入”|“HTML”|“框架”|“上方及左側(cè)嵌套”命令。9.2.2創(chuàng)建嵌套框架集如果預(yù)定義框架集不能滿足需要，還可以在它的基礎(chǔ)上進(jìn)行分割.修改—框架集—拆分上(下、左、右）框架9.2.3保存框架和框架集文件

保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁。每個框架包含一個網(wǎng)頁，一個框架集則包含多個網(wǎng)頁，在保存時應(yīng)保存所有的框架與框架集。

保存（每個子框架、最外面框架集都要保存成網(wǎng)頁文件）手動：先通過“文件/保存框架”命令依此保存子框架，再通過“文件/框架集另存為”命令保存框架集。自動：通過“文件/保存全部”命令，系統(tǒng)先保存框架集，后依此保存子框架。保存框架保存框架集保存框架集中的所有網(wǎng)頁保存框架

框架和框架集的保存與一般網(wǎng)頁文檔的保存不同。將插入點定位到要保存的框架中。選擇[文件][保存框架]菜單命令，在打開的“另存為”對話框中像保存其他網(wǎng)頁一樣指定保存路徑和文件名，然后單擊“保存”按鈕即可。保存框架集

保存框架集的方法與保存框架相似，選中所需保存的框架集。選擇[文件][框架集另存為]菜單命令，打開“另存為”對話框。在“保存在”下拉列表框中選擇框架集的保存路徑，在“文件名”文本框中為框架集命名。單擊“保存”按鈕即可保存框架集。保存框架集中的所有網(wǎng)頁

選擇[文件][保存全部]菜單命令，打開“另存為”對話框，保存相關(guān)網(wǎng)頁。9.3選擇和刪除框架和框架集9.3.1認(rèn)識“框架”面板9.3.2選擇框架和框架集9.3.1認(rèn)識“框架”面板“框架”面板中顯示所創(chuàng)建的框架結(jié)構(gòu)，并在不同的框架區(qū)域中顯示框架的名稱。當(dāng)在框架網(wǎng)頁中新建、刪除框架，或修改框架的尺寸、名稱等時，“框架”面板中的示意圖會跟隨變化。9.3.2選擇框架和框架集在編輯窗口中選擇在“框架”面板中選擇在編輯窗口中選擇在編輯窗口中選擇框架的方法：鼠標(biāo)放在某個框架處，按住【Alt】鍵，再按向上的方向鍵即可，如果要改選其他的框架，則繼續(xù)上述操作就會不斷更改被選的框架。選擇框架集時，單擊框架邊框即可，選取的所有框架邊框呈虛線。在“框架”面板中選擇

在“框架”面板中單擊框架區(qū)域中的任意位置即可選擇框架，選中的框架以粗黑框顯示。在“框架”面板中單擊框架邊框即可選擇框架集，如果要選擇整個框架集，只需單擊框架最外面的邊框即可。

9.4設(shè)置框架和框架集屬性9.4.1設(shè)置框架的屬性9.4.2設(shè)置框架集的屬性9.4.1設(shè)置框架的屬性利用“屬性”面板可以設(shè)置框架和框架集的屬性，包括框架名稱、框架源文件、框架邊框等。命名選取的框架

框架源文件的保存地址選擇是否顯示框架的邊框

設(shè)置框架滾動條的屬性設(shè)置是否能改變框架大小設(shè)置框架邊框的顏色設(shè)置框架內(nèi)容距上下左右邊框的距離9.4.2設(shè)置框架集的屬性該面板中各參數(shù)的含義同選中框架時的屬性面板基本相同，不同的是在“行”或“列”文本框中可設(shè)置框架的行或列的寬度，在“單位”下拉列表框中可選擇寬度的單位。框架集屬性如果要將框架分隔線設(shè)置成1像素寬,可在框架集屬性中將寬度設(shè)為1且指定顏色,在子框架屬性中不設(shè)置邊框.9.5創(chuàng)建模板9.5.1模板概述9.5.2創(chuàng)建空白模板文檔9.5.3使用“資源”面板創(chuàng)建模板9.5.4從現(xiàn)有網(wǎng)頁文檔創(chuàng)建模板9.5.1模板概述使用模板功能可以創(chuàng)建具有相同頁面布局、設(shè)計風(fēng)格一致的網(wǎng)頁。模板分為可編輯區(qū)域和不可編輯區(qū)域兩部分。不可編輯區(qū)域包含了頁面中的所有元素，構(gòu)成頁面的基本框架，可編輯區(qū)域是為了添加相應(yīng)的內(nèi)容而設(shè)置的，在后期維護(hù)中，可通過改變模板的不可編輯區(qū)域，快速更新整個站點中所有應(yīng)用了模板的頁面布局。9.5.2創(chuàng)建空白模板文檔1）執(zhí)行“文件”|“新建”命令；2）在彈出的對話框中選擇“空白頁”選項卡，在“頁面類型”下拉列表框中選擇“HTML模板”選項，在“布局”下拉列表框中選項“無”選項。單擊“創(chuàng)建”按鈕即可。9.5.3使用“資源”面板創(chuàng)建模板1）執(zhí)行“窗口”|“資源”命令；2）打開“資源”模板，在該面板中單擊“模板”按鈕，即顯示“模板”樣式，再點擊面板右下角的“新建模板”按鈕?！澳０濉卑粹o“新建模板”按鈕9.5.4從現(xiàn)有網(wǎng)頁文檔創(chuàng)建模板1）執(zhí)行“文件”|“打開”命令，打開網(wǎng)頁文件；2）再執(zhí)行“文件”|“另存為模板”命令；3）在彈出的“另存模板”對話框中，在“站點”下拉列表中選擇站點名，再在“另存為”文本框中輸入模板的名稱，點擊“保存”按鈕，再在彈出的“更新鏈接”對話框中，點擊“是”即可。注意：模板文件擴(kuò)展名為.dwt。9.6定義模板編輯區(qū)域模板的編輯區(qū)分為兩種：可編輯區(qū)：由模板創(chuàng)建的文檔可以編輯的區(qū)域。鎖定區(qū)：由模板創(chuàng)建的文檔不能編輯的區(qū)域。注意：新建模板，默認(rèn)沒有可編輯區(qū)設(shè)置步驟：選擇一個區(qū)域，執(zhí)行“插入”|“模板對象”|“可編輯區(qū)域”命令。9.6定義模板編輯區(qū)域定義可編輯區(qū)注意：可編輯區(qū)可以用表格、單元格、層。如果多個單元格定義為可編輯區(qū)，要分開定義。必須指定可編輯區(qū)，否則由模板生成的網(wǎng)頁不能修改?？删庉媴^(qū)和鎖定區(qū)是在模板中定義的，起作用在網(wǎng)頁中。在給可編輯區(qū)域命名時，不要使用特殊字符，最好也不要使用中文。9.7創(chuàng)建與應(yīng)用庫項目9.7.1庫項目概述9.7.2創(chuàng)建庫項目9.7.3插入庫項目9.7.1庫項目概述什么是庫項目庫項目是一種特殊的Dreamweaver文件，我們可以將當(dāng)前網(wǎng)頁中經(jīng)常要使用的任意頁面元素定義為庫項目，如圖像、表格、文本、聲音和Flash影片等。創(chuàng)建庫項目的好處是可以在多個頁面中重復(fù)使用它們，每當(dāng)更改某個庫項目的內(nèi)容時，所有使用了該項目的頁面都將同時更新。模板從整體上控制了文檔風(fēng)格，庫項目則從局部上維護(hù)了文檔的風(fēng)格。9.7.2創(chuàng)建庫項目首先在文檔窗口選擇需要保存為庫項目的對象，然后選擇“修改”>“庫”>“增加對象到庫”菜單并輸入庫項目名稱，即可將所選對象添加到庫中。庫項目列表將庫項目插入到文檔刪除庫項目編輯庫項目新建庫項目預(yù)覽庫項目9.7.3插入庫項目將庫項目插入到文檔中的操作非常簡