dreamweavercs3教程第10章網(wǎng)頁框架frame

《dreamweavercs3教程第10章網(wǎng)頁框架frame》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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

2、來的只是各個框架。框架集本身是一個網(wǎng)頁再加上框架的目標(biāo)頁面，所以一個完整的框架集包含有多個頁面。10.1.1自定義框架在創(chuàng)建自定義框架之前，首先確定是否打開框架可視元素。如果沒有，需要按照以下步驟進(jìn)行操作：單擊【查看】

3、【可視化助理】

4、【框架邊框】命令，使其處于選中狀態(tài)。此時，頁面中可以顯示框架邊框。創(chuàng)建自定義框架的具體步驟如下：自定義左右框架效果自定義上下框架效果10.1.2預(yù)定義框架在DreamweaverCS3中，系統(tǒng)預(yù)定義了13種框架類型。通過插入欄中【布局】標(biāo)簽的框架按鈕，可以為頁面設(shè)置框架，具體步驟如下：框架子菜單【框架標(biāo)簽輔助功能屬性】對話框10.1.

5、2預(yù)定義框架單擊【確定】按鈕，完成創(chuàng)建預(yù)定義框架，效果如圖左所示。按照以上步驟，可以創(chuàng)建其他類型框架，如左側(cè)和嵌套的頂部框架，效果如圖右所示。頂部和嵌套的左側(cè)框架效果左側(cè)和嵌套的頂部框架效果10.1.3自定義嵌套框架前面介紹了框架的創(chuàng)建方法，使用系統(tǒng)預(yù)定義的方法可以快速創(chuàng)建出復(fù)雜的框架。但是預(yù)定義框架有時并不能完全滿足需要，此時需要創(chuàng)建自定義框架?？蚣芟癖砀褚粯涌梢远嘀厍短祝唧w步驟如下：下框架嵌套框架效果多重嵌套框架效果10.2框架源碼前一小節(jié)介紹如何創(chuàng)建框架集和框架，接下來查看構(gòu)成框架的源碼會有怎樣的變化。本小節(jié)將介紹框架源碼，以10.1.3小節(jié)的實(shí)例進(jìn)行講解，

6、打開實(shí)例框架集.從源碼中可以看出，網(wǎng)頁中有兩個陌生的標(biāo)簽和。其中標(biāo)簽用于設(shè)置框架集，標(biāo)簽用于設(shè)置框架。這些標(biāo)簽都是成對出現(xiàn)，如果不結(jié)束標(biāo)簽可能會造成頁面混亂。標(biāo)簽包含rows和cols兩個屬性，這兩個屬性分別用于設(shè)置水平拆分和垂直拆分框架，還用于設(shè)置框架的尺寸。10.2框架源碼標(biāo)簽有多個屬性，其使用語法如表。（續(xù)表）10.3調(diào)整框架前面了解了如何創(chuàng)建框架。新創(chuàng)建的框架需要進(jìn)行一些調(diào)整才能符合設(shè)計(jì)的要求，如框架結(jié)構(gòu)、尺寸大小和數(shù)量等。在實(shí)際應(yīng)用中，還需要對框架集及其屬

7、性進(jìn)行修改。本節(jié)將介紹如何調(diào)整框架以適合需要。10.3.1選擇框架修改對象屬性時首先選中對象。對框架集或框架進(jìn)行修改時，首先選中框架對象。選中框架集時，其所有框架邊框顯示出虛線，表示該框架處于選中狀態(tài)。同樣當(dāng)框架選中時，也會顯示虛線，表示選中，效果如圖10.9所示。【框架】面板嵌套框架效果10.3.1選擇框架選中一個框架后，可以結(jié)合Alt鍵和方向鍵進(jìn)行框架選擇的切換。選中第一層框架集效果選中最右下方框架效果10.3.2保存框架設(shè)計(jì)好框架頁面后，要保存框架。因?yàn)榭蚣茼撁姘硕鄠€網(wǎng)頁，所以保存時與普通頁面不一樣。在DreamweaverCS3中可以保存一個框架集，也可

8、以單獨(dú)保存一個框架，還可以保存所有的框架集及框架。最快捷的方式是保存框架集。保存框架集的具體步驟如下：單擊框架邊框選中框架集。單擊【文件】

9、【框架集另存為】命令，彈出【另存為】對話框。輸入路徑及名稱，單擊【確定】按鈕。如果框架集已經(jīng)保存過，單擊【文件】

10、【保存框架集】命令。10.3.3設(shè)置框架集插入框架集后，需要對框架集進(jìn)行一些設(shè)置，如邊框架有無、大小和顏色等。在DreamweaverCS3中，可通過框架集的【屬性】面板進(jìn)行設(shè)置?？蚣芗摹緦傩浴棵姘迦鐖D所示。邊框集屬性設(shè)置效果預(yù)覽效果10.3.4設(shè)置框架設(shè)置框架集后，同樣也需要設(shè)置框架的屬性。例如，設(shè)置框架的名稱、

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