本文是 bydsf.com 建站团队的实战笔记，看完有想法可以直接联系我们：电话 18236992212，微信同号。

ps与dw怎么做网站：老站长掏心窝子，教你从设计到代码的土法子

发布时间：2026/11/6 18:49:09 · 来源：bydsf.com

本文关键词：ps与dw怎么做网站

做网站最怕啥？不是代码写不出来，而是设计稿和最终网页对不上号。我干了十五年建站，见过太多新手拿着PS做出的高大上设计，结果在DW里一拼，歪七扭八，客户直接甩脸子。其实，用PS配合DW做静态网站，核心就俩字：切图。别整那些虚头巴脑的理论，今天我就把这套“土办法”掰碎了讲给你听，让你照着做就能出活。

第一步，你得在PS里把设计稿理清楚。很多新人一上来就画，画完发现层叠关系乱成一锅粥。记住，图层命名必须规范！比如导航栏叫nav，轮播图叫banner，底部叫footer。别偷懒，到时候你在DW里找元素，全靠这名字救命。还有，背景图一定要单独存，别把文字和背景混在一个图层里，不然切图的时候你哭都来不及。

第二步，切图是技术活，也是体力活。别用PS自带的切片工具，那玩意儿生成的代码全是垃圾，DW根本没法用。正确做法是：把不需要重复的部分，比如Logo、按钮、图标，单独导出为PNG或JPG。注意，PNG要选PNG-24，保证透明背景清晰；JPG用于照片类素材，压缩率设70%左右，画质和体积平衡最好。我有个徒弟，以前切图总把按钮切得毛边严重，后来我让他用“存储为Web所用格式”，现在那按钮 crisp 得很，客户看了直点头。

第三步，DW里搭建骨架。打开DW，新建HTML文件。别急着写代码，先画个表格或者用div套div。现在流行用div+CSS，但咱们新手，先用表格定位心里有底也行，不过建议直接学div。在body里先写个大容器，比如

，然后把刚才切好的图，用

插进去。这时候你会发现，图片位置不对，别慌，这就是CSS该上场的时候了。

第四步，CSS调样式。这是最磨人的环节。你在DW里选中那个div，右边打开CSS面板。设置宽度、高度、背景图。比如导航栏，你切了个背景图，就在CSS里写background-image: url('nav_bg.png'); background-repeat: repeat-x; 这样横向重复，省得切一大长条。这里有个坑，很多新人忘了写background-position，结果背景图错位，找半天找不到原因。我当年也栽过这跟头，后来养成了习惯，每调一个位置，就保存预览，别攒着一起调，那样会疯的。

第五步，细节打磨与测试。做完别急着交差。用浏览器打开，按F12看控制台有没有报错。重点检查IE浏览器，虽然现在用的人少了，但有些老客户还在用。还有，图片路径一定要用相对路径，别用绝对路径，不然你把网站传到服务器，图片全裂了。我有个客户，以前总用绝对路径，结果换服务器后，网站成了空白页，折腾了一整天才改过来。

其实，ps与dw怎么做网站，说白了就是细心加耐心。别指望有什么一键生成的神器，那些都是骗小白的。真正的功夫，都在你切图的像素对齐里，在CSS的每一个分号里。我见过太多人，设计做得花里胡哨，代码写得乱七八糟，最后网站打开慢得像蜗牛。记住，简洁才是王道。

最后，送大家一句经验：别怕报错。DW里的红色波浪线，不是洪水猛兽，它是你在提醒你哪里写错了。每次报错，解决一个，你的水平就涨一分。我带过这么多徒弟，凡是能独立搞定ps与dw怎么做网站的人，都是被报错“逼”出来的。别怕麻烦，一步步来，你也能做出让人眼前一亮的网站。

（注：文中提到的“crisp”是英语单词，意为清晰，这里指图片边缘锐利，没有模糊。另外，CSS中background-repeat属性如果只写repeat-x，记得分号别漏了，不然样式可能不生效。还有，切图时，如果背景是纯色，直接用CSS写background-color:#fff;比切图更省流量，这个细节很多新人容易忽略。）