導語：網頁制作框架應用利與弊論文一文來源于網友上傳，不代表本站觀點，若需要原創文章可咨詢客服老師，歡迎參考。

摘要：本文從網絡的發展以及現在網頁制作規范對網頁設計師的要求，根據網頁的特點出發，通過dreamweaver8.0從table與div兩種布局制作網頁框架的方法以及瀏覽效果方面分析比較了網頁制作中這兩種方法布局網頁的優點與缺點，并且總結了他們各自應用的范圍。

關鍵詞：網頁制作表格divdreamweaver8.0網頁框架利與弊

引言

隨著信息時代的發展，web技術的一天天成熟，如何制作出一個符合規范，美觀又瀏覽速度快的網頁已經越來越成為一個網頁設計師所要考慮的重點了。過去的網頁設計師只需考慮網頁前臺美工處理，然后切片形成網頁即可，而自從CSS層疊式樣式表誕生后，網頁排版成為了一個新的網頁技術研究的領域。在制作網頁中，我們布局網頁的方法一般有兩種，第一種是使用table（表格）來布局網頁，另一種是使用div容器來布局網頁。下面我們就一個實例來講解這兩種方法來布局網頁的操作步驟，以及比較兩種方法的優點和不足之處。

一、網頁布局的兩種方法

方法一：使用table表格制作網頁框架。具體操作步驟如下：

第一步，打開dreamweaver8.0軟件，數好目標表格的行和列（從最小的格子數起）點擊插入菜單中的表格項，然后打開下面的屬性面板

第二步，將第一行的三列合并，第三行的三列合并。

第三步，合并后，一定要嚴格定義好每行的高度，其次一定要定義好第二行每個單元格的寬度，注意三個單元格的寬度之和應該是表格的總寬度。

第四步，將總表格居中對齊，設置好表格的邊框顏色以及每個單元格的底紋，即可。

這樣，一個通過表格制作的網頁框架就做好了，表格的每個單元格就可以存放圖片、文字、動畫等等了。

方法二：通過div容器來制作網頁框架。具體步驟如下：

第一步，新建一個dreamwer文件，點擊插入菜單中的插入布局對象中的div標簽，點擊確定；

第二步，新建CSS樣式

新建完后將CSS樣式的邊框、底紋以及高度和寬度設置好。這樣就設置好了頂部單元格。

設置好所有的css屬性后，點擊dreamweaver的編輯窗口div標簽，點擊如圖5屬性欄中的divID應用即可。

第三步，使用相同的方法繼續插入布局對象中的DIV標簽，第二行插入DIV應注意，首先插入一個大的div容器，然后在里面插入左中右三個div，定義好每個div的寬度后，注意左邊和中間的div容器的css代碼必須寫入：float:left；否則div容器是無法形成橫排的

第四步，使用相同的方法插入底部的第六個div容器。保持與上面容器寬度一致，同時在css代碼中將每個div容器的底紋和邊框設置好。

二、總結網頁布局的兩種方法的優點與不足之處

使用table表格來布局網頁框架的優點：制作方法直接，直接通過插入菜單中插入以及屬性欄中設置所有的操作即可，無需定義CSS樣式；制作的速度快。缺點：由于html文件中的table標簽的瀏覽速度較慢，所以，使用嵌套表格的方法來布局網頁框架會使網頁瀏覽的速度變慢。

使用DIV的方法布局網頁框架的優點：可以通過css樣式給框架進行功能強大的屬性設置以及給網頁的局部進行任意的定位，制作出來的頁面瀏覽速度較快，同時頁面的風格可以通過修改單獨的css文件進行隨意的修改和更新；缺點：每個div容器都需要定義css樣式來控制，制作過程相比table方式要復雜。現在的網頁越來越傾向于使用DIV的方法來布局網頁了。公務員之家:

三、table與div方法布局網頁框架的應用

table方法布局網頁主要應用在功能較為簡單、頁面不多的網站中；而div主要應用于大型的網站頁面設計中。

四、總結

本文通過dreamweaver8.0從table與div兩種方法來布局制作網頁框架的操作步驟以及瀏覽效果方面分析比較了網頁制作中這兩種方法布局網頁的優點與缺點，并且總結了他們各自應用的范圍。