網(wǎng)頁設(shè)計(jì)和發(fā)展領(lǐng)域已經(jīng)成為競爭激烈的虛擬世界。想要在網(wǎng)絡(luò)的虛擬世界中生存,僅有一堆靜止的在線網(wǎng)絡(luò)應(yīng)用是遠(yuǎn)遠(yuǎn)不夠的,網(wǎng)頁必須要有很多功能,配以讓人無法抗拒的設(shè)計(jì)。網(wǎng)頁編碼一定要合適、精確,才能保證不發(fā)生錯(cuò)誤,使網(wǎng)頁能在瀏覽器上輕松加載出來。此外,還要在網(wǎng)頁設(shè)計(jì)中留出足夠的空間以充許日后的功能增加和改善,這樣做才能讓更多與時(shí)俱進(jìn)的特征能加入到網(wǎng)頁設(shè)計(jì)中。
網(wǎng)頁設(shè)計(jì)員和研發(fā)者可用的最好工具之一便是 CSS 框架,它提供高端解決方案來適應(yīng)高端網(wǎng)頁研發(fā)需求。CSS 框架減化了編碼結(jié)構(gòu)、減少了編碼時(shí)間,為研發(fā)者帶來網(wǎng)頁設(shè)計(jì)的便捷性。
CSS 框架倒底代表什么呢?
在網(wǎng)站繁榮的背后,一個(gè)非?;镜脑蚴腔钴S的 PSD 和 CSS 轉(zhuǎn)換服務(wù)的存在。CSS 是層疊樣式表語言 (Cascading Style Sheet Language) 的英文首字母拼寫,它能使你的網(wǎng)站漂亮地展現(xiàn)出來。CSS 應(yīng)用人類心理學(xué)和表示語義學(xué),詳細(xì)地組織數(shù)據(jù),從而使得用戶在瀏覽你的網(wǎng)站時(shí)不會(huì)失去興趣。
CSS 給予研發(fā)人員在編碼上極大的靈活性,它分離了標(biāo)記內(nèi)容,例如從 PSD 到 HTML 或 XHTML 的轉(zhuǎn)換,以及表示內(nèi)容,這些標(biāo)記內(nèi)容描述了頁面布局、內(nèi)容展現(xiàn)、字體和風(fēng)格等等。CSS 另一個(gè)便捷特征則是 CSS 框架。CSS 框架是先前備制的元素,存在于網(wǎng)絡(luò)數(shù)據(jù)庫中。其擴(kuò)展名為 .css,可以使研發(fā)者們回憶起某一特定編碼。因此,研發(fā)者們不必一遍又遍地重寫全部的編碼,這樣也就省下了大把的時(shí)間。由于去除了編碼中的重復(fù)步驟,使得研發(fā)者們有足夠空間把精力集中在重要的地方,制作出視覺上更另人震撼的網(wǎng)絡(luò)應(yīng)用。此外,減縮的編碼直接隱藏于網(wǎng)頁加載中,使得網(wǎng)頁在瀏覽器上能快速地加載出來。
使用 CSS 框架是明智的選擇,你不用每次做網(wǎng)頁研發(fā)時(shí)再從零開始了。你可以做一份默認(rèn)風(fēng)格表和標(biāo)記模版,在每次做網(wǎng)頁研發(fā)時(shí)都可以用到。這些基本內(nèi)容在框架中都有了,你可以把所有的力氣和技術(shù)用設(shè)計(jì)的細(xì)節(jié)和獨(dú)特性上了。
11 種最流行的 CSS 框架
1、藍(lán)圖(Blueprint)
一個(gè)叫做 Olav Frihagen Bjørkøy 的挪威理工學(xué)生是藍(lán)圖(最強(qiáng)大的 CSS 框架之一)研發(fā)背后的原因。藍(lán)圖提供穩(wěn)固的平臺(tái)以使用層疊樣式表語言和開發(fā)排版網(wǎng)格。CSS 框架的設(shè)計(jì)目的是為你節(jié)省大量 CSS 研發(fā)的時(shí)間。藍(lán)圖提供了非常好用的網(wǎng)格發(fā)生器,借此用你可基于寬度尺寸的選擇打造框架。此外,藍(lán)圖還提供定制風(fēng)格表,使你可以把按鍵和排版、完整專業(yè)設(shè)計(jì)表格、和用于打印目的簡便易用的風(fēng)格表組合到一起。最后,藍(lán)圖最重要的優(yōu)勢(shì)之一是它可以執(zhí)行你的瀏覽器默認(rèn)風(fēng)格的批量重設(shè)。
2、雅虎UI 數(shù)據(jù)庫 CSS 基礎(chǔ)
雅虎 UI 數(shù)據(jù)庫由 JavaScript 和 CSS 大力支持,通過提供如 DOM 腳本語言、AJAX 和 DHTML 的高端技術(shù),編匯了能夠使你研發(fā)出高度響應(yīng)和互動(dòng)的網(wǎng)絡(luò)應(yīng)用的工具和控制器。雅虎 UI 數(shù)據(jù)庫可以免費(fèi)使用,也可以在 BSD 協(xié)議下使用。
雅虎 UI 由雅虎公司的前端工程師和全球的參與者們細(xì)心打造。它可以為提升你的網(wǎng)絡(luò)應(yīng)用的可擴(kuò)展性并為其增速,同時(shí)提供夯實(shí)的基礎(chǔ),這一點(diǎn)已久經(jīng)考驗(yàn)。如果你覺得用 JavaScript 比較舒服的話,那么它就是你最好最有效的解決方案了。
3、另一個(gè)多欄布局 – YAML
另一個(gè)多欄布局是 Dirk Jesse 先生勤奮努力換來的結(jié)果,他是 YAML 的研發(fā)者。Dirk Jesse 先生對(duì)網(wǎng)頁標(biāo)準(zhǔn)有準(zhǔn)確的理解,他使得 YAML 與當(dāng)下使用的多個(gè)相關(guān)網(wǎng)頁瀏覽器兼容。還有,YAML 為你提供了除錯(cuò)樣式表和打印樣式表。YAML 的另一個(gè)優(yōu)勢(shì)特征為,它提供詳細(xì)的文件編制,并用兩種語言提供活范例 – 英語和德語。此外,YAML 還能使你在你的網(wǎng)頁瀏覽器內(nèi)研發(fā) CSS 布局,其方法是通過一個(gè)叫做 YAML Builder 的有效編輯器,這款編輯器以“所見即所得”(WSYIWYG)的方式工作,且接著就會(huì)把不同有創(chuàng)意的設(shè)計(jì)元素融入到你的框架中去。
4、960GS
960 網(wǎng)格系統(tǒng)的誕生只有一個(gè)目的,就是通過提供一個(gè)普遍的 960 像素布局寬度平臺(tái),使得與研發(fā)網(wǎng)站相關(guān)的工作程流程更加順暢。960 網(wǎng)格系統(tǒng)提供了 12 和 16 的兩個(gè)不同包供選擇,可以一起使用,也可分開使用。此系統(tǒng)把幾個(gè)實(shí)用的模版和圖表整合到了一起,為你提供了穩(wěn)健的背景支持,也提供了一個(gè)透視圖工具。
5、流體 960GS
有著極大優(yōu)勢(shì)的流體 960 網(wǎng)格系統(tǒng)是 Nathan Smith 和他的原創(chuàng) 960 網(wǎng)格系統(tǒng)的結(jié)合體。
6、彈性 CSS
這種 CSS 框架實(shí)際上是在 CSS 框架方案中的“松緊帶”。它就像一條松緊帶一樣,能夠伸縮自如,提供穩(wěn)健的支持,允許要非常廣泛的范圍內(nèi)操作,包括固定的、流動(dòng)的和彈性的布局。不用折衷你想要的網(wǎng)絡(luò)應(yīng)用布局,僅僅通過在彈性 CSS 框架上運(yùn)行數(shù)組排列和結(jié)合,直到得到了你想要的布局。彈性 CSS 框架唯一的美中不足便是它需要使用 JavaScript。JavaScript 能提供高質(zhì)量和美學(xué)設(shè)計(jì),但對(duì)不懂 JavaScript 的人來說,這可是個(gè)負(fù)擔(dān)。
7、jQuery UI CSS 框架
這款 CSS 框架是為了研發(fā)以 jQuery 為基礎(chǔ)的定制小工具而設(shè)計(jì)。這個(gè) CSS 框架包含的類別涵蓋了所有必要的用戶介面的大多數(shù)。如果你使用 jQuiery UI CSS 框架,那么你將能夠輕松地把相關(guān)插件融入到網(wǎng)站編碼中,且能夠使用共享的傳統(tǒng)標(biāo)記編碼。如果你選擇 jQuery,那么你就可以創(chuàng)建按鈕,并在單個(gè)給定時(shí)間內(nèi)選擇多個(gè)按鈕。
8、SenCSs
SenCSs 的全名將揭示其含義 – 合理標(biāo)準(zhǔn) CSS (ensible Standards CSS),這是這款 CSS 的任務(wù)。它能讓你合理地為所有 CSS 中的間歇(也就是重復(fù))部分設(shè)計(jì)式樣,因此可省出大把時(shí)間用手攻克其他網(wǎng)站研發(fā)的重要問題。
9、Typogridphy
這款 CSS 框架乃是基于 960 網(wǎng)格系統(tǒng)而成,它可以讓你創(chuàng)造出極為動(dòng)感和多變的網(wǎng)格布局。Typogridphy 是一個(gè)印刷和網(wǎng)格布局 CSS 框架,給網(wǎng)站設(shè)計(jì)員和研發(fā)員提供極限的范圍,使他們快速地給有極強(qiáng)功能和美觀的網(wǎng)格布局編碼。
10、Tripoli
Tripoli 不能算作是一款 CSS 框架,而更應(yīng)說是描述 HTML 元素的 CSS 標(biāo)準(zhǔn)。Tripoli 為研發(fā)動(dòng)畫布局提供穩(wěn)健的繪制引擎,而不會(huì)改變編碼的排印。它是非常成熟的 CSS 標(biāo)準(zhǔn),可以重置默認(rèn)瀏覽器,并靜靜地工作。
11、BlueTrip CSS 框架
這款 CSS 框架名副其實(shí),提供了三種可能是最好的框架的綜合體,即 960GS, Blueprint 和 Tripoli。
為什么要挑選 CSS 框架
在這個(gè)年代,僅僅是努力工作已不夠了,要成功的必要條件是要聰明地工作,不只是努力。CSS 框架就可以讓你實(shí)現(xiàn)聰明地工作。這是研發(fā)網(wǎng)站聰明的方式。它通過提供強(qiáng)健的研發(fā)網(wǎng)站基礎(chǔ),使研發(fā)人員免于所有的焦慮和沮喪,不用再從頭開始。
此外,網(wǎng)站研發(fā)過程可謂相當(dāng)無枯燥和費(fèi)時(shí),研發(fā)員可能在重復(fù)的編碼中出錯(cuò)。CSS 框架可以避免這種情況發(fā)生。如果你所有項(xiàng)目都有默認(rèn)的 CSS 編碼,那么你不便不用檢查網(wǎng)站每一頁的源碼了。一個(gè)詳細(xì)的 CSS 框架保證了研發(fā)過程的工作流的果實(shí),并節(jié)省了大量時(shí)間,避免了研發(fā)團(tuán)隊(duì)內(nèi)部的誤解和交流不暢。
正如你已在上文看到的內(nèi)容,大多數(shù) CSS 框架已經(jīng)做到了跨瀏覽器兼容,所以你不必?fù)?dān)心你的網(wǎng)站的兼容性。
最后,真的沒有什么理由不推建使用 CSS 框架了。它節(jié)省你寶貴的時(shí)間,以極有利的特征和功能補(bǔ)充網(wǎng)站,并給予研發(fā)人員足夠的空間和靈活度來作出最好的設(shè)計(jì)。