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

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

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

启动 Dreamweaver 后，您将看到高度可定制的工作区，主要分为以下几个核心部分：

1. 应用程序栏：位于窗口顶部，包含菜单栏、工作区切换器（如“设计器”、“代码”、“拆分”）以及标准应用程序控件。
2. 文档工具栏：位于文档窗口上方，提供代码/拆分/设计视图切换、实时视图开关、文档标题设置、多显示器预览等关键功能。
3. 文档窗口（工作区）：中央主区域，用于显示和编辑当前文档。在“拆分”视图下，可同时显示代码和设计视图。
4. 属性检查器（面板）：通常位于底部，是一个上下文敏感的面板，显示当前选中对象（如文本、图像、表格）的属性，并可在此直接修改。
5. 面板组：位于右侧，包含一系列可折叠/展开的面板，常用面板包括：
   • 文件面板：管理本地站点和远程服务器文件。
   • CSS 设计器面板：CC 2015 的核心功能，用于可视化创建、管理和编辑 CSS 样式。
   • 插入面板：提供将各种对象（如 Div、图像、表格）插入文档的快捷方式。
   • 代码片段面板：存储和快速插入可重用的代码块。

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

1. 创建/管理与打开项目（站点）

在 Dreamweaver 中，强烈建议通过“站点”来管理项目，这能确保链接路径正确并便于文件管理。

操作步骤：

1. 点击菜单栏 “站点” -> “新建站点…”。
2. 在弹出的对话框中，输入站点名称，并设置“本地站点文件夹”（即项目在您 Mac 上的存储位置）。
3. （可选）在左侧列表中选择“服务器”，可配置远程服务器信息，用于未来上传。
4. 点击“保存”。站点信息将显示在“文件”面板中。
5. 打开文件：在“文件”面板中双击任一 HTML 文件，或通过 “文件” -> “打开” (Cmd+O)。

2. 页面编辑与内容构建

在“拆分”视图（推荐）下工作，可以同时看到代码和视觉反馈。

操作步骤：

1. 插入元素：
   • 使用“插入”面板，或选择 “插入” 菜单。
   • 例如，插入一个 Div：点击“插入”面板中的“Div”，或使用菜单 “插入” -> “结构” -> “Div”。
2. 编辑文本与图像：
   • 在设计视图中直接输入或粘贴文本。
   • 插入图像：将图像从“文件”面板拖拽到设计视图，或使用 “插入” -> “图像” -> “图像” (Cmd+Alt+I)。
3. 使用 CSS 设计器进行样式设计：
   • 在“CSS 设计器”面板中，点击“源”部分的“+”添加 CSS 源（新建或附加现有样式表）。
   • 在“选择器”部分点击“+”为特定元素创建选择器（如 .header）。
   • 在“属性”部分，为选中的选择器设置样式属性（如背景色、字体大小）。所有更改会实时反映并生成代码。

3. 预览与测试

操作步骤：

1. 实时视图：点击文档工具栏的“实时视图”按钮，获得近似浏览器的渲染效果，并可交互（如点击链接）。
2. 在多显示器中预览：点击文档工具栏的“多显示器预览”按钮，或使用 “文件” -> “多显示器预览”。此功能需安装 Adobe Edge Inspect 并连接设备。
3. 在浏览器中预览：按 Cmd+Option+P，或点击文档工具栏的地球图标，选择浏览器。这是最准确的测试方式。

4. 最终导出与保存

Dreamweaver 项目本质是文件集合，无需特殊“导出”功能。

操作步骤：

1. 保存文件：使用 Cmd+S 保存当前文档。使用 “文件” -> “保存全部” 保存所有打开的文件。
2. 上传到服务器（如果已配置）：在“文件”面板中，选择要上传的文件或文件夹，点击面板工具栏的“向上箭头”（上传文件）按钮。
3. 您的最终“产品”就是整个站点文件夹内的所有文件（HTML, CSS, JS, 图像等），将其复制到任何 Web 服务器即可发布。

三、 常用功能进阶技巧

1. 代码提示与快速编辑：在代码视图中输入时，会触发智能代码提示。按 Ctrl+空格键 可手动触发。在 CSS 属性值处按 Cmd+E 可打开快速编辑窗口。
2. 多光标编辑：按住 Cmd 键并在代码不同位置点击，可创建多个光标，同时编辑多处。
3. 使用代码片段：将常用代码（如响应式 Meta 标签、CSS Reset）保存到“代码片段”面板，以后只需拖拽即可插入。
4. 实时视图中的检查模式：在“实时视图”下，点击工具栏的“检查”按钮，然后将鼠标悬停在页面元素上，可以直观看到对应的 HTML 结构和高亮的 CSS 盒模型，是学习与调试的利器。
5. 快速查找与替换：使用 Cmd+F 在当前文档查找，使用 Cmd+Shift+F 可在整个站点文件夹中进行查找与替换。

四、 常见问题与解决方案

1. 问题： 插入的图像在 Dreamweaver 中显示为破损图标，但在浏览器中正常。
   
   解决方案： 确保图像文件位于已定义的站点文件夹内，并且使用相对路径（如 images/pic.jpg）。最好通过“文件”面板或“插入”菜单来添加图像。
2. 问题： 在“设计”视图下，页面布局与浏览器中看到的不一致。
   
   解决方案： “设计”视图仅为近似渲染，应以“实时视图”或浏览器预览为准。切换到“实时视图”进行更精确的视觉评估。
3. 问题： CSS 样式修改后没有立即生效。
   
   解决方案： 首先检查 CSS 设计器中对应的选择器是否正确选中。清除浏览器缓存后刷新预览（Cmd+Shift+R）。确保没有更高优先级的样式覆盖了您的修改。
4. 问题： 文件面板中的文件操作（如重命名、移动）导致链接路径错误。
   
   解决方案： 务必在 Dreamweaver 的“文件”面板内部进行文件管理操作。当您移动或重命名文件时，软件会弹出“更新文件”对话框，选择“更新”以自动修正相关链接。

五、 Mac 版快捷键汇总表