作為一個(gè)小白。在公司實(shí)習(xí)的這段期間朦朦朧朧地學(xué)會了很多很多。

1. 文件命名方面的注意問題。文件最好用英文命名，這便于后期同事的訪問。
2. 拿到設(shè)計(jì)圖時(shí)，先打開設(shè)計(jì)圖，看看有沒有公共部分之類的（一般是頭部nav和尾部footer），便于減少后續(xù)編寫代碼的時(shí)間和繁瑣性。
3. 在切取圖片之前，先按ctrl+1（photoshop的快捷鍵），這個(gè)快捷鍵可以使設(shè)計(jì)圖放大或縮小到設(shè)計(jì)圖原有的大小。這個(gè)就便于我們之后剪切出來的圖片是設(shè)計(jì)圖中正常像素（也就是設(shè)計(jì)師當(dāng)時(shí)所設(shè)計(jì)的像素）。
4. 關(guān)于圖片切圖問題。如果要圖片高清晰最好使用jpg；不過，一些特殊形狀圖片，如圓形，棱形最好使用帶透明的png格式圖片。一般設(shè)計(jì)師所給的psd圖里的圖標(biāo)（微信、qq、微博等），這些一般是圓形圖片。這些的話個(gè)人建議使用第二種——帶透明的png格式圖片。
5. 設(shè)計(jì)師所給的psd圖里面所需要的剪切的圖片，大部分都是以整數(shù)為寬高，所以剪切起來還是很方便的。但，有時(shí)如果設(shè)計(jì)師寬高少了1px（通常情況下是不可能發(fā)生的），也別多切1px。如果發(fā)現(xiàn)自己現(xiàn)在所剪切的圖片是以8或者9為位數(shù)的話。還是強(qiáng)烈建議你放大看看是不是少切了一點(diǎn)點(diǎn)（photoshop放大快捷鍵ctrl++）。
6. 關(guān)于圖片大小問題，如果在不同頁面看見相同的圖片，建議你是最好用同一張，這樣可以節(jié)省內(nèi)存。
7. 關(guān)于選區(qū)psd色系的方法。如果是文字的話，我是直接選中文字，然后查看以下信息。如圖1-1。

圖1-1
圖1-1中的紅色標(biāo)識符1代表文字的顏色、紅色標(biāo)識符2代表文字的字體、紅色標(biāo)識符3代表文字的大小、紅色標(biāo)識符4代表文字的行高、紅色標(biāo)識符5代表文字不加粗（如果是渾厚的話即為字體需要加粗）。

1. 關(guān)于圖片與圖片、文字與圖片、文字與文字之間的間距問題。我一般是用選擇工具或者切片工具查看大小。之后再編寫進(jìn)頁面里面，有時(shí)間的話，還可以展示頁面再利用電腦自帶，或者qq、微信所帶的剪切工具來與設(shè)計(jì)圖進(jìn)行像素對比。
2. 關(guān)于html文件排版問題。

①　建議css、html、js都分開存放。特殊情況下不能分開的話，盡量js代碼、css代碼別和html內(nèi)容代碼混合在一起。
②　html主要是編寫頁面內(nèi)容，也就是用戶所看見的內(nèi)容。在實(shí)現(xiàn)設(shè)計(jì)師效果圖的基礎(chǔ)上，盡量做到代碼整潔、排版規(guī)律。這樣既便于自己發(fā)現(xiàn)錯(cuò)誤、也方便后臺同事后續(xù)工作。
我現(xiàn)在學(xué)到的基本就是這些，希望可以對你有所幫助。

作者：方維網(wǎng)絡(luò)馮秋寧