frame網(wǎng)頁(yè)框架的布局教程

框架是一種特殊的XHTML布局方式。其可以通過(guò)frame標(biāo)簽將網(wǎng)頁(yè)劃分為多個(gè)區(qū)域，并通過(guò)這些區(qū)域來(lái)顯示不同的網(wǎng)頁(yè)。在框架網(wǎng)頁(yè)中，必須使用frameset標(biāo)簽將這些框架組織起來(lái)，組合成為框架集。

1.框架和框架集

框架和框架集是兩個(gè)不同的事物。網(wǎng)站制作框架僅僅是網(wǎng)頁(yè)中的一個(gè)區(qū)域，在該區(qū)域中可以顯示與瀏覽器窗口中其他區(qū)域內(nèi)容無(wú)關(guān)的XHTML文檔。通常兩個(gè)或兩個(gè)以上的框架可以組合成一個(gè)網(wǎng)頁(yè)。

框架集則是一種HTML文檔的類(lèi)型，其定義一組框架的布局方式以及屬性，如框架的數(shù)目、大小、位置以及在每個(gè)框架中初始顯示的URL?？蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，其僅僅是為瀏覽器提供顯示各個(gè)框架的方法和規(guī)范。通常所說(shuō)的框架網(wǎng)頁(yè)，就是包含框架的框架集構(gòu)成的網(wǎng)頁(yè)。

2.框架網(wǎng)頁(yè)的優(yōu)點(diǎn)

框架網(wǎng)頁(yè)有著鮮明的特點(diǎn)。在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，使用框架必須符合簡(jiǎn)單、易用、便于瀏覽和維護(hù)的條件。

布局簡(jiǎn)單

在使用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)時(shí)，為網(wǎng)頁(yè)布局最常用的工具是層<div>或者表格<table>。在使用層或表格布局時(shí)，通常需要不斷地在網(wǎng)頁(yè)中插入各種標(biāo)簽和對(duì)象，并為這些對(duì)象設(shè)置屬性等。而使用框架則布局非常簡(jiǎn)單，通過(guò)鼠標(biāo)單擊兒次就可以實(shí)現(xiàn)網(wǎng)頁(yè)的整體布局，所有的大小寬窄都可以通過(guò)鼠標(biāo)拖動(dòng)來(lái)實(shí)現(xiàn)。

制作方便

在使用Dreamweaver制作整個(gè)網(wǎng)站時(shí)，網(wǎng)站的每個(gè)頁(yè)面都有一些相同的元素，例如，導(dǎo)航條、版尾等。之前已經(jīng)介紹了使用庫(kù)來(lái)插入這些元素。其實(shí)可以使用框架設(shè)計(jì)網(wǎng)頁(yè)，將導(dǎo)航條和版尾等保存為單獨(dú)的網(wǎng)頁(yè)，并通過(guò)框架來(lái)調(diào)用，一個(gè)導(dǎo)航條頁(yè)面和一個(gè)版尾頁(yè)面可以供整個(gè)網(wǎng)站所有網(wǎng)頁(yè)使用。

適用于長(zhǎng)頁(yè)面

在一些比較長(zhǎng)的網(wǎng)頁(yè)中(例如大段的文章或博客，以及網(wǎng)站的后臺(tái)程序頁(yè)面等)，用戶(hù)可能需要拖動(dòng)滾動(dòng)條來(lái)瀏覽整個(gè)網(wǎng)頁(yè)。在普通的網(wǎng)頁(yè)中，當(dāng)用戶(hù)瀏覽完網(wǎng)頁(yè)后，通常需要將滾動(dòng)條拖回網(wǎng)頁(yè)頂部才可以繼續(xù)使用導(dǎo)航條。如果在網(wǎng)頁(yè)中使用了框架并將導(dǎo)航條作為單獨(dú)框架，則用戶(hù)無(wú)須拖動(dòng)滾動(dòng)條即可直接使用導(dǎo)航條。正因?yàn)樵搩?yōu)點(diǎn)，很多論壇都喜歡用框架來(lái)制作導(dǎo)航條。

框架網(wǎng)頁(yè)通常是由多個(gè)網(wǎng)頁(yè)組成的。例如，某個(gè)網(wǎng)頁(yè)是有3個(gè)框架組成，那么其應(yīng)包含4個(gè)網(wǎng)頁(yè)，框架集和每個(gè)框架都應(yīng)該有一個(gè)單獨(dú)的網(wǎng)頁(yè)。框架集控制每個(gè)框架中的網(wǎng)頁(yè)顯示的方式。

在Dreamweaver中為用戶(hù)預(yù)先定義了多種框架集類(lèi)型。使用這些預(yù)先定義的框架集類(lèi)型，可以方便地創(chuàng)建各種布局方式的框架網(wǎng)頁(yè)。在制作框架網(wǎng)頁(yè)之前，應(yīng)該執(zhí)行【查看】【可視化助理】【框架邊框】命令，使Dreamweaver能夠顯示框架的邊框。制作框架布局的網(wǎng)頁(yè)，通常有以下4種方法。

1.新建框架網(wǎng)頁(yè)

在Dreamweaver中，執(zhí)行【文件】【新建】命令，打開(kāi)【新建文檔】對(duì)話(huà)框。在該對(duì)話(huà)框中，選擇【示例中的頁(yè)】【框架集】選項(xiàng)，即可在列表菜單中選擇各種框架，如圖5-22所示。



2.插入框架集

除了新建框架網(wǎng)頁(yè)外，還可以在已創(chuàng)建的其他類(lèi)型網(wǎng)頁(yè)中插入框架集。打開(kāi)需要插入框架的網(wǎng)頁(yè)，在【插入】工具欄中單擊【布局】【框架】口，，即可彈出框架類(lèi)型的菜單。單擊相應(yīng)的框架類(lèi)型，同樣可以建立框架網(wǎng)頁(yè)，如圖5-23所示。



3.拆分框架

拆分框架也是創(chuàng)建框架網(wǎng)頁(yè)的一種常用方式。打開(kāi)網(wǎng)頁(yè)文檔后，執(zhí)行【修改】【框架集】命令，即可選擇【拆分左框架】等子命令。

4.插入HTML

另外一種插入框架網(wǎng)頁(yè)的方法是在打開(kāi)的網(wǎng)頁(yè)中執(zhí)行【插入記錄】【HTML】【框架】命令，即可選擇各種類(lèi)型的框架將其HTML代碼插入到網(wǎng)頁(yè)中。

插入框架后，將彈出【框架標(biāo)簽輔助功能屬性】對(duì)話(huà)框。在該對(duì)話(huà)框中，可以為每個(gè)框架設(shè)置一個(gè)標(biāo)題。設(shè)置完標(biāo)題后，單擊【確定】按鈕，即可完成框架的創(chuàng)建。