FrameworksforDesigners[設計師的框架]

2024-04-27 13:53:15

字體：大中小

來源：轉載

供稿：網友

　　近來，在Web開發中”框架”是一個相當時髦的詞。比如JavaScript 框架 YUI、 JQuery和Prototype 都引起廣泛的關注， Web應用框架Rails and Dojo 更是引人矚目，仿佛所有人都使用某種框架來開發自己的網站。但究竟什么是框架?是不是框架僅僅是對程序員有用，設計師是否可以從中收益？

什么是框架?

　　為了便于溝通，我們給“框架”統一一個定義（至少在本篇文章中是統一的）：一套包含工具、函數庫、約定，以及嘗試從常用任務中抽象出可以復用的通用模塊，目標是使設計師和開發人員把重點放在任務項目所特有的方面，避免重復開發。通常的講，框架就是上面提到的JavaScript框架和Web應用框架。

　　需要強調說明的是，我們不必討論構造、打包發布，相反，一個框架只為你或你的團隊使用即可。

CSS框架

　　有些時候，你可能嘗到了抽象類似的CSS代碼的甜頭，在那些同時設計幾個類似網站的設計師身上表現最為明顯。此外，團隊中的設計師們從框架的方法上有很多的獲益。比如，我在一家報館工作，所有的20多個網站保持著很多的共同點，基于新聞網站的特點，它們趨向于更加相似，而不是差異。但是，即使單獨一個設計師，設計一個從表面上看有差異很大的項目，也可以為CSS框架抽象出一些通用的小碎片。

　　勞倫斯日報（Lawrence Journal-World），我在那里工作，我們最近建立了一個CSS框架，并發現它是一個巨大的效率倍增。當然，我們花了數天時間自己創建了一個CSS框架，但一旦框架完工，開發高質量網頁的速度是極快的。更何況，既然團隊每一個設計師現在都使用這個框架，當一個設計師修改另一個團隊成員網頁時，他們不再需要花20分鐘理解別人的構建思路，可以馬上上手。

有那些可以忽略?

　　當投入到一個整體性很強的CSS框架，你想尋找的東西，是每個項目都做了一遍又一遍的重復通用的代碼，目標是鞏固這些代碼核心地位，遵循“不重復自己（Don’t Repeat Yourself）”編碼方法。這使得維護工作輕易了許多，還可以幫訪問者節省帶寬開銷。

　　幾乎每個我參與的項目中，我必須聲明的幾個CSS問題：

　　“大量重置”瀏覽器默認風格，比如，設置所有元素的margin和padding為0，去掉框架（framesets）和圖片（images）的border，等等。
　　以基線對齊。這包括諸如設定塊級元素的margins相同的(或多個)基準行高，如段落（paragraph）、頭（header）、以及列表（list）。
　　創建表單（Form）的基本樣式。
　　創建幾個常用的CSS 類，例如，.hide(把display置為none，即隱藏元素)、.mute(設定為一個較小的字體和較亮的顏色)。
　　還有更有趣的事情，許多網站設計師發現自己不斷重復使用著相同的基本結構，為什么不動它整理成自己的，在某種程度上可以非常靈活的用于多個網站?Yahoo這樣做了，這就是YUI。當我們為的勞倫斯日報網站（the Journal-World）建立CSS框架的時候，我先看看Yahoo是怎么做的。我們很肯定那不是我們想要的，但作為一個很好的例子，給我們提供了很多思考和如何建構自己框架的想法。我們解決了16個單元格的問題，它具有足夠的靈活性使我們的每一個網站都可以應用，即使每個網站看上去與下一個版本有些差異。另外大多數網站共用widgets ，象下拉菜單、導航菜單、按鈕等，這些也是主要的需要抽象提取的對象。除此之外,你可能有共同的內容名稱，如圖片列表的縮略圖，你可以規范對CSS命名，如“thumbnail-list”，讓所有顯示縮略圖的都使用這個CSS類。

　　另外要做的可能是抽取hack（如兼容那些舊瀏覽器)加入自己的擴展的樣式模塊。我自己嘗試過，但發現hack過于專有而不能抽取到通用框架里。

什么是真正的益處?

　　框架的真正好處是能夠快速啟動工作，你可以創建一個新的(X)HMTL文件，引入你框架，你不用再處理重置padding 和 margins的事情，漂亮的排版，干凈的表單，整潔的布局，有效的widgets，等等。很明顯，很明顯，雖然，你一定要來定制外觀和感覺為每個站點。為實現這一目標,所有你需要做的是復寫,并添加到默認的風格是必要的。

　　很顯然，盡管你必須為每個網站定制外觀，為了完成這一任務，你所需要做的就是在默認的樣式上加幾行代碼。舉個例子，假如在你的框架里，為所有的class屬性為“tabs”的UL標簽設置了基本的水平導航樣式，并且有一個灰色的邊框，你只需要幾行CSS代碼，就可以定制成你的網站所符合的外觀樣式。

示例代碼 [www.CuoXIn.com]

上一篇：學習Web標準給你的網頁選擇合適的文檔類型

下一篇：網頁設計師：什么是WEB標準