Adobe Dreamweaver CC 2019 for Mac 详尽操作指南

Adobe Dreamweaver CC 2019 是一款专业的可视化网页设计与代码编辑软件，它完美结合了“所见即所得”的实时视图与强大的代码编辑环境，是网页设计师和前端开发者的高效工具。本指南将详细介绍其界面、完整工作流程及实用技巧。

一、核心界面与工作区详解

启动 Dreamweaver 后，您将看到由多个面板组成的集成工作区。主要区域如下：

• 应用程序栏（顶部）：包含菜单、工作区切换器（如“设计器”、“代码”）和快速访问按钮。
• 文档工具栏：位于文档窗口上方，提供代码/拆分/设计视图切换、实时视图开关、多屏预览、文件标题设置等功能。
• 文档窗口（中央工作区）：
  • 代码视图：显示纯HTML、CSS、JavaScript等源代码，支持语法高亮和代码提示。
  • 设计视图：传统的可视化布局视图。
  • 拆分视图：同时显示代码和设计（或实时视图），是最高效的工作模式。
  • 实时视图：基于Chromium的渲染引擎，近乎真实浏览器效果的交互式预览，可在此模式下直接与页面元素交互。
• 面板组（右侧及左侧）：
  • “文件”面板：管理本地站点、远程服务器文件，是项目管理的核心。
  • “CSS 设计器”面板：可视化创建和管理CSS样式，包含源、@媒体、选择器和属性四个子面板。
  • “DOM”面板：以树状结构显示文档对象模型，便于选择和编辑元素。
  • “资源”面板：集中管理站点内的图像、颜色、URL等资源。
  • “插入”面板：提供快速向页面添加HTML元素（如Div、图像、表格）和构件（如Bootstrap组件）的快捷方式。
  • “属性”检查器（底部或右侧）：上下文敏感的面板，显示和编辑当前选中元素（文本、图像、表格等）的属性。

二、完整操作流程：从创建到导出

1. 创建与管理站点

步骤1： 在菜单栏选择 站点 > 新建站点…。

步骤2： 在弹出的对话框中：

• 输入站点名称（如“MyWebsite”）。
• 点击本地站点文件夹旁的文件夹图标，选择一个本地目录作为项目根文件夹。
• （可选）在“高级设置”中配置服务器、版本控制等信息。

步骤3： 点击“保存”。站点信息将出现在“文件”面板中。

2. 创建与编辑网页文件

步骤1： 在“文件”面板中，右键点击站点根目录，选择 新建文件，或使用快捷键 Cmd+Shift+N。将文件命名为 index.html。

步骤2： 双击打开 index.html。默认文档类型为 HTML5。

步骤3： 在“拆分”视图下工作（通过文档工具栏的“拆分”按钮切换）。

• 在代码视图的 <body> 标签内，直接输入HTML内容，如 <h1>欢迎</h1>。
• 或从“插入”面板拖拽一个“Div”到设计视图，然后在属性检查器中设置其ID或类。

步骤4： 使用“CSS 设计器”添加样式。

• 在“源”子面板点击“+”添加CSS源（创建新CSS文件或附加现有文件）。
• 在“选择器”子面板点击“+”为元素（如 h1）创建选择器。
• 在“属性”子面板中设置属性（如 color: blue;）。

3. 实时预览与调试

点击文档工具栏的 “实时视图” 按钮，页面将实时渲染。在实时视图中：

• 可以点击元素，在“DOM”面板中查看其层级结构。
• 右键点击页面元素，选择“检查”，会高亮对应的代码。
• 点击“多屏预览”按钮（或菜单 文件 > 多屏预览）可查看页面在不同设备尺寸下的显示效果。

4. 保存与导出

步骤1： 随时使用 Cmd+S 保存当前文件。

步骤2： 若要导出整个站点以供发布，只需将“文件”面板中的本地站点文件夹整体复制即可。Dreamweaver 本身不提供“导出项目”的单一命令，所有文件均已保存在本地站点中。

步骤3： 如需将单个文件另存为模板或其他格式，可使用 文件 > 另存为。

三、常用功能进阶技巧

1. 代码导航与快速编辑

• 将光标置于CSS类或ID名上，按下 Cmd+E 可快速打开“快速编辑”内联窗口，直接修改CSS属性，无需切换面板。
• 使用 Cmd+F 在当前文档中查找，Cmd+Shift+F 在整个站点中查找和替换。
• 在代码视图中，按 Cmd+L 可快速跳转到指定行。

2. 使用 Emmet 快速编写 HTML/CSS

在代码视图中，输入Emmet缩写（如 ul>li*5>a）后按 Tab 键，可瞬间展开为完整代码结构。

3. 利用“多光标编辑”提高效率

按住 Cmd 键，在代码的不同位置点击，可以创建多个光标，同时进行编辑。或选中一个词后，按 Cmd+Shift+L 选中所有相同词进行多光标编辑。

4. 实时视图中的交互式设计

在实时视图下，可以直接拖拽调整元素大小，属性检查器中的值会实时更新。这对于直观调整布局非常有用。

四、常见问题与解决方案

1. 实时视图无法显示最新更改？

问题： 在代码视图中修改后，实时视图没有更新。
解决： 确保“实时视图”按钮处于激活状态。有时需要点击文档工具栏的“刷新”按钮或按 F5 键手动刷新实时视图。检查代码是否有语法错误阻止了渲染。

2. “文件”面板中站点文件列表不完整或混乱？

问题： 文件面板显示异常。
解决： 右键点击“文件”面板的站点根目录，选择“刷新”。或重新定义站点（站点 > 管理站点），检查本地文件夹路径是否正确。

3. 快捷键失效或与系统快捷键冲突？

问题： 某些 Dreamweaver 快捷键（如 Cmd+Shift+C 用于复制样式）不起作用。
解决： 检查 Mac 系统偏好设置 > 键盘 > 快捷键，看是否有冲突。可在 Dreamweaver 的 编辑 > 快捷键 中自定义快捷键集。

4. 代码提示（代码提示）功能不工作？

问题： 输入代码时没有自动提示。
解决： 确保在菜单 编辑 > 首选项 > 代码提示 中，所有相关选项都已启用。尝试在代码视图中按 Ctrl+Space 手动触发代码提示。

五、Mac版快捷键汇总表

通过熟练掌握以上界面、流程、技巧和快捷键，您将能充分利用 Adobe Dreamweaver CC 2019 for Mac 的强大功能，高效地完成网页设计与开发工作。