當(dāng)我們使用鉛筆和紙畫出第一個(gè)布局塊時(shí)，我們是在“容器”塊中設(shè)計(jì)外部的矩形。在打印設(shè)計(jì)中，“容器”塊本身就是一個(gè)類似商務(wù)名片或廣告牌的實(shí)體。

在網(wǎng)絡(luò)上，我們的“容器”就是瀏覽器的窗口。這種設(shè)計(jì)是應(yīng)該填滿瀏覽器的窗口，還是應(yīng)當(dāng)有設(shè)定的寬度？這個(gè)決定已經(jīng)困擾了網(wǎng)絡(luò)設(shè)計(jì)人員數(shù)百年--甚至可以說是數(shù)千年--當(dāng)使用表格和spacer.gif文件為我們的網(wǎng)頁(yè)內(nèi)容安排布局時(shí)，這個(gè)問題就在困擾我們了。好，也可能不是數(shù)千年以前，但這毫無疑問確實(shí)是一個(gè)存在了很久的問題。

固定寬度

如果使用960網(wǎng)格系統(tǒng)開始設(shè)計(jì)你的布局，你會(huì)有機(jī)會(huì)設(shè)計(jì)出一個(gè)固定寬度的布局。這些設(shè)計(jì)是使用a div包裝的，a div可以給出一種基于像素的寬度，而主體標(biāo)記的中心應(yīng)當(dāng)使用margin:0 auto;如果瀏覽器窗口的寬度超過960像素，將會(huì)看到一個(gè)水平滾動(dòng)條。固定寬度的布局很容易設(shè)計(jì)和維護(hù)--因?yàn)槟慊旧暇褪窃跇?gòu)建你在photoshop里設(shè)計(jì)的東西。

流動(dòng)寬度

流動(dòng)的布局是使用基于百分百的寬度設(shè)計(jì)的，這樣“容器”就會(huì)在你改變?yōu)g覽器窗口的尺寸時(shí)伸縮。在規(guī)劃這些時(shí)需要考慮更多問題，因?yàn)槟阋A(yù)見到每一個(gè)可能的寬度上可能出現(xiàn)的問題。有時(shí)像素--寬度攔與基于百分比的欄會(huì)在流動(dòng)布局中混合起來，但是這種思想會(huì)讓用戶看到在屏幕上充斥著大量水平展現(xiàn)的內(nèi)容。通常來說，流動(dòng)寬度利用了CSS的中間寬度和最大寬度的特性，這可以確保“容器”不會(huì)變得極窄或極寬。

一些設(shè)計(jì)人員拒絕流動(dòng)寬度布局的一個(gè)原因點(diǎn)：認(rèn)為這種布局會(huì)迫使他們使用網(wǎng)格創(chuàng)建其設(shè)計(jì)。網(wǎng)上有一些可以用于在網(wǎng)格上設(shè)計(jì)流動(dòng)寬度的布局的資源，包括960網(wǎng)格系統(tǒng)的流動(dòng)寬度適配器。盡管最終應(yīng)用在一種類型的布局上是用另一種類型的布局決定真的可以由網(wǎng)站的目標(biāo)受眾及每個(gè)網(wǎng)站的可訪問性的目標(biāo)確定。

本文由沈陽(yáng)網(wǎng)站設(shè)計(jì)公司－沈陽(yáng)易勢(shì)科技提供，如需轉(zhuǎn)載請(qǐng)注明出處。

沈陽(yáng)易勢(shì)科技擁有專業(yè)設(shè)計(jì)團(tuán)隊(duì)為企業(yè)提供網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)平臺(tái)開發(fā)服務(wù)。