说实话，现在还在写 Adobe Dreamweaver 完整操作步骤，我自己都有点意外。但这个工具并没有死，只是从当年的“网页制作傻瓜软件”变成了特定场景下的趁手工具——尤其适合维护老项目、师范类教学，以及只需要改改文字、换换图片的中小型企业网站。我最近两年接的企业站改版项目里，至少有三四家客户的维护同事还在用 Dreamweaver 改日常页面；我自己带过的转行新人里，也有不少是在它里面把第一个完整页面搭出来的。
这篇文章要拉通的是全版本通用的操作主链路：定义站点、新建页面、插入内容、连接样式、模板复用、响应式适配、发布上线。无论你打开的是老旧的 CS6，还是 Creative Cloud 里的最新订阅版，入口和面板名或有差别，但底层逻辑完全一致。适合三类人看：第一次接触网页制作的纯新手；想把手头工作从“记事本加浏览器”升级成“有工程感”的野路子开发者；以及需要批量维护多个旧站点的运维型设计师。
1. 从零开始的第一步：搞清楚你装的是哪个 Dreamweaver
1.1 版本差异比想象中小，但入口位置经常变
很多人在“全版本通用”这句话上犯嘀咕。我直接给结论：从 CS6 到最新的订阅版，Dreamweaver 的底层核心一直是“代码编辑器 + 可视化视图 + 站点管理器”三件套，这套逻辑从没变过。变的只是面板收纳方式和菜单摆放位置，所以与其背新版本快捷键，不如先掌握不变的核心逻辑。
简单梳理一下你会遇到的版本：
- CS6 及更早：老式永久授权，菜单全部铺在顶部，站点定义弹窗大而全，适合离线环境和老机器。
- CC 系列 2017–2021：界面扁平化，常用面板收进右侧可折叠栏，实时预览引擎做过多轮重写。
- 最新 Creative Cloud 订阅版：外观更接近 VS Code，文件树和终端集成更好，但工具箱里的“经典”布局依然保留。
我给你的第一个建议是：装好软件后，打开“窗口 > 工作区”，先切成经典布局或高级布局。这个动作能大幅降低新旧版本之间的迷失感。你在 CS6 时代养成的“插入”面板习惯，就去“窗口”菜单底部勾选“插入”重新唤出；你要找站点文件树，就按 F8 或看“窗口 > 文件”。版本变了，肌肉记忆也得跟着迁移一点。
1.2 首次启动必须处理的两个参数
第一是默认编码。在“编辑 > 首选项 > 新建文档”里，把默认编码设置为 UTF-8，别用 ANSI 或 GB2312。这个不设好，你之后写的每一个中文页面都可能出现乱码，而且乱得毫无规律——本地看是好的，传到服务器上就花了。第二是预览浏览器。在“首选项 > 实时预览/在浏览器中预览”中手动指向 Chrome、Edge 或 Firefox，不要只用 Dreamweaver 自带的小预览窗，它只是示意，代替不了真实浏览器的渲染结果。
有基础的朋友可能会觉得这一步啰嗦，但根据我带人的经验，十个新人里有七个会在两周后跑过来问“为什么我中文乱码了”“为什么预览样式不对”——基本都能追溯到这两个初始设置没做。
2. 定义站点：所有页面操作的地基
2.1 不建站点直接开写，是在给整站挖坑
无数人打开 Dreamweaver 的姿势是：双击图标，直接 Ctrl+N 新建一个 HTML 文件，写了两小时，然后保存在桌面。等到要传服务器的时候发现：图片路径全是乱的，CSS 引用全断了，链接跳转全都找不到文件。
原因很简单：Dreamweaver 在可视化视图里处理相对路径和资源依赖时，依赖一个“站点环境”。有了站点，你拖入一张图片，它自动按站点根目录计算相对路径；你改个文件名，所有引用这个文件的代码会自动更新。没有站点，它就是一盘散沙。
所以无论你做的是五页的展示站还是五十页的资讯站，第一件事永远是：新建站点。
2.2 本地站点定义的具体操作
打开顶部菜单“站点 > 新建站点”，弹窗会问两类信息，我只强调你真正需要填的：
本地站点名称：这个名称只用于 Dreamweaver 内部识别，跟域名、SEO 都没关系，写个能看懂的项目名就行，比如“公司官网改版”。
本地根目录文件夹：必须指定一个真实的硬盘路径。我强烈建议你用空文件夹，不要把站点建在“桌面”或“我的文档”根目录里，更不要建在 C 盘系统盘里。推荐结构是D:\Projects\company-site\这样的独立目录。
如果你之后要用 FTP 连接服务器，那“远程服务器”和“测试服务器”两个区块可以先留空，等发布阶段再配置。别一上来就把服务器信息填满，否则每次打开软件它都尝试连接远程，拖慢启动速度。
2.3 根目录的文件夹规划比你想的重要
站点建好后，我建议马上在文件面板里建立一套固定的文件夹结构：
company-site/ ├── assets/ │ ├── css/ │ ├── js/ │ ├── images/ │ └── fonts/ ├── pages/ ├── templates/ └── index.html很多教程会推荐css/、js/、images/平铺在根目录，也行，但一旦页面多起来，根目录会被文件塞满。我习惯把静态资源统一收进assets/子目录，pages/放内页，templates/放模板文件，这样 FTP 上传时结构一目了然，也方便后续把资源迁到 CDN 上。
注意：文件夹名字最好全小写。Linux 服务器对大小写敏感，
Images和images是两个不同的目录，你本地预览好端端的，传到服务器就 404。
3. 从空白文档到第一个完整页面
3.1 新建文档时的参数选择
按 Ctrl+N 新建文档，弹窗里有几个下拉框，新同学容易懵。我按优先级解释：
- 文档类型：选 HTML5。除非你的服务器环境极老，或者页面要兼容 IE8 以下这种古董场景，否则都选 HTML5。文档类型决定了页面头部那一行 doctype，也影响现代浏览器的渲染模式。
- 框架：如果不做前端框架项目，保持“无”即可。Dreamweaver 自带 Bootstrap 或 jQuery Mobile 的初始模板，听着很省事，但会让你一开始背上大量用不上的 CSS 和 JS，对学习不友好。
- CSS 选项：建议选“创建新文件”，让 Dreamweaver 帮你把外部样式表一起建出来；也可以选“附加到已有样式表”。别选“内联样式”，那会把 CSS 写在 HTML 标签里，后期改起来哭都来不及。
3.2 用代码视图搭结构时的误区
很多教程会让你优先用“设计视图”画页面，我的看法是：设计视图只适合看效果，不适合入门写代码。原因是设计视图里的拖拽操作会生成大量冗余标签，比如用空格键控制排版、用 撑间距，后面维护起来非常痛苦。
我建议从代码视图开始，先手写语义化骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>公司官网</title> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="pages/about.html">关于我们</a></li> </ul> </nav> </header> <main> <article> <h1>欢迎</h1> <p>这里是正文。</p> </article> </main> <footer> <p>版权信息</p> </footer> </body> </html>这段骨架是全版本通用的核心——Dreamweaver 不会帮你写出好的语义结构，它会做的是：当你输入<或标签名时弹出代码补全提示；当你漏了闭合标签时，在左侧行号区域用高亮提醒你。你要做的，就是在它的辅助下把结构写对。
3.3 连接 CSS 的三种方式，我为什么只推荐一种
Dreamweaver 里链接样式表的方式有三种，理解它们的差别对你以后排查问题很有帮助：
| 方式 | 写法 | 维护难度 | 适用场景 |
|---|---|---|---|
| 外部样式表 | <link rel="stylesheet" href="assets/css/main.css"> | 低 | 多页面共用样式 |
| 内部样式表 | <style>...</style>写在 head 里 | 中 | 单页面独占样式 |
| 内联样式 | <p style="color:red"> | 高 | 临时调试，不推荐生产用 |
我的建议非常明确：全部用外部样式表。理由不只在 Dreamweaver 里成立，在任何网站项目里都一样——样式和结构分离后，改全站配色不用翻几十个 HTML 文件，只动一个 CSS 文件就够了。Dreamweaver 的“CSS 设计器”面板能可视化地改字号、颜色、间距，但它本质上是帮你写 CSS 代码，如果你对 CSS 本身没概念，这个面板反而越用越糊涂。
4. 三个视图怎么配合用，才算真正高效
4.1 代码视图看的是结构，不是字符
Dreamweaver 的代码视图比记事本强在哪？一是语法高亮，二是代码折叠，三是标签高亮配对。你点一个<div>的开始位置，它会在对应的闭合</div>上画一个浅色括号提示；你把鼠标停在标签上，它会显示这个标签的层级路径（比如html > body > main > article）。
这三个功能对应三种能力：高亮帮你识别标签是否写错；折叠帮你在大文件里快速定位模块；配对提示帮你检查嵌套关系。新手调试页面时，先看这三个提示，能省下一半找 bug 的时间。
4.2 拆分视图的正确用法
拆分视图是 Dreamweaver 相对其他编辑器的特色，左边代码、右边实时效果，默认很多人只用一个方向——写着代码，瞄一眼右边出来的东西对不对。
但我提醒一句：不要把右边的设计视图当成最终效果。在大多数版本里，这个窗格只是“设计视图”，它有自己的渲染引擎，和 Chrome 有差异。它对浮动布局、弹性盒（Flex）的还原度并不完美。你看了它，再去浏览器里看，很容易出现“对不上”的错愕感。
我推荐的一个用法是：写完某一块结构后，把拆分视图关掉，直接按 F12 键（或 Ctrl+F12）在真实浏览器里预览。不管是定位问题还是样式问题，都以浏览器为准。
4.3 实时视图的价值，很多人没体会到
较新版本的 Dreamweaver 引入了“实时视图”，这个视图的效果比传统设计视图更接近浏览器，因为它内部就是基于浏览器内核渲染的。你可以在实时视图里看到 hover 效果、CSS 动画、响应式断点的变化，这些传统设计视图做不到。
但实时视图有一个容易让人误会的点：它在默认情况下是只读的，不能直接在页面上选中元素进行编辑。你要切换到“设计视图”才能选中元素，切到“实时视图”只负责看效果。理解了这一点，你就不会在实时视图里疯狂点鼠标却毫无反应，然后骂软件坏了。
使用建议：**实时视图负责验证交互效果，拆分视图负责边写边看，浏览器预览负责最终验收。**三者各用其长，别指望一个模式搞定所有事。
5. 表单、行为与模板：静态页之外的关键功能
5.1 表单的插入与属性设置
很多企业站里，表单是刚需——联系表单、预约表单、留言板。Dreamweaver 传统的“插入 > 表单”菜单提供了整套控件：文本框、文本区域、单选按钮、复选框、下拉菜单、提交按钮。实操中你需要注意几个属性：
- action：提交数据的后端地址，没有后端就写
#或留空。 - method：一般用
post，传数据量大且不会出现在 URL 上。 - name：每个控件都要命名，因为后端是根据 name 取值的。
- label：用
<label>和输入控件关联，点击文字时能聚焦到输入框，这种小细节直接影响用户体验。
图形化的操作方式是在“插入 > 表单”里逐项插入，然后在属性面板里改 name、action、method；如果你会用代码视图，直接手写也是完全一样的底层结果。表单写完后，记得在 Dreamweaver 里按 F12 预览一下，确认提交按钮能触发（哪怕因为没有后端而跳不出结果页，至少按钮本身是有效的）。
5.2 行为面板：能加互动，但别硬加
Dreamweaver 自带一个“行为”面板，可以给图片加交换效果、给链接加弹出窗口、给页面加载时弹提示框。这些功能本质上是自动生成 JavaScript，对完全不会写 JS 的人有帮助，但它生成的老式脚本（比如交换图像、弹出消息）在移动端体验很差，而且依赖onmouseover这类事件，现代前端更推荐用 CSS 伪类或者轻量框架来做。
我的建议是：flash 时代的那些“行为”能不用就不用。现在的前端交互，90% 可以用 CSS 的:hover、transition完成；剩下需要 JS 的，用一点原生 DOM 操作或 jQuery 也不难。Dreamweaver 在较新版本里对代码提示支持得很好，你直接在<script>标签里写原生 JS，它照样给你联想函数名。
5.3 模板和库，是批量维护站点的杀器
这是 Dreamweaver 老用户最舍不得换工具的理由之一。模板（Template）能帮你实现“改一版，全站生效”。
操作逻辑是这样的：新建一个.dwt模板文件，在页面里用“插入 > 模板 > 可编辑区域”划分出允许改动的内容区域，其他部分全是锁定区域。之后基于这个模板创建的所有页面，锁定的导航、页脚、侧边栏都不可编辑，只有你标好的可编辑区域能改。当你修改模板并保存时，Dreamweaver 会提醒你是否更新所有基于该模板创建的页面——点“更新”，整站同步。
对应还有“库项目”（Library Item），适合放一段需要反复用的小模块，比如页脚版权块、联系电话栏。它的逻辑是：把这段内容定义为库项目，插入到多个页面，之后修改库项目并更新，所有引用处一起变。模板负责整页框架，库项目负责页面内的小模块，两者配合，批量维护网站的效率能翻好几倍。
提示：模板文件不要直接传到服务器，它只是源文件。真正发布的，是基于模板生成的那些 HTML 页面。如果你发现服务器上多了
.dwt文件，最好移出公开目录。
6. 响应式页面与多尺寸适配实操
6.1 媒体查询的断点设在哪
响应式是现在做站的默认要求。Dreamweaver 较新版本里有“媒体查询”面板，可以可视化添加断点；但可视化不是核心，核心是你得知道自己要哪个断点。我常用的断点体系是：
- ≤ 575px：小屏手机
- 768px：平板竖屏
- 992px：平板横屏和小笔记本
- ≥ 1200px：大屏桌面
在 CSS 里写起来就是这样：
/* 默认样式先写手机端 */ body { font-size: 16px; } /* 平板往上 */ @media (min-width: 768px) { body { font-size: 18px; } } /* 桌面往上 */ @media (min-width: 1200px) { body { font-size: 20px; } }我给新人的建议是：先写“移动优先”的样式，再把断点条件用min-width往大设备加。这样手机加载时不会多下载一大段用不上的桌面样式，逻辑上也清晰。
6.2 在 Dreamweaver 里实现流体布局
除了媒体查询，响应式还需要你放弃固定的像素宽度，改用百分比、flex或grid。以两栏布局为例，很多人喜欢在属性面板里把表格或div宽度写成1000px，这在桌面浏览器没问题，到手机上就横向溢出。
更稳的写法是把 CSS 里的宽度设为：
.container { width: 100%; max-width: 1200px; margin: 0 auto; } .flex-row { display: flex; flex-wrap: wrap; } .flex-col { flex: 1 1 300px; }max-width保证了在大屏下不会无限拉伸，flex-wrap让子元素在小屏下自动换行。你在 Dreamweaver 里用“CSS 设计器”的“盒子”选项卡也能修改 width、margin、padding，但底层生成的代码其实就是这些属性。与其在面板里点来点去，不如直接把上面的类名写进 CSS 文件，再把类应用到div上。
6.3 用实时视图模拟设备时，记得做这件事
Dreamweaver 的工具条上有一个设备切换图标，可以模拟手机、平板、桌面三种尺寸。操作上很方便，但我实测下来，要注意一点：它改变的只是视口宽度，不是设备像素比（DPR），也没法模拟移动端触摸手势。也就是说，它可以帮你快速发现布局错位，但无法完全替代真机测试。
我的习惯是：先用 Dreamweaver 的实时视图过一遍三个宽度，确认没有横向滚动条、没有元素重叠；再用 Chrome 开发者工具切换到 iPhone 或 Android 型号，看一下像素比和滚动表现；最后，如果条件允许，真机连到局域网，用服务器的 IP 地址直接访问测试页面，这是最准的。
7. 从本地到线上：发布与排查的完整链路
7.1 发布前检查清单
发布不是把文件拖上去就完事。我给自己定了一个上线前三分钟清单：
- 编码确认：每个页面在浏览器里检查中文是否乱码。
- 相对路径：在文件面板里检查链接是否带
href="../assets/css/main.css"这类相对路径，而不是C:\Users\...这种本地绝对路径。 - 无用文件：删除测试用的临时图片、旧版本备份、
.dwt源文件。 - 断链检查：Dreamweaver 的“站点 > 检查站点范围的链接”能列出所有失效链接，包括指向不存在页面和图片的 URL。我在发布前必跑一遍这个功能。
7.2 配置 FTP/SFTP 并完成发布
回到“站点 > 管理站点 > 编辑”，在“服务器”类别里添加一个远程服务器。填写你的 FTP 地址、用户名、密码和服务器根目录。协议我强烈建议优先选SFTP，它是走 SSH 通道的加密版本，比传统 TCP 的 FTP 更安全。如果服务器只提供 FTP，也可以，但大厂新服务器基本都是 SFTP 起步。
配置完成后，文件面板里会出现“本地视图”和“远程服务器”两个栏。你可以把本地文件直接拖到远程栏，Dreamweaver 会弹窗问你要“上传”还是“同步”。我一般用同步，它会比对本地和远程的修改时间，只上传改过的文件，这对全站首发后的日常小改动特别省心。
需要注意：上传完成后，进浏览器清一次缓存再看。不少“我没改啊怎么还是老样子”的乌龙，其实是浏览器缓存了旧 CSS。按 Ctrl+F5 强制刷新，通常就恢复了。
7.3 线上表现和本地不一致，从这三个方向排查
第一，路径大小写。Windows 本地不区分大小写，Linux 服务器区分。如果线上图片或 CSS 404，先检查目录名大小写是否一致。第二，服务器默认首页规则。上传 index.html 直接显示当然没问题，但如果服务器默认只认 index.php，你访问域名可能显示空白。这时候需要到服务器控制面板设置默认文档顺序。第三，文件未上传完整。同步工具偶尔会因网络中断漏文件，务必在远程栏里核对首页引用的 CSS、JS 文件是否都在。
排错顺序我建议是“断链检查优先，其次目录权限，最后看默认文档”。跑惯这套流程后，99% 的上线问题都能在五分钟内定位，不用乱试。
最后补一句我的个人习惯
文章写到这，核心链路基本齐了。回头看，Dreamweaver 最值得学的其实不是某个按钮，而是“站点管理 + 模板复用 + 路径意识”这套工程化思维。哪怕你以后彻底不用它，换成 VS Code、HBuilder 或者其他编辑器，这套思维照样能平移过去。
如果非要说一个经验，那就是：**在 Dreamweaver 里，别急着写页面，先把站点定义好；别急着上传，先把断链查一遍。**这两步每次做足，后面会少踩很多坑。