很多新手一听到切图就头大，觉得那是设计师的活儿，跟写代码半毛钱关系没有。其实不然，懂切图才能写出干净利落的代码，不然以后改页面能把你折磨死。今天我就掏心窝子聊聊，怎么用最笨但最稳的方法，把设计稿变成网页。

咱们先说工具。别整那些花里胡哨的新软件，Adobe Dreamweaver（简称DW）虽然老，但它的代码视图和可视化视图切换，对新手最友好。你要做的第一步，不是打开DW，而是打开你的设计稿。

我有个徒弟，叫阿强，刚入行那会儿，拿着PSD文件就往DW里拖，结果出来的代码乱成一锅粥，连他自己都看不懂。后来我让他把设计稿里的每个模块拆开，比如头部、导航、轮播图、内容区、底部，一个个单独保存为图片。这一步叫“切片”，但别用PS里那个复杂的切片工具，直接用矩形选框工具，把每个块框起来，导出为PNG或JPG。

为什么强调导出格式？因为PNG透明背景好用，JPG图片小加载快。阿强当时图省事，全导出成PSD，结果我让他改个颜色，他对着几十个图层发呆，半天不动手。这就是教训。

接下来，回到DW。新建一个HTML文件，别急着写代码，先搭骨架。用div标签把刚才拆开的模块框起来。这时候你可能会问，dw怎么切片做网站，是不是得用表格？早过时了。现在都用div+css布局。

我在做那个本地餐饮网站项目时，客户非要搞个复杂的瀑布流布局。我一开始也懵，后来想想，不就是把图片按行排列吗？我用div包裹每个商品卡片，然后给外层容器加个flex布局。代码就几行：display: flex; flex-wrap: wrap; 搞定。比用table标签简单多了，而且手机端适配也方便。

这里有个坑，新手容易犯。就是图片路径。很多人直接复制粘贴图片文件夹，结果换台电脑就打不开图。你得用相对路径，比如img/header.jpg。我在检查阿强的代码时，发现他用了绝对路径，结果部署到服务器后，图片全裂了，客户急得跳脚。

还有，别忽视注释。在DW里写代码，每段div结束的地方，加个注释，比如。这看着麻烦，但三个月后你再看自己的代码，能救命。我见过太多人，代码写得像天书，自己改都找不到北。

关于响应式，现在手机流量比电脑大得多。别想着做两套网站，一套用CSS媒体查询就能搞定。比如，当屏幕宽度小于768像素时，让导航栏变成汉堡菜单。我在做那个民宿网站时，特意加了这段代码，结果客户说转化率提升了20%，因为手机端浏览体验好了。

最后，别追求完美。代码不需要像艺术品一样优雅，能跑通、能加载、能兼容主流浏览器就行。我见过有人为了一个像素对齐，调了三天CSS，最后客户说“差不多得了”。这就是现实。

总结一下，dw怎么切片做网站，核心就是拆得细、搭得稳、写得清。别被那些高大上的术语吓住，就是简单的div嵌套和css样式。多练，多改，多踩坑，自然就熟了。别怕代码丑，能跑就行。毕竟，网站是给用户看的，不是给程序员欣赏的。