?
快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

和記博情娛樂:關于網頁設計制作中設計師的框架

?

邇來,在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代碼,就可以定制成你的網站所相符的外不雅樣式。

以下為引用的內容:

ul.tabs li {

border: none;

background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);

}

ul.tabs li {

border: none;

background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);

}

列表左浮動,并且將鏈接以塊的形式置于列表傍邊,鏈接也左浮動,字體居中,象煩人的廣告一樣的這些事情,框架以幫你完成,在你的網站設計事情中,只需集中精力處置懲罰不凡的、有趣的網站細節,而不是寫已經寫過百萬次的CSS代碼。

若何構建一個CSS框架?

構建一個框架有幾種可能的要領,但最常見,可以說是最有用的,抽象通用的CSS放到一個自力樣式表文件,該樣式表文件只包孕整體的一個特有部分。例如,你可以,一個樣式處置懲罰排版,另一個處置懲罰大年夜量重置。這種好的措施能使你選擇性引入你必要的樣式,在你框架里可能有六七個不合的樣式文件,但不必要此中的一兩個,只要不引入即可。我們團隊創建的框架包孕5個樣式文件:

reset.css —處置懲罰重置

type.css —處置懲罰排版

grid.css —處置懲罰結構

widgets.css —處置懲罰小零件(widgets),如tab菜單、下拉菜單、以及“更多”按鈕

base.css —包孕所有的其他樣式表文件,以便我們只必要在(X)HTML引用base.css即可應用全部CSS框架

然后,我們把框架寄放在一個零丁的地方,使每一個站點都引入這個框架。當然,每一個網站也必要有特有樣式表,特有樣式對框架進行了需要的彌補。

箴規針砭

這種措施不錯,但也帶來新的問題:增添了每一個頁面的http鏈接數。對付大年夜流量和中等流量的網站,每個頁面增添5個以上HTTP連接數,系統管理員可能就麻煩大年夜了。兩個可能辦理法子:

把所有樣式都放到一個文件里,而不是分成多個模塊。這里的問題是,掉去了框架只包孕特定文件的機動性,而且掩護也變得麻煩。

有一個辦事器端法度榜樣,動態把多個單個文件處置懲罰成一個相應。我還沒看到這種做法,但要是做好了應該是很有效率的。以我上面框架為例,當哀求(Request)base.css時刻,而不是哀求(Request)type.css , grids.css 等的時刻,這一動態處置懲罰歷程觸發。這樣一來,單個文件仍舊可用,而在平臺版本上全部框架也有效的。

總之,我們目標不是盡可能的抽象,這點異常緊張。相反,其目標是供給了一個快速啟動和更有效率的設計歷程,這是絕對有可能去做過的。要是你過于的抽象,工作會變得紛亂,太多的HTTP鏈接數會影響你網站的機能。記著:一個好的框架不是把工作搞更難更繁雜,而是一個簡單的從零的開始。

總結

我們web設計師每每常常重復自己,就像我法度榜樣天下里的那些同伙,我們重和記博情娛樂置瀏覽器默認樣式、設計結構和導航菜單寫了一遍又一遍——險些每個項目?;ㄒ稽c光陰收拾CSS 框架,可以使你快速的啟動每一個網站項目,更輕松的掩護網站,并贊助團隊里其他的設計師理解你作品。要重視的一點,這些益處的得到必須以不影響網站的機能為條件。

免責聲明:以上內容源自網絡,版權歸原作者所有,如有侵犯您的原創版權請告知,我們將盡快刪除相關內容。

您可能還會對下面的文章感興趣:

快三平台开户