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

转载于:https://www.cnblogs.com/alan-alan/p/7423014.html