网页发展史
Web 1.0 -> Web 2.0（基于 Ajax） -> Web 3.0 （基于 HTML5）
协作流程
前端职责
视觉稿（配色图标距离空间） + 交互稿（用户逻辑） = UI （用户界面）
视觉稿 -> [页面制作]
交互稿 -> [页面逻辑开发]
所需技能
- DOM (操作 HTML 及 CSS 的接口)
- JavaScript (定义页面互动)
- CSS (定义页面样式)
- HTML (定义页面结果)
- Photoshop (取图)
切图 从设计稿中切除网页的素材并在代码中引入图片 (复杂的图片或者解决兼容问题)
// 设计稿 (*.psd) -> 产出物 (*png, *.jpg)
<img src="img/avatar.jpg" alt="desc">
<style type="text/css" media="screen">
background-image: url(../img/sprite.png);
background-position: 0 0;
</style>
在全局设置下将单位修改为像素，因其在 CSS 中运用最广。设置工作区布局为切图及图片编辑做准备。
切图常用工具
| 工具名 | 示意图 | 注释 |
|---|---|---|
| 移动工具 |  |
|
| 矩形选框工具 |  |
|
| 魔棒工具 |  |
（容差 Tolerance 越小学则的范围就越小） |
| 剪裁工具 |  |
|
| 切片工具 |  |
|
| 缩放工具 |  |
|
| 取色器 |  |
图层（单层元素）与组（类似于文件夹）的区别。
辅助视图，在视图菜单下启动
- 对齐，会启动靠近吸附功能
- 标尺，Command + R
- 参考线，Command + ;
NOTE: 所有工具及快捷键如下。
所有能接受数字的属性都需要测量并尽可能百分百的还原设计稿。
- 宽度，高度 (width, height)
- 内外边距 (padding, margin)
- 边框 (border)
- 定位 (position)
- 文字大小 (font-size)
- 行高 (line-height)
- 背景位置 (background-position)
NOTE: 测量时尽可能放大画布以减少误差。量取文字是为了减少误差尽量选取尺寸大的文字进行测量。
选框工具的多用途，增（Shift）减（Alt）以及交叉选择（Shift + Alt）。左右（或上下）使用分离选框选择可以得到整两个分离边框的距离总值。
所有能接受颜色的属性都需要取色。
- 边框色
- 背景色
- 文字色
NOTE: 使用魔棒工具可以迅速识别背景色是否没线性渐变的方法。Mac OS X 推荐使用 Sip 可在 Mac App Store 免费下载。
修饰性图标和内容性图片需要（在 HTML 的 <img> 之中，只需站位不需切图）切出。切出的内容性图片应保存为 *.jpg 格式，而修饰性图片因保存为 png24（IE6 不支持半透明） 或 png8 它们不支持全透明。
隐藏文字，方法一，之间在图层中隐藏文字图层。方法二（两种，分别应对于纯色和有背景需要隐藏文本的情况）如下图所示。
PNG24切图方法
- 移动工具选中所需图层（Ctrl 多选）
- 右键合并图层（Ctrl + E）
- 复制到新图层
PNG8带背景切图方法
- 合并可见图层（Shift + Ctrl + E）
- 矩形选框选择内容
- 魔棒工具去除多余部分（Alt + 选取）
可平铺背景的切图方法
- 用矩形选择一个区域
- 复制至新图层
NOTE: X 轴平铺需要占满图片的宽，Y 轴平铺需要占满图片的高。
切片工具（大图化小的方法，将一大图分为多小图）
- 拉参考线
- 选择切片工具
- 点击 “基于参考线的切片” 按钮
- 选择切片选择工具
- 保存于新图层
- 文本编辑器 && IDE (集成开发环境)
- Google Chrome, Firefox Firebug, Safari Developer Tool