建站心得


960網(wǎng)格系統(tǒng)


Bryan Veloso 在最近在他重新發(fā)布的網(wǎng)站Avalonstar 上應(yīng)用了960網(wǎng)格系統(tǒng)(960 Grid System)中的16列的PS模板開發(fā)。

在這同時(shí)感謝他給960.gs提供了網(wǎng)站的截圖以供使用。網(wǎng)站:http://960.gs/

960.gs

正如你們所知,我最近正為一個(gè)CSS框架(此框架是應(yīng)本人最近的個(gè)人的專項(xiàng)需求所開發(fā)的)建一個(gè)站點(diǎn)。由于一直沒想到更好的名字,再說960這個(gè)數(shù)字湊成的logo還不錯(cuò),所以簡單的叫做960 網(wǎng)格系統(tǒng)(960 Grid System)。

這很有趣,因?yàn)槲抑皇窃谛瞧谔炀W(wǎng)上臨睡前上tweet發(fā)了一條關(guān)于960網(wǎng)格系統(tǒng)的信息,然后就收到很多評論,甚至收到了很多咨詢相關(guān)信息的郵件。

應(yīng)該特別指出的是,這個(gè)180KB大小的下載包,不僅僅是CSS框架,它包含了一下文件:可打印的縮略圖表,針對Firewofks,Phototshop,OmniGraffle 和Vision的模板文件,CSS文件,HTML文件。

960.css文件經(jīng)壓縮后大小只有4KB。

首先,我寫本CSS框架自是為了我自己的項(xiàng)目,同時(shí)只是為了過把設(shè)計(jì)的癮。我十分清楚并不是所有人都會喜歡它。有這么句老話——你要么滿足全部人某一時(shí)段的需求,要么滿足一部分人的永遠(yuǎn)的需求。我并不打算那樣做。我只是想將我過去一年多所關(guān)注的網(wǎng)格方面的東西跟大家分享。假如有人能因此而有所收獲,那是件好事。

好了,廢話少說,繼續(xù)往下看吧。

瀏覽器支持

本框架代碼適用于所有由yahoo評為A級(A-grade)的瀏覽器。本文發(fā)文時(shí)間,yahoo對瀏覽器的評定情況如下圖所示。

留意上表可以發(fā)現(xiàn):IE5.x并不在表中,其實(shí)原因很簡單,對于Yahoo來說,IE5.x的市場占有率已經(jīng)很小,不僅如此,連微軟都停止了對該版本提供支持。假如你還被人用刀頂著喉嚨,讓你寫代碼去適應(yīng)這個(gè)古老的瀏覽器的話,我建議你到Authentic Jobs (譯者注:某招聘網(wǎng))看看別的更好的職位吧。

開發(fā)背景

我開始對網(wǎng)格設(shè)計(jì)產(chǎn)生興趣是在看了 Khoi Vinh 和 Mark Boulton的文章之后。我承認(rèn),一開始我并不十分理解他們文中的概念,但是后來,經(jīng)過不斷的思考,終于了解到這是一個(gè)在web網(wǎng)頁頁面設(shè)計(jì)領(lǐng)域內(nèi)經(jīng)得起時(shí)間考驗(yàn)的實(shí)踐總結(jié)。不管你喜歡還是不喜歡,現(xiàn)今的網(wǎng)頁大多都是以一個(gè)個(gè)四四方方的“塊”組成。不可避免的,頁面設(shè)計(jì)上也用各式長方形通過不同的組合來達(dá)到目的。

竟然我們要使用這些四四方方的東西,那么我們應(yīng)該對它們有個(gè)邏輯性的認(rèn)識。有次在完成Khoi和Mark安排的初步工作后,偶然發(fā)現(xiàn)了Cameron Moll的文章,文中說到,960px是網(wǎng)頁設(shè)計(jì)的最佳寬度。現(xiàn)在基本上顯示器都支持1024×768的分辨率(就像支持以前的800*600那樣),而在這個(gè)分辨率下,960px的寬度的確能夠非常好地展現(xiàn)網(wǎng)頁的內(nèi)容。

自從看了那幾篇文章以后,我在設(shè)計(jì)中開始應(yīng)用這個(gè)布局方法——將960px分成若干列。直至2007年春,可以這樣說,我發(fā)現(xiàn)了我的一套規(guī)律。這個(gè)發(fā)現(xiàn)導(dǎo)致我開始了我個(gè)人網(wǎng)站的重構(gòu),工作還在進(jìn)行中,不過進(jìn)度很快。假如你看我瞄我一下,發(fā)現(xiàn)了我正在吃我的“狗糧”,在此同時(shí),我的網(wǎng)站已經(jīng)用上了新版本的16列網(wǎng)格布局。

我現(xiàn)在還不能好好坐下并完成重構(gòu)工作,因?yàn)槲疫€得完成碩士學(xué)位相關(guān)的信件,還有需要完成接到一些私活等等。按時(shí)間順序來說,技術(shù)上我已經(jīng)在Blueprint發(fā)布之前開始使用我網(wǎng)格系統(tǒng)了。這個(gè)說法其實(shí)沒什么很大價(jià)值,只是幫我解釋了“為什么使用另外一個(gè)網(wǎng)格框架?”,因?yàn)槲乙呀?jīng)在一個(gè)項(xiàng)目里用Blueprint。為了減少這個(gè)項(xiàng)目日后的維護(hù)成本,我們要使用一個(gè)已有的代碼庫。盡管我們在編寫代碼前已經(jīng)商定按Blueprint的約定出發(fā),但相關(guān)的設(shè)計(jì)人員并沒有從Blueprint的層面出發(fā)來設(shè)計(jì)布局。當(dāng)然,這也有一部分責(zé)任在我,在開發(fā)前我并沒有與他們充分的交流Blueprint工作方式。在項(xiàng)目的最后階段,我基本上將所有的按Blueprint框架寫的代碼換回了用table布局。

這時(shí)候我在想,如果有那么一個(gè)精簡的東西能讓網(wǎng)頁設(shè)計(jì)者和編碼者思維更活躍,溝通更順暢,豈不樂哉?而且,要是執(zhí)行機(jī)構(gòu)包含在該工作流中呢?960網(wǎng)格系統(tǒng)應(yīng)運(yùn)而生!

它并不是

到目前為止,我收到的郵件大部分的問題都是“你個(gè)這個(gè)跟Blueprint哪有什么不同”,這些絕大部分都是很憤恨的說,就像在說“簡直浪費(fèi)你的時(shí)間,因?yàn)锽lueprint已經(jīng)存在,我更喜歡Blueprint,你回去吃奶吧?!币粯?。

對于這部分人,我想給點(diǎn)歡呼聲,你們大可以繼續(xù)使用那些你們認(rèn)為最適合的,最熟悉的框架。我可不愿意挑起矛盾,強(qiáng)迫大家使用這個(gè)框架,而不去使用那個(gè)框架,盡管這個(gè)框架是更值得用的。

它有著明顯的缺陷,或者有不少優(yōu)秀的功能,這全在于你怎么看待它。這就決定了(或不決定)960網(wǎng)格系統(tǒng)的架構(gòu)方式。系統(tǒng)中包含樣式表text.css,它的存在主要是為了保證絕大部分的頁面設(shè)計(jì)中,開發(fā)者可以快速定義原型,常用模塊如頭部文件,段落和列表的基本樣式。

我沒有脫離我原有方向而去做像在ALA(ALA全稱是A LIST APART,著名的前端開站點(diǎn))官網(wǎng)中用來描述入門文章所用的那種豎排文字的效果。這并不意味著我感覺這種豎排的效果無效,而實(shí)際上,我清楚看到這個(gè)效果的價(jià)值所在。我認(rèn)為這是一個(gè)棒極了的點(diǎn)子,是我崇高的追求。然而它是極其脆弱的,假如通過內(nèi)容編輯器上傳了任意大小、173px高的圖片,那在它之后的網(wǎng)頁元素就都會被打亂。

我同意它是眾多解決方法中的一個(gè),而其他則更需要去規(guī)范化。事實(shí)上,當(dāng)一個(gè)網(wǎng)站頁面設(shè)計(jì)完成的時(shí)候,絕大部分的內(nèi)容都會獨(dú)一無二的固定下來。我特意沒有去設(shè)置文字和頁面背景顏色。你也可以說我懶,但是這正是在使用Blueprint時(shí)所領(lǐng)悟到的,我必須堅(jiān)持下來。我可不希望到時(shí)有人會說:“為什么這個(gè)<th>有背景色?”。

我也沒有加入例如圖片,引用內(nèi)容等樣式,這是因?yàn)槲液苌儆玫健T僬呶铱紤]到這樣會比那種布局和原型相關(guān)聯(lián)的框架更具可設(shè)計(jì)性和更具內(nèi)容導(dǎo)向性?,F(xiàn)在能使你輕易的寫一個(gè)一次性的屬于你的樣式表了。

因此,假如我的網(wǎng)格系統(tǒng)并不如你想象的那樣,我希望你們原諒我。盡管我很喜歡披頭士,而且我不會手下留情。

正文

簡單的說了下960網(wǎng)格系統(tǒng)不去做的內(nèi)容之后,我們來強(qiáng)調(diào)一下該系統(tǒng)的基本特性。首先,對于熱愛linux的用戶。在linux系統(tǒng)里默認(rèn)的字體順序是這樣的:Helvetica, Arial, Liberation Sans和FreeSans,還有通用的sans-serif。

在Ubuntu系統(tǒng)里,我發(fā)現(xiàn)它使用的默認(rèn)字體san-serif 的寬度更接近Verdana (相比于Helvetica 和Arial)。這并不是很大問題,但是如果你需要讓你的頁面在各種瀏覽器上表現(xiàn)一致的話,你要做的不僅僅是為linux用戶選擇一個(gè)通用的字體。假如你按某一大約寬度的字體來確定塊的大小的話,這顯得相當(dāng)重要,仔細(xì)觀察下,頁面很可能在換行的時(shí)候出現(xiàn)問題。

當(dāng)我將此問題跟我朋友Yannick說了后,他建議我使用在Fedora和Red Hat 兩款Linux操作系統(tǒng)都默認(rèn)使用的Liberation Sans字體。同時(shí)它也可以在通用公共許可證的保護(hù)下簡單自由地獲得,如此的與眾不同。假如非讓我去描述它,我可以說改字體里數(shù)字像用了Verdana,而其他則像用了Helvetica。

在讀過 Jon Christopher’s 的文章后,知道FreeSans最接近Ubuntu下的默認(rèn)字體 Helvetica。因此,在text.css的font-family下的設(shè)置是頁面字體同時(shí)適應(yīng)MSX(MAC OS Ten),Windows和基于Linux的系統(tǒng)。

調(diào)整與間隔

在我們書生氣十足的要為字體的像素?cái)?shù)驚醒大辯論的之前,且聽我說,我暫且將此按下不表。我十分清楚你們的論點(diǎn),甚至在做更富有彈性的頁面是參考了你們的觀點(diǎn)。對于我來說,這就是重復(fù)投資。你可以花上無數(shù)小時(shí)在考慮字體的大小,繼承問題,就像我當(dāng)時(shí)做Geniant Blog那時(shí)一樣,或者你可以在以后都一個(gè)個(gè)像素的調(diào)整。

我發(fā)現(xiàn)Blueprint上文本字體使用了12px,但是YUI(Yahoo user interface)的fonts.css將文本文字定義為13px。除了對他們按百分比的調(diào)整方法有異議之外,我確實(shí)非常喜歡他們實(shí)現(xiàn)排版的方式。我們已經(jīng)將這些運(yùn)用在Geniant Blog上,以實(shí)現(xiàn)更好的效果(雖然這個(gè)工作耗費(fèi)了很多時(shí)間精力)。

當(dāng)我不得不小心點(diǎn)設(shè)置一個(gè)垂直的基線時(shí),可以選用body中文本字體大小是13px,算上1.5倍行高(line-height)則是19.5px。絕大多數(shù)塊級別的元素的底部邊距為20px。這樣一來,你非常容易就得到了一個(gè)一致的基準(zhǔn)線。這只需要調(diào)整標(biāo)題的行高而已。

有兩個(gè)塊級別的元素我沒有將設(shè)置它的底部邊距,它們分別是blockquote 和form。在strict文檔類型定義里面,要求所有其他的塊級元素都在它們里面。比如:paragraph標(biāo)簽在blockquote里面,或者fieldsets標(biāo)簽在form里面。盡管它不可以設(shè)置什么邊距,但是那些塊級的子元素可以整齊的排列在里面。

我已經(jīng)將list元素設(shè)置為左縮進(jìn)30px,假如你要頂端對齊,則將縮進(jìn)像素?cái)?shù)歸零。我實(shí)際上認(rèn)為對齊了標(biāo)點(diǎn)符號是相當(dāng)酷的,但還沒有碰到有這種需求的顧客,于是我在在CSS文件中對應(yīng)的地方改掉了,以免產(chǎn)生不必要的爭論。

:Focus

我只是簡單的再說下這觀點(diǎn),這觀點(diǎn)相當(dāng)普遍。盡管我個(gè)人認(rèn)為Eric Meyer將reset.css中的":focus"移除的確是使頁面更美觀,但我想保留焦點(diǎn)的邊框才是正道,因?yàn)橛胁糠钟脩羰鞘褂面I盤來點(diǎn)擊鏈接的,而非鼠標(biāo)。

為了讓代碼兼容Opera瀏覽器,代碼編寫上花了較長的時(shí)間。這是因?yàn)镺pera瀏覽器中根本就沒有類似:focus這樣的不標(biāo)簽。不管怎么說,假如你希望你的鏈接看起來更簡潔一點(diǎn),你可以將text.css中的a:focus去掉,同時(shí)你要知道你的操作將會使你設(shè)計(jì)犧牲了網(wǎng)頁的到達(dá)無障礙性。

960網(wǎng)格系統(tǒng)中與Blueprint有著不少大不相同的地方,除了命名規(guī)則不一樣外,還有各列獲得各列之間的間隔的方式也大不相同。在Blueprint中,每個(gè)列直接的間隔都是10px(對我來說,覺得太少了),而且都是在列的右邊。每行的最后一列要用class="last"來去掉它本身的右邊的間隔。這意味著不管在容器的左邊還是右邊,都必須會有空隙。在大多數(shù)的情況下,這不會有什么大問題,但是如果如果用戶的使用了特殊的瀏覽器,實(shí)際上使用Chrome瀏覽器時(shí)就會顯示出不正常。

在960網(wǎng)格系統(tǒng)里,每一列都是左右各有邊距10px,這是考慮到有些容器會留有10px作為邊上的緩沖,而且列與列中間的寬度會達(dá)到20px,還有一個(gè)就是:沒有必要在每行最后一列額外的指定class來清除多余間隔。

在少數(shù)情況下,你可能需要將一個(gè)網(wǎng)格嵌套在另一個(gè)網(wǎng)格里面。在這種情況下,你需要用class="alpha",用在嵌套在里面每一行的第一個(gè)網(wǎng)格,用class="omega"在嵌套在里面的網(wǎng)格的每一行的最后一個(gè)網(wǎng)格。這稍微增加了你工作量,但是這就是比較邊緣的情況,并不會出現(xiàn)得太多。

我特地選用了這樣一種方式約定命名規(guī)則,使用grid_xx,出于以下幾種考慮,假如用span-xx這類會容易把人弄糊涂,因?yàn)?lt;span>,<td colspan="x">和<colgroup span="x">在HTML標(biāo)簽早已存在了。我想只有在這幾個(gè)標(biāo)簽或?qū)傩詻]有被使用的情況下我才選擇這個(gè)命名規(guī)則。同時(shí)我也不喜歡一而再的用這種——class="column...",雖然這個(gè)方法是不錯(cuò)的,但是Bluprint那伙人在最近的項(xiàng)目中把這個(gè)東西用濫了。

你通過給網(wǎng)格樣式用prefix_XX 或者suffix_XX組合控制,就可以很容易的在每個(gè)單元網(wǎng)格的前面或后面添加空白的列(欄),這很像Blueprint。命名規(guī)則其實(shí)是按個(gè)人喜歡,就像我確實(shí)很容易就被諸如“Append”這些詞搞昏頭,所以還是少惹它為妙。

IE瀏覽器

今天又不少人問我有關(guān)960網(wǎng)格系統(tǒng)的IE兼容的問題,還有壓縮包里面為什么ie.css這個(gè)文件?簡單的說,本系統(tǒng)根本不用進(jìn)行修補(bǔ)來適應(yīng)IE瀏覽器。IE6有個(gè)頑固的問題,就是在任何浮動的元素的margin顯示上都會是控制上的兩倍?;蛘哌@是個(gè)大問題,但是在那些浮動的元素樣式控制上添加display:inline后能很好地解決這問題。這方法對其他瀏覽器也沒有任何副作用,所以在在主樣式表——960.css里很容易找到這段代碼。

你也許也會發(fā)現(xiàn)<hr />在IE6和IE7下,在畫出的橫線的四方都會有些空隙,其中上下各有大概7個(gè)像素的空隙。通過調(diào)節(jié)<hr />的margin屬性很容易解決這個(gè)問題。對于我來說,這個(gè)問題還可以接受,并不值得通過再加css控制來修復(fù)它。假如你非要給解決這個(gè)問題的話,你單獨(dú)寫個(gè)css來兼容IE瀏覽器吧,記住,要單獨(dú)寫個(gè)css文件和做好標(biāo)注。

清除元素

最后一點(diǎn),我想說說960.css中的清除元素的方式。這是我個(gè)人最喜歡的部分,通過添加極少數(shù)標(biāo)簽就可以清除任何元素。由于我之前已經(jīng)大篇幅說過了這問題,這里就不再展開細(xì)說了。基本上,通過添加“class="clear"”在對應(yīng)的你希望消除的<span>或者<div>這類的標(biāo)簽里,就可以讓對應(yīng)內(nèi)容“消失”。唯一的影響就是它同時(shí)會消除浮動。

對于一些不想將自己HTML代碼弄得“如此混亂”的人,其實(shí)還有其他清除的方法——你可以通過CSS來增加標(biāo)簽,而這種方法已經(jīng)有非常豐富的文檔可參考。實(shí)際上,通過添加class="clearfix"到元素里,是清除元素后方的內(nèi)容。

使用許可

整個(gè)源代碼壓縮包是完全免費(fèi)的,許可發(fā)布遵循GPL和MIT。其實(shí)我也不是非常清楚這兩個(gè)東西,按我理解遵循這兩個(gè)許可證發(fā)布協(xié)議以為著你可以將我的代碼用在任何情況下(商用或者自用)。在這我尤其要感謝我的朋友Michael Montgomery ,感謝他那些不是很專業(yè)的建議,感謝他幫我在各種法律術(shù)語之間理清了思路。他白天是個(gè)有資質(zhì)的律師,晚上則是網(wǎng)絡(luò)武士,幫我修飾960網(wǎng)格系統(tǒng)的文字資料。

尾聲

好了,伙計(jì)們,就這樣了。真心希望960網(wǎng)格會對你們的畫草圖,搭建框架,網(wǎng)頁設(shè)計(jì)/編碼等工作有所幫助。

近期計(jì)劃做一個(gè)教程,關(guān)于“如何通過jQuery添加樣式hooks來控制網(wǎng)頁元素”,因?yàn)榻谧鲞^這類型的東西,有經(jīng)驗(yàn)想跟大家分享。我不認(rèn)為JS應(yīng)該出現(xiàn)在CSS框架里面。所以這是個(gè)獨(dú)立的教程系列。


相關(guān)文章

首頁  電話  咨詢  頂部