網(wǎng)頁(yè)設(shè)計(jì)中使用表格和層排版的技巧分析

龍敏敏

摘要：文章指出，表格是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的重要元素。使用表格排版可以規(guī)范整個(gè)頁(yè)面，將頁(yè)面中文字、圖片、動(dòng)畫等眾多元素有條理地統(tǒng)一組織起來(lái)。層是_種新的CSS定位技術(shù)，它具備許多表格所不具備的特點(diǎn)，比如可以重疊，移動(dòng)方便，可以設(shè)為隱藏，還可以添加許多行為來(lái)豐富頁(yè)面效果。所以，很多情況下，可以同時(shí)使用表格與層搭配進(jìn)行排版，既可以使用到表格的整體規(guī)范性，又可以利用到層的靈活性與豐富功能，從而設(shè)計(jì)出更加精彩的頁(yè)面。

關(guān)鍵詞：Dreamweaver；表格；層；排版

1 Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)工具簡(jiǎn)介

瀏覽網(wǎng)頁(yè)已經(jīng)是現(xiàn)代社會(huì)人們生活中的一個(gè)重要組成部分，網(wǎng)頁(yè)作為網(wǎng)絡(luò)信息傳播的主要載體，其設(shè)計(jì)也被大家所關(guān)注。網(wǎng)頁(yè)設(shè)計(jì)的軟件有多種，Dreamweaver是著名的“所見即所得”的可視化網(wǎng)站開發(fā)工具，是國(guó)內(nèi)外普遍應(yīng)用的專用網(wǎng)頁(yè)設(shè)計(jì)軟件。它被稱為“織夢(mèng)者”，即它的英文單詞所表達(dá)的意思。Dreamweaver不僅提供了強(qiáng)大的網(wǎng)頁(yè)編輯功能，而且提供了完善的站點(diǎn)管理機(jī)制。它是一個(gè)集網(wǎng)頁(yè)創(chuàng)作和站點(diǎn)管理兩大利器于一身的超重量級(jí)創(chuàng)作工具。

網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)是版面的設(shè)計(jì)，即如何將所有的素材按照設(shè)計(jì)要求精美地羅列在頁(yè)面中。所以，如何排版成為網(wǎng)頁(yè)設(shè)計(jì)中的關(guān)鍵。

2 使用表格和層排版

在Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)中，排版的方法有很多種，其中使用表格和層排版是基本的方法，通過(guò)設(shè)計(jì)模式可以輕松完成，簡(jiǎn)單易學(xué)，是大家常用的方法，對(duì)網(wǎng)頁(yè)排版起到了重要的作用。

2.1 表格排版

在制作網(wǎng)頁(yè)時(shí)，要想將文本、圖片等組織得美觀，有條理，就需要排版人員頭腦里有一個(gè)整體布局的概念。在Dreamweaver中，安排頁(yè)面內(nèi)容布局主要是依靠表格來(lái)完成的。通過(guò)表格的相互嵌套和合并、拆分，可以將自己的構(gòu)思完整地表現(xiàn)出來(lái)。表格是網(wǎng)頁(yè)設(shè)計(jì)制作時(shí)不可缺少的重要元素，它以簡(jiǎn)潔明了和高效快捷的方式將數(shù)據(jù)、文本、圖片、表單等元素有序地顯示在頁(yè)面上，從而設(shè)計(jì)出版式漂亮的頁(yè)面。使用表格排版的頁(yè)面，在不同平臺(tái)、不同分辨率的瀏覽器里都能保持其原有的布局，且在不同的瀏覽器平臺(tái)有較好的兼容性，所以表格是網(wǎng)頁(yè)中最常用的排版方式之_。

表格排版比較規(guī)范，整體性強(qiáng)，一般的網(wǎng)頁(yè)排版中都會(huì)使用表格進(jìn)行整體的排版，但其表現(xiàn)比較中規(guī)中矩，不會(huì)有太多其他的豐富功能。

2.2 層排版

層是CSS中的定位技術(shù)，在Dreamweaver中可對(duì)其可視化操作。文本、圖像、表格等元素只能固定其位置，不能相互疊加在一起，使用層功能，可以將其放置在網(wǎng)頁(yè)文檔內(nèi)的任何一個(gè)位置，還可以按順序排放網(wǎng)頁(yè)文檔中的其他構(gòu)成元素。層體現(xiàn)了網(wǎng)頁(yè)技術(shù)從二維空間向三維空間的一種延伸。

層具有很多表格所不具備的特點(diǎn)，比如可以重疊，便于移動(dòng)，可設(shè)為隱藏，還能為層添加一些行為，使頁(yè)面具有更豐富的變化等。這些特點(diǎn)有助于設(shè)計(jì)思維不受局限，從而發(fā)揮更多的想象力。由于它是一種新的CSS定位技術(shù)，層在具有上述優(yōu)點(diǎn)的同時(shí)，也存在著一些不可避免的缺陷，比如兼容性、定位問(wèn)題。所以，目前比較大型的網(wǎng)站不會(huì)單獨(dú)使用層來(lái)排版。

2.3 層轉(zhuǎn)換成表格排版

前面提到，層與表格都可以用來(lái)在頁(yè)面中定位其他對(duì)象，它們有時(shí)可以互相取代，但兩者并不完全相同，有時(shí)就必須使用其中的一種。比如，當(dāng)需要用到表格來(lái)排版頁(yè)面，但又覺得表格的添加比較煩瑣，而層比較靈活，這時(shí)候，排版者可以使用層到表格的轉(zhuǎn)換來(lái)實(shí)現(xiàn)。具體的操作步驟是：（1）首先在層面板中勾選“防止重疊”選項(xiàng)，這樣繪制層的時(shí)候就不會(huì)出現(xiàn)疊加和嵌套的現(xiàn)象；（2）在頁(yè)面中繪制若干個(gè)層，把頁(yè)面中的各元素添加到層里面；（3）把每個(gè)層自由地排列到頁(yè)面中各個(gè)相應(yīng)的位置；（4）使用層排版結(jié)束之后，要將層排版轉(zhuǎn)化為表格排版，選擇“修改”“轉(zhuǎn)換”“層到表格”命令，在對(duì)話框中設(shè)置好相應(yīng)的參數(shù)，確定之后層就會(huì)轉(zhuǎn)換成對(duì)應(yīng)的表格。

這種排版方法在排列對(duì)象時(shí)比較靈活一點(diǎn)，但有時(shí)也會(huì)產(chǎn)生一些多余的單元格。當(dāng)然，這種方法一般適用于不太復(fù)雜的頁(yè)面的排版，對(duì)于比較復(fù)雜的圖文混排頁(yè)面，最好還是采用傳統(tǒng)的表格排版方法。

3 排版時(shí)容易出現(xiàn)的問(wèn)題及解決方法

3.1 整體表格排版出現(xiàn)的問(wèn)題

有很多人在網(wǎng)頁(yè)中用表格排版時(shí)習(xí)慣使用一個(gè)大表格，然后在大表格中嵌入_個(gè)個(gè)小表格，認(rèn)為這保持了排版的整體性，其實(shí)這個(gè)習(xí)慣是不好的。一個(gè)大而長(zhǎng)的表格在瀏覽器中打開時(shí)會(huì)加重瀏覽器的負(fù)擔(dān)，瀏覽器一般是等待整個(gè)表格的內(nèi)容都接收到以后才顯示這個(gè)表格的內(nèi)容，如果一個(gè)很長(zhǎng)的頁(yè)面使用一個(gè)大表格排版，那么這個(gè)網(wǎng)頁(yè)顯示速度就會(huì)比較慢，使得頁(yè)面呈現(xiàn)的時(shí)間大大加長(zhǎng)，很多時(shí)候有些網(wǎng)頁(yè)的訪問(wèn)者會(huì)失去等待的耐心而放棄瀏覽這個(gè)網(wǎng)頁(yè)。

解決的方法是：拆分表格，將大表格化整為零，把表格打散，并要盡可能地避免表格的層層嵌套。注意，拆分后的表格的寬度要設(shè)置為相等，這樣表格的排版效果和拆分前相比并沒(méi)有改變，在瀏覽器中呈現(xiàn)時(shí)，頁(yè)面會(huì)從上至下一個(gè)個(gè)表格呈現(xiàn)出來(lái)，明顯加快了頁(yè)面打開的速度。

3.2 層排版出現(xiàn)位置偏差

在頁(yè)面中使用表格和層混合排版時(shí)，先加入表格進(jìn)行頁(yè)面的整體布局，然后在局部加入層。通常情況下，層加入到頁(yè)面中之后是游離在表格之上的，它雖然移動(dòng)方便，但在頁(yè)面中的位置是固定的，由于表格的寬度是固定像素，設(shè)置在窗口中居中顯示，所以當(dāng)窗口變大時(shí)，表格會(huì)產(chǎn)生一個(gè)相對(duì)位移，但是層卻還在原位，沒(méi)有跟著相對(duì)位移，因而出現(xiàn)層與表格中其他內(nèi)容位置上的偏差。所以，層排版的靈活性同樣也體現(xiàn)了一定的不穩(wěn)定性。

要想辦法使層與頁(yè)面中其他元素一樣，能夠隨瀏覽器的變化而產(chǎn)生相對(duì)位置上的變化，排版者可以將層嵌入到表格的單元格中，使層成為單元格中的一個(gè)元素，就像插入到單元格中的文本、圖片一樣，層就是屬于單元格中的對(duì)象，當(dāng)瀏覽器窗口大小變化時(shí)，表格必然會(huì)產(chǎn)生相對(duì)的變化，層也就會(huì)隨著單元格的位置變化而產(chǎn)生相應(yīng)的變化，這樣就不會(huì)出現(xiàn)頁(yè)面中元素相對(duì)位置的偏差。整個(gè)排版會(huì)變得很規(guī)范，就相當(dāng)于是利用表格整體排版，層只是嵌入到單元格中的一個(gè)元素，又可以使用到層的豐富功能，兩全其美。

解決的方法是：先使用表格對(duì)整個(gè)網(wǎng)頁(yè)的整體進(jìn)行規(guī)劃，然后添加一個(gè)層到表格中的某個(gè)單元格中。添加的方法：直接將工具欄中的層拖動(dòng)到單元格中，這樣該層就成為該單元格的嵌入層，該層在單元格中默認(rèn)是靠左對(duì)齊，垂直方向居中，而且在水平方向是不能移動(dòng)的，只要移動(dòng)便會(huì)脫離該單元格，即成為普通層，不會(huì)是單元格的嵌入對(duì)象，如果在水平方向一定要移動(dòng)的話，可以將該單元格的位置進(jìn)行調(diào)整，進(jìn)而單元格中的嵌入層也會(huì)隨之移動(dòng)。而在垂直方向上的位置是可以調(diào)整的，不過(guò)不要用鼠標(biāo)拖動(dòng)，這樣容易使層脫離單元格，可以選中層通過(guò)方向箭上下移動(dòng)或?qū)⒃搯卧翊怪狈较蛏系奈恢糜伞熬又小备臑椤绊敹恕被颉暗锥恕薄?/p>

采用這種方法設(shè)置層后，無(wú)論窗口大小怎么變化，層始終是跟著單元格位置變化而變化，因而不會(huì)出現(xiàn)之前那種位置上的偏差。

這個(gè)問(wèn)題解決之后，接下來(lái)就可以在頁(yè)面中利用層的一些行為來(lái)豐富頁(yè)面。

4 結(jié)語(yǔ)

總之，網(wǎng)頁(yè)設(shè)計(jì)中，內(nèi)容雖然很重要，但是如果只有好的內(nèi)容而沒(méi)有精美的排版以及合理的布局，那么再好的內(nèi)容也很難引起瀏覽者的閱讀瀏覽興趣。通過(guò)合理的、有新意的頁(yè)面布局，特別是主頁(yè)設(shè)計(jì)，才可以將網(wǎng)頁(yè)的內(nèi)容完美地呈現(xiàn)在瀏覽者面前。所以，排版者在平時(shí)要多參考他人優(yōu)秀的網(wǎng)頁(yè)排版作品，加強(qiáng)排版練習(xí)，這樣才可能創(chuàng)造更漂亮的網(wǎng)頁(yè)排版。