網頁設計中表格和層排版的使用技巧論文
摘要：文章指出，表格是網頁設計中不可缺少的重要元素。使用表格排版可以規范整個頁面，將頁面中文字、圖片、動畫等眾多元素有條理地統一組織起來。層是一種新的CSS定位技術，它具備許多表格所不具備的特點，比如可以重疊，移動方便，可以設為隱藏，還可以添加許多行為來豐富頁面效果。所以，很多情況下，可以同時使用表格與層搭配進行排版，既可以使用到表格的整體規范性，又可以利用到層的靈活性與豐富功能，從而設計出更加精彩的頁面。
關鍵詞：Dreamweaver；表格；層；排版
作者簡介：龍敏敏（1979-），女，湖南祁東，本科，講師；研究方向：計算機教育教學
1Dreamweaver網頁設計工具簡介
瀏覽網頁已經是現代社會人們生活中的一個重要組成部分，網頁作為網絡信息傳播的主要載體，其設計也被大家所關注。網頁設計的軟件有多種，Dreamweaver是著名的“所見即所得”的可視化網站開發工具，是國內外普遍應用的專用網頁設計軟件。它被稱為“織夢者”，即它的英文單詞所表達的意思。Dreamweaver不僅提供了強大的網頁編輯功能，而且提供了完善的站點管理機制。它是一個集網頁創作和站點管理兩大利器于一身的超重量級創作工具。網頁設計的重點是版面的設計，即如何將所有的素材按照設計要求精美地羅列在頁面中。所以，如何排版成為網頁設計中的關鍵。
2使用表格和層排版
在Dreamweaver網頁設計中，排版的方法有很多種，其中使用表格和層排版是基本的方法，通過設計模式可以輕松完成，簡單易學，是大家常用的方法，對網頁排版起到了重要的作用。
2.1表格排版
在制作網頁時，要想將文本、圖片等組織得美觀，有條理，就需要排版人員頭腦里有一個整體布局的概念。在Dreamweaver中，安排頁面內容布局主要是依靠表格來完成的。通過表格的相互嵌套和合并、拆分，可以將自己的構思完整地表現出來。表格是網頁設計制作時不可缺少的重要元素，它以簡潔明了和高效快捷的方式將數據、文本、圖片、表單等元素有序地顯示在頁面上，從而設計出版式漂亮的.頁面。使用表格排版的頁面，在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，且在不同的瀏覽器平臺有較好的兼容性，所以表格是網頁中最常用的排版方式之一。表格排版比較規范，整體性強，一般的網頁排版中都會使用表格進行整體的排版，但其表現比較中規中矩，不會有太多其他的豐富功能。
2.2層排版
層是CSS中的定位技術，在Dreamweaver中可對其可視化操作。文本、圖像、表格等元素只能固定其位置，不能相互疊加在一起，使用層功能，可以將其放置在網頁文檔內的任何一個位置，還可以按順序排放網頁文檔中的其他構成元素。層體現了網頁技術從二維空間向三維空間的一種延伸。層具有很多表格所不具備的特點，比如可以重疊，便于移動，可設為隱藏，還能為層添加一些行為，使頁面具有更豐富的變化等。這些特點有助于設計思維不受局限，從而發揮更多的想象力。由于它是一種新的CSS定位技術，層在具有上述優點的同時，也存在著一些不可避免的缺陷，比如兼容性、定位問題。所以，目前比較大型的網站不會單獨使用層來排版。
2.3層轉換成表格排版
前面提到，層與表格都可以用來在頁面中定位其他對象，它們有時可以互相取代，但兩者并不完全相同，有時就必須使用其中的一種。比如，當需要用到表格來排版頁面，但又覺得表格的添加比較煩瑣，而層比較靈活，這時候，排版者可以使用層到表格的轉換來實現。具體的操作步驟是：（1）首先在層面板中勾選“防止重疊”選項，這樣繪制層的時候就不會出現疊加和嵌套的現象；（2）在頁面中繪制若干個層，把頁面中的各元素添加到層里面；（3）把每個層自由地排列到頁面中各個相應的位置；（4）使用層排版結束之后，要將層排版轉化為表格排版，選擇“修改”—“轉換”—“層到表格”命令，在對話框中設置好相應的參數，確定之后層就會轉換成對應的表格。這種排版方法在排列對象時比較靈活一點，但有時也會產生一些多余的單元格。當然，這種方法一般適用于不太復雜的頁面的排版，對于比較復雜的圖文混排頁面，最好還是采用傳統的表格排版方法。
3排版時容易出現的問題及解決方法
3.1整體表格排版出現的問題
有很多人在網頁中用表格排版時習慣使用一個大表格，然后在大表格中嵌入一個個小表格，認為這保持了排版的整體性，其實這個習慣是不好的。一個大而長的表格在瀏覽器中打開時會加重瀏覽器的負擔，瀏覽器一般是等待整個表格的內容都接收到以后才顯示這個表格的內容，如果一個很長的頁面使用一個大表格排版，那么這個網頁顯示速度就會比較慢，使得頁面呈現的時間大大加長，很多時候有些網頁的訪問者會失去等待的耐心而放棄瀏覽這個網頁。解決的方法是：拆分表格，將大表格化整為零，把表格打散，并要盡可能地避免表格的層層嵌套。注意，拆分后的表格的寬度要設置為相等，這樣表格的排版效果和拆分前相比并沒有改變，在瀏覽器中呈現時，頁面會從上至下一個個表格呈現出來，明顯加快了頁面打開的速度。
3.2層排版出現位置偏差
在頁面中使用表格和層混合排版時，先加入表格進行頁面的整體布局，然后在局部加入層。通常情況下，層加入到頁面中之后是游離在表格之上的，它雖然移動方便，但在頁面中的位置是固定的，由于表格的寬度是固定像素，設置在窗口中居中顯示，所以當窗口變大時，表格會產生一個相對位移，但是層卻還在原位，沒有跟著相對位移，因而出現層與表格中其他內容位置上的偏差。所以，層排版的靈活性同樣也體現了一定的不穩定性。要想辦法使層與頁面中其他元素一樣，能夠隨瀏覽器的變化而產生相對位置上的變化，排版者可以將層嵌入到表格的單元格中，使層成為單元格中的一個元素，就像插入到單元格中的文本、圖片一樣，層就是屬于單元格中的對象，當瀏覽器窗口大小變化時，表格必然會產生相對的變化，層也就會隨著單元格的位置變化而產生相應的變化，這樣就不會出現頁面中元素相對位置的偏差。整個排版會變得很規范，就相當于是利用表格整體排版，層只是嵌入到單元格中的一個元素，又可以使用到層的豐富功能，兩全其美。解決的方法是：先使用表格對整個網頁的整體進行規劃，然后添加一個層到表格中的某個單元格中。添加的方法：直接將工具欄中的層拖動到單元格中，這樣該層就成為該單元格的嵌入層，該層在單元格中默認是靠左對齊，垂直方向居中，而且在水平方向是不能移動的，只要移動便會脫離該單元格，即成為普通層，不會是單元格的嵌入對象，如果在水平方向一定要移動的話，可以將該單元格的位置進行調整，進而單元格中的嵌入層也會隨之移動。而在垂直方向上的位置是可以調整的，不過不要用鼠標拖動，這樣容易使層脫離單元格，可以選中層通過方向箭上下移動或將該單元格垂直方向上的位置由“居中”改為“頂端”或“底端”。采用這種方法設置層后，無論窗口大小怎么變化，層始終是跟著單元格位置變化而變化，因而不會出現之前那種位置上的偏差。這個問題解決之后，接下來就可以在頁面中利用層的一些行為來豐富頁面。
4結語
總之，網頁設計中，內容雖然很重要，但是如果只有好的內容而沒有精美的排版以及合理的布局，那么再好的內容也很難引起瀏覽者的閱讀瀏覽興趣。通過合理的、有新意的頁面布局，特別是主頁設計，才可以將網頁的內容完美地呈現在瀏覽者面前。所以，排版者在平時要多參考他人優秀的網頁排版作品，加強排版練習，這樣才可能創造更漂亮的網頁排版。
[參考文獻]
[1]李愛軍.網頁的排版布局[J].辦公自動化：綜合版，2009（7）：29-30.
[2]藝博，張明真.網頁設計與制作——MacromediaDreamweaver8[M].北京：高等教育出版社，2007.
[3]王錦.DreamweaverMX2004中文版基礎教程[M].北京：機械工業出版社，2005.
【網頁設計中表格和層排版的使用技巧論文】相關文章：
網頁設計的布局與排版論文11-14
論文排版技巧10-05
網頁設計中FLASH的運用論文11-19
文字排版在平面設計中的運用論文11-09
網頁設計中的視覺構成研究論文11-01
Flash在網頁設計中的應用論文11-18
網頁設計中色彩的運用分析論文11-19
網頁設計論文02-24
網頁設計制作中超鏈接的運用論文11-19