通過Dreamweaver.CS3學(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)航；右垂直框架用于放置正文。每一個框架單獨使用一個網(wǎng)頁，從而使頁面設(shè)計簡單化?？蚣艹擞糜陧撁娌季?，還可用于制作目錄。包含框架的網(wǎng)頁稱為框架集。框架集定義了各個框架的結(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)行操作：單擊【查看】|【可視化助理】|【框架邊框】命令，使其處于選中狀態(tài)。此時，頁面中可以顯示框架邊框。創(chuàng)建自定義框架的具體步驟如下：,自定義左右框架效果 自定義上下框架效果,10.1.2 預(yù)定義框架,在Dreamweaver CS3中，系統(tǒng)預(yù)定義了13種框架類型。通過插入欄中【布局】標(biāo)簽的框架按鈕，可以為頁面設(shè)置框架，具體步驟如下：,框架子菜單 【框架標(biāo)簽輔助功能屬性】對話框,10.1.2 預(yù)定義框架,單擊【

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

4、以看出，網(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è)計的要求，如框架結(jié)構(gòu)、尺寸大小和數(shù)量等。在實際應(yīng)用中，還需要對框架集及其屬性進(jìn)行修改。本節(jié)將介紹如何調(diào)整框架以適合需要。,10.3.1 選擇框架,修改對象屬性時首先選中對象。對框架集或框架進(jìn)行修改時，首先選中框架對象

5、。選中框架集時，其所有框架邊框顯示出虛線，表示該框架處于選中狀態(tài)。同樣當(dāng)框架選中時，也會顯示虛線，表示選中，效果如圖10.9所示。,【框架】面板 嵌套框架效果,10.3.1 選擇框架,選中一個框架后，可以結(jié)合Alt鍵和方向鍵進(jìn)行框架選擇的切換 。,選中第一層框架集效果 選中最右下方框架效果,10.3.2 保存框架,設(shè)計好框架頁面后，要保存框架。因為框架頁面包含了多個網(wǎng)頁，所以保存時與普通頁面不一樣。在Dreamweaver CS3中可以保存一個框架集，也可以單獨保存一個框架，還可以保存所有的框架集及框架。最快捷的方式是保存框架集。保存框架集的具體步驟如下： 單擊框架邊框選中框架集。 單擊【文件

6、】|【框架集另存為】命令，彈出【另存為】對話框。輸入路徑及名稱，單擊【確定】按鈕。 如果框架集已經(jīng)保存過，單擊【文件】|【保存框架集】命令。,10.3.3 設(shè)置框架集,插入框架集后，需要對框架集進(jìn)行一些設(shè)置，如邊框架有無、大小和顏色等。在Dreamweaver CS3中，可通過框架集的【屬性】面板進(jìn)行設(shè)置。框架集的【屬性】面板如圖所示。,邊框集屬性設(shè)置效果 預(yù)覽效果,10.3.4 設(shè)置框架,設(shè)置框架集后，同樣也需要設(shè)置框架的屬性。例如，設(shè)置框架的名稱、尺寸大小、邊框和滾動條等屬性。接著上一小節(jié)中的實例設(shè)置框架屬性，具體步驟如下：,框架滾動條效果 框架屬性設(shè)置效果,10.3.5 命名框架集頁面,

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

8、的左框架用于放置目錄等導(dǎo)航信息，右框架用于放置主體內(nèi)容。此時需要把右框架設(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)頁中放置。浮動框架結(jié)合腳本程序可制作出頁面的局部更新。在此將介紹浮動框架的基本用法,10.5 使用浮動框架iframe,在Dreamweaver CS3中不能在【屬性】面板中設(shè)置iframe，只能手動進(jìn)行修改源碼。將前面的源碼復(fù)制到網(wǎng)頁的標(biāo)簽之間，預(yù)覽效果如圖所示。,iframe效果,10.6 專家總結(jié),本章介紹了框架的基本概念。讀者可以學(xué)習(xí)如何創(chuàng)建框架、設(shè)置框架大小和框架命名等基本操作。在使用框架的過程中，注意要理解框架的基本概念和結(jié)構(gòu)，以及框