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

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

1.框架和框架集

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

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

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

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

布局簡單

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

制作方便

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

適用于長頁面

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

框架網(wǎng)頁通常是由多個網(wǎng)頁組成的。例如，某個網(wǎng)頁是有3個框架組成，那么其應(yīng)包含4個網(wǎng)頁，框架集和每個框架都應(yīng)該有一個單獨的網(wǎng)頁?？蚣芗刂泼總€框架中的網(wǎng)頁顯示的方式。

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

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

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



2.插入框架集

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



3.拆分框架

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

4.插入HTML

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

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