91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

防彈衣并不能100%保證不受傷害，但穿了總是比不穿好。這樣的規(guī)則同樣適用于Web設(shè)計(jì)。通過增加網(wǎng)頁(yè)的靈活性,以及采用必要的步驟來保證它在盡可能多的場(chǎng)景中都具備可讀性，我們就給自己的作品賦予了一些與眾不同的特色。這是一個(gè)循序漸進(jìn)的過程，并且當(dāng)采用HTML和CSS后，將能夠更加容易構(gòu)建出賞心悅目并且具有良好適應(yīng)能力的設(shè)計(jì)方案。

如何創(chuàng)建流動(dòng)布局和彈性布局，為我們無懈可擊的設(shè)計(jì)方案增添一個(gè)工具。掌握如何恰當(dāng)?shù)厥褂盟鼈儯瑢⒔o網(wǎng)頁(yè)設(shè)計(jì)增加更多的靈活性。流動(dòng)布局并不是只能由CSS實(shí)現(xiàn)的，它也可以通過表格來實(shí)現(xiàn)。文中您將會(huì)發(fā)現(xiàn)，把布局的細(xì)節(jié)放在樣式表中實(shí)現(xiàn)，還有許多其他好處。彈性布局中的列使用em作為長(zhǎng)度單位，基于em的布局會(huì)隨著字體大小的變化而放大或縮小。

為什么這樣設(shè)計(jì)不是無懈可擊的？

一、常見的方法

多列布局并不是只能由CSS實(shí)現(xiàn)，也可以使用表格同樣實(shí)現(xiàn)能夠根據(jù)瀏覽器窗口的大小而自由縮放的(流動(dòng))布局。以前，設(shè)計(jì)者會(huì)考慮到使用列來實(shí)現(xiàn)，每一列都由一系列表格單元格來構(gòu)造。圖中顯示了一個(gè)常用的布局結(jié)構(gòu)，有一個(gè)頁(yè)頭橫跨頂部、兩列內(nèi)容以及一個(gè)橫跨底部的頁(yè)腳。

以前，我們似乎很自然地會(huì)使用表格來構(gòu)建這種結(jié)構(gòu)，用colspan這個(gè)特性使頁(yè)頭和頁(yè)腳橫跨于內(nèi)容列的上方與下方。大致的 HTML代碼如下所示：

<table>

<tr>

<td colspan=”2″>header</td>

</tr>

<tr>

<td>content</td>

<td>sidebar</td>

</tr>

<tr>

<td colspan=”2″>footer</td>

</tr>

</table>

但大多數(shù)的設(shè)計(jì)者和開發(fā)者不會(huì)就此罷休。構(gòu)造好了基礎(chǔ)結(jié)構(gòu)以后，會(huì)在這個(gè)結(jié)構(gòu)中的每一個(gè)單元格中再嵌入表格，為布局創(chuàng)建邊界和像素級(jí)別精度的間距。最終，為了使構(gòu)造的結(jié)構(gòu)和頁(yè)面的樣式能夠更加變化靈活，會(huì)添加很多HTML代碼。

為了達(dá)到流動(dòng)可變性，可將表單元格的寬度設(shè)成百分比形式，這使得布局可以完全擴(kuò)展而不需要考慮瀏覽器窗口的大小。

<table width=”100%”>

<tr>

<td colspan=”2″>header</td>

</tr>

<tr>

<td width=”70%”>content</td>

<td width=”30%”>sidebar</td>

</tr>

<tr>

<td colspan=”2″>footer</td>

</tr>

</table>

整個(gè)表格被設(shè)置成100%的寬度，列可以根據(jù)任意需要的寬度進(jìn)行拆分。如圖所示：左邊是一個(gè)寬一些的內(nèi)容欄，右邊是一個(gè)窄一些的側(cè)邊欄。當(dāng)瀏覽器窗口擴(kuò)展或收縮而使布局的大小發(fā)生變化時(shí)，各列寬度的比例將保持不變。

這表明了表格能夠用來構(gòu)造布局，同時(shí)也表明了表格能夠用來構(gòu)造隨瀏覽器窗口變化的流動(dòng)布局。然而，還可以采用其他更完美的辦法做到這一點(diǎn)。

二、值得思考的問題：為什么這樣設(shè)計(jì)不是無懈可擊的？

表格布局最主要的問題之一，就是表示內(nèi)容與外觀的 HTML 代碼混在一起了。換句話說，邊框、空白GIF和圖片所用的代碼都嵌入在表示重要內(nèi)容的代碼中。這意味著只典型的桌面瀏覽器才能夠順利地閱讀這樣的網(wǎng)頁(yè)。而使用屏幕閱讀軟件、文本瀏覽器或在移動(dòng)設(shè)備上閱讀軟件時(shí)，就可能遇到困難。

1.　大量的代碼

內(nèi)容與外觀的纏結(jié)還意味著代碼量的增大。使用嵌套表格來構(gòu)造布局，所需要的代碼量有時(shí)候是相當(dāng)驚人的。許多額外的表單元格被用來構(gòu)造欄間空白、邊框和其他頁(yè)面視覺效果。如果使用 CSS，HTML 代碼就能夠減少到只保留它最本質(zhì)的部分，對(duì)外觀的設(shè)定可以移到樣式表中。這樣，網(wǎng)頁(yè)在非傳統(tǒng)瀏覽設(shè)備和瀏覽軟件中的可讀性就立刻提高了，對(duì)搜索引擎也更加友好(這是一個(gè)額外的、免費(fèi)的好處)。

2.　噩夢(mèng)般的維護(hù)工作

因?yàn)榇罅康那短妆砀裨斐杉m纏在一起的大量代碼，這只能增加維護(hù)的工作量。對(duì)于基于表格布局的網(wǎng)頁(yè)，要改造它們的外觀，需要花費(fèi)更大的力氣——檢查大量的單元格和額外的 H T M L 代碼。在這樣的情形下，修改的工作量會(huì)大得令人發(fā)狂，還不如推倒重來。

3.　并非最佳的內(nèi)容順序

使用基于表格的布局還存在一個(gè)缺點(diǎn)，即文本瀏覽器和屏幕閱讀器上所呈現(xiàn)出來的內(nèi)容有順序問題。例如，有一個(gè)三列的布局，我們知道，HTML 中的順序總是左列、中間列，然后右列。這是操作的表格方式。

在那些基于文本的瀏覽器或屏幕閱讀器中，通常只能按上面的這種順序?qū)?nèi)容進(jìn)行解析。但最主要的內(nèi)容往往并不放在左列，而是放在中間列，這樣，它很有可能被埋沒在頁(yè)面代碼中。使用表格構(gòu)造布局時(shí)，想要安排重要的內(nèi)容在其他瀏覽器或軟件中先被讀到是不可能實(shí)現(xiàn)的。對(duì)于所有瀏覽設(shè)備都只有一種順序，迫使用戶在使用文本和屏幕閱讀器時(shí)，想要得到重要內(nèi)容之前，就要先艱難地穿過那些無關(guān)緊要的代碼。

幸運(yùn)的是，基于CSS的布局允許對(duì)內(nèi)容順序進(jìn)行重排，這樣，可以使用 HTML ，采用最優(yōu)化的順序來編寫文件的源代碼，而以其他的樣式進(jìn)行呈現(xiàn)。而且，所需的代碼量大大地減少了，還將內(nèi)容從表示層分離出來。那么，下面讓我們開始使用CSS來構(gòu)建流動(dòng)的多列布局吧！

為什么這樣設(shè)計(jì)是無懈可擊的？

一、無懈可擊的方法：

雖然在本文的無懈可擊例子中重點(diǎn)介紹的是如何創(chuàng)建靈活可變的布局，但還是應(yīng)該注意到，固定寬度的基于CSS的布局也具有無寬度限制的布局的很多優(yōu)點(diǎn)。它們的主要區(qū)別是，可變的布局能夠隨著瀏覽器窗口的大小而伸縮，能夠給用戶更多的掌控能力。當(dāng)屏幕尺寸可能存在明顯差別(例如移動(dòng)設(shè)備)時(shí)，這種方法的效果更好。

我們將介紹利用CSS創(chuàng)建流動(dòng)布局的必要步驟及其原理。現(xiàn)在讓我們從最簡(jiǎn)單的兩欄布局(具有頁(yè)頭和頁(yè)腳) 開始創(chuàng)建。

1. HTML 代碼結(jié)構(gòu)

我們不再使用表格單元格來構(gòu)造頁(yè)面的列結(jié)構(gòu)，而使用簡(jiǎn)單的<div>和其他HTML 5語

義元素將內(nèi)容劃分成塊。還要時(shí)刻記住，要使內(nèi)容有最佳的排列順序。

一個(gè)最基本的簡(jiǎn)單兩欄布局可以用如下 HTML 代碼編寫：

<div id=”wrap”>

<header role=”banner”>

<h1>Header Goes Here</h1>

</header>

<div id=”content” role=”main”>

… content goes here …

</div>

<div id=”sidebar” role=”complementary”>

… sidebar goes here …

</div>

<footer role=”contentinfo”>

… footer goes here …

</footer>

</div> <!– end #wrap –>

代碼結(jié)構(gòu)就應(yīng)該這樣，很難再簡(jiǎn)化了。這種排序方式最為合理：頁(yè)頭、內(nèi)容、側(cè)欄和頁(yè)腳。這是考慮了在沒有CSS的情況下頁(yè)面的布局。就這一點(diǎn)來說，到目前為止，一切都還不錯(cuò)。

我在整個(gè)布局之外增加了一個(gè)<div>容器。<div>通常可以在各種目的的設(shè)計(jì)中派上用場(chǎng)。所以，每當(dāng)使用CSS來構(gòu)建布局時(shí)，都會(huì)從<div> 開始。

2．創(chuàng)建欄：浮動(dòng)與定位

用CSS創(chuàng)建欄的方法之一就是絕對(duì)定位(absolute positioning)，所謂絕對(duì)定位，就是使用屏幕上的X和Y坐標(biāo)將組件定位在特定的位置。但使用絕對(duì)定位最大的缺點(diǎn)是，不能使頁(yè)腳準(zhǔn)確地定位于所有欄的下方。

在構(gòu)建多列布局時(shí)，方法的不靈活導(dǎo)致CSS設(shè)計(jì)者通常使用 fl oat 屬性。因?yàn)楦?dòng)元素是可以被清除的，所以它是我們用來控制分欄布局的最好工具。CSS 3提供了創(chuàng)建模塊化布局的新語法，但是這些語法還沒有得到瀏覽器的廣泛支持。而沒有這些支持，是無法完成布局設(shè)計(jì)這類比較關(guān)鍵的任務(wù)的。因此我們?nèi)匀谎赜?#64258;oat屬性。

3．應(yīng)用樣式

選擇用浮動(dòng)作為創(chuàng)建欄的方法之后，我們?cè)儆冒俜直葘⒕W(wǎng)頁(yè)分為內(nèi)容欄和側(cè)邊欄兩部分。在本例中，比例為 7:3(70% 內(nèi)容欄，30% 側(cè)邊欄)。

第一步，要給頁(yè)頭、側(cè)邊欄和頁(yè)腳加上背景色，以便區(qū)分我們所要處理的這幾個(gè)部分。

header[role="banner"] {

background: #666;

}

#sidebar {

background: #999;

}

footer[role="contentinfo"] {

background: #DDD;

}

然后做兩件事。首先，設(shè)置內(nèi)容欄的寬度為 70%，側(cè)邊欄的寬度為 30%。然后，使內(nèi)容欄浮動(dòng)在左邊，側(cè)邊欄浮動(dòng)在右邊。這使得兩個(gè)欄的位置相對(duì)。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 70%;

}

#sidebar {

fl oat: right;

width: 30%;

background: #999;

}

footer[role="contentinfo"] {

background: #DDD;

}

4．Gutter

“gutter”這個(gè)術(shù)語已經(jīng)沿用了很多年了，指文本欄之間的間距。在處理流動(dòng)布局的欄寬時(shí)，gutter 的設(shè)置就會(huì)變得非常困難。在一個(gè)固定欄寬的設(shè)計(jì)中，我們可將預(yù)計(jì)的寬度設(shè)置成像素大小，這樣就可以很容易地連同欄寬一并考慮 gutter的寬度。

但對(duì)于流動(dòng)的欄寬，我們有兩種選擇：將gutter寬度設(shè)成百分比的形式，欄寬也如此；或者，添加一個(gè)額外的<div>元素來設(shè)定和欄寬分離的外邊距和內(nèi)邊距。后一種方法從 HTML 代碼的角度來看不是最佳的，但它確實(shí)提高了控制水平，這在復(fù)雜的設(shè)計(jì)中是必不可少的。稍后將再次討論這個(gè)問題。

為內(nèi)容欄與側(cè)邊欄之間的gutter設(shè)置百分比寬度，一種方法就是給內(nèi)容欄指定一個(gè)右外邊距，然后從內(nèi)容欄的寬度里減去它的值。當(dāng)然百分比值的總和應(yīng)該是100%。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 65%;

margin-right: 5%;

}

#sidebar {

fl oat: right;

width: 30%;

background: #999;

}

footer[role="contentinfo"] {

clear: both;

background: #DDD;

}

通過上面的設(shè)置，我們把內(nèi)容欄的寬度減少了5%，同時(shí)給內(nèi)容欄的右外邊距增加了同樣的寬度來設(shè)置欄間的 gutter。顯示結(jié)果，在內(nèi)容欄和側(cè)邊欄之間多了一條白色的間隔。

要記住，當(dāng)給gutter賦百分比值時(shí)，欄間的間隔也會(huì)隨著窗口的寬度而改變。在窄的窗口中會(huì)更小，在寬的窗口中則會(huì)更大。對(duì)于某些設(shè)計(jì)需求，這或許是個(gè)問題。例如，往往要求欄的邊線或背景圖片在欄之間有一個(gè)固定的間隔。在這些情況下，給容器加上第二層<div>容器是最佳選擇了，這一點(diǎn)將在本章中繼續(xù)討論。但如果追求簡(jiǎn)單化，那么給外邊距指定一個(gè)百分比值是最簡(jiǎn)單的選擇。

5. 欄的內(nèi)邊距

如果欄的寬度設(shè)置使用百分比的方式，那么在指定其內(nèi)邊距時(shí)，也會(huì)出現(xiàn)相似的問題。這是內(nèi)邊距的計(jì)算方式造成的(在已聲明元素的寬度上為“增加”)。如果使用除百分比之外的值來設(shè)定欄的內(nèi)邊距，那么最后的總寬度很容易超過或小于預(yù)期的值。這會(huì)讓您輕易地放棄選擇用浮動(dòng)來控制頁(yè)面布局。

例如，我們給側(cè)邊欄的內(nèi)邊距增加20個(gè)像素，使其顯得更寬松一些。

header[role="banner"] {

background: #666;

}

#content {

fl oat: left;

width: 65%;

margin-right: 5%;

}

#sidebar {

fl oat: right;

width: 30%;

padding: 20px;

background: #999;

}

footer[role="contentinfo"] {

clear: both;

background: #DDD;

}

在寬度固定的布局中，可以很容易地將列兩邊定義的寬度各減去20像素的內(nèi)邊距。但在流動(dòng)寬度布局中，是使用百分比來定義寬度的，根本無法設(shè)定一個(gè)30%的寬度減去40像素的寬度。這會(huì)使側(cè)邊欄的寬度變得大于30%，無法再與內(nèi)容欄<div>并列，會(huì)被迫擠到

內(nèi)容欄下邊去。這可不是我們所希望的效果。

那么在這種情況下會(huì)有哪些解決方案可供選擇呢？

• 將內(nèi)邊距也設(shè)置為百分比，然后從列寬中減去它的值(就像前面我們?cè)黾右粋€(gè) 5%的列間 gutter 時(shí)所做的一樣)。
• 只在側(cè)邊欄內(nèi)部的元素中應(yīng)用內(nèi)邊距。
• 增加一個(gè)額外的<div> ，可以使用任意值來分別為它們的內(nèi)邊距賦值。
• 使用中新增的極為方便的box-sizing屬性，可以改變?yōu)g覽器計(jì)算方框尺寸的方式(例如，在對(duì)象內(nèi)部應(yīng)用內(nèi)邊距)。

6．設(shè)置寬度的最大值和最小值

構(gòu)建流動(dòng)布局時(shí)，設(shè)計(jì)者常常要面對(duì)的一個(gè)障礙就是行的長(zhǎng)度。能夠隨心所欲地伸展布局，對(duì)用戶而言非常有益。但到了一定程度時(shí)，行的長(zhǎng)度可能長(zhǎng)到使內(nèi)容難以閱讀，也可能窄到破壞頁(yè)面上其他部分的外觀。

在這里，CSS的max-width和min-width屬性就派上用場(chǎng)了。給流動(dòng)布局設(shè)置最大和最小寬度，可以防止欄被無限制地伸長(zhǎng)或收縮。很遺憾，IE6 不支持這種功能。但對(duì)支持這種功能的瀏覽器來說，它會(huì)帶來很大的提高，而且添加起來十分便捷。

7. 滑動(dòng)人造欄

如果您重新觀察這一整章中我們一直在用的兩欄布局，就會(huì)注意到，雖然我們給側(cè)邊欄設(shè)置了綠色的背景色，但這個(gè)背景只會(huì)往下擴(kuò)展到剛好滿足所需的位置。所以，根據(jù)欄中所容納的內(nèi)容，側(cè)欄的高度與內(nèi)容欄會(huì)有所不同。

通常，人們希望所看到的欄的外觀是等高的，而且定義了一致的背景和邊框。但使用流動(dòng)布局時(shí)，無法使一個(gè)欄的高與另一欄相一致。

使用這種技術(shù)，平鋪的圖片位于欄的后面，造成一種錯(cuò)覺讓人以為兩欄一樣高。這種方法可以使背景色、樣式和邊框都位于布局的后邊，并一直延伸到頁(yè)面底部。然而，這種技術(shù)只能應(yīng)用于寬度固定的布局，其中列寬預(yù)先確定好，然后被內(nèi)置到平鋪的圖片中。

Douglas Bowman(www.stopdesign.com/log/2004/09/03/liquid-bleach.html)和Eric Meyer(www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/)使這種思想更推進(jìn)了一步，他們提出了“Sliding Faux Columns(滑動(dòng)人造欄) ”方法，這樣，平鋪的圖片就可以在流動(dòng)布局的后面滑動(dòng)，既可以實(shí)現(xiàn)欄等高的效果，同時(shí)也保留了靈活性。

二、再次探討：為什么這樣設(shè)計(jì)是無懈可擊的？

第一個(gè)理由，代碼量更少。不必再用嵌套的表格在 HTML 代碼中實(shí)現(xiàn)邊框、背景和間隔，我們只要用幾個(gè)簡(jiǎn)單的<div>，而不必再用CSS為每欄設(shè)置位置與樣式，就可以輕松地構(gòu)造出一個(gè)多欄布局。即使在設(shè)計(jì)固定寬度的 gutter 和“滑動(dòng)人造欄”(Sliding Faux Columns)時(shí)添加了額外(然而是必需)的<div>，HTML代碼量還是遠(yuǎn)遠(yuǎn)少于使用嵌套表格時(shí)的情形。

第二，有了更易于維護(hù)的基本代碼。因?yàn)橥庥^的細(xì)節(jié)都在樣式表中定義，HTML代碼變得更容易閱讀，要更改布局的外觀，只需更新幾個(gè)樣式規(guī)則即可。使用CSS的float屬性，在多欄布局中，可以給內(nèi)容安排最佳的順序，最重要的內(nèi)容可以安排在 HTML 代碼的最前面。這給使用屏幕閱讀器、文本瀏覽器和不支持CSS的其他設(shè)備進(jìn)行瀏覽的用戶帶來了好處。

最后，當(dāng)實(shí)現(xiàn)了一個(gè)靈活的、流動(dòng)的布局時(shí)，就會(huì)賦予用戶一種控制能力。使他們能夠隨心所欲地?cái)U(kuò)展布局，也能在使用小屏幕時(shí)使窗口變窄。這種更高層次的控制能力，是證明設(shè)計(jì)方案無懈可擊的另外一種方式，使設(shè)計(jì)方案能適應(yīng)盡可能多的環(huán)境。

固定布局、流動(dòng)布局和彈性布局，哪種方法更好呢？在選擇采用何種布局時(shí)，需要記住最重要的一點(diǎn)是，每種方法都有它合適的位置。要通過試驗(yàn)來搞清楚它們是如何運(yùn)作的，以及在每個(gè)解決方案中它們的優(yōu)缺點(diǎn)

One point:選擇討論流動(dòng)布局和彈性布局，不是因?yàn)槲矣X得它們?cè)谌魏螘r(shí)候都優(yōu)于固定寬度的布局。更恰當(dāng)?shù)卣f，每種布局都有它自己適合的場(chǎng)合，這主要取決于設(shè)計(jì)需求，因?yàn)閷?duì)網(wǎng)頁(yè)設(shè)計(jì)者來說，設(shè)計(jì)需求并不總是能夠由自己作出決定的。

這就是說，如果您的設(shè)計(jì)方案中能加上流動(dòng)布局或者彈性布局，那么就請(qǐng)為用戶能從中獲益而感到高興吧。流動(dòng)邊距也為適應(yīng)性Web設(shè)計(jì)(Responsive Web Design，RWD)打下了基礎(chǔ)，適應(yīng)性Web設(shè)計(jì)是一種根據(jù)網(wǎng)格布局所在的瀏覽環(huán)境使它們進(jìn)一步調(diào)整并適應(yīng)環(huán)境的方法。

PS:小提示

當(dāng)構(gòu)建流動(dòng)布局時(shí)，應(yīng)當(dāng)記住以下幾點(diǎn)：

• 使用 fl oat 屬性來構(gòu)建多欄布局，可以清除掉浮動(dòng)對(duì)象對(duì)頁(yè)腳所產(chǎn)生的影響。
• 從列寬中減去 gutter 的百分比寬度值，或者增加一個(gè)額外的<div>在列寬以外單獨(dú)設(shè)置內(nèi)邊距的值。
• 使用CSS 3的box-sizing:border-box;，在基于百分比的元素聲明的寬度內(nèi)設(shè)置內(nèi)邊距和邊框。這種方法不需要使用額外的<div>來控制gutter，但是需要注意，并不是所有的瀏覽器都支持box-sizing。
• 為流動(dòng)布局設(shè)置min-width和max-width，防止布局尺寸過大或過小。不必在意IE6不支持這種功能。
• 嘗試用“滑動(dòng)人造欄”(Sliding Faux  Columns)的方法，通過使邊框和背景一直延伸到頁(yè)腳，來實(shí)現(xiàn)等高欄(但很靈活)。
• 基于em的布局能提供另外一種靈活性。要記住，當(dāng)把瀏覽器中的字體增大到某個(gè)值時(shí)，整個(gè)設(shè)計(jì)中的一部分就只能通過水平滾動(dòng)條才看到(除非對(duì)布局設(shè)定了max-width)。

至此已經(jīng)介紹了創(chuàng)建一個(gè)靈活、流動(dòng)、基于CSS的布局的基礎(chǔ)知識(shí)，接下來將把這本書中迄今討論過的方方面面綜合起來，從而構(gòu)建一個(gè)完整的、單頁(yè)的無懈可擊的設(shè)計(jì)方案。

 

本文節(jié)選自《無懈可擊的web設(shè)計(jì)——使用HTML5和CSS提高網(wǎng)站的靈活性與適應(yīng)性》一書，Dan Cederholm著，馬躍譯，由清華大學(xué)出版社出版。