Adobe Dreamweaver CC 2018 for Mac 核心功能与操作全解

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

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

启动 Dreamweaver 后，您将看到高度可定制的工作区。主要组件如下：

1. 应用程序栏：位于顶部，包含菜单、工作区切换器（如“设计器”、“代码”、“拆分”）以及基本控制选项。
2. 文档工具栏：显示当前文档标题，并提供代码/拆分/设计视图切换、实时视图开关、文档标题修改等功能。
3. 工作区（核心区域）：
   • 代码视图：纯代码编辑环境，提供语法高亮、代码提示、错误检测。
   • 设计视图：传统的可视化布局视图。
   • 拆分视图（最常用）：同时显示代码和实时设计预览，代码更改可即时反映在预览中。
   • 实时视图：基于Chromium的浏览器级渲染，可最真实地预览网页交互效果。
4. 面板组（通常位于右侧）：
   • “文件”面板：管理本地站点和远程服务器文件。
   • “CSS设计器”面板：可视化创建和管理CSS样式、选择器、属性。
   • “DOM”面板：以树状结构显示文档对象模型，便于导航和选择元素。
   • “资源”面板：集中管理站点内的图像、颜色、URL等资源。
5. 属性检查器（位于底部）：动态显示当前所选元素（如文本、图像、DIV）的属性，并可在此直接编辑。

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

1. 创建与管理站点

操作步骤：

1. 点击菜单栏 “站点” > “新建站点…”。
2. 在弹出的对话框中，输入站点名称（如“MyWebsite”）。
3. 指定本地站点文件夹（即项目在Mac上的存储位置）。
4. （可选）在“服务器”选项卡中设置远程服务器信息，用于未来文件同步。
5. 点击“保存”。站点信息将显示在“文件”面板中。

2. 创建或打开网页文件

创建新文件：

1. 快捷键 Cmd + N，或点击 “文件” > “新建”。
2. 选择文档类型（如“HTML”），选择预设的布局框架（如“无”或“2列固定”），点击“创建”。

打开现有文件：

1. 在“文件”面板中，双击站点文件夹内的任何HTML、CSS等文件。
2. 或使用 Cmd + O 打开本地文件。

3. 页面设计与编码（核心操作）

建议使用拆分视图进行工作。

1. 插入元素：
   • 使用菜单栏 “插入” 菜单，或“插入”面板（如果启用），添加DIV、图像、链接等。
   • 例如，插入一个DIV：“插入” > “Div”，设置类或ID后点击“确定”。
2. 编辑内容与属性：
   • 在“设计”视图或“实时视图”中直接点击文本进行编辑。
   • 选中任何元素后，在底部的“属性检查器”中修改其属性（如链接的href、图像的alt）。
3. 使用CSS设计器进行样式设计：
   • 在“CSS设计器”面板的 “源” 部分，添加或附加现有的CSS文件。
   • 在 “选择器” 部分，点击“+”添加新选择器（如 .header）。
   • 在 “属性” 部分，为选中的选择器设置样式（如 background-color: #f0f0f0;）。
4. 实时预览与调试：
   • 点击文档工具栏的 “实时视图” 按钮，进行交互式预览。
   • 在“实时视图”下，点击 “检查” 按钮，可以激活类似浏览器开发工具的检查模式，直观查看元素盒模型和样式。

4. 保存与导出

1. 保存文件：使用 Cmd + S 保存当前文档。
2. 导出站点：
   • Dreamweaver 不涉及传统意义上的“导出项目”概念。最终成果就是您的站点文件夹内的所有文件。
   • 如需上传至服务器，可使用 “文件”面板。连接到远程服务器后，选中文件并点击面板工具栏上的“上传”箭头图标。
3. 在浏览器中预览：按 Option + Cmd + P 在主浏览器中预览当前页面，这是最终测试的关键步骤。

三、 常用功能进阶技巧

1. 多光标编辑：在代码视图中，按住 Cmd 键并点击多个位置，可创建多个光标，同时进行编辑。
2. 快速代码片段：输入缩写后按 Tab 键触发Emmet快速代码。例如，输入 ul>li*5 后按Tab，会自动生成一个包含5个列表项的无序列表。
3. 视觉媒体查询：在文档窗口右下角，点击显示“媒体查询”栏的图标，可以可视化地创建和调试CSS媒体查询，针对不同屏幕尺寸进行设计。
4. 与Creative Cloud库同步：通过“资源”面板中的“Creative Cloud库”选项卡，可以直接使用同步的颜色、字符样式等品牌资产。
5. 代码提示与重构：在代码视图中，输入CSS属性或HTML标签时，使用 Ctrl + Space 强制调出代码提示。右键点击代码，可使用“重构”功能快速重命名选择器等。

四、 常见问题与解决方案

1. 问题：实时视图与最终浏览器显示效果有差异。
   
   解决方案：实时视图基于Chromium内核，与Chrome浏览器效果基本一致。最终测试务必使用 Option + Cmd + P 在多个目标浏览器（如Safari， Firefox）中进行预览和调试。
2. 问题：CSS样式修改后，在实时视图中没有立即更新。
   
   解决方案：确保“实时视图”按钮已激活。有时需要点击一下设计区域或按 Cmd + S 保存文件来触发刷新。检查CSS选择器的优先级和是否有缓存影响。
3. 问题：“文件”面板中的文件显示混乱或丢失。
   
   解决方案：在“文件”面板右上角菜单中，点击“刷新”（或按 Cmd + R）。确认当前选择的站点是否正确（通过面板顶部的下拉列表切换）。
4. 问题：快捷键失效。
   
   解决方案：检查是否与Mac系统或其他应用快捷键冲突。可在Dreamweaver的 “编辑” > “快捷键” 中查看和自定义快捷键。

五、 Dreamweaver CC 2018 for Mac 快捷键汇总表