多個(gè)細(xì)節(jié)幫助你更優(yōu)雅地書寫頁面

我們常以“整齊”，“易讀”，“親切”，“易于維護(hù)”，“復(fù)用性強(qiáng)”等來形容一些優(yōu)秀的開發(fā)者所寫的代碼。現(xiàn)在，對(duì)代碼的好評(píng)還有一個(gè)更為時(shí)尚的詞“優(yōu)雅”，是不是聽起來覺得很親切呢？

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

從Photoshop開始

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

視覺元素的分離和拼合

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

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

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

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

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

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

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

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

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

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

gif與png-8圖片的雜邊

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

Photoshop的這個(gè)顏色表中可以看到，只有這一個(gè)全透明索引色。

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

點(diǎn)擊“雜邊”旁邊的小箭頭，下拉菜單中即可以選擇“無”。

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

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

勾選“透明度”后，實(shí)際上保存的是png-32。

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

為IE6單獨(dú)保存的png-8圖。

書寫內(nèi)容與HTML

在寫html之前，仔細(xì)閱讀UI設(shè)計(jì)稿是必要的。一方面，理清頁面的各個(gè)組成部分以及這些組成部分相互之間的聯(lián)系。另一方面，分析頁面及頁面的組成部分應(yīng)該用怎樣的DOM結(jié)構(gòu)實(shí)現(xiàn)。

頁面的DOM結(jié)構(gòu)因人而異。從基礎(chǔ)的層面來說，只要能夠?qū)崿F(xiàn)UI設(shè)計(jì)稿的意圖，用什么DOM結(jié)構(gòu)都是可行的。而從專業(yè)的層面來說，頁面的DOM結(jié)構(gòu)不僅要易于其他的開發(fā)者辨識(shí)和讀取，方便協(xié)同開發(fā)，而且要有良好的可維護(hù)性和拓展性，方便后續(xù)的增減和更新。

語義化or非語義化
“語義化”的意思是說，在寫html時(shí)，依照頁面的內(nèi)容，選取最合適的html標(biāo)簽，以體現(xiàn)html標(biāo)簽的本意。如<p>表示文本段落，那么如果一段文本確實(shí)是段落，那么就應(yīng)該把它們放在<p>標(biāo)簽中，而不是使用沒有語義的<div>。