DW創(chuàng)建框架網(wǎng)頁

1、Dreamweaver基礎(chǔ)篇基礎(chǔ)篇Dreamweaver基礎(chǔ)篇基礎(chǔ)篇Dreamweaver基礎(chǔ)篇基礎(chǔ)篇第第7章章 創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁Dreamweaver基礎(chǔ)篇基礎(chǔ)篇回顧掌握表格的插入掌握表格屬性的設(shè)置掌握選擇表格的方法掌握編輯表格和單元格Dreamweaver基礎(chǔ)篇基礎(chǔ)篇學(xué)習(xí)目標(biāo)了解框架網(wǎng)頁概述掌握創(chuàng)建框架和框架集掌握框架和框架集的選擇掌握框架和框架集屬性的設(shè)置掌握完整的框架網(wǎng)頁創(chuàng)建掌握嵌入式框架的創(chuàng)建掌握框架的使用技巧 Dreamweaver基礎(chǔ)篇基礎(chǔ)篇7.1 框架網(wǎng)頁概述在Dreamweaver 8中，框架是一個(gè)非常重要的頁面布局工具。它可以把瀏覽器的窗口分割成若干相互獨(dú)立又有聯(lián)系

2、的區(qū)域，在每個(gè)區(qū)域中顯示一個(gè)獨(dú)立的網(wǎng)頁文件，從而實(shí)現(xiàn)了一個(gè)網(wǎng)頁內(nèi)顯示多個(gè)HTML文件的目的。使用框架的優(yōu)點(diǎn)在于可以把不同層次的網(wǎng)頁中的不改變的內(nèi)容放在一個(gè)框架中，把不斷改變的文檔內(nèi)容放在一個(gè)框架中?？蚣芗夹g(shù)可以被廣泛的應(yīng)用到網(wǎng)站導(dǎo)航和文檔瀏覽中，方便訪問者對網(wǎng)頁的瀏覽，減少訪問者下載頁面所需要的時(shí)間。 框架由框架集和框架組成?？蚣芗褪强蚣艿募?，它是在一個(gè)文檔內(nèi)一組框架結(jié)構(gòu)的HTML網(wǎng)頁，定義了網(wǎng)頁顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁源和其他可定義的屬性等?？蚣苁强蚣芗酗@示的文檔，每個(gè)框架實(shí)質(zhì)上都是一個(gè)獨(dú)立存在的HTML文檔。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇7.2 創(chuàng)建框架和框架集

3、在Dreamweaver中預(yù)定義了多種框架集，可以很方便地創(chuàng)建想要的框架網(wǎng)頁。創(chuàng)建框架集創(chuàng)建框架集選擇預(yù)定義的框架集將自動(dòng)設(shè)置創(chuàng)建布局所需要的所有框架集和框架，它是迅速創(chuàng)建基于框架布局的最簡單方法。創(chuàng)建框架集的具體操作步驟如下。1選擇菜單中的【文件】|【新建】命令，打開【新建文檔】對話框，在對話框中選擇【常規(guī)】選項(xiàng)卡中的【類別】|【框架集】|【上方固定，左側(cè)嵌套】選項(xiàng)。如圖7-1：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇Dreamweaver基礎(chǔ)篇基礎(chǔ)篇2.單擊【創(chuàng)建】按鈕，即可創(chuàng)建一上方固定，左側(cè)嵌套的框架網(wǎng)頁。如圖7-2：提示：還可以用以下兩種方法創(chuàng)建框架網(wǎng)頁：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇

4、在【布局】插入欄中單擊按鈕，在彈出的菜單中選擇【左側(cè)和嵌套的下方框架】選項(xiàng)，即可創(chuàng)建框架網(wǎng)頁。如圖7-3：選擇菜單中的【插入】|【HTML】|【框架】|【左側(cè)及下方嵌套】命令，即可創(chuàng)建框架網(wǎng)頁。 Dreamweaver基礎(chǔ)篇基礎(chǔ)篇插入預(yù)定義框架集插入預(yù)定義框架集插入預(yù)定義框架集的具體操作步驟如下。1標(biāo)放置在頭部框架中，選擇菜單中的【修改】|【頁面屬性】命令，打開【頁面屬性】對話框中將【左邊距】設(shè)置為0像素，【右邊距】設(shè)置為0像素。如圖7-4： Dreamweaver基礎(chǔ)篇基礎(chǔ)篇2【確定】按鈕。選中頭部框架，在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕，打開【選擇HTML文件】對話

5、框，在對話框中選擇top1.htm。3單擊【確定】按鈕，插入文件。4將光標(biāo)放置在左側(cè)框架中，修改頁面屬性，在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕，在打開的【選擇HTML文件】對話框中選擇leftlhtm，單擊【確定】按鈕，插入文件。5將光標(biāo)放置在右側(cè)框架中，修改頁面屬性，在【屬性】面板中單擊【源文件】文本框右側(cè)的【瀏覽文件】按鈕，在打開的【選擇HTML文件】對話框中選擇right.htm，單擊【確定】按鈕，插入文件。 Dreamweaver基礎(chǔ)篇基礎(chǔ)篇保存框架和框架集文件保存框架和框架集文件在瀏覽器中預(yù)覽框架集之前，必須保存框架集文件以及要在框架中顯示的所有文檔?？梢詥为?dú)保

6、存每個(gè)框架集文件和帶框架的文檔，也可以同時(shí)保存框架集文件和框架中出現(xiàn)的所有文檔。保存框架和框架集文件的具體操作步驟如下。1新建一上方固定，左側(cè)嵌套的框架網(wǎng)頁。選擇菜單中的【文件】|【保存全部】命令，打開【另存為】對話框，此時(shí)整個(gè)框架集內(nèi)側(cè)出現(xiàn)陰影，所以詢問的是框架集的名稱，在【文件名】文本框中輸入index.htm。如圖7-5：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇Dreamweaver基礎(chǔ)篇基礎(chǔ)篇2單擊【保存】按鈕，打開第2個(gè)【另存為】對話框，因?yàn)橛覀?cè)框架內(nèi)側(cè)出現(xiàn)陰影，所示詢問的是右側(cè)框架的名稱，在【文件名】文本框中輸入right.htm。如圖7-6：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇3單擊【保

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

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

9、框架集內(nèi)側(cè)出現(xiàn)陰影，即可選中整個(gè)框架集。如圖7-11：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇Dreamweaver基礎(chǔ)篇基礎(chǔ)篇7.4 設(shè)置框架和框架集屬性設(shè)置框架屬性設(shè)置框架屬性 使用框架【屬性】面板可以查看和設(shè)置大多數(shù)框架屬性。選中一個(gè)框架，選擇菜單中的【窗口】|【屬性】命令，打開【屬性】面板中顯示選中的框架屬性?？蚣堋緦傩浴棵姘鍏?shù)如下。如圖7-12：Dreamweaver基礎(chǔ)篇基礎(chǔ)篇【框架名稱】：用于為當(dāng)前框架命名?！驹次募浚捍_定框架的源文檔，可以直接輸入名字，或單擊文本框右邊的固按鈕查找并選取文件?！緷L動(dòng)】：當(dāng)框架內(nèi)的內(nèi)容顯示不下的時(shí)候是否出現(xiàn)滾動(dòng)條，包括【是】、【否】、【啟動(dòng)】和【默認(rèn)

10、】4個(gè)選項(xiàng)?！静荒苷{(diào)整大小】：限定框架尺寸，防止用戶拖動(dòng)框架邊框?！具吔鐚挾取浚涸O(shè)置以像素為單位的框架邊框和內(nèi)容之間的左右邊距?！具吔绺叨取浚涸O(shè)置以像素為單位的框架邊框和內(nèi)容之間的上下邊距?！具吙颉浚河脕砜刂飘?dāng)前框架邊框，包括【是】、【否】和【默認(rèn)】3個(gè)選項(xiàng)?！具吙蝾伾浚涸O(shè)置與當(dāng)前框架相鄰的所有框架的邊框顏色。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇設(shè)置框架集屬性設(shè)置框架集屬性選中框架集，打開【屬性】面板，在【屬性】面板中設(shè)置框架集的屬性?？蚣芗緦傩浴棵姘鍏?shù)如下。如圖7-13： 【邊框】：設(shè)置是否有邊框，包括【是】、【否】、【默認(rèn)】3個(gè)選項(xiàng)。選擇【默認(rèn)】選項(xiàng)，將由瀏覽器端的設(shè)置來決定?！具吙?qū)?/p>

11、度】：設(shè)置整個(gè)框架集的邊框?qū)挾?，以像素為單位?！具吙蝾伾浚河脕碓O(shè)置整個(gè)框架集的邊框顏色。【行或列】：【屬性】面板中顯示的是行或列，是由框架集的結(jié)構(gòu)而定?！締挝弧浚盒?、列尺寸的單位，包括【像素】、【百分比】、【相對】3個(gè)選項(xiàng)。 Dreamweaver基礎(chǔ)篇基礎(chǔ)篇7.5 技巧提升如何隱藏滾動(dòng)條如何隱藏滾動(dòng)條在【屬性】面板中設(shè)置【邊框】和【滾動(dòng)】都為【否】，框架的邊框是隱藏的，勾選【不能調(diào)整大小】復(fù)選框，即可隱藏滾動(dòng)條。如何調(diào)整框架邊框的粗細(xì)如何調(diào)整框架邊框的粗細(xì) 選擇整個(gè)框架集，打開框架集【屬性】面板，將【邊框?qū)挾取吭O(shè)置為0，則不顯示邊框，想要調(diào)整邊框粗細(xì)，設(shè)置【邊框?qū)挾取考纯?。Dreamwea

12、ver基礎(chǔ)篇基礎(chǔ)篇如何準(zhǔn)確地選擇所需的框架如何準(zhǔn)確地選擇所需的框架在制作框架網(wǎng)頁時(shí)，往往不能夠準(zhǔn)確地選擇某個(gè)框架集，對制作框架網(wǎng)頁來說非常不方便，準(zhǔn)確地選擇所需的框架的具體操作方法如下。選擇菜單中的【窗口】|【框架】命令，打開【框架】面板，在面板中單擊想要選擇的框架，框架的邊界就會被虛線包圍。如何調(diào)整框架大小如何調(diào)整框架大小選中要調(diào)整大小的框架集，選擇菜單中的【窗口】|【屬性】命令，打開【屬性】面板，在面板的【行列選擇范圍】顯示框中單擊左側(cè)標(biāo)簽或頂部標(biāo)簽分別選定要調(diào)整框架所在的行或列，然后在【值】文本框中輸入數(shù)值，在后面的下拉列表中選擇【值】的單位。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇如何實(shí)現(xiàn)單

13、擊一個(gè)鏈接改變兩個(gè)框架中的內(nèi)容如何實(shí)現(xiàn)單擊一個(gè)鏈接改變兩個(gè)框架中的內(nèi)容單擊一個(gè)鏈接改變兩個(gè)框架中的內(nèi)容的具體操作步驟如下。1.在左側(cè)框架中選中圖像，在【屬性】面板中選擇【矩形熱點(diǎn)】工具，在文字上面繪制熱點(diǎn)。2.選中熱點(diǎn)，在【屬性】面板中的【鏈接】文本框中輸入right1.htm，在【目標(biāo)】下拉列表中選擇mainFrame。3.選中熱點(diǎn)，選擇菜單中的【窗口】|【行為】命令，打開【行為】面板，在面板中單擊按鈕，在彈出的菜單中選擇【轉(zhuǎn)到URL】選項(xiàng)。4.打開【轉(zhuǎn)到URL】對話框，在對話框中的【打開在】列表框中選擇【框架”topFrome”】，在URL文本框中輸入toplhtm。5.單擊【確定】按鈕，

14、添加行為。6.保存文檔，按鍵在瀏覽器中預(yù)覽效果。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇怎樣使框架集在不同的瀏覽器中正常顯示怎樣使框架集在不同的瀏覽器中正常顯示在為以百分比或者相對值指定大小的框架分配空間之前，先為以像素為單位指定大小的框架分配空間。設(shè)置框架大小最常用的方法是將左側(cè)框架設(shè)置為固定像素寬度，將右側(cè)框架大小設(shè)置為相對大小，這樣在分配像素寬度后右側(cè)框架就能夠伸展，以占據(jù)所有的剩余空間。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇 如何防止我的網(wǎng)頁內(nèi)容被放在其他網(wǎng)站的框架中顯示如何防止我的網(wǎng)頁內(nèi)容被放在其他網(wǎng)站的框架中顯示防止我的網(wǎng)頁內(nèi)容被放在其他網(wǎng)站的框架中顯示的具體操作步驟如下。1切換到拆分視圖，

15、在與之間相應(yīng)的位置輸入以下代碼。2在語句中輸入代碼onload=“checkframe()；”。3保存文檔，按鍵在瀏覽器中預(yù)覽效果。 設(shè)置框架大小時(shí)，設(shè)置框架大小時(shí)，3種單位的優(yōu)先級有何不同種單位的優(yōu)先級有何不同其優(yōu)先順序從高到低依次為：像素、百分比、相對。如果將某個(gè)框架大小以像素為單位進(jìn)行了設(shè)置，然后又用其他單位設(shè)置了其框架的大小，則DreamweaVer會首先保留當(dāng)前以像素為單位所設(shè)置的框架大小。Dreamweaver基礎(chǔ)篇基礎(chǔ)篇如何進(jìn)行框架的嵌套如何進(jìn)行框架的嵌套嵌套框架有以下兩種方法。將光標(biāo)放置在需要進(jìn)行嵌套操作的父框架中，然后選擇菜單中的【修改】|【框架頁】命令，在彈出的子菜單中選擇需要的操作，就可以