夜光带你走进 前端工程师（七）
夜光序言：
对心灵如水，既柔顺又稳重，既驯服又坚强，可弯而不可折的人，我会永远温柔和真诚。
正文：
1：切片
一般是用ps ,firework , 我说的话是用ps来进行
减少网页加载时间，制作动态效果，优化图像
2：制作切片的工具，准备工作
快捷键c 【ps】
第三个才是，帅气
一：另存psd 文件 以便于编辑操作
不会破坏源文件
二：整合ps的图片
建造几个组，养成好习惯
切片具体操作：
一：分割切片
哪些需要切片，哪些不需要，心中清楚
Ctrl+R 【显示出标尺】
按住alt 【放大图片】
二：切片的类型（用户切片，非用户切片）
蓝色{用户切片}和灰色{非用户切片}
蓝色的需要的，灰色的非用户切换
1：根据颜色范围来切
2：切片大小
切的越小越好
3：切片区域无整性
4：导出类型
颜色单一过渡少的，应该导出为GIF
颜色过渡比较多的，应该导出为JPG
有动画的应导出为GIF动画
5：保留源文件
切片的图层显示与隐藏
背景图片的切片
不规则图片的切片
切片的编辑和删除
如何保存：
alt+shift+ctrl+s
按住空格可以拖动
图片质量越高，越清晰 80差不多了
所有用户切片 选这个就可以了
切片的技巧：
渐变
阴影：先把背景隐藏掉，在导出为png格式的图片即可
规则
精准的一个微调，可以做到切片更加精准
切片如何插入到网页中
十分关键一步：
<img src=”” width height alt>
#div1{
Background:url()
}
<div id=”div1”></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
background:url(file:///G:/2018%20%20%20%204%E6%9C%88%20%E6%AF%8F%E6%97%A5%E8%AE%AD%E7%BB%83%E9%9B%86%E5%90%88%20%20%E7%A7%AF%E6%B7%80%E5%AE%9E%E5%8A%9B/2018%204.%20%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5%20%20%E5%88%9B%E5%AE%A2%E5%AD%A6%E9%99%A2/images/%E5%88%87%E7%89%871_09.jpg);width: 60px;height: 80px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html> //我发现dw 可以进行 ，但是 那个在ws中就有点问题，无奈~