網(wǎng)頁設(shè)計CSS布局方式比對范文

本站小編為你精心準(zhǔn)備了網(wǎng)頁設(shè)計CSS布局方式比對參考范文，愿這些范文能點燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

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

CSS（CascadingStyleSheet）中文譯為層疊樣式表。它是一門經(jīng)過標(biāo)準(zhǔn)化的WEB標(biāo)準(zhǔn)。最早是在1996年由W3C組織審核通過并推薦使用。針對于網(wǎng)頁設(shè)計越來越趨向整體結(jié)構(gòu)化，web標(biāo)準(zhǔn)也將網(wǎng)頁拆分成了三個相對獨立的部分：結(jié)構(gòu)層（structure）,表現(xiàn)層（presentation）及行為層（behavior）。在基于標(biāo)準(zhǔn)的WEB開發(fā)中，css的作用就是負(fù)責(zé)控制網(wǎng)頁的表現(xiàn)層。如果我們把HTML比做是人的身體的話，CSS代碼我們就可以看成是穿在人身上的衣服。我們說什么是最完美的頁面布局方式？這是一個已經(jīng)困擾了設(shè)計者很多年的問題。CSS的主要功能被很多人誤以為就是那些特殊效果的實現(xiàn)。實際上，它的真正核心應(yīng)該在于強大的頁面布局能力，而并不是實現(xiàn)整個網(wǎng)站排版的一致性或細(xì)節(jié)上。也只有當(dāng)網(wǎng)頁布局和網(wǎng)頁內(nèi)容完美接合時，才能帶給用戶最好的體驗。

2基于CSS布局的幾種方式

盒模型、流動、浮動、定位這四個概念，是最基礎(chǔ)也是最重要的。各種布局技巧的應(yīng)用都來源于此。選擇怎樣的布局方式主要取決于站點自身的類型和發(fā)展。在做決定之前權(quán)衡好它們的兩面性，找出適合站點的方案。下面，我們就現(xiàn)今網(wǎng)頁設(shè)計過程中較常用到的幾種網(wǎng)頁布局模式做個比較。

2.1固定寬度布局

固定布局(FixedLayout)，指最外面的包裹層(Wrapper)使用固定寬度，其內(nèi)部的各個部分均使用百分比或者是固定的寬度來表示。其關(guān)鍵是，外面的包裹層(或稱為容器)的寬度是固定不變的，所以不論訪問者的瀏覽器是怎樣的分辨率，他們所看到的網(wǎng)頁效果都是完全相同的。固定寬度布局是層疊樣式表中最早應(yīng)用的布局效果之一。有一個必須要解決的問題是所設(shè)計的頁面寬度到底為多少才合適？這涉及到關(guān)于現(xiàn)今用戶使用瀏覽器的分辨率大小的問題，據(jù)權(quán)威組織統(tǒng)計，使用640×480像素的用戶占3%，使用800×600像素的用戶占4%，使用1024×768像素的用戶占36%，而更高像素的用戶占到57%。與此同時，我們了解到五大知名網(wǎng)站，網(wǎng)頁設(shè)計時考慮用戶的默認(rèn)分辨率從800×600的主流設(shè)計三年內(nèi)完全轉(zhuǎn)化為1024×768。由此可知，現(xiàn)在主流用戶的屏幕分辨率應(yīng)該是1024×768或者更高。因此960像素成為了網(wǎng)頁設(shè)計的最佳寬度。它能夠非常好地展現(xiàn)網(wǎng)頁的內(nèi)容。960的網(wǎng)格系統(tǒng)已經(jīng)成為了固定寬度布局的行業(yè)標(biāo)準(zhǔn)了。固定寬度布局的優(yōu)點非常明顯，由于整個布局和布局中的每塊都有預(yù)設(shè)的寬度。設(shè)計人員能夠根據(jù)窗口的寬度和屏幕狀況，進(jìn)行一些精確度量的內(nèi)部元素的設(shè)計。如標(biāo)語、圖像、以及精確定位的文本等，這種方法非常的適用，而且容易使用。在設(shè)計方面方便定制。但是它相對于使用高分辨率的用戶來說，固定寬度布局會留下很大的空白。而屏幕分辨率過小時則會出現(xiàn)默認(rèn)的滾動條。

2.2流式布局

流式布局(FluidLayout)，使用百分比來設(shè)置各個部分的具體寬度，以用來適應(yīng)不同的分辨率。流式布局的意思是從左到右從上到下來進(jìn)行自適應(yīng)。當(dāng)一行不能容納下內(nèi)容時則會自動換行。正如它的名字一樣，這種布局具有彈性，可以自動填充需要填充的部分。流布式局頁面相對于用戶來說更為友好，因為它能夠自適應(yīng)用戶的設(shè)置。在視覺上也能更加美觀。合適的技巧會使頁面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈現(xiàn)效果。所以有人說，這種布局可以讓人隨心所欲的控制自己的網(wǎng)站。當(dāng)然這種布局也是存在缺點的。如果在特別大的分辨率下，內(nèi)容會被拉成長長的一行，而當(dāng)瀏覽器窗口特別小的時候，行又會變得非常狹窄，逐行閱讀變得十分困難。還有就是圖像設(shè)計同標(biāo)語元素設(shè)計上也會出現(xiàn)問題。因為在流布局中，圖片需要隨著它包含的元素一起伸縮以適應(yīng)整體布局的擴大。

2.3彈性布局

我們了解了在流式布局下，如果用戶瀏覽器窗口變寬，網(wǎng)頁內(nèi)容會變得很難閱讀。如果我們想要能夠隨著網(wǎng)頁元素大小的變化而變化的頁面布局。如字體變小，欄長度及頁面寬度都會相應(yīng)減少，反之亦然。彈性布局，就能夠?qū)崿F(xiàn)。彈性布局如果用固定寬度布局轉(zhuǎn)換也非常簡單，只需要對度量單位進(jìn)行修改即可。彈性布局（ElasticLayout），指網(wǎng)頁寬度不固定，當(dāng)你改變字體的大小，其他元素也會隨之發(fā)生變化。我們的布局以字體的大小來進(jìn)行參照變化的。那么這時我們就用em（字體高）而不是用像素值或百分比來定義寬度。em直接表現(xiàn)了字體的大小，因此如果用em表示一個包含框的寬度，當(dāng)你增加字體大小時，包含框的寬度也會隨之增加。這對于視力弱或有認(rèn)知障礙的人尤其有用。彈性布局的效果是明顯的，也受到廣大設(shè)計師的歡迎。但它也是有局限性的。如果不對這種布局設(shè)置一個最小寬度，當(dāng)用戶縮小窗口到足夠小時，會對布局產(chǎn)生的影響是致命的，造成布局嚴(yán)重錯位。當(dāng)然圖片的隨比例縮放問題，也是一個有待解決的問題。

2.4可變固定寬度布局

可變固定寬度布局（VaribleFixedWidthLayout又叫做分辨率布局方式）指在CSS代碼中設(shè)計好關(guān)于各種瀏覽器類型所需要的不同尺寸，實現(xiàn)根據(jù)瀏覽器類型自動調(diào)用不同的CSS布局。這種布局方法的思想是布局能夠自動變化以提供最適合用戶窗口大小的布局效果。例如如果瀏覽器窗口足夠大，那么布局可能包括產(chǎn)生3個固定寬度的列，如果窗口寬度小于某個特定寬度時，那么某一列將無縫地放在另一列下面，從而產(chǎn)生一個兩列的布局。運用該布局最可靠的方法就是通過用javascript來自動評估窗口寬度，從而改變網(wǎng)頁上所運用的CSS規(guī)則。這里指的寬度，是你正在瀏覽的窗口的寬度。使用這種技術(shù)，你可以將頁面的某一個視圖，作為默認(rèn)頁面，但是對于正在用大窗口訪問你的站點的用戶來說，你的頁面會相應(yīng)的放大至整個窗口。這種布局與流動式布局不同。流動式布局是當(dāng)你移動瀏覽器時，它的尺寸在不斷的重新設(shè)置，而這種布局一旦達(dá)到了一個“觸發(fā)”點，布局才會改變并進(jìn)而影響到內(nèi)容。缺點是可能會導(dǎo)致一些跨平臺的問題出現(xiàn)。

2.5混合布局

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

3小結(jié)

綜上所述，層疊樣式表運用在網(wǎng)頁布局上的方式多種多樣，而我們評價哪種布局方式好的最終目標(biāo)不是針對它的各種優(yōu)缺點，而是從三個相關(guān)方面來進(jìn)行探討：可讀性、適應(yīng)性（方便性）及未來的可維護(hù)性。對于網(wǎng)頁設(shè)計人員來說，選擇布局方式同時來源于你網(wǎng)站客戶端的需求。只有充分考慮協(xié)調(diào)好以上各方面，才能實現(xiàn)網(wǎng)站價值的最大化，并且提高網(wǎng)站的競爭力。