|
我們可以使用 position 或 float 屬性定位，我們可以用輕量級圖片充當(dāng)背景，因此使用 Box 的時候我們既可實現(xiàn)網(wǎng)格布局，也可以更有效的實現(xiàn)非網(wǎng)格布局，你可以在 Dave Shea 的 Blood Lust 中看到這個例子，這是他在 CSS Zen Garden 中使用的眾多設(shè)計之一（圖8）。
圖 8: CSS Zen Garden: Blood Lust
圖9展示了 Blood Lust 中運用的基于 BOX 的非結(jié)構(gòu)化設(shè)計，也展示了如何使用 CSS 和 BOX 實現(xiàn)相互獨立的非結(jié)構(gòu)化網(wǎng)格。
圖 9
一旦我們明白了 BOX 的能力，我們就可以很容易突破網(wǎng)格的束縛。圖10中展示了一種高度非結(jié)構(gòu)化，甚至是自由的設(shè)計。
圖 10: Kutztown University: Communication Design Department
這些 BOX 使用 CSS 定位：
圖 11
不僅代碼變得更干凈，對熟悉 CSS 布局的設(shè)計者而言也更直觀簡單。而這種設(shè)計也同樣直觀易用且不落俗套。
展望
現(xiàn)代布局技術(shù)之美是我們有更多選項可選。使用 CSS 我們可以創(chuàng)建易于管理，輕量，視覺豐富的設(shè)計，如果樂意，也可以是網(wǎng)格設(shè)計，同時，我們也可以很容易地打破或解除這個網(wǎng)格。
這為當(dāng)代 Web 設(shè)計帶來更多機會，我們不應(yīng)因為對網(wǎng)格設(shè)計更熟悉而重蹈覆轍。
對于我們這些長期耽于表格布局的人來說，面臨的困難尤其大。對多年的 Web 設(shè)計者，這意味著同一直使用的東西決裂，有些人也許并不覺得難，然而絕大多數(shù)人會心存畏懼。我們需要學(xué)習(xí) CSS 模型的工作原理，還要勇于同陳規(guī)告別。
有一些新人，他們從未從事過表格布局設(shè)計，對他們來說，我們過去的方法既奇怪又死板，正是從這些人中，我們有希望看到更多對設(shè)計陳規(guī)的突破。
Web 正在走向成熟，我們設(shè)計方式也在改變，我們的面前有更多的創(chuàng)新與創(chuàng)意。我們不會拘泥于被規(guī)劃的城市，我們可以實現(xiàn)獨特的設(shè)計，我們這些老設(shè)計師，聯(lián)合當(dāng)今的新人會讓 Web 日新月異。
相關(guān)閱讀
作者感謝 Mark Boulton 的 grid-system 系列文章，并感謝 Timothy Samara 2002 年出版的 Making and Breaking the Grid。
本文作者
Molly E. Holzschlag 是一個知名的 Web 標(biāo)準(zhǔn)倡導(dǎo)者與傳授者。她的30多本著作中最暢銷的是她同 Dave Shea 合寫的 The Zen of CSS Design （禪意的 Web 設(shè)計）。Molly 是 W3C 工作組受邀專家，也是 Web 標(biāo)準(zhǔn)項目組（WaSP）的前主管。Molly 同設(shè)計者，開發(fā)者，執(zhí)行者與決策者們一起，為實用的，漂亮的，有意義的 Web 提供推動力。
譯后記
這是一篇發(fā)表于 A LIST APART 的 2005 年的文章，2005年，CSS 布局還不像現(xiàn)在這樣普遍，而表格布局已經(jīng)讓很多人不堪其重，作為 Web 領(lǐng)域資深的專家，作者 Molly E. Holzschlag 也是表格布局的長期使用者，當(dāng) CSS 接近成熟，基于 CSS 的布局讓人耳目一新的時候，她對基于表格的網(wǎng)格設(shè)計的心情是復(fù)雜的，從文章中可以看出。
然而時間到了2009年，當(dāng) CSS 已經(jīng)無孔不入，CSS 布局也變得爛熟的時候，我們很有必要再次對網(wǎng)格設(shè)計進行思考，網(wǎng)格死了嗎，或者說表格是邪惡的嗎？答案并不那么簡單，當(dāng)今的 Web，無論怎樣變化，它的宗旨是永恒的，除了 Web 應(yīng)用，Web 永遠不變的使命是表達和傳遞信息，如果你是一個文人，你會愛上倫敦，然而如果你是個郵遞員，你會選擇 Tucson。因此不管是網(wǎng)格設(shè)計還是自然設(shè)計，并沒有絕對的優(yōu)劣，網(wǎng)格設(shè)計更清晰整潔，自然設(shè)計更優(yōu)雅精煉。
而表格，也并不象很多人說的那么邪惡，須知，現(xiàn)在的表格已不是昔日的表格，BOX 可以結(jié)合 CSS，表格也可以，完全使用 CSS 進行修飾的表格就像一組有機組合并互動的 BOX，當(dāng)你并不需要其中的單元格精確定位的時候，表格是一種比 BOX 更完美的容器，因為它對所有瀏覽器的兼容是最好的，它不會坍塌，不會長短不一，它的行為更容易符合預(yù)期，最重要的是，它是人們對事物進行組織的一種最直接的方式。
本文國際來源：http://www.alistapart.com/articles/outsidethegrid
本文鏈接：http://www.95time.cn/design/doc/2009/6425.asp 
出處：銳商企業(yè)CMS
責(zé)任編輯：bluehearts
上一頁 突破網(wǎng)格設(shè)計的僵局 [2] 下一頁
|
第 1 頁 
第 3 頁 突破網(wǎng)格設(shè)計的僵局 [3]
