網(wǎng)站開發(fā)中，將PSD轉(zhuǎn)換成HTML的操作中，關(guān)鍵步驟是將PSD擴(kuò)展設(shè)計(jì)轉(zhuǎn)化為可兼容、零誤差、靜態(tài)、高質(zhì)量、語義性、注釋明確并經(jīng)W3C驗(yàn)證的手編程序XHTML / CSS / HTML標(biāo)記，準(zhǔn)確的HTML編碼是基于靜態(tài)web布局與跨瀏覽器兼容性在PSD上添加高級功能最重要的一個方面，用HTML編碼設(shè)計(jì)，需要具備下列條件:

?豐富的編碼經(jīng)驗(yàn)

?淵博的編碼知識

?極高的關(guān)注度

?扎實(shí)的Html實(shí)踐功底

許多開發(fā)人員(無論是初學(xué)者還是有經(jīng)驗(yàn)的)在使用XHTML / HTML代碼時都存在一定困難，容易犯一些常見錯誤，這里向大家推薦幾個將PSD轉(zhuǎn)換為XHTML / HTML/CSS的編碼技巧：

?不在線條樣式中使用

?正確編碼web頁面下設(shè)計(jì)樣式

?使用恰當(dāng)?shù)臉?biāo)記，

這是開發(fā)人員常犯的一個錯誤，混亂使用標(biāo)記會嚴(yán)重影響視覺美感，建議大家使用小寫字母，能使頁面看起來清晰美觀。從用戶角度而言，網(wǎng)站設(shè)計(jì)沒有吸引力，就會大大縮短訪客在網(wǎng)站上的停留時間，減少成交量，所以恰當(dāng)?shù)臉?biāo)記直觀重要。

?圖標(biāo)導(dǎo)航應(yīng)該體現(xiàn)用戶友好型

簡單明了，復(fù)雜乏味的導(dǎo)引圖標(biāo)指示會讓客戶覺得無聊，用起來費(fèi)勁，高質(zhì)量的導(dǎo)航是一個網(wǎng)站保持魅力的關(guān)鍵，因此，結(jié)合使用CSS和無序列表元素能使網(wǎng)站導(dǎo)航菜單美觀大方，訂單頁面也是不容錯過的重要點(diǎn)，一個好的訂單頁面能讓用戶感覺親切、舒服，引導(dǎo)消費(fèi)。

?許多開發(fā)人員喜歡運(yùn)用div標(biāo)簽調(diào)整段落

在div周圍增加使用多個div標(biāo)簽，這時候就需要將元素正確分類，使得頁面看起來整潔，注意塊元素和內(nèi)聯(lián)元素，塊風(fēng)格元素有div h1，h2，h3，ul，p，ol，塊引用等等；內(nèi)聯(lián)風(fēng)格元素有span，a，em，img，strong，br，acronym等等。

上面提到的小技巧都是經(jīng)過實(shí)踐總結(jié)出來的最有效的方法，希望能幫助你把PSD順利轉(zhuǎn)化為HTML，避免一些不必要的錯誤。

智能社 撰稿，更多知識請關(guān)注微信號zhi_neng_she ，具體代碼可在公眾號內(nèi)‘技術(shù)圈’獲得！

個故事~

很久很久以前，并沒有前端的說法 ，那當(dāng)時叫什么呢？ 當(dāng)時的叫法很多，切圖，切版，重構(gòu)都有叫，很模糊，并不像設(shè)計(jì)，程序有一個明確的叫法。

過去

我記得2009年，我項(xiàng)目老大扔給我一個psd，跟我說把這個圖切一下，或這個這個項(xiàng)目需要切圖，說的就是 psd轉(zhuǎn)html，言下之意就是指的前端開發(fā)，html+css+js交互。

原因

因?yàn)槟莻€時候，網(wǎng)站注重外觀和功能，前端并不被重視，而前端的工作一般是設(shè)計(jì)師和程序 作為附屬“功能”做的，公司幾乎沒有獨(dú)立的web前端崗位。

很不幸，我經(jīng)歷了“三劍客”，table布局時代，和因?yàn)槭且幻岸薳r被人鄙視過。

誤解

后來暴增了很多人學(xué)web前端，不是從那個年代走過來的，通常對于切圖表示不削，認(rèn)為切圖低級，前端高級，其實(shí)不是這樣的，殊不知這種眼光暴露了你的前端er的年齡。

所以，珍惜身邊跟你說切圖的人吧，沒準(zhǔn)他可能就是大牛。

因愛好結(jié)識

我是喜歡前端，干了前端，我不是高手，但算得上老手，我的目前規(guī)劃是，前端，我打算再干10年。

qq6133576，歡迎一起交流。