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

7框架7.1

創(chuàng)建框架7.2

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