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