dw 也就是 Adobe Dreamweaver，它是可视化加代码双模式的网页设计软件，既可以用拖拽可视化面板搭建页面，也能直接编写 html css js 代码，适合新手入门网页设计，也可以用来制作静态官网产品展示页，它最大特点是所见即所得，设计视图里调整布局，代码视图会自动生成对应的源码，不用全部手写代码，但是现在主流网页设计已经大量使用响应式布局，dw 自带的传统表格布局方式已经比较老旧，做现代网页设计的时候，还是需要掌握 css 弹性布局网格布局知识，软件只是编辑工具，网页最终效果还是由代码决定，很多初学者容易只依赖拖拽，不理解底层代码，后续修改页面会很困难，dw 支持本地预览，编辑完成之后可以直接在浏览器查看效果，调试无误再上传服务器上线。

基础功能模块对照表

网页设计完整操作步骤

第一步 新建站点，打开 dw，在站点菜单新建本地站点，设置站点本地根文件夹，把网页图片素材全部放进这个文件夹，后续所有网页文件统一放在站点目录，避免路径出错图片丢失。

第二步 新建网页文档，选择 html 空白页面，设置页面基础属性，修改网页标题，设置页面背景颜色 边距 默认字体，这些基础参数可以在页面属性面板完成。

第三步 页面结构搭建，在拆分视图，一边看设计视图一边写代码，用 div 划分头部导航 主体内容 底部页脚区块，不推荐新手长期使用表格布局，优先使用 div 加 css 来做页面框架。

第四步 添加页面元素，插入文字 图片 超链接 表单按钮，图片插入的时候一定要选择站点内部相对路径，不要使用本地绝对路径，不然上传服务器之后图片无法显示。

第五步 编写 css 样式，给文字设置字号颜色行高，给区块设置宽度 间距 对齐方式，实现排版美化，如果需要响应式，添加媒体查询代码，让网页在手机电脑不同屏幕自动适配。

第六步 本地预览调试，按快捷键在浏览器打开网页，检查排版错位 链接失效 图片加载失败，切换代码视图修改问题，反复预览迭代。

第七步 站点上传上线，配置 ftp 信息，填写服务器地址账号密码，连接远程服务器，把整个站点文件上传，上传完成之后通过域名访问测试网页。

进阶设计要点

1 网页命名规范，文件名使用英文小写，不要中文空格特殊符号，防止服务器识别报错

2 素材优化，图片压缩之后再导入 dw，图片体积太大会造成网页加载缓慢

3 代码规范，代码缩进统一，注释标注区块功能，方便后续维护修改

4 兼容性测试，除了默认浏览器，还要测试不同浏览器打开网页是否样式错乱

5 备份文件，每次修改之前复制一份站点备份，防止误操作把原有网页代码覆盖

整体来说 dw 做网页设计核心是建立站点，搭建页面结构，搭配 css 美化，本地预览之后 ftp 上传，dw 优势是可视化降低入门门槛，但是它不能替代网页设计的基础知识，如果要做复杂动态交互网站，dw 只能负责前端页面，还需要搭配后端程序。

【常见问题】

问题 1 dw 怎么做网页设计之后怎么预览

回答 1 dw 怎么做网页设计完成之后，可以使用软件内置预览功能，选择在浏览器中预览，本地直接打开网页查看效果，预览的时候要确认所有素材都在 dw 站点文件夹内，否则预览会出现图片缺失。

问题 2 dw 怎么做网页设计可以做响应式网页吗

回答 2 dw 怎么做网页设计支持响应式网页制作，只需要在代码里面添加 css 媒体查询，设置不同屏幕宽度对应的样式，dw 的拆分视图可以一边写代码一边查看页面变化。

问题 3 dw 怎么做网页设计图片不显示是什么原因

回答 3 dw 怎么做网页设计出现图片不显示，大多是图片使用绝对路径，或者图片没有放进 dw 站点目录，需要改成相对路径，并且确认图片文件没有被删除或者重命名。

问题 4 dw 怎么做网页设计必须会手写代码吗

回答 4 dw 怎么做网页设计不是必须完全手写代码，可视化设计视图可以拖拽生成基础代码，但是想要精细调整样式解决错位问题，还是需要看懂 html 和 css 代码。

【免责申明】

本内容仅为软件网页设计操作参考，不构成购买推荐，软件版本不同界面功能会存在差异，实际操作以当前版本官方说明为准，因操作失误代码错误造成文件损坏由使用者自行承担。