網(wǎng)頁(yè)設(shè)計(jì)-框架(詳解)ppt課件.ppt

《網(wǎng)頁(yè)設(shè)計(jì)-框架(詳解)ppt課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、框架框架是網(wǎng)頁(yè)中常使用的效果。使用框架，可以在同一瀏覽窗口中顯示多個(gè)不同的文件。最常見(jiàn)的用法是將窗口的左側(cè)或上側(cè)的區(qū)域設(shè)置為目錄區(qū)，用于顯示文件的目錄或?qū)Ш綏l。而將右邊一塊面積較大的區(qū)域設(shè)置為頁(yè)面的主體區(qū)域。通過(guò)在文件目錄和文件內(nèi)容之間建立的超級(jí)鏈接，用戶單擊目錄區(qū)中的文件目錄，文件內(nèi)容將在主體區(qū)域內(nèi)顯示，用這種方法便于用戶繼續(xù)瀏覽其他的網(wǎng)頁(yè)文件。本章將介紹關(guān)于框架的基本知識(shí)，并結(jié)合具體實(shí)例講解在DreamweaverCS3中如何創(chuàng)建、使用框架，設(shè)置框架屬性，利用框架進(jìn)行布局。11.1關(guān)于框架下面的實(shí)例顯示了一個(gè)使用框架的網(wǎng)頁(yè)，如圖11.1所示。這

2、是由三個(gè)框架組成的框架布局，一個(gè)框架橫放在頂部，其中包含Web站點(diǎn)的Logo和一些常用按鈕；左側(cè)較窄的框架包含導(dǎo)航條；右側(cè)的框架占據(jù)了頁(yè)面的大部分，其中包含主要內(nèi)容。這些框架中的每一個(gè)都顯示單獨(dú)的HTML文檔。11.1.1基本概念框架實(shí)際上是一種特殊的網(wǎng)頁(yè)，它可以根據(jù)需要把瀏覽器窗口劃分為多個(gè)區(qū)域，每個(gè)框架區(qū)域都是一個(gè)單獨(dú)的網(wǎng)頁(yè)?？蚣埽‵rames）由框架集（Frameset）和單個(gè)框架（Frame）兩部分組成?？蚣芗且粋€(gè)定義框架結(jié)構(gòu)的網(wǎng)頁(yè)，它包括網(wǎng)頁(yè)內(nèi)框架的數(shù)量、每個(gè)框架的大小、框架內(nèi)網(wǎng)頁(yè)的來(lái)源和框架的其它屬性等。單個(gè)框架包含在框架集中，是框架

3、集的一部分，每個(gè)框架中都放置一個(gè)內(nèi)容網(wǎng)頁(yè)，組合起來(lái)就是瀏覽者看到的框架式網(wǎng)頁(yè)。11.1.2框架的優(yōu)缺點(diǎn)在網(wǎng)頁(yè)中使用框架具有以下優(yōu)點(diǎn)：使網(wǎng)頁(yè)結(jié)構(gòu)清晰，易于維護(hù)和更新。訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形。每個(gè)框架網(wǎng)頁(yè)都具有獨(dú)立的滾動(dòng)條，因此訪問(wèn)者可以獨(dú)立控制各個(gè)頁(yè)面。然而，在網(wǎng)頁(yè)中使用框架也具有一些缺點(diǎn)：某些早期的瀏覽器不支持框架結(jié)構(gòu)的網(wǎng)頁(yè)。下載框架式網(wǎng)頁(yè)速度慢。不利于內(nèi)容較多、結(jié)構(gòu)復(fù)雜頁(yè)面的排版。大多數(shù)的搜索引擎都無(wú)法識(shí)別網(wǎng)頁(yè)中的框架，或者無(wú)法對(duì)框架中的內(nèi)容進(jìn)行遍歷或搜索。11.2框架的使用在11.1節(jié)介紹了框架的基本概念以及在網(wǎng)

4、頁(yè)中使用框架的優(yōu)缺點(diǎn)，使讀者對(duì)框架有了一定的了解。下面就來(lái)學(xué)習(xí)如何創(chuàng)建框架和框架集，以及框架的基本操作，屬性設(shè)置等具體操作步驟。11.2.1創(chuàng)建框架和框架集DreamweaverCS3提供了15種框架類型，分別是上方固定、上方固定下方固定、上方固定右側(cè)嵌套、上方固定左側(cè)嵌套、下方固定、下方固定右側(cè)嵌套、下方固定左側(cè)嵌套、右側(cè)固定、右側(cè)固定上方嵌套、右側(cè)固定下方嵌套、垂直拆分、左側(cè)固定、左側(cè)固定上方嵌套、左側(cè)固定下方嵌套、水平拆分等，可以使用新建文檔的方式創(chuàng)建空白框架網(wǎng)頁(yè)，也可以將普通網(wǎng)頁(yè)轉(zhuǎn)變?yōu)榭蚣芙Y(jié)構(gòu)。具體操作步驟如下：1．創(chuàng)建空白框架網(wǎng)頁(yè)2．將現(xiàn)

5、有文檔創(chuàng)建為框架網(wǎng)頁(yè)11.2.2框架的嵌套框架的嵌套是指一個(gè)框架集套在另一個(gè)框架集內(nèi)。“上方固定，左側(cè)嵌套”實(shí)際上就是一個(gè)嵌套的框架集，是在上下結(jié)構(gòu)的框架集中嵌套一個(gè)左右結(jié)構(gòu)的框架集。具體操作步驟如下：（1）將鼠標(biāo)移至要?jiǎng)?chuàng)建嵌套框架集的框架內(nèi)，如圖11.8所示。（2）單擊”插入”

6、“HTML”

7、“框架”

8、“左對(duì)齊”命令菜單，新插入一個(gè)框架集，如圖11.9所示。此時(shí)，嵌套框架集制作完成。11.2.3框架的基本操作框架的基本操作主要包括：選取框架和框架集、保存框架和框架集、調(diào)整框架大小、拆分框架和刪除框架等。1．選取框架或框架集2．保存框架3．調(diào)整框架

9、大小4．拆分、刪除框架11.2.4設(shè)置框架集屬性使用“屬性檢查器”可以方便地設(shè)置框架集的邊框?qū)挾群皖伾?、設(shè)置框架行和列的大小，對(duì)于初學(xué)者來(lái)說(shuō)這種方法簡(jiǎn)單易用。下面來(lái)學(xué)習(xí)如何使用“屬性檢查器”設(shè)置框架集屬性。11.2.5設(shè)置框架屬性11.2.3小節(jié)學(xué)習(xí)了如何設(shè)置框架集的屬性，此外利用“屬性檢查器”還可以設(shè)置框架的屬性，包括框架名稱、源文件、滾動(dòng)條、邊框、邊界等。具體操作步驟如下：11.3嵌入式框架Iframe嵌入式框架（標(biāo)簽為