孫二華+申淑杰

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

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì) 布局

【中圖分類號(hào)】TP393.092

1.CSS布局技術(shù)概述

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

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

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

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

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

2.4混合布局。顧名思義就是集中各種布局方法組合起來(lái)使用，取各自之所長(zhǎng)?？梢韵胂螅鞣N布局都有它的優(yōu)缺點(diǎn)。就例如彈性布局來(lái)說(shuō)，它隨著元素的大小而相應(yīng)發(fā)生改變?？墒侨f(wàn)一它們將東西放得太大，頁(yè)面超出了瀏覽器窗口，那怎么辦？可能這時(shí)，你就想取回一部分的控制權(quán)，于是就有了混合性布局。可以用em（字體高）定義文本的尺寸、包含框、導(dǎo)航區(qū)和內(nèi)容塊的寬度。但是卻為max—width屬性設(shè)置一個(gè)百分比，限制它變得過(guò)大。而造成的布局混亂。組合流式布局與彈性布局。以em設(shè)置寬度，以百分比設(shè)置最大寬度。這就是一種典型的混合式布局。這樣的布局方式在極端情況下都能有較好的整體效果。所以。我們說(shuō)混合布局是結(jié)合各個(gè)布局的優(yōu)缺點(diǎn)及布局人員的需要而組合使用的一種良好的布局方式。

3.小結(jié)

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

而那些要追求100%的兼容性的設(shè)計(jì)師最好就考慮一下花點(diǎn)時(shí)間在流動(dòng)布局上。最大的挑戰(zhàn)不在于寬屏上的可能出現(xiàn)的過(guò)多留白，而是那一小撮小屏幕上的顯示效果。對(duì)于有大量用戶的網(wǎng)站來(lái)說(shuō)，百分比很小的用戶群，絕對(duì)數(shù)目也相當(dāng)可觀。就算不考慮這點(diǎn)，大網(wǎng)站也應(yīng)該有簡(jiǎn)潔干練的設(shè)計(jì)感，而這可以利用流動(dòng)布局高效率地實(shí)現(xiàn)。

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

參考文獻(xiàn)

[1] 胡波.網(wǎng)頁(yè)制作課程教學(xué)方法探討田.電腦知識(shí)與技術(shù)，2006（8）：222—227。

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