网站切图前的思考

在干活之前，首先要看一下我们正在处理的是什么类型的页面。大体分三种类型吧，图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等）。

第一种页面往往是一次性的，交互功能也较少，但对产出速度往往要求较高。因此，通常用你说的第二种方法就可以打发了。至于用什么工具，我通常会用 Photoshop 的切片功能直接导出 HTML 表格和图片，再用文本编辑器和 Dreamweaver 稍做加工。

而第二、第三类页面，通常具有很长的生存期，对质量要求很高——语义化、性能、可维护性等等。因此，通常需要手写 HTML 和 CSS 代码，并精确裁剪、优化图片——这基本上就是你说的第一种方式。这种做法跟浏览器兼容性没什么关系（如果真要谈兼容，表格布局的兼容性往往更好），只是这样做出来的页面质量更高。虽然也有一些自动化的 “PSD → HTML + CSS + 图片” 的工具存在，但并未成为主流，主要原因还是代码质量无法达到期望的程度。