帖子
勛章
關(guān)注
任務(wù)
設(shè)計師的框架§網(wǎng)頁設(shè)計教程 什么是框架? 為了便于溝通，我們給“框架”統(tǒng)一一個定義（至少在本篇文章中是統(tǒng)一的）：一套包含工具、函數(shù)庫、約定，以及嘗試從常用任務(wù)中抽象出可以復(fù)用的通用模塊，目標(biāo)是使設(shè)計師和開發(fā)人員把重點放在任務(wù)項目所特有的方面，避免重復(fù)開發(fā)。通常的講，框架就是上面提到的JavaScript框架和Web應(yīng)用框架。 需要強調(diào)說明的是，我們不必討論構(gòu)造、打包發(fā)布，相反，一個框架只為你或你的團(tuán)隊使用即可。 CSS框架 有些時候，你可能嘗到了抽象類似的CSS代碼的甜頭，在那些同時設(shè)計幾個類似網(wǎng)站的設(shè)計師身上表現(xiàn)最為明顯。此外，團(tuán)隊中的設(shè)計師們從框架的方法上有很多的獲益。比如，我在一家報館工作，所有的20多個網(wǎng)站保持著很多的共同點，基于新聞網(wǎng)站的特點，它們趨向于更加相似，而不是差異。但是，即使單獨一個設(shè)計師，設(shè)計一個從表面上看有差異很大的項目，也可以為CSS框架抽象出一些通用的小碎片。 勞倫斯日報（Lawrence Journal-World），我在那里工作，我們最近建立了一個CSS框架，并發(fā)現(xiàn)它是一個巨大的效率倍增。當(dāng)然，我們花了數(shù)天時間自己創(chuàng)建了一個CSS框架，但一旦框架完工，開發(fā)高質(zhì)量網(wǎng)頁的速度是極快的。更何況，既然團(tuán)隊每一個設(shè)計師現(xiàn)在都使用這個框架，當(dāng)一個設(shè)計師修改另一個團(tuán)隊成員網(wǎng)頁時，他們不再需要花20分鐘理解別人的構(gòu)建思路，可以馬上上手。 有那些可以忽略? 當(dāng)投入到一個整體性很強的CSS框架，你想尋找的東西，是每個項目都做了一遍又一遍的重復(fù)通用的代碼，目標(biāo)是鞏固這些代碼核心地位，遵循“不重復(fù)自己（Don’t Repeat Yourself）”編碼方法。這使得維護(hù)工作輕易了許多，還可以幫訪問者節(jié)省帶寬開銷。 幾乎每個我參與的項目中，我必須聲明的幾個CSS問題： “大量重置”瀏覽器默認(rèn)風(fēng)格，比如，設(shè)置所有元素的margin和padding為0，去掉框架（framesets）和圖片（images）的border，等等。 以基線對齊。這包括諸如設(shè)定塊級元素的margins相同的(或多個)基準(zhǔn)行高，如段落（paragraph）、頭（header）、以及列表（list）。 創(chuàng)建表單（Form）的基本樣式。 創(chuàng)建幾個常用的CSS 類，例如，.hide(把display置為none，即隱藏元素)、.mute(設(shè)定為一個較小的字體和較亮的顏色)。 還有更有趣的事情，許多網(wǎng)站設(shè)計師發(fā)現(xiàn)自己不斷重復(fù)使用著相同的基本結(jié)構(gòu)，為什么不動它整理成自己的，在某種程度上可以非常靈活的用于多個網(wǎng)站?Yahoo這樣做了，這就是YUI。當(dāng)我們?yōu)榈膭趥愃谷請缶W(wǎng)站（the Journal-World）建立CSS框架的時候，我先看看Yahoo是怎么做的。我們很肯定那不是我們想要的，但作為一個很好的例子，給我們提供了很多思考和如何建構(gòu)自己框架的想法。我們解決了16個布局模塊，它具有足夠的靈活性使我們的每一個網(wǎng)站都可以應(yīng)用，即使每個網(wǎng)站看上去與下一個版本有些差異。另外大多數(shù)網(wǎng)站共用 widgets ，象下拉菜單、導(dǎo)航菜單、按鈕等，這些也是主要的需要抽象提取的對象。除此之外,你可能有共同的內(nèi)容名稱，如圖片列表的縮略圖，你可以規(guī)范對CSS命名，如“thumbnail-list”，讓所有顯示縮略圖的都使用這個CSS類。 另外要做的可能是抽取hack（如兼容那些舊瀏覽器)加入自己的擴展的樣式模塊。我自己嘗試過，但發(fā)現(xiàn)hack過于專有而不能抽取到通用框架里。 |
