評價css在網頁設計中的幾種布局方式

孫二華+申淑杰

摘要：在網頁設計中，該使用固定、流動、彈性，還是混合布局呢？這個問題困擾網頁設計師們很久。它們各有優缺點，最終的決定取決于網站的可用性，單用某一種布局就想達到目的，可能沒那么容易。本文將討論每個布局類型的優點和缺點。只要牢記可用性，無論適用哪種布局類型都可以做出成功的站點。

關鍵詞：網頁設計 布局

【中圖分類號】TP393.092

1.CSS布局技術概述

CSS是Cascading Style Sheet的縮寫，一般稱為層疊樣式表，是用于（增強）控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。CSS的作用通俗的講就是布置網頁的樣式，讓網頁“穿上漂亮衣服”，CSS可以控制HTML標簽對象的CSS 寬度、CSS高度、float浮動、文字大小、字體、css背景等樣式達到我們想要的布局效果。我們說什么是最完美的頁面布局方式？這是一個已經困擾了設計者很多年的問題。CSS的主要功能被很多人誤以為就是那些特殊效果的實現。實際上，它的真正核心應該在于強大的頁面布局能力，而并不是實現整個網站排版的一致性或細節上。也只有當網頁布局和網頁內容完美接合時，才能帶給用戶最好的體驗。

2.基于CSS布局的幾種方式

2.1 固定寬度布局 （Fixed Layout），指最外面的包裹層（Wrapper）使用固定寬度，其內部的各個部分均使用百分比或者是固定的寬度來表示。其關鍵是，外面的包裹層（或稱為容器）的寬度是固定不變的，所以不論訪問者的瀏覽器是怎樣的分辨率。他們所看到的網頁效果都是完全相同的。固定寬度布局是層疊樣式表中最早應用的布局效果之一。有一個必須要解決的問題是所設計的頁面寬度到底為多少才合適？這涉及到關于現今用戶使用瀏覽器的分辨率大小的問題。目前，大多數用戶已經使用了1024*768或更高分辨率的顯示器，所以通常可以選擇960像素作為固定寬度布局的寬度，這個寬度可以避免水平滾動條的出現。因此960像素成為了網頁設計的最佳寬度，這個寬度可以避免水平滾動條的出現。它能夠非常好地展現網頁的內容。960的網格系統已經成為了固定寬度布局的行業標準了。固定寬度布局的優點非常明顯，由于整個布局和布局中的每塊都有預設的寬度。設計人員能夠根據窗口的寬度和屏幕狀況，進行一些精確度量的內部元素的設計。如標語、圖像、以及精確定位的文本等，這種方法非常的適用，而且容易使用。在設計方面方便定制。但是它相對于使用高分辨率的用戶來說，固定寬度布局會留下很大的空白。而屏幕分辨率過小時則會出現默認的滾動條。固定寬度布局的缺點是沒有充分利用用戶的全部瀏覽區域。（當然，屏幕的分辨率不一定和瀏覽器的分辨率相同，因為很多屏幕不會最大化瀏覽器窗口。）例如，如果用戶有一個很大的寬屏顯示器，分辨率為1900*1200，瀏覽器的分辨率為1500像素，這時瀏覽一個750像素寬的固定布局，空白的區域會很大。

2.2流式布局流式布局（Fluid Layout），又叫自適應布局，自適應布局的網頁會根據瀏覽器窗口的大小相應的調整自己的寬度。容器中的主體部分的寬度以當前瀏覽器窗口寬度為基準，按照一定的百分比進行定義。當瀏覽器尺寸發生變化，布局也發生變化。這類布局中，元素的寬度是以父元素的百分比設置的。因此需要設計師對布局的結構有深刻的理解，雖然設計過程痛苦，但成功的設計會讓網站更加靈活的面對不同的終端用戶。在視覺上也能更加美觀。合適的技巧會使頁面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈現效果。所以有人說，這種布局可以讓人隨心所欲的控制自己的網站。當然這種布局也是存在缺點的。如果在特別大的分辨率下，內容會被拉成長長的一行，而當瀏覽器窗口特別小的時候。行又會變得非常狹窄，逐行閱讀變得十分困難。還有就是圖像設計同標語元素設計上也會出現問題。因為在流布局中，圖片需要隨著它包含的元素一起伸縮以適應整體布局的擴大。

2.3彈性布局（Elastic Layout），指網頁寬度不固定，當你改變字體的大小，其他元素也會隨之發生變化。我們的布局以字體的大小來進行參照變化的。那么這時我們就用em（字體高）而不是用像素值或百分比來定義寬度。em直接表現了字體的大小，因此如果用em表示一個包含框的寬度，當你增加字體大小時，包含框的寬度也會隨之增加。這對于視力弱或有認知障礙的人尤其有用。彈性布局的效果是明顯的，也受到廣大設計師的歡迎。但它也是有局限性的。如果不對這種布局設置一個最小寬度，當用戶縮小窗口到足夠小時，會對布局產生的影響是致命的，造成布局嚴重錯位。當然圖片的隨比例縮放問題，也是一個有待解決的問題。

2.4混合布局。顧名思義就是集中各種布局方法組合起來使用，取各自之所長。可以想象，各種布局都有它的優缺點。就例如彈性布局來說，它隨著元素的大小而相應發生改變。可是萬一它們將東西放得太大，頁面超出了瀏覽器窗口，那怎么辦？可能這時，你就想取回一部分的控制權，于是就有了混合性布局。可以用em（字體高）定義文本的尺寸、包含框、導航區和內容塊的寬度。但是卻為max—width屬性設置一個百分比，限制它變得過大。而造成的布局混亂。組合流式布局與彈性布局。以em設置寬度，以百分比設置最大寬度。這就是一種典型的混合式布局。這樣的布局方式在極端情況下都能有較好的整體效果。所以。我們說混合布局是結合各個布局的優缺點及布局人員的需要而組合使用的一種良好的布局方式。

3.小結

選擇何種布局應該由網站的性質決定，權衡上述利弊，根據你的網站需求找到合適的解決方案，提高網站的競爭力。以作品集網站為例，這種網站采用固定寬度布局最為適用，可以做出更有設計感的東西。不僅能更好地控制設計中的單個元素，作品的圖像展示也變得更易處理。對很多設計師來說，固定布局就是一個既容易相處，又能給人安全感的好朋友。

而那些要追求100%的兼容性的設計師最好就考慮一下花點時間在流動布局上。最大的挑戰不在于寬屏上的可能出現的過多留白，而是那一小撮小屏幕上的顯示效果。對于有大量用戶的網站來說，百分比很小的用戶群，絕對數目也相當可觀。就算不考慮這點，大網站也應該有簡潔干練的設計感，而這可以利用流動布局高效率地實現。

還是做不了決定？別擔心，還有彈性或部分彈性的布局設計可供選擇。如果運用得當，彈性布局能完全整合兩大主要布局的優點。聰明的設計師懂得如何利用彈性設計的原則，在字體和容器大小上使用em單位，然后混合運用百分比和像素寬度來設定其他布局元素。

參考文獻

[1] 胡波.網頁制作課程教學方法探討田.電腦知識與技術，2006（8）：222—227。

[2] 聶小燕.美工神話CSS網站布局與美化[M].北京：人民郵電出版社，2007（8）。endprint