frame網頁框架的布局教程

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

1.框架和框架集

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

框架集則是一種HTML文檔的類型，其定義一組框架的布局方式以及屬性，如框架的數目、大小、位置以及在每個框架中初始顯示的URL。框架集文件本身不包含要在瀏覽器中顯示的HTML內容，其僅僅是為瀏覽器提供顯示各個框架的方法和規范。通常所說的框架網頁，就是包含框架的框架集構成的網頁。

2.框架網頁的優點

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

布局簡單

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

制作方便

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

適用于長頁面

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

框架網頁通常是由多個網頁組成的。例如，某個網頁是有3個框架組成，那么其應包含4個網頁，框架集和每個框架都應該有一個單獨的網頁。框架集控制每個框架中的網頁顯示的方式。

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

1.新建框架網頁

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



2.插入框架集

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



3.拆分框架

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

4.插入HTML

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

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