導(dǎo)語：網(wǎng)頁制作框架應(yīng)用利與弊論文一文來源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

摘要：本文從網(wǎng)絡(luò)的發(fā)展以及現(xiàn)在網(wǎng)頁制作規(guī)范對(duì)網(wǎng)頁設(shè)計(jì)師的要求，根據(jù)網(wǎng)頁的特點(diǎn)出發(fā)，通過dreamweaver8.0從table與div兩種布局制作網(wǎng)頁框架的方法以及瀏覽效果方面分析比較了網(wǎng)頁制作中這兩種方法布局網(wǎng)頁的優(yōu)點(diǎn)與缺點(diǎn)，并且總結(jié)了他們各自應(yīng)用的范圍。

關(guān)鍵詞：網(wǎng)頁制作表格divdreamweaver8.0網(wǎng)頁框架利與弊

引言

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

一、網(wǎng)頁布局的兩種方法

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

第一步，打開dreamweaver8.0軟件，數(shù)好目標(biāo)表格的行和列（從最小的格子數(shù)起）點(diǎn)擊插入菜單中的表格項(xiàng)，然后打開下面的屬性面板

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

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

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

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

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

第一步，新建一個(gè)dreamwer文件，點(diǎn)擊插入菜單中的插入布局對(duì)象中的div標(biāo)簽，點(diǎn)擊確定；

第二步，新建CSS樣式

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

設(shè)置好所有的css屬性后，點(diǎn)擊dreamweaver的編輯窗口div標(biāo)簽，點(diǎn)擊如圖5屬性欄中的divID應(yīng)用即可。

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

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

二、總結(jié)網(wǎng)頁布局的兩種方法的優(yōu)點(diǎn)與不足之處

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

使用DIV的方法布局網(wǎng)頁框架的優(yōu)點(diǎn)：可以通過css樣式給框架進(jìn)行功能強(qiáng)大的屬性設(shè)置以及給網(wǎng)頁的局部進(jìn)行任意的定位，制作出來的頁面瀏覽速度較快，同時(shí)頁面的風(fēng)格可以通過修改單獨(dú)的css文件進(jìn)行隨意的修改和更新；缺點(diǎn)：每個(gè)div容器都需要定義css樣式來控制，制作過程相比table方式要復(fù)雜?，F(xiàn)在的網(wǎng)頁越來越傾向于使用DIV的方法來布局網(wǎng)頁了。公務(wù)員之家:

三、table與div方法布局網(wǎng)頁框架的應(yīng)用

table方法布局網(wǎng)頁主要應(yīng)用在功能較為簡(jiǎn)單、頁面不多的網(wǎng)站中；而div主要應(yīng)用于大型的網(wǎng)站頁面設(shè)計(jì)中。

四、總結(jié)

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