1、,Dreamweaver -基礎(chǔ)教案,Dreamweaver基礎(chǔ)篇,第7章 創(chuàng)建框架網(wǎng)頁,回顧,掌握表格的插入 掌握表格屬性的設(shè)置 掌握選擇表格的方法 掌握編輯表格和單元格,學(xué)習(xí)目標 了解框架網(wǎng)頁概述 掌握創(chuàng)建框架和框架集 掌握框架和框架集的選擇 掌握框架和框架集屬性的設(shè)置 掌握完整的框架網(wǎng)頁創(chuàng)建 掌握嵌入式框架的創(chuàng)建 掌握框架的使用技巧,7.1 框架網(wǎng)頁概述,在Dreamweaver 8中，框架是一個非常重要的頁面布局工具。它可以把瀏覽器的窗口分割成若干相互獨立又有聯(lián)系的區(qū)域，在每個區(qū)域中顯示一個獨立的網(wǎng)頁文件，從而實現(xiàn)了一個網(wǎng)頁內(nèi)顯示多個HTML文件的目的。使用框架的優(yōu)點在于可以把不同層次

2、的網(wǎng)頁中的不改變的內(nèi)容放在一個框架中，把不斷改變的文檔內(nèi)容放在一個框架中?？蚣芗夹g(shù)可以被廣泛的應(yīng)用到網(wǎng)站導(dǎo)航和文檔瀏覽中，方便訪問者對網(wǎng)頁的瀏覽，減少訪問者下載頁面所需要的時間。 框架由框架集和框架組成。框架集就是框架的集合，它是在一個文檔內(nèi)一組框架結(jié)構(gòu)的HTML網(wǎng)頁，定義了網(wǎng)頁顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁源和其他可定義的屬性等?？蚣苁强蚣芗酗@示的文檔，每個框架實質(zhì)上都是一個獨立存在的HTML文檔。,7.2 創(chuàng)建框架和框架集 在Dreamweaver中預(yù)定義了多種框架集，可以很方便地創(chuàng)建想要的框架網(wǎng)頁。 創(chuàng)建框架集 選擇預(yù)定義的框架集將自動設(shè)置創(chuàng)建布局所需要的所有框架集和框架，它

3、是迅速創(chuàng)建基于框架布局的最簡單方法。創(chuàng)建框架集的具體操作步驟如下。 1選擇菜單中的【文件】|【新建】命令，打開【新建文檔】對話框，在對話框中選擇【常規(guī)】選項卡中的【類別】|【框架集】|【上方固定，左側(cè)嵌套】選項。如圖7-1：,2.單擊【創(chuàng)建】按鈕，即可創(chuàng)建一上方固定，左側(cè)嵌套的框架網(wǎng)頁。如圖7-2：提示：還可以用以下兩種方法創(chuàng)建框架網(wǎng)頁：,在【布局】插入欄中單擊按鈕，在彈出的菜單中選擇【左側(cè)和嵌套的下方框架】選項，即可創(chuàng)建框架網(wǎng)頁。如圖7-3： 選擇菜單中的【插入】|【HTML】|【框架】|【左側(cè)及下方嵌套】命令，即可創(chuàng)建框架網(wǎng)頁。,插入預(yù)定義框架集 插入預(yù)定義框架集的具體操作步驟如下。 1標

4、放置在頭部框架中，選擇菜單中的【修改】|【頁面屬性】命令，打開【頁面屬性】對話框中將【左邊距】設(shè)置為0像素，【右邊距】設(shè)置為0像素。如圖7-4：,2【確定】按鈕。選中頭部框架，在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕，打開【選擇HTML文件】對話框，在對話框中選擇top1.htm。 3單擊【確定】按鈕，插入文件。 4將光標放置在左側(cè)框架中，修改頁面屬性，在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕，在打開的【選擇HTML文件】對話框中選擇leftlhtm，單擊【確定】按鈕，插入文件。 5將光標放置在右側(cè)框架中，修改頁面屬性，在【屬性】面板中單擊【源文件】文本框右

5、側(cè)的【瀏覽文件】按鈕，在打開的【選擇HTML文件】對話框中選擇right.htm，單擊【確定】按鈕，插入文件。,保存框架和框架集文件 在瀏覽器中預(yù)覽框架集之前，必須保存框架集文件以及要在框架中顯示的所有文檔?？梢詥为毐４婷總€框架集文件和帶框架的文檔，也可以同時保存框架集文件和框架中出現(xiàn)的所有文檔。保存框架和框架集文件的具體操作步驟如下。 1新建一上方固定，左側(cè)嵌套的框架網(wǎng)頁。選擇菜單中的【文件】|【保存全部】命令，打開【另存為】對話框，此時整個框架集內(nèi)側(cè)出現(xiàn)陰影，所以詢問的是框架集的名稱，在【文件名】文本框中輸入index.htm。如圖7-5：,2單擊【保存】按鈕，打開第2個【另存為】對話框，

6、因為右側(cè)框架內(nèi)側(cè)出現(xiàn)陰影，所示詢問的是右側(cè)框架的名稱，在【文件名】文本框中輸入right.htm。如圖7-6：,3單擊【保存】按鈕，打開第3個【另存為】對話框，因為左側(cè)框架內(nèi)側(cè)出現(xiàn)陰影，所以詢問的是左側(cè)框架的名稱，在【文件名】丈本框中輸入left.htm。如圖7-7：,4單擊【保存】按鈕，打開第4個【另存為】對話框，因為頭部框架內(nèi)側(cè)出現(xiàn)陰影，所示詢問的是頭部框架的名稱，在【文件名】文本框中輸入top.htm。如圖7-8： 5單擊【保存】按鈕，至此整個框架保存完畢。,7.3 選擇框架和框架集,在【框架】面板中選擇框架或框架集 在【框架】面板中選擇框架或框架集的具體操作步驟如下。 1.選擇菜單中的

7、【窗口】|【框架】命令，打開【框架】面板，在面板中單擊需要選擇的框架，框架的邊界就會被虛線包圍。如圖7-9：,提示：按組合鍵，打開【框架】面板。,2.在【框架】面板中單擊框架集的邊框，也可以選擇整個框架集，框架集的內(nèi)側(cè)出現(xiàn)虛線。如圖7-10：,在文檔窗口中選擇框架或框架集 在文檔窗口中選擇框架或框架集的具體操作步驟如下。 1將光標放置在要選擇的框架中，按住鍵單擊鼠標左鍵，框架邊框內(nèi)側(cè)出現(xiàn)虛線，即可選擇該框架。 2將光標放置在任意框架中，按住鍵，當(dāng)鼠標指針靠近框架邊線時，出現(xiàn)上下或左右箭頭時，單擊鼠標左鍵，框架集內(nèi)側(cè)出現(xiàn)陰影，即可選中整個框架集。如圖7-11：,7.4 設(shè)置框架和框架集屬性,設(shè)置

8、框架屬性 使用框架【屬性】面板可以查看和設(shè)置大多數(shù)框架屬性。選中一個框架，選擇菜單中的【窗口】|【屬性】命令，打開【屬性】面板中顯示選中的框架屬性。 框架【屬性】面板參數(shù)如下。如圖7-12：,【框架名稱】：用于為當(dāng)前框架命名。 【源文件】：確定框架的源文檔，可以直接輸入名字，或單擊文本框右邊的固按鈕查 找并選取文件。 【滾動】：當(dāng)框架內(nèi)的內(nèi)容顯示不下的時候是否出現(xiàn)滾動條，包括【是】、【否】、【啟動】和【默認】4個選項。 【不能調(diào)整大小】：限定框架尺寸，防止用戶拖動框架邊框。 【邊界寬度】：設(shè)置以像素為單位的框架邊框和內(nèi)容之間的左右邊距。 【邊界高度】：設(shè)置以像素為單位的框架邊框和內(nèi)容之間的上下

9、邊距。 【邊框】：用來控制當(dāng)前框架邊框，包括【是】、【否】和【默認】3個選項。 【邊框顏色】：設(shè)置與當(dāng)前框架相鄰的所有框架的邊框顏色。,設(shè)置框架集屬性 選中框架集，打開【屬性】面板，在【屬性】面板中設(shè)置框架集的屬性。 框架集【屬性】面板參數(shù)如下。如圖7-13：,【邊框】：設(shè)置是否有邊框，包括【是】、【否】、【默認】3個選項。選擇【默認】選項，將由瀏覽器端的設(shè)置來決定。 【邊框?qū)挾取浚涸O(shè)置整個框架集的邊框?qū)挾龋韵袼貫閱挝弧?【邊框顏色】：用來設(shè)置整個框架集的邊框顏色。 【行或列】：【屬性】面板中顯示的是行或列，是由框架集的結(jié)構(gòu)而定。 【單位】：行、列尺寸的單位，包括【像素】、【百分比】、【相對

10、】3個選項。,7.5 技巧提升,如何隱藏滾動條 在【屬性】面板中設(shè)置【邊框】和【滾動】都為【否】，框架的邊框是隱藏的，勾選【不能調(diào)整大小】復(fù)選框，即可隱藏滾動條。 如何調(diào)整框架邊框的粗細 選擇整個框架集，打開框架集【屬性】面板，將【邊框?qū)挾取吭O(shè)置為0，則不顯示邊框，想要調(diào)整邊框粗細，設(shè)置【邊框?qū)挾取考纯伞?如何準確地選擇所需的框架 在制作框架網(wǎng)頁時，往往不能夠準確地選擇某個框架集，對制作框架網(wǎng)頁來說非常不方便，準確地選擇所需的框架的具體操作方法如下。 選擇菜單中的【窗口】|【框架】命令，打開【框架】面板，在面板中單擊想要選擇的框架，框架的邊界就會被虛線包圍。 如何調(diào)整框架大小 選中要調(diào)整大小的

11、框架集，選擇菜單中的【窗口】|【屬性】命令，打開【屬性】面板，在面板的【行列選擇范圍】顯示框中單擊左側(cè)標簽或頂部標簽分別選定要調(diào)整框架所在的行或列，然后在【值】文本框中輸入數(shù)值，在后面的下拉列表中選擇【值】的單位。,如何實現(xiàn)單擊一個鏈接改變兩個框架中的內(nèi)容 單擊一個鏈接改變兩個框架中的內(nèi)容的具體操作步驟如下。 1.在左側(cè)框架中選中圖像，在【屬性】面板中選擇【矩形熱點】工具，在文字上面繪制熱點。 2.選中熱點，在【屬性】面板中的【鏈接】文本框中輸入right1.htm，在【目標】下拉列表中選擇mainFrame。 3.選中熱點，選擇菜單中的【窗口】|【行為】命令，打開【行為】面板，在面板中單擊按

12、鈕，在彈出的菜單中選擇【轉(zhuǎn)到URL】選項。 4.打開【轉(zhuǎn)到URL】對話框，在對話框中的【打開在】列表框中選擇【框架”topFrome”】，在URL文本框中輸入toplhtm。 5.單擊【確定】按鈕，添加行為。 6.保存文檔，按鍵在瀏覽器中預(yù)覽效果。,怎樣使框架集在不同的瀏覽器中正常顯示 在為以百分比或者相對值指定大小的框架分配空間之前，先為以像素為單位指定大小的框架分配空間。設(shè)置框架大小最常用的方法是將左側(cè)框架設(shè)置為固定像素寬度，將右側(cè)框架大小設(shè)置為相對大小，這樣在分配像素寬度后右側(cè)框架就能夠伸展，以占據(jù)所有的剩余空間。,如何防止我的網(wǎng)頁內(nèi)容被放在其他網(wǎng)站的框架中顯示 防止我的網(wǎng)頁內(nèi)容被放在其他網(wǎng)站的框架中顯示的具體操作步驟如下。 1切換到拆分視圖，在與之間相應(yīng)的位置輸入以下代碼。 2在語句中輸入代碼onload=“checkframe()；”。 3保存文檔，按鍵在瀏覽器中預(yù)覽效果。 設(shè)置框架大小時，3種單位的優(yōu)先級有何不同 其優(yōu)先順序從高到低依次為：像素、百分比、相對。如果將某個框架大小以像素為單位進行了設(shè)置，然后又用其他單位設(shè)置了其框架的大小，則DreamweaVer會首先保留當(dāng)前以像素為單位所設(shè)置的框架大小。,如何進行框架的嵌套 嵌套框架有以下兩種方法。 將光標放置在需要進行嵌套操作的父框架中，然后選擇菜單中的【修改】|【框架頁】命令，在彈出的子菜單中選擇需要