網(wǎng)站分析：多個細(xì)節(jié)幫助你更優(yōu)雅地書寫頁面

來源:網(wǎng)站推廣 2013-01-26

快速提升網(wǎng)站銷量，使用365webcall網(wǎng)頁客服工具

頁面的DOM結(jié)構(gòu)因人而異

【編者按】本文作者@EdwardUp 我們常以“整齊”,“易讀”,“親切”,“易于維護”,“復(fù)用性強”等來形容一些優(yōu)秀的開發(fā)者所寫的代碼現(xiàn)在,對代碼的好評還有一個更為時尚的詞“優(yōu)雅”,是不是聽起來覺得很親切呢?

頁面是互聯(lián)網(wǎng)產(chǎn)品的表現(xiàn)層面,不僅講求外觀,而且會應(yīng)對更新迅速的互聯(lián)網(wǎng)產(chǎn)品需求要成為一名優(yōu)秀的開發(fā)者,經(jīng)驗積累是必不可少的,而一部分經(jīng)驗歸納起來正是在工作過程中的細(xì)節(jié)下文介紹的即是在頁面開發(fā)流程中的多方面的細(xì)節(jié)內(nèi)容,希望對這些細(xì)節(jié)內(nèi)容的探討,可以幫助各位頁面開發(fā)者做得更出色,以更優(yōu)雅的姿態(tài)來書寫頁面

從Photoshop開始

從UI設(shè)計稿到靜態(tài)頁面一般都稱作“切圖”這個詞很容易令人聯(lián)想到Photoshop中的“切片工具”,但現(xiàn)在切片工具用得并不多,大部分在頁面中需要用到的視覺元素,都需要拼合到一個或多個單獨的圖片中

視覺元素的分離和拼合

快速更新的互聯(lián)網(wǎng)產(chǎn)品需求使得UI設(shè)計師需要優(yōu)先保證UI設(shè)計稿的視覺效果,也因此有時候沒有時間整理UI設(shè)計稿源文件所以,拿到手邊的UI設(shè)計稿,可能存在圖層缺少命名,分組混亂等問題

如何快速找到需要分離的視覺元素所在的圖層?這時候應(yīng)該使用的是Photoshop的“自動選擇”另外要注意的是,某些邊緣陰影及高光是由圖層樣式生成的,在選取這些部分時應(yīng)選取旁邊的實際繪圖內(nèi)容

Photoshop的“移動工具“,在使用時勾選一個“自動選擇”的復(fù)選框即可此外可以設(shè)置是自動選擇圖層還是圖層所在的分組

拼合是在一個新建立的psd源文件上進行,命名應(yīng)當(dāng)與最后輸出的圖片命名相同拼合時應(yīng)當(dāng)使用網(wǎng)格做整齊的排列(快捷鍵Ctrl + ‘ 切換網(wǎng)格顯示)整齊的拼圖不僅方便多人編輯,而且css代碼中的背景坐標(biāo)定位會更加快捷(誰都喜歡有規(guī)律的數(shù)字)

在Photoshop的編輯→首選項中可以設(shè)置合適的網(wǎng)格尺寸

為方便后續(xù)編輯,拼圖源文件應(yīng)適當(dāng)保留原UI設(shè)計稿圖層(如保留文本圖層,不做圖層合并,方便以后的文本更改),同時做好圖層命名和分組此外,推薦在底部增加2個圖層:底色層和網(wǎng)格尺寸描述層

底色層:Photoshop默認(rèn)的表示透明區(qū)域的網(wǎng)格背景(和前面的尺寸標(biāo)識的“網(wǎng)格”不同)中,子網(wǎng)格的邊線不容易看清而加上一個鋪滿全畫布的底色,網(wǎng)格線就很容易辨識了底色一般用純白色即可,對于部分顏色偏白的UI元素,可以填充黑色作為底色底色層只是方便排列元素,在輸出圖片時,底色層設(shè)置為不可見再輸出

網(wǎng)格尺寸描述層:空白圖層,采用“20×20”這種格式的命名,說明使用的網(wǎng)格尺寸大小這樣,多人編輯時,可以方便別人很快的設(shè)置出適合編輯此拼圖源文件的的網(wǎng)格尺寸

拼圖源文件一定要保存到開發(fā)目錄中,可以在images目錄中,單獨建立命名為_psd的目錄,然后相關(guān)的拼圖源文件都保存在這個目錄中

對應(yīng)的,在靜態(tài)頁中用作圖片占位和示意的臨時圖片(如用戶頭像),可以保存在命名為_temp的目錄中

gif與png-8圖片的雜邊

為什么gif和png-8格式的圖片存在雜邊?這是因為,gif和png-8格式的圖片使用的是索引顏色編碼,而索引顏色中,只存在全透明索引顏色(用來繪制全透明的像素點,也即空白點),而不存在半透明索引顏色但是,一般的視覺元素的邊緣都存在半透明的像素點以形成視覺上的平滑過渡,這些半透明點要保留到gif和png-8,就必須指定用一種實色替代這也就是Photoshop中的雜邊選項的意義

Photoshop的這個顏色表中可以看到,只有這一個全透明索引色

Photoshop中也可以選擇雜邊為“無”,這時半透明點會被丟棄,不再保留到輸出的圖像中由于邊緣缺少用作過渡的像素點,這樣的圖像可能會有明顯的鋸齒,多數(shù)情況下效果不佳

點擊“雜邊”旁邊的小箭頭,下拉菜單中即可以選擇“無”

如果選擇一個顏色作為雜邊色,Photoshop在生成索引顏色表時會把圖像中的半透明像素點也考慮進去,并用合適的索引顏色(參考選定的雜邊色)替換這些半透明像素點存在雜邊色的gif和png-8圖中的視覺元素,處于和雜邊色相同的背景色中的時候,效果最佳,所以雜邊色的選取應(yīng)參考最終元素所在的背景

如果有多種類別的背景而無法保證效果,應(yīng)使用png-24這里的png-24實際上基本都是png-32,即應(yīng)包含透明度alpha通道這樣表述也是因為在Photoshop中,只用了一個復(fù)選框的設(shè)置來區(qū)分png-24和png-32

勾選“透明度”后,實際上保存的是png-32

針對不支持png-32的IE6,單獨輸出一個效果較差的png-8或gif,在一定程度上保證IE6的正常外觀這也是針對不同瀏覽器的“漸進增強”開發(fā)思想的體現(xiàn)

為IE6單獨保存的png-8圖

書寫內(nèi)容與HTML

在寫html之前,仔細(xì)閱讀UI設(shè)計稿是必要的一方面,理清頁面的各個組成部分以及這些組成部分相互之間的聯(lián)系另一方面,分析頁面及頁面的組成部分應(yīng)該用怎樣的DOM結(jié)構(gòu)實現(xiàn)從基礎(chǔ)的層面來說,只要能夠?qū)崿F(xiàn)UI設(shè)計稿的意圖,用什么DOM結(jié)構(gòu)都是可行的而從專業(yè)的層面來說,頁面的DOM結(jié)構(gòu)不僅要易于其他的開發(fā)者辨識和讀取,方便協(xié)同開發(fā),而且要有良好的可維護性和拓展性,方便后續(xù)的增減和更新

語義化or非語義化

“語義化”的意思是說,在寫html時,依照頁面的內(nèi)容,選取最合適的html標(biāo)簽,以體現(xiàn)html標(biāo)簽的本意如

表示文本段落,那么如果一段文本確實是段落,那么就應(yīng)該把它們放在

標(biāo)簽中,而不是使用沒有語義的

語義化,不僅有利于SEO,而且更重要的是使網(wǎng)頁內(nèi)容層次和結(jié)構(gòu)清晰,在可讀性上十分友好試想一下,如果一個頁面的標(biāo)簽中的內(nèi)容,從上下文看確實就是emphasis(強調(diào))的內(nèi)容,會不會覺得這個頁面很整潔很親切呢?

但是,語義化也不是絕對的微博的新的的站外組件(widget),并不遵從語義,僅使用限定的標(biāo)簽,如塊元素只使用

,非鏈接行內(nèi)元素只使用,圖標(biāo)只使用如下圖所示最近的新版集體微博組件

新版集體微博組件的標(biāo)題部分(紅線圈出部分)的代碼:

這樣無視語義并限定標(biāo)簽的使用,是為了盡可能減少組件被引用的站點的樣式,對組件本身樣式的干擾和都是很少使用的標(biāo)簽,

又是非語義的標(biāo)簽,這樣,站點css中以標(biāo)簽作為選擇器寫的樣式,就很少會影響到組件(沒有多少站點會直接對

等非語義標(biāo)簽寫reset或默認(rèn)樣式)

完備的class命名

先來看使用Firebug查看的以下一段html代碼(取自開發(fā)中的微博話題組件)

能看出特別的地方嗎?沒錯,就是所有的html節(jié)點,不管位于DOM結(jié)構(gòu)中多深的位置,都有自己的class命名

為什么要這么做?

首先,需要明確,少一些class命名,通過節(jié)點之間的相互關(guān)系,當(dāng)然也可以實現(xiàn)對正確的html節(jié)點設(shè)置樣式這也是我們過去寫html一般的做法,并認(rèn)為這樣可以精簡html事實的確如此,但現(xiàn)在我們應(yīng)該認(rèn)識到,精簡的html卻會帶給我們越來越麻煩的css維護

CSS Wizardry的Harry Roberts對此做了簡單的解釋說明

Imagine a teacher trying to control a class of kids who have no names. That’s how we used to write HTML >. 外觀與CSS

CSS本身很容易寫,但合理的CSS架構(gòu)卻不是一個簡單的事情要保持CSS的可維護性,最簡單的做法就是追求CSS的復(fù)用性,盡可能減少CSS量

任何時候,都要寫CSS注釋

CSS一般來說可讀性較差,因此需要我們多寫CSS注釋注釋內(nèi)容越豐富和細(xì)致越好,而且建議結(jié)合ASCII Art(字符畫)如果有時間,甚至可以在一個CSS文件中寫一個目錄

如果是后續(xù)增加更改,還可以附上時間和項目相關(guān)信息,這在多人協(xié)作中很有用

優(yōu)雅的CSS選擇器

優(yōu)雅的CSS選擇器不僅看起來親切,而且也可以提升瀏覽器的樣式渲染效率

主要使用類名(CLASS)作為選擇符,不做額外的限定

上圖中下一種寫法更好是因為非

標(biāo)簽元素也有效,標(biāo)簽可以隨意替換,而且樣式渲染時更加高效

避免不必要的繼承關(guān)系繼承寫法是為了避免相同命名的選擇符的樣式相互影響,但在層級使用上要注意適度