|
防彈衣并不能100%保證不受傷害，但穿了總是比不穿好,。這樣的規(guī)則同樣適用于Web設(shè)計(jì),。
通過增加網(wǎng)頁的靈活性,以及采用必要的步驟來保證它在盡可能多的場(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ù)厥褂盟鼈?，將給網(wǎng)頁設(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è)頁頭橫跨頂部,、兩列內(nèi)容以及一個(gè)橫跨底部的頁腳,。  常會(huì)看到與此類似的一種兩列的布局結(jié)構(gòu) 以前,，我們似乎很自然地會(huì)使用表格來構(gòu)建這種結(jié)構(gòu)，用colspan這個(gè)特性使頁頭和頁腳橫跨于內(nèi)容列的上方與下方,。大致的 HTML代碼如下所示：
但大多數(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)和頁面的樣式能夠更加變化靈活,，會(huì)添加很多HTML代碼,。 為了達(dá)到流動(dòng)可變性，可將表單元格的寬度設(shè)成百分比形式,，這使得布局可以完全擴(kuò)展而不需要考慮瀏覽器窗口的大小,。
整個(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)頁,。而使用屏幕閱讀軟件,、文本瀏覽器或在移動(dòng)設(shè)備上閱讀軟件時(shí)，就可能遇到困難,。 1. 大量的代碼 內(nèi)容與外觀的纏結(jié)還意味著代碼量的增大,。使用嵌套表格來構(gòu)造布局，所需要的代碼量有時(shí)候是相當(dāng)驚人的,。許多額外的表單元格被用來構(gòu)造欄間空白,、邊框 和其他頁面視覺效果。如果使用 CSS,，HTML 代碼就能夠減少到只保留它最本質(zhì)的部分,，對(duì)外觀的設(shè)定可以移到樣式表中。這樣,，網(wǎng)頁在非傳統(tǒng)瀏覽設(shè)備和 瀏覽軟件中的可讀性就立刻提高了,，對(duì)搜索引擎也更加友好(這是一個(gè)額外的、免費(fèi)的好處),。 2. 噩夢(mèng)般的維護(hù)工作 因?yàn)榇罅康那短妆砀裨斐杉m纏在一起的大量代碼,，這只能增加維護(hù)的工作量。對(duì)于基于表格布局的網(wǎng)頁,，要改造它們的外觀,，需要花費(fèi)更大的力氣——檢查大量的單元格和額外的 H T M L 代碼。在這樣的情形下,，修改的工作量會(huì)大得令人發(fā)狂,，還不如推倒重來。 3. 并非最佳的內(nèi)容順序 使用基于表格的布局還存在一個(gè)缺點(diǎn),，即文本瀏覽器和屏幕閱讀器上所呈現(xiàn)出來的內(nèi)容有順序問題,。例如，有一個(gè)三列的布局,，我們知道,，HTML 中的順序總是左列、中間列，然后右列,。這是操作的表格方式,。  基于表格的內(nèi)容通常的順序是左列,、中間列、右列 在那些基于文本的瀏覽器或屏幕閱讀器中,，通常只能按上面的這種順序?qū)?nèi)容進(jìn)行解析,。但最主要的內(nèi)容往往并不放在左列，而是放在中間列,，這樣,，它很有 可能被埋沒在頁面代碼中。使用表格構(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)布局的必要步驟及其原理?，F(xiàn)在讓我們從最簡(jiǎn)單的兩欄布局(具有頁頭和頁腳) 開始創(chuàng)建,。 1. HTML 代碼結(jié)構(gòu) 我們不再使用表格單元格來構(gòu)造頁面的列結(jié)構(gòu)，而使用簡(jiǎn)單的<div>和其他HTML 5語 義元素將內(nèi)容劃分成塊,。還要時(shí)刻記住,，要使內(nèi)容有最佳的排列順序。 一個(gè)最基本的簡(jiǎn)單兩欄布局可以用如下 HTML 代碼編寫：
代碼結(jié)構(gòu)就應(yīng)該這樣,，很難再簡(jiǎn)化了,。這種排序方式最為合理：頁頭、內(nèi)容,、側(cè)欄和頁腳,。這是考慮了在沒有CSS的情況下頁面的布局。就這一點(diǎn)來說,，到目前為止,，一切都還不錯(cuò)。 我在整個(gè)布局之外增加了一個(gè)<div>容器,。<div>通?？梢栽诟鞣N目的的設(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)是,，不能使頁腳準(zhǔn)確地定位于所有欄的下方,。 在構(gòu)建多列布局時(shí)，方法的不靈活導(dǎo)致CSS設(shè)計(jì)者通常使用 ? oat 屬性,。因?yàn)楦?dòng)元素是可以被清除的,，所以它是我們用來控制分欄布局的最好工 具。CSS 3提供了創(chuàng)建模塊化布局的新語法,，但是這些語法還沒有得到瀏覽器的廣泛支持,。而沒有這些支持，是無法完成布局設(shè)計(jì)這類比較關(guān)鍵的任務(wù)的,。因此 我們?nèi)匀谎赜?oat屬性,。 3．應(yīng)用樣式 選擇用浮動(dòng)作為創(chuàng)建欄的方法之后，我們?cè)儆冒俜直葘⒕W(wǎng)頁分為內(nèi)容欄和側(cè)邊欄兩部分,。在本例中,，比例為 7:3(70% 內(nèi)容欄，30% 側(cè)邊欄)。 第一步,，要給頁頭,、側(cè)邊欄和頁腳加上背景色，以便區(qū)分我們所要處理的這幾個(gè)部分,。
然后做兩件事,。首先，設(shè)置內(nèi)容欄的寬度為 70%,，側(cè)邊欄的寬度為 30%,。然后，使內(nèi)容欄浮動(dòng)在左邊,，側(cè)邊欄浮動(dòng)在右邊,。這使得兩個(gè)欄的位置相對(duì)。
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%。
通過上面的設(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)來控制頁面布局,。 例如,，我們給側(cè)邊欄的內(nèi)邊距增加20個(gè)像素，使其顯得更寬松一些,。
在寬度固定的布局中,，可以很容易地將列兩邊定義的寬度各減去20像素的內(nèi)邊距。但在流動(dòng)寬度布局中,，是使用百分比來定義寬度的,，根本無法設(shè)定一個(gè)30%的寬度減去40像素的寬度。這會(huì)使側(cè)邊欄的寬度變得大于30%,，無法再與內(nèi)容欄<div>并列,，會(huì)被迫擠到 內(nèi)容欄下邊去。這可不是我們所希望的效果,。 那么在這種情況下會(huì)有哪些解決方案可供選擇呢,？
6．設(shè)置寬度的最大值和最小值 構(gòu)建流動(dòng)布局時(shí),，設(shè)計(jì)者常常要面對(duì)的一個(gè)障礙就是行的長(zhǎng)度,。能夠隨心所欲地伸展布局，對(duì)用戶而言非常有益,。但到了一定程度時(shí),，行的長(zhǎng)度可能長(zhǎng)到使內(nèi)容難以閱讀，也可能窄到破壞頁面上其他部分的外觀,。 在這里,，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ò)覺讓人以為兩欄一樣高,。這種方法可以使背景色,、樣式和邊框都位于布局的后邊，并一直延伸到頁面底部,。然而,，這種技術(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)頁設(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)：
至此已經(jīng)介紹了創(chuàng)建一個(gè)靈活,、流動(dòng),、基于CSS的布局的基礎(chǔ)知識(shí)，接下來將把這本書中迄今討論過的方方面面綜合起來,，從而構(gòu)建一個(gè)完整的,、單頁的無懈可擊的設(shè)計(jì)方案,。
本文節(jié)選自《無懈可擊的web設(shè)計(jì)——使用HTML5和CSS提高網(wǎng)站的靈活性與適應(yīng)性》一書,，Dan Cederholm著，馬躍譯,，由清華大學(xué)出版社出版,。 |
|
|
