一个切图仔的工作日常
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个切图仔的工作日常相关的知识，希望对你有一定的参考价值。
1.拿到公司设计师给的PSD图（PC端给的是1920px的设计稿，移动端给的750px的设计稿）。
2.自己新建一个项目目录（默认有css，js,images文件夹以及一个index.html文件）。
3.分析设计图，使用PS切图工具进行切图（分析哪些内容需要切成图片，设计稿的图标，可以向设计师要这些图标的SVG图，或者到http://www.iconfont.cn/阿里巴巴矢量图网站找相应的图标svg）。
4.切的图片需要透明的选择png-24格式，颜色多样且不需要透明的选择jpg品质60，切出来的全部图片在https://tinypng.com/网站上进行PNG和jpg的图片压缩。（PNG-8和PNG-24的区别，PNG-8适合颜色比较单一的图片如纯色，logo，图标相对图片大小比较小；PNG-24适合颜色比较丰富的图片相对图片大小比较大,现在几乎选用png-24）。
5.html文件
PC端为主的响应式网站模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>网站标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="Keywords" content="网站关键字">
<meta name="Description" content="网站描述">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lt IE 9]>
<p class="browserupgrade">您的浏览器版本过旧，请到<a href="http://browsehappy.com/">这里</a>更新，以获得最佳的体验</p>
<![endif]-->
<!--网站主体内容-->
<script type="text/javascript" src="js/vendor/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/vendor/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/vendor/fastclick.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
移动端为主的模板(微信，支付宝)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no, address=no" name="format-detection">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=750">
<script type="text/javascript" src="js/vendor/mobile-util.min.js"></script>
<title>标题</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 主体内容 -->
<script src="js/vendor/zepto.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
6.css文件（重置样式：normalize.css，公共样式：common.css，页面样式：index.css）
7.js文件（依赖js:vendor文件夹--jq，zepto,fastclick,mobile-util,jquery.placeholder,html5shiv,respond;公共js：common.js，页面js：index.js）
8.根据设计稿，
---书写html主体结构
---CSS书写（盒子模型，定位，flex布局，百分比，圆角，行高，背景图片）
---JS书写（jq插件使用，click，导航切换，show,hide,for,length,tap,find,addClass,removeClass,text,indexOf,parseFloat,split,hasClass,Number,toFixed）
9.完成所有html，css,js后，对css和js进行压缩。
10.项目打包交付给后端人员。
一个纯静态页面产出的切图仔（不涉及数据交互，不需要写ajax）
以上是关于一个切图仔的工作日常的主要内容，如果未能解决你的问题，请参考以下文章