Dreamweaver網(wǎng)頁設(shè)計中表格與層布局的比較

摘 要 表格和層布局是Dreamweaverm網(wǎng)頁設(shè)計中網(wǎng)頁布局的兩種基本方法，二者各有自己的特點。使用表格布局可以方便規(guī)范整個頁面，組織各種頁面元素有條理統(tǒng)一，使用層布局可以利用層的重疊、移動、隱藏，豐富頁面效果。

關(guān)鍵詞 Dreamweaver 表格 層 布局

中圖分類號：TP39 文獻標(biāo)識碼：A

2016年1月22日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）發(fā)布第37次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》（以下簡稱為《報告》）?！秷蟾妗凤@示，截至2015年12月，中國網(wǎng)民規(guī)模達6.88億，互聯(lián)網(wǎng)普及率達到50.3%，半數(shù)中國人已接入互聯(lián)網(wǎng)。同時，移動互聯(lián)網(wǎng)塑造了全新的社會生活形態(tài)，“互聯(lián)網(wǎng)+”行動計劃不斷助力企業(yè)發(fā)展，互聯(lián)網(wǎng)對于整體社會的影響已進入到新的階段。

瀏覽網(wǎng)頁已經(jīng)成為現(xiàn)代社會人們生活中不可或缺的重要部分。網(wǎng)頁作為信息在網(wǎng)絡(luò)傳播中的主要載體，人們除了關(guān)心里面的內(nèi)容以外，對它的版面設(shè)計也非常關(guān)注。如何將所有的文字、圖片、動畫等頁面元素按照設(shè)計要求精美地排列在頁面中，即網(wǎng)頁如何布局，是網(wǎng)頁設(shè)計的重點和關(guān)鍵所在。

利用Dreamweaver進行網(wǎng)頁設(shè)計時，基本的布局方法是使用表格和層。這兩種方法在頁面布局時各有自己的特點。

表格是網(wǎng)頁設(shè)計制作時不可缺少的重要元素，既可以單純地轉(zhuǎn)二維數(shù)據(jù)，又可以用來組織頁面內(nèi)容，將不同的頁面元素放置在不同的表格或單元格里，以簡潔明了的方式將各種頁面元素井然有序地顯示在頁面中，并且可以設(shè)計出布局合理、結(jié)構(gòu)協(xié)調(diào)、美觀勻稱的網(wǎng)頁。

使用表格布局頁面時，定位各種頁面元素過程簡單，用戶在頁面上方便地繪制布局單元格，并能夠靈活的將其移動到所需位置。使用多個布局表格可以將頁面布局分隔成多個區(qū)域，每個區(qū)域相對獨立，當(dāng)對某一個區(qū)域進行編輯時，不會影響其他區(qū)域。利用布局表格，用戶可以快捷制作出結(jié)構(gòu)復(fù)雜的版面。

使用表格布局，用戶還可以創(chuàng)建固定寬度的布局和自動伸展為整個瀏覽器窗口寬度的布局，因此兼容不同平臺、不同分辨率的瀏覽器。

表格布局比較規(guī)范、整體性強，表現(xiàn)得中規(guī)中矩，不太有其他豐富功能。

有些人在網(wǎng)頁設(shè)計時喜歡整個頁面使用一個大表格，然后在大表格中再嵌套小表格，使得瀏覽器在打開這個大而長的表格時只能等待整個表格的內(nèi)容都接收完后才顯示，從而增加了瀏覽器的負(fù)擔(dān)。

網(wǎng)頁中的層就是網(wǎng)頁內(nèi)容的一個容器，使用層可以靈活放置網(wǎng)站內(nèi)容，層中放置各種頁面元素，甚至還可以嵌套層。層也是一種網(wǎng)頁元素定位技術(shù)，使用它可以以像素為單位精確定位頁面元素。層最主要的特性就是可以在網(wǎng)頁中自由浮動，可以放置在頁面的任何位置上。層的位置可以重疊、顯示與隱藏、與時間軸結(jié)合，可用來控制元素的顯示順序，還可用來制作網(wǎng)站的部分重疊效果，使頁面有豐富變化。

層布局的靈活性同樣也體現(xiàn)了一定的不穩(wěn)定性。通常情況下，層加入到頁面中是游離的，雖然移動方便，但在頁面中的位置是固定的，因此當(dāng)瀏覽器窗口變化時，層還在原位，沒有跟著相對位移，因此會出現(xiàn)位置上的偏差。

CSS樣式大多用于控制層的排版布局，一般使用外部CSS文件重用。統(tǒng)一使用一個外部CSS樣式表文件，可以實現(xiàn)“一改全改”的效果，維護成本低。但一個網(wǎng)站所有頁面在加載時都要訪問同一個文件，后臺支撐成本無形中提高、服務(wù)器消耗增加。

目前，瀏覽器的種類很多，版本也很多。對于CSS（樣式表）并不是所有瀏覽器的所有版本都支持的很好，這就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中增加很多工作量。

很多情況下，可以同時使用表格與層混合搭配進行布局。先使用多個上下關(guān)系的表格進行頁面的整個布局，再使層成為單元格的一個元素，既利用表格的整體規(guī)范性使整個布局規(guī)范，又利用到層的靈活性和豐富功能，從而使頁面設(shè)計更加精彩。

網(wǎng)頁設(shè)計中，好的網(wǎng)頁內(nèi)容還要結(jié)合精美的網(wǎng)頁布局。頁面布局合理、有新意，才能完美展現(xiàn)網(wǎng)頁內(nèi)容，才能在瀏覽者處加分，引起瀏覽者的興趣和共鳴。

作者簡介：劉珍，（1972-），碩士，研究方向為計算機應(yīng)用。

參考文獻

[1] 文杰書院.DreamweaverCS5[M].清華大學(xué)出版社，2011（01）.

[2] 李愛軍.網(wǎng)頁的排版布局[J].辦公自動化：綜合版，2009（7）：29-30.

[3] 王瑄.探討Dreamweaver中層的應(yīng)用[J].科技信息，2011（2）：261-261.