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

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

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

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

4、11.2.1 創(chuàng)建框架和框架集Dreamweaver CS3提供了15種框架類型，分別是上方固定、上方固定下方固定、上方固定右側(cè)嵌套、上方固定左側(cè)嵌套、下方固定、下方固定右側(cè)嵌套、下方固定左側(cè)嵌套、右側(cè)固定、右側(cè)固定上方嵌套、右側(cè)固定下方嵌套、垂直拆分、左側(cè)固定、左側(cè)固定上方嵌套、左側(cè)固定下方嵌套、水平拆分等，可以使用新建文檔的方式創(chuàng)建空白框架網(wǎng)頁，也可以將普通網(wǎng)頁轉(zhuǎn)變?yōu)榭蚣芙Y(jié)構(gòu)。具體操作步驟如下：1創(chuàng)建空白框架網(wǎng)頁2將現(xiàn)有文檔創(chuàng)建為框架網(wǎng)頁11.2.2 框架的嵌套框架的嵌套是指一個(gè)框架集套在另一個(gè)框架集內(nèi)。“上方固定，左側(cè)嵌套實(shí)際上就是一個(gè)嵌套的框架集，是在上下結(jié)構(gòu)的框架集中嵌套一個(gè)左右結(jié)構(gòu)

5、的框架集。具體操作步驟如下：（1將鼠標(biāo)移至要?jiǎng)?chuàng)建嵌套框架集的框架內(nèi)，如圖11.8所示。（2單擊插入”|“HTML”|“框架”|“左對(duì)齊命令菜單，新插入一個(gè)框架集，如圖11.9所示。此時(shí)，嵌套框架集制作完成。11.2.3 框架的基本操作框架的基本操作主要包括：選取框架和框架集、保存框架和框架集、調(diào)整框架大小、拆分框架和刪除框架等。1選取框架或框架集2保存框架3調(diào)整框架大小4拆分、刪除框架11.2.4 設(shè)置框架集屬性運(yùn)用“屬性檢查器可以方便地設(shè)置框架集的邊框?qū)挾群皖伾?、設(shè)置框架行和列的大小，對(duì)于初學(xué)者來說這種方法簡(jiǎn)單易用。下面來學(xué)習(xí)如何使用“屬性檢查器設(shè)置框架集屬性。11.2.5 設(shè)置框架屬性11.2.3小節(jié)學(xué)習(xí)了如何設(shè)置框架集的屬性，此外利用“屬性檢查器還可以設(shè)置框架的屬性，包括框架名稱、源文件、滾動(dòng)條、邊框、邊界等。具體操作步驟如下：11.3 嵌入式框架Iframe嵌入式框架標(biāo)簽為）也是框架的一種形式。它與普通框架的區(qū)別在于，它可以嵌入在網(wǎng)頁中的任意部分，比如可以在表格中插入嵌入式框架。正是由于這一特點(diǎn)，使得嵌入式框架使用廣泛。本節(jié)將結(jié)合具體實(shí)例，學(xué)習(xí)如何創(chuàng)建嵌入式框架，以及設(shè)置嵌入式框架的屬性。應(yīng)用嵌入式框架的網(wǎng)頁效果如圖11.27所示，單擊左邊的導(dǎo)航文字，右邊的內(nèi)容會(huì)發(fā)生改變，這實(shí)際上是由兩個(gè)頁面組成。下面就以該網(wǎng)