Dreamweaver全流程实战：从安装到发布的核心操作指南-开发者社区

Dreamweaver这个软件，搁在十年前是网页设计圈的“标配”，现在聊起来，反而总被误当成老古董。但我这两年接手的项目中，至少有三分之一的老站点维护、内部系统改版、高校网页设计课程，都是拿它在扛。原因很简单：它既给你可视化的设计界面，又给你完整的代码控制权，这两件事同时做好，到今天也没有几个工具能替代。

这篇文章不聊“好不好用”的争论，直接把它从安装到发布的全流程操作讲一遍。而且你只要抓住我下面说的这些核心逻辑，不管你是拿CS6、CC，还是新版Creative Cloud，界面改了、菜单位置变了，照样能上手。

1. 为什么Dreamweaver还值得用：先搞懂它的定位

1.1 可视化与代码并存的“双轨制”工作方式

很多人以为Dreamweaver只是“所见即所得”的傻瓜工具，这其实是对它最大的误解。它的核心价值在于“拆分视图”：左边写代码，右边实时渲染，两边的改动是同步的。你在代码区输入一个<div>，设计视图立刻就能看到块级元素的排布；你在设计视图拖一张图片进来，代码区也会自动补上对应的<img>标签。

这个特性在什么场景下最香？就是处理那些“样式文件特别长、页面结构特别老”的存量项目时。比如一个维护了五六年的企业官网，CSS文件有几千行，光靠人肉去代码里找某个按钮样式，费眼费时间。但你在设计视图中点一下按钮元素，属性面板直接定位到对应类名，再切到代码查样式，效率完全不一样。

更重要的是，它从来没有强迫你在“可视”和“代码”之间二选一。你可以完全不用设计视图，纯手写代码，它只是个高性能编辑器；你也可以一点代码不碰，用插入面板和属性面板搭出完整页面。两种模式之间随时切换，这就是它和纯代码编辑器、纯可视化建站工具的最大区别。

1.2 “全版本通用”到底通用了哪些东西

我用了十几年Dreamweaver，从MX、CS3、CS6一路用到现在的CC版本，中间界面变过很多次，但核心操作骨架始终没变，这就是“全版本通用”的原意。

站点定义：始终是“站点”菜单下新建，设置本地文件夹、远程服务器。
文件面板：始终是右下角或侧边栏，管理和上传站点文件。
拆分视图：代码和设计并排，这个核心交互一直都在。
属性面板：选中元素后，下方出现对应属性设置。
模板机制：创建模板、定义可编辑区域、基于模板新建页面。

只要你先认准这些“常量”，就不会被版本升级打乱节奏。新版改的是菜单收纳方式（比如把一些功能塞进“窗口”菜单）、外观扁平化，但底层逻辑还是一脉相承。所以你看到任何新版本的教程，先映射到这几个概念上，就很容易看懂。

2. 装好与配好：初始环境的全版本通用套路

2.1 安装与版本选择的个人建议

Dreamweaver目前主流的安装方式有两种：一是Adobe Creative Cloud套餐订阅，装上就是最新版；二是使用过往的CS6等永久授权版本，很多老开发者的电脑上还留着。

我的建议是，如果只是日常学习、维护轻量页面，新版CC完全够用，而且对高分辨率屏幕、新版操作系统的兼容性更好。如果你是在公司维护一套很老的内部系统，而同事之间还在传CS6的工程文件，那继续用CS6也没问题——.html、.css这些文件本质是纯文本，版本不同不会导致文件格式不兼容。

安装时注意一个细节：很多人装完Dreamweaver，双击打开半天没反应，或者第一次启动卡在欢迎界面。这种情况多半是缓存目录权限问题，不是软件坏了。以管理员身份运行一次，或者把首选项里的缓存位置改到非系统盘，基本能解决。

2.2 工作区布局与关键面板

装好之后别急着干活，先把工作区调成自己顺手的样子。在顶部或“窗口”菜单里，选“经典”或“编码人员”工作区，这俩布局最适合后续操作。

文件面板：相当于你的“站点资源管理器”，所有页面、图片、CSS文件都从这里浏览。
插入面板：重点，里面按“常用”“结构”“表单”“HTML”等分类，提供图片、表格、链接、表单等插入按钮。
CSS设计器（新版）或CSS样式面板（旧版）：管理样式表的核心入口。
属性面板：选中元素后，在这里改链接、尺寸、对齐等属性。
实时视图按钮：切到浏览器引擎的渲染效果。

如果你发现某个面板找不到，不要翻菜单翻半天，直接按Ctrl+J或进入“窗口”菜单查，快捷键和菜单都在那里，勾上就出来了。面板乱了就重置工作区，别忍耐着别扭的布局硬干活。

2.3 站点定义：所有操作的地基

这是全流程里我最想强调的一个步骤。Dreamweaver里的“站点”不是某个页面，而是一个文件夹容器，里面装着你的所有网页资源。不做站点定义，你会发现插入图片时路径乱跳、FTP上传找不到文件、模板链接各种失效，问题一大堆，根源全是没定义站点。

定义步骤：

菜单栏选择“站点” -> “新建站点”。
输入站点名称，比如my-project。
选择本地站点文件夹，注意这里不要直接选成C盘根目录或桌面，建议在D盘建一个独立的项目文件夹，例如D:\www\my-project。
点击保存，文件面板中就能看到该文件夹的结构。

这一步做完，后面写相对路径、做链接、传文件都有了一个基准。如果你接手别人的项目，第一步也是“站点” -> “管理站点” -> “导入”或重新指认本地文件夹，先把“根目录”稳下来再谈其他。

3. 从零到一：页面创建与核心编辑操作

3.1 新建文档与文档类型选择

打开Dreamweaver，按Ctrl+N新建文档，弹窗里会让你选文档类型。这里别选错，新手最容易选成“HTML5”以外的旧类型。

我的建议是：

普通静态页面：选HTML，文档类型设为HTML5。
带服务端逻辑的后台页面（比如PHP）：选PHP，不要选HTML，否则服务端代码无法解析。
仅写样式：选CSS文件。
仅写脚本：选JavaScript文件。

选HTML后，Dreamweaver会自动生成一个带基本骨架的页面。如果你用的是旧版本，可能会生成类似<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">的老式DOCTYPE，建议手动改成<!DOCTYPE html>，这会减少很多浏览器兼容的坑。

3.2 三种视图模式：代码、设计、实时视图

视图切换是Dreamweaver的核心交互，工具栏上一排按钮，很多新手点完就懵了，不知道“设计”和“实时”到底有什么不同。

代码视图：只显示HTML、CSS、JS代码，适合专心敲代码。
设计视图：所见即所得，但这里的渲染是基于软件内核的，和真实浏览器有细微区别，比如某些CSS属性可能表现不完全一致。
拆分视图：左右或上下分屏，一边代码一边设计，强烈推荐日常编辑用这个模式。
实时视图：直接调用本机浏览器内核（新版CC用的是Chromium核心）渲染页面，和真实浏览器效果基本一致，但这里是“预览”状态，不能直接编辑元素。

实操经验：平时用拆分视图边写代码边看效果，想确认真实浏览器效果，切到实时视图。从实时视图返回编辑，再点一下拆分视图就行。不要在设计视图里大量拖拽元素做布局，拖得多了生成的代码又乱又难维护。

3.3 插入面板：图片、链接、表格、表单的快捷方式

对于不想手敲HTML标签的人来说，插入面板是最高效的入口。它在“窗口”菜单里可以调出，默认在右侧面板组。

插入图片：光标定位到设计视图或代码中要插入图片的位置，插入面板选“图像”，选择本地图片文件。这时候注意，图片必须先复制到站点文件夹里，通常放到images子目录，否则Dreamweaver会提示你是否复制到站点根目录，选“是”。
插入链接：选中文字或图片，下方属性面板的“链接”框直接填，例如about.html或https://example.com。目标下拉选_blank就能新窗口打开。
插入表格：插入面板选“表格”，设置行数、列数、宽度。表格适合做表格数据，不适合做页面布局，布局用CSS更好。
插入表单：插入面板的“表单”分类下，可以插入输入框、按钮、下拉列表等，生成的是列表里写的标准HTML。

3.4 模板与库：批量维护站点的效率工具

如果你维护的不是单页面，而是几十上百个页面的站点，模板功能一定要用起来。模板相当于一个“母版”，你可以统一控制导航栏、页脚、公共区域，然后只在特定区域让子页面自由编辑。

做法流程：

选中一个做好的页面作为底子。
点击“文件” -> “另存为模板”，文件名比如layout.dwt。
在模板页面中，选中需要让子页面编辑的区域，菜单“插入” -> “模板” -> “可编辑区域”，给它命名，比如mainContent。
保存模板后，用“文件” -> “新建” -> “模板”，选择这个模板创建新页面。
新页面里只有可编辑区域是白底可修改的，其他区域锁死，避免误改公共部分。

当你要修改全站页脚的联系方式时，只需要改模板文件，然后Dreamweaver会提示是否更新所有基于此模板的页面，点击“更新”即可。这个功能在老企业站的维护场景中真的能救命，我之前给一个几十页的学校网站改版权信息，几秒钟全站更新完毕。

4. CSS与响应式：从写样式到适配多端

4.1 新老版本样式管理工具的区别

CSS样式管理这个功能，CS6和CC版本的变化比较大，但原理相通。

CS6等旧版：“CSS样式”面板，右侧面板，点右下角的“+”可以新建类、ID、标签样式，直接生成CSS规则。
CC新版：“CSS设计器”，功能更强大，面板里按“源”“选择器”“属性”分组，你可以先选样式表来源，再点加号添加选择器，然后在下方的属性组里直接调整字体、背景、间距。

用CSS设计器的时候，最关键的是先确认“源”选的是哪个文件。如果你有外部样式表style.css，就选中这个源，再添加选择器，这样样式才写到外部文件里；如果你选的是<style>标签源或“此文档”，样式就会写到当前页面内部。新手经常搞混，导致写完样式切个页面就没了。

4.2 内联样式、嵌入样式、外部样式表怎么选

这是很多自学者的老大难问题。规则其实很简单：

内联样式（<p style="color:red">）：只作用于当前标签，维护性差，尽量别用。
嵌入样式（页面内<style>）：只作用于当前页面，适合单页小项目。
外部样式表（.css文件）：全站共用，配合模板效果最好，推荐用于正式项目。

实操时，我习惯在站点根目录建一个css文件夹，里面放style.css，用<link rel="stylesheet" href="css/style.css">引入。这样全站外观统一，后期改主题色只需要动一个变量或一个文件里的颜色值即可。

4.3 响应式设计：媒体查询与视口设置

新版Dreamweaver在实时视图上方有设备切换按钮，可以模拟手机、平板、桌面尺寸，这个功能很实用。但真正的适配还得靠代码。

响应式的核心三件套：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这行代码加在<head>里，是响应式的基础，没有它，手机端会默认按桌面宽度缩小显示。

然后是用媒体查询写不同屏幕宽度下的样式，例如：

/* 桌面端默认样式 */ .container { width: 960px; margin: 0 auto; } /* 平板 */ @media (max-width: 768px) { .container { width: 100%; padding: 0 15px; } } /* 手机 */ @media (max-width: 480px) { .menu { display: none; /* 隐藏桌面菜单，配合JS显示移动端汉堡菜单 */ } }

在CSS设计器里，添加选择器后，在“属性”组的右上角可以看到“媒体”区域，可以选择@media screen and (max-width:768px)这样的断点。设置好后，当前选择器就只在该断点下生效。这个操作逻辑，新版和旧版的差异比样式面板大，但“断点”这个概念没变，理解了就不怕版本差异。

5. 发布与同步：页面从本地到线上的完整链路

5.1 内置FTP/SFTP配置的详细步骤

本地做好的页面，最后要传到服务器上，这个过程用Dreamweaver自带的FTP功能就可以完成，不用额外装FTP客户端。

配置步骤：

“站点” -> “管理站点” -> 选中你的站点 -> “编辑”。
切到“服务器”分类，点击加号。
连接方式选择FTP或SFTP（推荐SFTP，加密传输更安全）。
填写服务器地址（如域名或IP）、用户名、密码。
根目录填网站所在的服务器路径，比如/www/wwwroot/my-project/，注意别填错，填错会导致文件上传到错误位置。
Web URL填访问地址，例如http://yourdomain.com。

填完后可以点“测试”，提示连接成功后保存。之后文件面板会自动显示“远程服务器”视图，你可以看到服务器上的文件列表。

5.2 同步方向的判断：上传还是下载

连接服务器之后，最大的坑就是搞不清同步方向。文件面板的顶端有几个箭头按钮：向上传是“上传本地选中文件”，向下是“获取远程文件”。

实际维护中，我的建议是：

本地改动后，一定先确认远程备份或灵活用“同步”功能，不要暴力全部覆盖。
如果多人协作、不确定线上文件是不是最新，先“获取”远程文件和本地比较，再决定哪个覆盖哪个。
纯前端改动，通常只需要上传对应的.html、.css、.js和图片，不需要全站上传。

有一个血的教训就是，曾经有一次我在本地改了十几处样式，结果上传时选错成“获取”，远程文件把本地覆盖了，一下午成果全没了。所以上传之前养成习惯，先看面板上的操作方向，再点按钮。

5.3 本地、远程加VSCode的混合工作流

如果你更喜欢用VSCode写代码，但又想继续用Dreamweaver上传和可视化预览，可以这样配合：在VSCode里写代码，保存后切回Dreamweaver，会发现文件面板已经检测到文件更新，直接用它上传即可。也可以直接在Dreamweaver的设置里关联外部编辑器。

这种工作流特别适合维护老项目：代码习惯用VSCode的顺手，但全站文件结构、目录同步、模板更新还是留在Dreamweaver里管理。工具不是非此即彼，能提高效率的组合就是好方案。

6. 高频问题与排查实录

6.1 页面中文乱码的根源与统一

乱码问题在Dreamweaver里太常见了。90%的原因是HTML文件的字符集声明和文件实际编码不一致。

解决方案是先统一：

<meta charset="UTF-8">

然后在Dreamweaver菜单“修改” -> “页面属性” -> “标题/编码”中，把编码明确设为UTF-8，不要选ISO-8859-1或gb2312。如果你接手的是老站点，之前用了gb2312，改文件编码时要小心，最好在Dreamweaver中“文件” -> “另存为”时把“编码”改成UTF-8，再做全局替换。

另外，CSS文件本身也有编码问题，在CSS文件顶部注释里声明编码：

@charset "UTF-8";

写上这行，乱码概率会大幅下降。

6.2 浏览器预览不更新

很多新手改完代码，按F12预览，发现浏览器里还是旧画面，第一反应是Dreamweaver没保存。其实大多是浏览器缓存。

解决思路按顺序排查：

确认文件已经保存，按Ctrl+S。
浏览器按Ctrl+F5强制刷新，绕过缓存。
如果仍然无效，看看是不是页面里同时引入了多个同名CSS文件，后引入的覆盖了前面，检查引入顺序。

还有个小技巧，Dreamweaver的“实时视图”使用的渲染引擎缓存也可能影响预览，可以在“编辑” -> “首选项”里清掉缓存文件，重启软件。

6.3 模板修改后子页面不更新

做模板维护，改完模板保存后，Dreamweaver一般会弹出“更新站点内所有基于此模板的页面”的提示。如果不小心点了“不更新”，后面想手动更新，可以在“修改” -> “模板” -> “更新页面”中找到入口，重新选择站点范围，点击“开始”即可。

另一种情况是更新过了，但子页面依然显示旧内容。这种多半是子页面存在“分离的样式”或者后期手工改过锁区内容。排查时，直接看子页面代码里是否还是这种标注，如果被手工破坏了，模板更新就很难生效。

6.4 站点根目录路径错误导致链接失效

链接、图片失效，有的不是文件传漏，而是路径写错了。Dreamweaver中相对路径有两种，容易混淆。

站点根相对路径（以/images/logo.png开头）：从网站根目录开始定位，部署到服务器且站点根设置正确时没问题。
文档相对路径（以images/logo.png开头）：相对当前文件所在目录定位。这种在本地文件夹中更直观，但嵌套层级不同容易出错。

我的建议是，如果站点结构层级不深，统一用“文档相对路径”，常见于纯前端小项目；如果项目嵌套很多，且根目录很稳定，再用“站点根相对路径”。在Dreamweaver中，插入图片和链接时会自动生成相对路径，只要站点定义正确，一般不会错。如果上传后页面图片图标裂开，优先检查是否路径大小写问题，例如文件夹命名Images，但代码写成了images，在Linux服务器上大小写敏感，会直接404。

7. 这是我自己的一些使用体会

最后说点掏心窝子的话。Dreamweaver这个工具，被嘲讽过“过时”，但它的设计哲学我一直很欣赏：不要逼你在“可视化”和“代码”之间站队。作为一个既要写代码、又要管很多网站资源的从业者，它的文件面板、站点同步、模板更新这三个功能，是我至今还在用的理由。

如果你刚开始学，不要被它的老派界面吓到。我建议走一条不绕弯的学习路线：先定义好站点，再用拆分视图找一个个人小项目反复改，比如把自己的简历页用Dreamweaver做成一个带CSS样式、适配手机的静态站，最后通过内置FTP传到服务器。跑完这一整圈，你就自然知道这软件能干什么、哪些操作是刚需、哪些功能只是锦上添花。

还有一个小技巧我一直用着：在Dreamweaver里不管怎么改，每个大改动前先做个备份，最简单的办法是把整个站点文件夹压成一个zip包，名字带上日期。FTP上传也好、模板批量更新也好，有了备份才有了操作的底气。希望这篇经验贴能帮你少踩一些我已踩过的坑。