psd轉html工做平常+工程目錄梳理

1.拿到公司設計師給的PSD圖（PC端給的是1920px的設計稿，移動端給的750px的設計稿）。
2.本身新建一個項目目錄（默認有css，js,images文件夾以及一個index.html文件）。
3.分析設計圖

產出：
圖片
圖標(svg)
到http://www.iconfont.cn/
將全部的svg圖標轉換成字體圖標
到網站https://icomoon.io/app/#/select，

fonts文件
style.css文件


圖片格式：

• 切的圖片須要透明的選擇png-24格式，
• 顏色多樣且不須要透明的選擇jpg品質60
• 切出來的所有圖片在https://tinypng.com/網站上進行PNG和jpg的圖片壓縮。

PNG-8和PNG-24的區別，

• PNG-8適合顏色比較單一的圖片如純色，logo，圖標相對圖片大小比較小；
• PNG-24適合顏色比較豐富的圖片相對圖片大小比較大,如今幾乎選用png-24

index文檔結構
.css文件（重置樣式：normalize.css，公共樣式：common.css，頁面樣式：index.css）


ui產出
PSD設計稿

前端產出(純靜態頁面產出（不涉及數據交互，不須要寫ajax）)
根據設計稿，

• 書寫html主體結構

css書寫

• 盒子模型，定位，flex佈局，百分比，圓角，行高，背景圖片

js書寫

• jq插件使用，click，導航切換
• show,hide,for,length,tap,find,
• hasClass,removeClass,addClass,
• text,html,
• indexOf,split,
• parseFloat,Number,toFixed

完成全部html，css,js後，對css和js進行壓縮。
項目打包交付給後端人員。


js交互師(ui組件)
涉及數據交互，寫ajax