網(wǎng)頁(yè)設(shè)計(jì)與制作第七章

7框架7.1

創(chuàng)建框架7.2

框架的基本操作7.3框架布局綜合實(shí)例7.1創(chuàng)建框架7.1.1框架的概述框架實(shí)際上由兩部分組成，即框架與框架集?？蚣苁菫g覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容相關(guān)或無(wú)關(guān)的網(wǎng)頁(yè)文件。每一個(gè)框架都是一個(gè)獨(dú)立的網(wǎng)頁(yè)文件?？蚣芗强蚣艿募?，是一個(gè)定義了一組框架結(jié)構(gòu)的網(wǎng)頁(yè)。框架集文檔本身不在瀏覽器中顯示，它只是向?yàn)g覽器提供如何顯示框架以及在框架中顯示哪些文檔的信息，是一個(gè)用于存儲(chǔ)框架的容器。7.1.2建立框架DreamweaverCS6提供了13種常見(jiàn)的框架結(jié)構(gòu)。使用預(yù)定義框架可以很輕松地創(chuàng)建框架。創(chuàng)建一個(gè)預(yù)定義框架的操作步驟如下：①將光標(biāo)放置到要插入框架的位置。②將選擇“插入→HTML→框架”命令，在彈出的下拉菜單中包括13種預(yù)定義的框架結(jié)構(gòu)。③選擇其中一種，即可創(chuàng)建框架。7.2框架的基本操作7.2.1編輯框架和框架集（1）選取框架或框架集選取框架或框架集可以在【框架】面板上進(jìn)行，在【框架】面板上選取框架或框架集的操作步驟如下：①執(zhí)行【窗口】|【框架】命令，打開(kāi)【框架】面板。②在【框架】面板上單擊某個(gè)框架，即可選取這個(gè)框架。單擊包圍框架的邊框，即可選取框架集。（2）刪除框架創(chuàng)建框架后，可能所得到的框架結(jié)構(gòu)不符合設(shè)計(jì)要求，需要將某些框架刪除，其方法為：拖動(dòng)框架邊框到頁(yè)面邊緣或父框架的邊框上，刪除框架時(shí)框架中的文檔沒(méi)有保存，系統(tǒng)會(huì)提示用戶(hù)保存該文檔；如果不再需要某個(gè)框架，還可以使用鼠標(biāo)將框架拖出窗口即可刪除框架。（3）拆分框架將一個(gè)框架拆分成兩個(gè)或兩個(gè)以上的框架的方法有以下幾種：①將光標(biāo)定位在要拆分的框架中，執(zhí)行【修改】|【框架集】|【拆分左框架/右框架/上框架/下框架】命令。②將鼠標(biāo)移動(dòng)到窗口邊緣，當(dāng)鼠標(biāo)變成水平或垂直雙向箭頭時(shí)，向窗口中間拖動(dòng)即可將框架拆分為垂直或水平方向的框架。（4）保存框架和框架集在瀏覽器中預(yù)覽框架集，必須保存框架文件以及要在框架中顯示的文檔①保存框架。將光標(biāo)放置到需要保存的框架中，執(zhí)行【文件】|【保存框架】命令，保存該框架文件。②保存框架集。在【框架】面板上選擇要保存的框架集，執(zhí)行【文件】|【框架集另存為】命令，保存框架集。③保存框架集與所有框架。保存框架集與所有框架的操作步驟如下：a．執(zhí)行【文件】|【保存全部】命令，打開(kāi)【另存為】對(duì)話(huà)框。b．設(shè)置文件名，單擊【保存】按鈕，在窗口中，另一區(qū)域?qū)⒊霈F(xiàn)粗邊框，表示該框架正在保存。c．按照同樣的方法，每單擊一次保存按鈕，窗口中都會(huì)出現(xiàn)粗邊框區(qū)域，直到所有框架保存完成后才關(guān)閉【另存為】對(duì)話(huà)框。7.2.2框架和框架集的屬性設(shè)置框架與框架集都有各自的屬性，但框架屬性?xún)?yōu)于框架集屬性。（1）框架屬性在【框架】面板上單擊框架區(qū)域選取框架，其【屬性】面板。7.3框架布局綜合實(shí)例7.3.1操作案例要求利用框架布局技術(shù)創(chuàng)建框架網(wǎng)頁(yè)，其瀏覽效果如圖所示。7.3.2操作步驟（1）創(chuàng)建框架網(wǎng)頁(yè)①在本地站點(diǎn)創(chuàng)建子文件夾“kjwy”。②創(chuàng)建框架集文件“07.html”和三個(gè)網(wǎng)頁(yè)文檔“top.html”“right.html”“l(fā)eft.html”，分別保存在“kjwy”文件夾中。③設(shè)置框架和框架集的屬性，調(diào)整各框架區(qū)域的大小。（2）框架鏈接的目標(biāo)①在本地站點(diǎn)中的文件夾“kjwy”下新建一個(gè)子文件夾“l(fā)ink”，在該文件夾中新建幾個(gè)用于鏈接的網(wǎng)頁(yè)，并設(shè)置其超級(jí)鏈接。②為導(dǎo)航欄中的“旋轉(zhuǎn)木馬”創(chuàng)建一個(gè)對(duì)應(yīng)的網(wǎng)頁(yè)“07_1.html”，在該網(wǎng)頁(yè)中插入一幅圖像，并將其保存在“l(fā)ink”子文件夾下。③切換到“07.html”網(wǎng)頁(yè)的編輯窗口，在左側(cè)的導(dǎo)航欄中選中文字“旋轉(zhuǎn)木馬”，在【屬性】面板的【鏈接】欄右側(cè)單擊【瀏覽文件】按鈕，在【選擇文件】對(duì)話(huà)框中選擇剛才創(chuàng)建的網(wǎng)頁(yè)文檔“07_1.html”；然后單擊【屬性】面板的【目標(biāo)】欄右側(cè)的下拉列表，從中選擇“mainFrame”打開(kāi)方式，即在主框架中打開(kāi)鏈接網(wǎng)頁(yè)。超鏈接目標(biāo)框架的設(shè)置：在沒(méi)有框架的網(wǎng)頁(yè)中，按照打開(kāi)鏈接目標(biāo)網(wǎng)頁(yè)的不同窗口，鏈接目標(biāo)可以分為四種：“_blank”“_self”“_