Adobe Dreamweaver CC 2017 是一款专业的可视化网页设计与代码编辑软件，它巧妙地将“所见即所得”的实时预览与强大的源代码编辑功能相结合，成为网页开发者与设计师的高效工具。本指南将深入解析其界面、工作流程及核心技巧。
一、 核心界面与工作区详解
启动 Dreamweaver 后，您将面对一个高度可定制的工作区。主要组件如下：
- 应用程序栏：位于顶部，包含菜单、工作区切换器（如“设计器”、“代码”、“拆分”）以及标准控件。
- 文档工具栏：显示当前文档标题，提供代码/拆分/设计视图切换、实时视图开关、多屏幕预览等核心按钮。
- 文档窗口：中央主区域，编辑和预览网页。在“拆分”视图下，可同时显示代码和设计视图。
- 状态栏：位于文档窗口底部，显示标签选择器、窗口尺寸选择器、缩放控件和编码状态。
- 面板组：默认停靠在右侧，包含：
- “文件”面板：管理本地站点和远程服务器文件。
- “CSS 设计器”面板：可视化地创建、编辑和管理 CSS 样式。
- “插入”面板：提供 HTML 元素、模板对象等的快速插入。
- “属性”检查器（通常在下方面板区）：根据所选对象（文本、图像、表格等）动态显示可编辑属性。
您可以通过“窗口”菜单显示或隐藏任何面板，并通过拖拽调整布局。
二、 从创建到导出的完整操作流程
1. 创建与管理站点
操作步骤：
- 启动 Dreamweaver，在菜单栏选择 站点 > 新建站点…。
- 在弹出的对话框中，输入站点名称（如“我的网站”）。
- 点击“本地站点文件夹”旁的文件夹图标，选择一个本地目录作为项目根文件夹。
- （可选）在左侧列表切换到“服务器”，可配置 FTP/SFTP 等远程服务器信息，用于后期文件同步。
- 点击“保存”。站点信息将出现在“文件”面板中。
目的： 站点管理是 Dreamweaver 高效工作的基石，它能确保链接路径正确、文件同步顺畅。
2. 创建与编辑网页文件
操作步骤：
- 在“文件”面板中，右键点击站点根目录，选择 新建文件，或使用快捷键
Cmd+Shift+N。 - 将新文件命名为
index.html（通常作为主页）。 - 双击该文件在文档窗口中打开。
- 在文档工具栏，点击“拆分”按钮，同时查看代码和设计视图。
- 在“插入”面板选择“结构”类别，点击“Div”或直接输入代码来构建页面结构。
- 在“CSS 设计器”面板中，通过“源”、“@媒体”、“选择器”和“属性”四个部分为页面添加样式。
- 在设计视图中点击元素，或使用状态栏的“标签选择器”选择元素，然后在“属性”检查器中修改其属性。
3. 实时预览与调试
操作步骤：
- 在文档工具栏，点击 “实时视图” 按钮。这将在一个基于 Chromium 的渲染引擎中精确显示页面效果。
- 在“实时视图”激活状态下，点击 “检查” 按钮（或使用快捷键
Cmd+Shift+I），可启用交互式检查模式，鼠标悬停于页面元素上时会高亮显示其 HTML 结构和 CSS 盒模型。 - 在“多屏幕预览”面板（窗口 > 多屏幕预览）中，可以查看页面在不同设备尺寸下的响应式效果。
4. 保存与导出
操作步骤：
- 编辑过程中，随时使用
Cmd+S保存当前文件。 - 若要导出整个站点以供发布：
- 确保“文件”面板中所有文件已保存。
- 如果配置了远程服务器，在“文件”面板顶部点击“连接到远程服务器”图标，然后点击“上传文件”图标（蓝色向上箭头），即可将本地文件同步至服务器。
- 若仅需导出本地文件，直接将“文件”面板中的站点根文件夹复制到所需位置即可。
注意： Dreamweaver 本身不生成独立的“导出”文件，其成品就是 HTML、CSS、JS 等标准网页文件。
三、 常用功能进阶技巧
- 代码提示与快速编辑： 在代码视图中输入标签或属性时，会触发智能提示，按
Tab键快速补全。在 CSS 属性值处按Cmd+E可打开快速编辑窗口。 - 多光标编辑： 按住
Cmd键并在代码不同位置点击，可创建多个光标，同时进行编辑。 - Emmet 缩写快速生成代码： 在代码视图中输入 Emmet 缩写（如
ul>li*5），然后按Tab键，可瞬间生成完整 HTML 结构。 - 使用“代码片段”面板： 将常用代码块（如页脚、导航栏）保存到“代码片段”面板（窗口 > 代码片段），之后可拖拽插入，提高效率。
- 可视化媒体查询调整： 在“实时视图”下，文档窗口顶部的绿色条代表 CSS 中定义的媒体查询断点，拖动其边缘可直接调整窗口大小以测试响应式布局。
四、 常见问题与解决方案
问题1： 链接或图像路径错误，在实时视图中不显示。
解决方案： 确保始终在已定义的“站点”内操作。插入资源时，使用“插入”面板或菜单，让 Dreamweaver 生成相对路径。检查“文件”面板中的文件位置是否正确。
问题2： 在“设计”视图下看到的布局与浏览器或“实时视图”差异很大。
解决方案： “设计”视图仅为近似渲染，用于快速布局。请始终以“实时视图”或在外置浏览器中预览（快捷键 Cmd+Option+P）为准进行调试。
问题3： 面板混乱或找不到某个特定面板。
解决方案： 从菜单栏选择 窗口 > 工作区 > 重置“设计器”，可将所有面板恢复至默认布局。也可以通过“窗口”菜单直接打开被关闭的面板。
问题4： 代码提示功能不工作。
解决方案： 检查“编辑 > 首选项 > 代码提示”中的设置是否启用。同时确保文件已正确保存为 .html 或 .css 等标准扩展名。
五、 快捷键汇总表 (Mac版)
| 功能 | 快捷键 | 说明 |
|---|---|---|
| 新建文件 | Cmd+Shift+N |
在站点内创建新文件 |
| 打开文件 | Cmd+O |
打开现有文件 |
| 保存文件 | Cmd+S |
保存当前文档 |
| 全部保存 | Cmd+Option+S |
保存所有打开文档 |
| 切换到代码视图 | Cmd+` |
（反引号键） |
| 切换到设计视图 | Cmd+Shift+` |
|
| 切换到拆分视图 | Cmd+Option+` |
|
| 切换实时视图 | Cmd+Shift+Alt+L |
或点击工具栏按钮 |
| 在浏览器中预览 | Cmd+Option+P |
主浏览器预览 |
| 查找和替换 | Cmd+F |
在当前文档中查找 |
| 全站查找替换 | Cmd+Shift+F |
在整个站点中查找替换 |
| 复制一行 | Cmd+Shift+D |
快速复制当前行或选中行 |
| 代码折叠/展开 | Cmd+Option+[ 或 ] |
折叠或展开代码块 |
| 快速标签编辑器 | Cmd+T |
围绕选中内容快速编辑标签 |
| 插入注释 | Cmd+Shift+/ |
为选中代码添加HTML注释 |
| 显示/隐藏面板 | F4 |
隐藏或显示所有面板，聚焦于文档 |
| 属性检查器 | Cmd+Option+I |
显示/隐藏属性检查器面板 |
通过掌握以上界面布局、标准工作流程、进阶技巧及快捷键，您将能充分利用 Adobe Dreamweaver CC 2017 for Mac 的强大功能，高效地进行网页设计与开发工作。
