Dreamweaver學(xué)習(xí)HTML+DIV+CSS教學(xué)PPT第10章-網(wǎng)頁框架Frame

1、第10章 網(wǎng)頁框架Frame在網(wǎng)頁中，一個網(wǎng)頁可以包含多個頁面，此時需要用到框架。使用框架可以進(jìn)行頁面布局，把網(wǎng)頁化分為幾個區(qū)域。例如，一個水平框架用于放置Banner（也就是標(biāo)題）；左垂直框架用于放置導(dǎo)航；右垂直框架用于放置正文。每一個框架單獨(dú)使用一個網(wǎng)頁，從而使頁面設(shè)計簡單化?？蚣艹擞糜陧撁娌季?，還可用于制作目錄。包含框架的網(wǎng)頁稱為框架集?？蚣芗x了各個框架的結(jié)構(gòu)、數(shù)量、大小和目標(biāo)等屬性。本章將介紹框架的使用方法。10.1創(chuàng)建框架架一個完整整的框架架頁面應(yīng)應(yīng)該包括括兩個部部分：框框架和框框架集。前面介介紹了框框架集的的作用，它用來來定義框框架的各各種屬性性。在網(wǎng)網(wǎng)頁中框框架集是是不可見

2、見的，顯顯示出來來的只是是各個框框架?？蚩蚣芗颈旧硎且灰粋€網(wǎng)頁頁再加上上框架的的目標(biāo)頁頁面，所所以一個個完整的的框架集集包含有有多個頁頁面。10.1.1自定義框框架在創(chuàng)建自自定義框框架之前前，首先先確定是是否打開開框架可可視元素素。如果果沒有，需要按按照以下下步驟進(jìn)進(jìn)行操作作：單擊擊【查看】|【可視化助助理】|【框架邊框框】命令，使使其處于于選中狀狀態(tài)。此此時，頁頁面中可可以顯示示框架邊邊框。創(chuàng)創(chuàng)建自定定義框架架的具體體步驟如如下： 自定義左左右框架架效果自定義上上下框架架效果10.1.2預(yù)定義框框架在DreamweaverCS3中，系統(tǒng)統(tǒng)預(yù)定義義了13種框架類類型。通通過插入入欄中【布局】

3、標(biāo)簽的框框架按鈕鈕，可以以為頁面面設(shè)置框框架，具具體步驟驟如下： 框架子菜菜單【框架標(biāo)簽簽輔助功功能屬性性】對話框10.1.2預(yù)定義框框架單擊【確確定】按按鈕，完完成創(chuàng)建建預(yù)定義義框架，效果如如圖左所所示。按按照以上上步驟，可以創(chuàng)創(chuàng)建其他他類型框框架，如如左側(cè)和和嵌套的的頂部框框架，效效果如圖圖右所示示。 頂部和嵌嵌套的左左側(cè)框架架效果左左側(cè)和嵌嵌套的頂頂部框架架效果10.1.3自定義嵌嵌套框架架前面介紹紹了框架架的創(chuàng)建建方法，使用系系統(tǒng)預(yù)定定義的方方法可以以快速創(chuàng)創(chuàng)建出復(fù)復(fù)雜的框框架。但但是預(yù)定定義框架架有時并并不能完完全滿足足需要，此時需需要創(chuàng)建建自定義義框架?？蚣芟裣癖砀褚灰粯涌梢砸远嘀?/p>

4、嵌嵌套，具具體步驟驟如下： 下框架嵌嵌套框架架效果多重嵌套套框架效效果10.2框架源碼碼前一小節(jié)節(jié)介紹如如何創(chuàng)建建框架集集和框架架，接下下來查看看構(gòu)成框框架的源源碼會有有怎樣的的變化。本小節(jié)節(jié)將介紹紹框架源源碼，以以10.1.3小節(jié)的實(shí)實(shí)例進(jìn)行行講解，打開實(shí)實(shí)例框架架集.從源碼中中可以看看出，網(wǎng)網(wǎng)頁中有有兩個陌陌生的標(biāo)標(biāo)簽和和。其其中標(biāo)標(biāo)簽用于于設(shè)置框框架集，標(biāo)簽簽用于設(shè)設(shè)置框架架。這些些標(biāo)簽都都是成對對出現(xiàn)，如果不不結(jié)束標(biāo)標(biāo)簽可能能會造成成頁面混混亂。標(biāo)簽包包含rows和和cols兩個個屬性，這兩個個屬性分分別用于于設(shè)置水水平拆分分和垂直直拆分框框架，還還用于設(shè)設(shè)置框架架的尺寸寸。10.2框

5、架源碼碼標(biāo)簽有有多個屬屬性，其其使用語語法如表表 。（續(xù)表）10.3調(diào)整框架架前面了解解了如何何創(chuàng)建框框架。新新創(chuàng)建的的框架需需要進(jìn)行行一些調(diào)調(diào)整才能能符合設(shè)設(shè)計的要要求，如如框架結(jié)結(jié)構(gòu)、尺尺寸大小小和數(shù)量量等。在在實(shí)際應(yīng)應(yīng)用中，還需要要對框架架集及其其屬性進(jìn)進(jìn)行修改改。本節(jié)節(jié)將介紹紹如何調(diào)調(diào)整框架架以適合合需要。10.3.1選擇框架架修改對象象屬性時時首先選選中對象象。對框框架集或或框架進(jìn)進(jìn)行修改改時，首首先選中中框架對對象。選選中框架架集時，其所有有框架邊邊框顯示示出虛線線，表示示該框架架處于選選中狀態(tài)態(tài)。同樣樣當(dāng)框架架選中時時，也會會顯示虛虛線，表表示選中中，效果果如圖10.9所示?！究?/p>

6、架】面板嵌嵌套框架架效果10.3.1選擇框架架選中一個個框架后后，可以以結(jié)合Alt鍵鍵和方向向鍵進(jìn)行行框架選選擇的切切換。選中第一一層框架架集效果果選選中最右右下方框框架效果果10.3.2保存框架架設(shè)計好框框架頁面面后，要要保存框框架。因因為框架架頁面包包含了多多個網(wǎng)頁頁，所以以保存時時與普通通頁面不不一樣。在DreamweaverCS3中可以保保存一個個框架集集，也可可以單獨(dú)獨(dú)保存一一個框架架，還可可以保存存所有的的框架集集及框架架。最快快捷的方方式是保保存框架架集。保保存框架架集的具具體步驟驟如下：單擊框架架邊框選選中框架架集。單擊【文件】|【框架集另另存為】命令，彈彈出【另存為】對話框。

7、輸入路路徑及名名稱，單單擊【確定】按鈕。如果框架架集已經(jīng)經(jīng)保存過過，單擊擊【文件】|【保存框架架集】命令。10.3.3設(shè)置框架架集插入框架架集后，需要對對框架集集進(jìn)行一一些設(shè)置置，如邊邊框架有有無、大大小和顏顏色等。在DreamweaverCS3中，可通通過框架架集的【屬性】面板進(jìn)行行設(shè)置?？蚣芗摹緦傩浴棵姘迦鐖D圖所示。 邊框集屬屬性設(shè)置置效果預(yù)覽效果果10.3.4設(shè)置框架架設(shè)置框架架集后，同樣也也需要設(shè)設(shè)置框架架的屬性性。例如如，設(shè)置置框架的的名稱、尺寸大大小、邊邊框和滾滾動條等等屬性。接著上一一小節(jié)中中的實(shí)例例設(shè)置框框架屬性性，具體體步驟如如下：框架滾動動條效果果框框架架屬性設(shè)設(shè)置效果

8、果10.3.5命名框架架集頁面面在DreamweaverCS3中，不能能通過【屬性】面板進(jìn)行行命名，而是通通過設(shè)計計視圖工工具欄和和頁面屬屬性來進(jìn)進(jìn)行設(shè)置置。設(shè)計計視圖工工具欄設(shè)設(shè)置的具具體步驟驟如下：設(shè)計視圖圖工具欄欄框架集標(biāo)標(biāo)題效果果10.3.6修改框架架尺寸前面介紹紹通過【屬性】面板可以以修改框框架的尺尺寸，還還可通過過拖動鼠鼠標(biāo)進(jìn)行行框架的的大小修修改，具具體步驟驟如下：調(diào)整框架架尺寸10.3.7使用無框框架內(nèi)容容當(dāng)瀏覽器器不支持持框架元元素時，可以設(shè)設(shè)置提示示信息，告訴瀏瀏覽者瀏瀏覽的頁頁面不能能正常顯顯示。此此時通過過編輯無無框架內(nèi)內(nèi)容來提提示瀏覽覽者，具具體步驟驟如下：編輯無框框

9、架內(nèi)容容10.4設(shè)置框架架鏈接在框架中中可以使使用鏈接接來控制制框架內(nèi)內(nèi)容，把把鏈接的的目標(biāo)定定位在指指定的框框架。例例如，電電子書類類網(wǎng)頁的的左框架架用于放放置目錄錄等導(dǎo)航航信息，右框架架用于放放置主體體內(nèi)容。此時需需要把右右框架設(shè)設(shè)置為主主框架（main_frame），當(dāng)單單擊目錄錄導(dǎo)航時時，鏈接接內(nèi)容即即可顯示示在主框框架內(nèi)，具體步步驟如下下：10.4設(shè)置框架架鏈接按F12鍵預(yù)覽覽網(wǎng)頁，效果如如圖左所所示。選選擇【目目錄三】選項，右邊出出現(xiàn)“目目錄三的的內(nèi)容”，如圖圖右所示示。 框架鏈接接效果改變框架架鏈接效效果10.5使用浮動動框架iframe浮動框架架比普通通框架要要靈活，它可以以像層一一樣在網(wǎng)網(wǎng)頁中放放置。浮浮動框架架結(jié)合腳腳本程序序可制作作出頁面面的局部部更新。在此將將介紹浮浮動框架架的基本本用法10.5使用浮動動框架iframe在DreamweaverCS3中不能能在【屬屬性】面面板中設(shè)設(shè)置iframe，只只能手動動進(jìn)行修修改源碼碼。將前前面的源源碼復(fù)制制到網(wǎng)頁頁的標(biāo)簽之之間，預(yù)預(yù)覽效果果如圖所所示。iframe效果10.6專家總結(jié)結(jié)本章介紹紹了框架架的基本本概念。讀者可可以學(xué)習(xí)習(xí)如何創(chuàng)創(chuàng)建框架架、設(shè)置置框架大大小和框框架命名名等基本本操作。在使用用框架的的過程中中，注意意要理解解框架的的基本概概念和結(jié)結(jié)構(gòu)，以以及框架架的嵌套套關(guān)系。通