打造無懈可擊的Web設計——流動布局和彈性布局
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
防彈衣并不能100%保證不受傷害，但穿了總是比不穿好。這樣的規則同樣適用于Web設計。通過增加網頁的靈活性,以及采用必要的步驟來保證它在盡可能多的場景中都具備可讀性，我們就給自己的作品賦予了一些與眾不同的特色。這是一個循序漸進的過程，并且當采用HTML和CSS后，將能夠更加容易構建出賞心悅目并且具有良好適應能力的設計方案。
如何創建流動布局和彈性布局，為我們無懈可擊的設計方案增添一個工具。掌握如何恰當地使用它們，將給網頁設計增加更多的靈活性。流動布局并不是只能由CSS實現的，它也可以通過表格來實現。文中您將會發現，把布局的細節放在樣式表中實現，還有許多其他好處。彈性布局中的列使用em作為長度單位，基于em的布局會隨著字體大小的變化而放大或縮小。 為什么這樣設計不是無懈可擊的？ 一、常見的方法 多列布局并不是只能由CSS實現，也可以使用表格同樣實現能夠根據瀏覽器窗口的大小而自由縮放的(流動)布局。以前，設計者會考慮到使用列來實現，每一列都由一系列表格單元格來構造。圖中顯示了一個常用的布局結構，有一個頁頭橫跨頂部、兩列內容以及一個橫跨底部的頁腳。
以前，我們似乎很自然地會使用表格來構建這種結構，用colspan這個特性使頁頭和頁腳橫跨于內容列的上方與下方。大致的 HTML代碼如下所示：
但大多數的設計者和開發者不會就此罷休。構造好了基礎結構以后，會在這個結構中的每一個單元格中再嵌入表格，為布局創建邊界和像素級別精度的間距。最終，為了使構造的結構和頁面的樣式能夠更加變化靈活，會添加很多HTML代碼。 為了達到流動可變性，可將表單元格的寬度設成百分比形式，這使得布局可以完全擴展而不需要考慮瀏覽器窗口的大小。
整個表格被設置成100%的寬度，列可以根據任意需要的寬度進行拆分。如圖所示：左邊是一個寬一些的內容欄，右邊是一個窄一些的側邊欄。當瀏覽器窗口擴展或收縮而使布局的大小發生變化時，各列寬度的比例將保持不變。 這表明了表格能夠用來構造布局，同時也表明了表格能夠用來構造隨瀏覽器窗口變化的流動布局。然而，還可以采用其他更完美的辦法做到這一點。 二、值得思考的問題：為什么這樣設計不是無懈可擊的？ 表格布局最主要的問題之一，就是表示內容與外觀的 HTML 代碼混在一起了。換句話說，邊框、空白GIF和圖片所用的代碼都嵌入在表示重要內容的代碼中。這意味著只典型的桌面瀏覽器才能夠順利地閱讀這樣的網頁。而使用屏幕閱讀軟件、文本瀏覽器或在移動設備上閱讀軟件時，就可能遇到困難。 1. 大量的代碼 內容與外觀的纏結還意味著代碼量的增大。使用嵌套表格來構造布局，所需要的代碼量有時候是相當驚人的。許多額外的表單元格被用來構造欄間空白、邊框和其他頁面視覺效果。如果使用 CSS，HTML 代碼就能夠減少到只保留它最本質的部分，對外觀的設定可以移到樣式表中。這樣，網頁在非傳統瀏覽設備和瀏覽軟件中的可讀性就立刻提高了，對搜索引擎也更加友好(這是一個額外的、免費的好處)。 2. 噩夢般的維護工作 因為大量的嵌套表格造成糾纏在一起的大量代碼，這只能增加維護的工作量。對于基于表格布局的網頁，要改造它們的外觀，需要花費更大的力氣——檢查大量的單元格和額外的 H T M L 代碼。在這樣的情形下，修改的工作量會大得令人發狂，還不如推倒重來。 3. 并非最佳的內容順序 使用基于表格的布局還存在一個缺點，即文本瀏覽器和屏幕閱讀器上所呈現出來的內容有順序問題。例如，有一個三列的布局，我們知道，HTML 中的順序總是左列、中間列，然后右列。這是操作的表格方式。
在那些基于文本的瀏覽器或屏幕閱讀器中，通常只能按上面的這種順序對內容進行解析。但最主要的內容往往并不放在左列，而是放在中間列，這樣，它很有可能被埋沒在頁面代碼中。使用表格構造布局時，想要安排重要的內容在其他瀏覽器或軟件中先被讀到是不可能實現的。對于所有瀏覽設備都只有一種順序，迫使用戶在使用文本和屏幕閱讀器時，想要得到重要內容之前，就要先艱難地穿過那些無關緊要的代碼。 幸運的是，基于CSS的布局允許對內容順序進行重排，這樣，可以使用 HTML ，采用最優化的順序來編寫文件的源代碼，而以其他的樣式進行呈現。而且，所需的代碼量大大地減少了，還將內容從表示層分離出來。那么，下面讓我們開始使用CSS來構建流動的多列布局吧！ 為什么這樣設計是無懈可擊的？ 一、無懈可擊的方法： 雖然在本文的無懈可擊例子中重點介紹的是如何創建靈活可變的布局，但還是應該注意到，固定寬度的基于CSS的布局也具有無寬度限制的布局的很多優點。它們的主要區別是，可變的布局能夠隨著瀏覽器窗口的大小而伸縮，能夠給用戶更多的掌控能力。當屏幕尺寸可能存在明顯差別(例如移動設備)時，這種方法的效果更好。 我們將介紹利用CSS創建流動布局的必要步驟及其原理。現在讓我們從最簡單的兩欄布局(具有頁頭和頁腳) 開始創建。 1. HTML 代碼結構 我們不再使用表格單元格來構造頁面的列結構，而使用簡單的<div>和其他HTML 5語 義元素將內容劃分成塊。還要時刻記住，要使內容有最佳的排列順序。 一個最基本的簡單兩欄布局可以用如下 HTML 代碼編寫：
代碼結構就應該這樣，很難再簡化了。這種排序方式最為合理：頁頭、內容、側欄和頁腳。這是考慮了在沒有CSS的情況下頁面的布局。就這一點來說，到目前為止，一切都還不錯。 我在整個布局之外增加了一個<div>容器。<div>通常可以在各種目的的設計中派上用場。所以，每當使用CSS來構建布局時，都會從<div> 開始。 2．創建欄：浮動與定位 用CSS創建欄的方法之一就是絕對定位(absolute positioning)，所謂絕對定位，就是使用屏幕上的X和Y坐標將組件定位在特定的位置。但使用絕對定位最大的缺點是，不能使頁腳準確地定位于所有欄的下方。 在構建多列布局時，方法的不靈活導致CSS設計者通常使用 fl oat 屬性。因為浮動元素是可以被清除的，所以它是我們用來控制分欄布局的最好工具。CSS 3提供了創建模塊化布局的新語法，但是這些語法還沒有得到瀏覽器的廣泛支持。而沒有這些支持，是無法完成布局設計這類比較關鍵的任務的。因此我們仍然沿用float屬性。 3．應用樣式 選擇用浮動作為創建欄的方法之后，我們再用百分比將網頁分為內容欄和側邊欄兩部分。在本例中，比例為 7:3(70% 內容欄，30% 側邊欄)。 第一步，要給頁頭、側邊欄和頁腳加上背景色，以便區分我們所要處理的這幾個部分。
然后做兩件事。首先，設置內容欄的寬度為 70%，側邊欄的寬度為 30%。然后，使內容欄浮動在左邊，側邊欄浮動在右邊。這使得兩個欄的位置相對。
4．Gutter “gutter”這個術語已經沿用了很多年了，指文本欄之間的間距。在處理流動布局的欄寬時，gutter 的設置就會變得非常困難。在一個固定欄寬的設計中，我們可將預計的寬度設置成像素大小，這樣就可以很容易地連同欄寬一并考慮 gutter的寬度。 但對于流動的欄寬，我們有兩種選擇：將gutter寬度設成百分比的形式，欄寬也如此；或者，添加一個額外的<div>元素來設定和欄寬分離的外邊距和內邊距。后一種方法從 HTML 代碼的角度來看不是最佳的，但它確實提高了控制水平，這在復雜的設計中是必不可少的。稍后將再次討論這個問題。 為內容欄與側邊欄之間的gutter設置百分比寬度，一種方法就是給內容欄指定一個右外邊距，然后從內容欄的寬度里減去它的值。當然百分比值的總和應該是100%。
通過上面的設置，我們把內容欄的寬度減少了5%，同時給內容欄的右外邊距增加了同樣的寬度來設置欄間的 gutter。顯示結果，在內容欄和側邊欄之間多了一條白色的間隔。 要記住，當給gutter賦百分比值時，欄間的間隔也會隨著窗口的寬度而改變。在窄的窗口中會更小，在寬的窗口中則會更大。對于某些設計需求，這或許是個問題。例如，往往要求欄的邊線或背景圖片在欄之間有一個固定的間隔。在這些情況下，給容器加上第二層<div>容器是最佳選擇了，這一點將在本章中繼續討論。但如果追求簡單化，那么給外邊距指定一個百分比值是最簡單的選擇。 5. 欄的內邊距 如果欄的寬度設置使用百分比的方式，那么在指定其內邊距時，也會出現相似的問題。這是內邊距的計算方式造成的(在已聲明元素的寬度上為“增加”)。如果使用除百分比之外的值來設定欄的內邊距，那么最后的總寬度很容易超過或小于預期的值。這會讓您輕易地放棄選擇用浮動來控制頁面布局。 例如，我們給側邊欄的內邊距增加20個像素，使其顯得更寬松一些。
在寬度固定的布局中，可以很容易地將列兩邊定義的寬度各減去20像素的內邊距。但在流動寬度布局中，是使用百分比來定義寬度的，根本無法設定一個30%的寬度減去40像素的寬度。這會使側邊欄的寬度變得大于30%，無法再與內容欄<div>并列，會被迫擠到 內容欄下邊去。這可不是我們所希望的效果。 那么在這種情況下會有哪些解決方案可供選擇呢？
6．設置寬度的最大值和最小值 構建流動布局時，設計者常常要面對的一個障礙就是行的長度。能夠隨心所欲地伸展布局，對用戶而言非常有益。但到了一定程度時，行的長度可能長到使內容難以閱讀，也可能窄到破壞頁面上其他部分的外觀。 在這里，CSS的max-width和min-width屬性就派上用場了。給流動布局設置最大和最小寬度，可以防止欄被無限制地伸長或收縮。很遺憾，IE6 不支持這種功能。但對支持這種功能的瀏覽器來說，它會帶來很大的提高，而且添加起來十分便捷。 7. 滑動人造欄 如果您重新觀察這一整章中我們一直在用的兩欄布局，就會注意到，雖然我們給側邊欄設置了綠色的背景色，但這個背景只會往下擴展到剛好滿足所需的位置。所以，根據欄中所容納的內容，側欄的高度與內容欄會有所不同。 通常，人們希望所看到的欄的外觀是等高的，而且定義了一致的背景和邊框。但使用流動布局時，無法使一個欄的高與另一欄相一致。 使用這種技術，平鋪的圖片位于欄的后面，造成一種錯覺讓人以為兩欄一樣高。這種方法可以使背景色、樣式和邊框都位于布局的后邊，并一直延伸到頁面底部。然而，這種技術只能應用于寬度固定的布局，其中列寬預先確定好，然后被內置到平鋪的圖片中。 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/)使這種思想更推進了一步，他們提出了“Sliding Faux Columns(滑動人造欄) ”方法，這樣，平鋪的圖片就可以在流動布局的后面滑動，既可以實現欄等高的效果，同時也保留了靈活性。 二、再次探討：為什么這樣設計是無懈可擊的？ 第一個理由，代碼量更少。不必再用嵌套的表格在 HTML 代碼中實現邊框、背景和間隔，我們只要用幾個簡單的<div>，而不必再用CSS為每欄設置位置與樣式，就可以輕松地構造出一個多欄布局。即使在設計固定寬度的 gutter 和“滑動人造欄”(Sliding Faux Columns)時添加了額外(然而是必需)的<div>，HTML代碼量還是遠遠少于使用嵌套表格時的情形。 第二，有了更易于維護的基本代碼。因為外觀的細節都在樣式表中定義，HTML代碼變得更容易閱讀，要更改布局的外觀，只需更新幾個樣式規則即可。使用CSS的float屬性，在多欄布局中，可以給內容安排最佳的順序，最重要的內容可以安排在 HTML 代碼的最前面。這給使用屏幕閱讀器、文本瀏覽器和不支持CSS的其他設備進行瀏覽的用戶帶來了好處。 最后，當實現了一個靈活的、流動的布局時，就會賦予用戶一種控制能力。使他們能夠隨心所欲地擴展布局，也能在使用小屏幕時使窗口變窄。這種更高層次的控制能力，是證明設計方案無懈可擊的另外一種方式，使設計方案能適應盡可能多的環境。 固定布局、流動布局和彈性布局，哪種方法更好呢？在選擇采用何種布局時，需要記住最重要的一點是，每種方法都有它合適的位置。要通過試驗來搞清楚它們是如何運作的，以及在每個解決方案中它們的優缺點 One point:選擇討論流動布局和彈性布局，不是因為我覺得它們在任何時候都優于固定寬度的布局。更恰當地說，每種布局都有它自己適合的場合，這主要取決于設計需求，因為對網頁設計者來說，設計需求并不總是能夠由自己作出決定的。 這就是說，如果您的設計方案中能加上流動布局或者彈性布局，那么就請為用戶能從中獲益而感到高興吧。流動邊距也為適應性Web設計(Responsive Web Design，RWD)打下了基礎，適應性Web設計是一種根據網格布局所在的瀏覽環境使它們進一步調整并適應環境的方法。 PS:小提示 當構建流動布局時，應當記住以下幾點：
至此已經介紹了創建一個靈活、流動、基于CSS的布局的基礎知識，接下來將把這本書中迄今討論過的方方面面綜合起來，從而構建一個完整的、單頁的無懈可擊的設計方案。
本文節選自《無懈可擊的web設計——使用HTML5和CSS提高網站的靈活性與適應性》一書，Dan Cederholm著，馬躍譯，由清華大學出版社出版。 該文章在 2012/5/18 9:48:37 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
