通過Dreamweaver_CS3學(xué)習(xí)HTML+DIV+CSS_第10章__網(wǎng)頁(yè)框架Frame

《通過Dreamweaver_CS3學(xué)習(xí)HTML+DIV+CSS_第10章__網(wǎng)頁(yè)框架Frame》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

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

2、顯示出來的只是各個(gè)框架?？蚣芗旧硎且粋€(gè)網(wǎng)頁(yè)再加上框架的目標(biāo)頁(yè)面，所以一個(gè)完整的框架集包含有多個(gè)頁(yè)面。10.1.1自定義框架在創(chuàng)建自定義框架之前，首先確定是否打開框架可視元素。如果沒有，需要按照以下步驟進(jìn)行操作：?jiǎn)螕簟静榭础?/p>

3、【可視化助理】

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

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

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

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

8、S3中可以保存一個(gè)框架集，也可以單獨(dú)保存一個(gè)框架，還可以保存所有的框架集及框架。最快捷的方式是保存框架集。保存框架集的具體步驟如下：?jiǎn)螕艨蚣苓吙蜻x中框架集。單擊【文件】

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

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

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

12、常顯示。此時(shí)通過編輯無(wú)框架內(nèi)容來提示瀏