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

第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è)部分：框架和框架集。前面介紹了框架集的作用，它用來(lái)定義框架的各種屬性。在網(wǎng)頁(yè)中框架集是不可見(jiàn)的，顯示出來(lái)的只是各個(gè)框架?？蚣芗旧硎且粋€(gè)網(wǎng)頁(yè)再加上框架的目標(biāo)頁(yè)面，所以一個(gè)完整的框架集包含有多個(gè)頁(yè)面。,10.1.1自定義框架,在創(chuàng)建自定義框架之前，首先確定是否打開(kāi)框架可視元素。如果沒(méi)有，需要按照以下步驟進(jìn)行操作：?jiǎn)螕簟静榭础縷【可視化助理】|【框架邊框】命令，使其處于選中狀態(tài)。此時(shí)，頁(yè)面中可以顯示框架邊框。創(chuàng)建自定義框架的具體步驟如下：,自定義左右框架效果自定義上下框架效果,10.1.2預(yù)定義框架,在DreamweaverCS3中，系統(tǒng)預(yù)定義了13種框架類型。通過(guò)插入欄中【布局】標(biāo)簽的框架按鈕，可以為頁(yè)面設(shè)置框架，具體步驟如下：,框架子菜單【框架標(biāo)簽輔助功能屬性】對(duì)話框,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)建框架集和框架，接下來(lái)查看構(gòu)成框架的源碼會(huì)有怎樣的變化。本小節(jié)將介紹框架源碼，以10.1.3小節(jié)的實(shí)例進(jìn)行講解，打開(kāi)實(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)用中，還需要對(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è)面不一樣。在DreamweaverCS3中可以保存一個(gè)框架集，也可以單獨(dú)保存一個(gè)框架，還可以保存所有的框架集及框架。最快捷的方式是保存框架集。保存框架集的具體步驟如下：?jiǎn)螕艨蚣苓吙蜻x中框架集。單擊【文件】|【框架集另存為】命令，彈出【另存為】對(duì)話框。輸入路徑及名稱，單擊【確定】按鈕。如果框架集已經(jīng)保存過(guò)，單擊【文件】|【保存框架集】命令。,10.3.3設(shè)置框架集,插入框架集后，需要對(duì)框架集進(jìn)行一些設(shè)置，如邊框架有無(wú)、大小和顏色等。在DreamweaverCS3中，可通過(guò)框架集的【屬性】面板進(jìn)行設(shè)置?？蚣芗摹緦傩浴棵姘迦鐖D所示。,邊框集屬性設(shè)置效果預(yù)覽效果,10.3.4設(shè)置框架,設(shè)置框架集后，同樣也需要設(shè)置框架的屬性。例如，設(shè)置框架的名稱、尺寸大小、邊框和滾動(dòng)條等屬性。接著上一小節(jié)中的實(shí)例設(shè)置框架屬性，具體步驟如下：,框架滾動(dòng)條效果框架屬性設(shè)置效果,10.3.5命名框架集頁(yè)面,在DreamweaverCS3中，不能通過(guò)【屬性】面板進(jìn)行命名，而是通過(guò)設(shè)計(jì)視圖工具欄和頁(yè)面屬性來(lái)進(jìn)行設(shè)置。設(shè)計(jì)視圖工具欄設(shè)置的具體步驟如下：,設(shè)計(jì)視圖工具欄,框架集標(biāo)題效果,10.3.6修改框架尺寸,前面介紹通過(guò)【屬性】面板可以修改框架的尺寸，還可通過(guò)拖動(dòng)鼠標(biāo)進(jìn)行框架的大小修改，具體步驟如下：,調(diào)整框架尺寸,10.3.7使用無(wú)框架內(nèi)容,當(dāng)瀏覽器不支持框架元素時(shí)，可以設(shè)置提示信息，告訴瀏覽者瀏覽的頁(yè)面不能正常顯示。此時(shí)通過(guò)編輯無(wú)框架內(nèi)容來(lái)提示瀏覽者，具體步驟如下：,編輯無(wú)框架內(nèi)容,10.4設(shè)置框架鏈接,在框架中可以使用鏈接來(lái)控制框架內(nèi)容，把鏈接的目標(biāo)定位在指定的框架。例如，電子書(shū)類網(wǎng)頁(yè)的左框架用于放置目錄等導(dǎo)航信息，右框架用于放置主體內(nèi)容。此時(shí)需要把右框架設(shè)置為主框架（main_frame），當(dāng)單擊目錄導(dǎo)航時(shí)，鏈接內(nèi)容即可顯示在主框架內(nèi)，具體步驟如下：,10.4設(shè)置框架鏈接,按F12鍵預(yù)覽網(wǎng)頁(yè)，效果如圖左所示。選擇【目錄三】選項(xiàng)，右邊出現(xiàn)“目錄三的內(nèi)容”，如圖右所示。,框架鏈接效果改變框架鏈接效果,10.5使用浮動(dòng)框架iframe,浮動(dòng)框架比普通框架要靈活，它可以像層一樣在網(wǎng)頁(yè)中放置。浮動(dòng)框架結(jié)合腳本程序可制作出頁(yè)面的局部更新。在此將介紹浮動(dòng)框架的基本用法,10.5使用浮動(dòng)框架iframe,在DreamweaverCS3中不能在【屬性】面板中設(shè)置iframe，只能手動(dòng)進(jìn)行修改源碼。將前面的源碼復(fù)制到網(wǎng)頁(yè)的標(biāo)簽之間，預(yù)覽效果如圖所示。,iframe效果,10.6專家總結(jié),本章介紹了框架的基本概念。讀者可以學(xué)習(xí)如何創(chuàng)建框架、設(shè)置框架大小和框架命名等基本操作。在使用框架的過(guò)程中，注意要理解框架的基本概念和結(jié)構(gòu)，以及框架的