淺談網頁設計中的布局工具

摘要:網頁設計是網站建設的重點，用戶不僅需要一個擁有豐富信息的網絡環境，更需要一個讓人賞心悅目的網絡環境。如何將紛繁復雜的網絡信息合理、恰當的放入網頁中是網頁設計者需要精通的一門技巧，也是眾多網頁設計愛好者們必須要思考的一個問題。該文從網頁設計中有哪些布局工具，它們具有什么樣的功能，在什么情況情況下使用等幾個方面為讀者進行了闡述。

關鍵詞:布局;表格;層;頁面元素;Dreamweaver

中圖分類號:TP393文獻標識碼:A 文章編號:1009-3044(2009)24-6699-02

Brief Discussion on Layout Yools in Web Page Design

ZHANG Jing-bo

(Sichuan Chemical Technical College， Luzhou 646005， China)

Abstract: Web page design plays an important role in website construction .Both abundant information and beautiful appearance are essential for a network environment. Web page designer should be skillful for arranging numerous information on the page reasonably and properly. It is also a question that is worth thinking about by all web page amateurs. In this paper， the author tries to introduce the webpage layout tools and their functions. It also illustrates under which conditions the tools will be used.

Key words: layout; table; layer page; elements; dreamweaver

隨著網絡的發展，網站已經成為了日常生活中常常關注的媒體平臺，在網站里，瀏覽者可以瀏覽新聞，觀看電影，下載音樂，欣賞圖片。而且所有通過網站瀏覽的信息資源，都是通過將其放置于網頁中得以呈現的。如何才能讓如此紛繁復雜的信息分門別類的出現在網頁中呢?這就需要設計者靈活的運用網頁布局工具了。清晰網頁的布局可以讓瀏覽者認清網站的結構，不至于在繁雜的信息中迷失方向，精美的網頁布局可以給瀏覽者帶來美的享受，在瀏覽信息的同時得到身心的愉悅。那么，在制作網頁的過程中，有哪些布局的工具可以使用?它們又分別適合于什么情況下使用呢?

1 網頁布局和傳統文檔布局的區別

在這里筆者用著名的網頁制作軟件Dreamweaver來舉例。Dreamweaver是一個非常成熟的網頁制作軟件。它可以靈活的在設計視圖和代碼視圖之間切換，并且提供了相當多的組件方便設計者使用。在網頁中出現最多的網頁元素就是圖片和文字，將文字和圖片放置到合理的位置是布局的第一要點。

經常使用Word等辦公自動化軟件的用戶都習慣性的利用回車、空格或者是單純的對齊方式來控制文檔內容的布局。這個方法運用到網頁設計中就并不那么有效了。

首先需要了解這樣一個原理:大家瀏覽的網頁中的信息幾乎都是以HTML標簽存在，它們首先被下載到本地硬盤，然后再通過編譯顯示到用戶的瀏覽器上。這就意味著，如果在設計過程中，頻繁的使用空格來布局的話，網頁中將會出現很多代表空格的HTML標簽(nbsp)，網頁的大小就會無形中增大，網頁越大，下載的時間就必然會越久。而回車在Dreamweaver中并非表示換行，它代表的是分段，它會導致2行頁面元素相隔的間距被限制，同時將一個整體劃分為兩個部分，既不美觀，也不方便操作。這顯然并不符合設計的要求。那么在設計過程中，通常使用的布局工具有哪些呢?

2 網頁設計中的布局工具

2.1 插入表格

最常用的就是直接插入表格。網頁中的表格運用是非常重要的，只有將網頁元素放置到表格中，才能更好的進行頁面的布局。它的使用主要表現在以下幾個方面:

2.1.1 網頁大小的控制

平時大家瀏覽網頁，都習慣的使用垂直滾動條來拖動頁面瀏覽更多的內容。如果說一個網頁既有水平滾動條，又有垂直滾動條，那肯定是非常不方面的。所以在設計的時候通常是首先在空白的網頁中，插入一個限定了寬度的表格，然后所有的網頁元素都放置于該表格中。這樣后期制作的內容將不會出現水平延伸，只會在垂直方向上增加。這樣就可以避免水平滾動條的出現了。

2.1.2 頁面元素間距的控制

如果運用回車，兩行頁面元素之間的間距會變得不易調整，對于這個問題，制作過程中可以將頁面元素放置于表格，利用單元格進行控制兩行頁面元素的位置。首先將原本處于兩行的頁面元素分別放置于兩行表格中，在表格的屬性里可以找到“間距”和“填充”這2個屬性，可以設置它們的大小來控制單元格與單元格之間的間距，還可以設置單元格內元素和單元格邊框之間的距離。這樣就可以方便的實現回車鍵不能實現的功能了。同時也可以利用單元格的對齊方式以及拖動單元格的邊框來實現以上的功能。

2.1.3 單元格內的背景圖片

如果有這樣一個設計，在頁面中，利用一個扇動翅膀的蝴蝶Flash動畫和一張花朵圖案，實現蝴蝶在花叢中飛舞的效果。那么首先需要做的就是將圖片與Flash重疊在一起。但是由于頁面是一個平面，兩個處于同一片面的頁面元素是不能重疊的。這里可以將圖片設置為單元格的背景圖片，然后在單元格中插入Flash動畫，由此產生了生動活潑的動畫效果。

表格有這樣豐富的功能，是不是利用插入表格就可以方便、靈活的進行布局呢?答案是否定的，單純的插入表格進行布局存在很大的局限性，表格應該插入多少?單元格應該設置多寬多高?這些都是需要應對的問題。插入表格的設計方法比較適合當設計者在簡單網頁中的設計，比如放置一個音樂播放器到網頁中，或者插入一個導航條這樣的情況。

2.2 布局工具

另一個工具是利用Dreamweaver所提供的“布局工具”進行表格的設計。它的好處在于，設計者直接繪制的就可以產生利于調整的表格和單元格。

利用布局導航條切換到布局模式后，在該模式中可以利用“繪制表格”和“描繪單元格”兩個功能來實現表格的插入，利用這2個功能，可以直觀的在空白頁面上繪制表格，然后在表格的基礎上輕松繪制單元格。它的好處在于，利用繪制方法放置的單元格，位置上更加理想，不用插入或者拆分表格就可以實現位置的移動，并且在布局模式下，表格屬性工具欄上還提供了利用坐標來精確控制單元格位移的方法。這使得頁面元素的移動可以更加精確化。

布局模式可以利用表格實現同一平面頁面元素的精確定位，比較適合的情況是在已知頁面元素的高寬，并且已知需要放置哪些頁面元素到頁面中的情況。但是，如果頁面上出現需要凸出于頁平面的頁面元素，單純利用布局模式下的表格就不能完成了。

2.3 層的應用

如果說某個頁面元素需要凸出于頁平面，通常使用的表格就不能完成功能了，因為在同一平面頁面元素是不能疊加的。而把某一頁面元素設置為背景也比較局限。因為制作過程中只能把圖片作為背景，不能把Flash或者文本作為背景。

遇到這樣的情況，可以利用“插入層”來解決。“層”可以把它理解成漂浮于頁平面的一個空間，這個空間可以像網頁一樣放入圖片、Flash、文字等內容，并且它還有一個非常重要的屬性，就是它具有Z軸。如果把頁面的長寬分別看成以左上角為起點的X軸和Y軸的話，那Z軸就是垂直于頁面的凸起軸，Z軸的值越大，層就越上層，那么放置于改層內的頁面元素就會遮擋住其它的頁面元素，從而顯示在頁面更上方。同時利用層凸出于頁平面的這一特性，可以將需要運用的頁面元素放置于其中，然后拖動層的位置，輕松實現頁面元素的定位。

層比較適合于Flash結合使用，通常是把Flash透明動畫放置于層中，然后作為圖片的裝飾，使頁面產生動畫效果。層也經常被使用到下拉菜單的制作中。

但是層也有自己的局限，由于層漂浮于頁平面。所以它需要一個相對的坐標才能固定自己在頁面中的位置，默認情況下層是相對于頁面左上角對齊。如果頁平面發生改變，比如縮小頁面，往往就會改變層出現的位置，造成頁面錯位的問題。所以在使用前，必須要先找到層的相對對象，避免錯位問題的發生。

3 結論

當然，網頁設計中除了利用以上幾種方法，還可以利用框架，利用Photoshop的切片等工具來實現布局，本文由于篇幅有限就不在此作一一介紹了。對于不同的布局方法，大家需要根據實際情況，結合自身設計的作品做出相應的選擇，同時在實踐中不斷總結經驗和教訓，這樣就能夠作出更加精美的網頁了。

參考文獻:

[1] 胡松.Dreamweaver 8完全征服手冊[M].北京:中國青年出版社，2006.

[2] 黃再賢.設計師談精彩網頁設計[M].北京:電子工業出版社，2004.