Adobe Muse CC 2017 是一款面向设计师的无代码网站构建工具，允许用户像设计平面作品一样，通过直观的界面布局和设计工具来创建并发布响应式网站。本指南将详细介绍其核心界面、完整工作流程及实用技巧。
一、 软件核心界面与工作区详解
启动Adobe Muse后，您将看到由多个面板组成的标准化工作区，专为网站设计流程优化。
- 应用程序栏（顶部）： 包含菜单栏、工作区切换器以及基本控件（如缩放级别、预览模式）。
- 工具栏（左侧）： 集中了所有设计工具，如选择工具（V）、矩形工具（M）、文字工具（T）、缩放工具（Z）以及用于添加Widget（小部件）的专用按钮。
- 控制面板（顶部，工具栏下方）： 上下文敏感，显示当前所选对象或工具的属性选项，如颜色、字体、对齐方式等。
- 面板区（右侧）：
- 页面面板： 管理网站的所有页面、主页、断点（响应式设计）和页面状态。
- 资源面板： 集中管理项目中使用的所有图形、颜色和字体。
- 图层面板： 显示当前页面的图层结构，用于管理对象的堆叠顺序和可见性。
- 计划面板： 显示网站地图和页面结构，用于组织导航。
- 状态面板： 当选择按钮等可交互元素时，用于定义其不同状态（如正常、悬停、活动）的外观。
- Widget库面板： 提供可拖放的预建交互元素，如菜单、幻灯片、表单等。
- 主工作区（中央画布）： 这是设计页面的区域。您可以在顶部切换不同的页面进行编辑，并可以通过底部的“断点”栏（显示为手机、平板、桌面图标）为不同屏幕尺寸设计布局。
二、 从创建到导出的完整操作流程
1. 创建新项目
操作： 启动软件后，点击“文件”菜单 -> “新建”。或使用快捷键 Cmd + N。
位置： 在弹出的对话框中，设置网站名称（即项目名称）、网站宽度（通常为1920px）、并选择是否从空白页面开始或使用预设的启动模板。点击“确定”创建。
2. 规划网站结构
操作： 在右侧的“计划”面板中，通过点击面板底部的“+”号来添加新页面。您可以拖拽页面来调整层级关系，形成导航菜单的结构。
技巧： 右键点击页面可选择“设为主页”。
3. 设计页面布局
操作：
- 在“页面”面板中双击一个页面（如“主页”）将其在画布中打开。
- 使用“矩形工具” M 绘制页头、内容区、页脚等区域。
- 使用“文字工具” T 添加标题和段落文本。文字属性可在控制面板调整。
- 从“文件”菜单选择“置入”或直接拖拽图像文件到画布，以添加图片。
- 从右侧“Widget库”面板中，将所需的菜单、幻灯片等组件拖拽到画布上。
4. 创建响应式布局
操作： 点击画布底部的断点栏中的平板或手机图标，为更小的屏幕尺寸创建特定布局。Muse会自动创建一个对应断点的页面状态，您可以调整元素的位置、大小和可见性以适应移动设备。
位置： 断点栏位于画布底部中央。
5. 添加交互效果
操作：
- 按钮状态： 选中一个按钮或文字链接，在“状态”面板中点击“悬停”或“活动”状态，然后修改其外观（如改变颜色）。
- 锚点滚动： 绘制一个矩形，在“交互”面板（可从“窗口”菜单打开）中将其“类型”改为“锚点”。然后为菜单按钮添加链接，选择“链接到”该锚点。
6. 预览网站
操作： 随时点击应用程序栏右侧的“预览”按钮（眼球图标）或按 Cmd + P 在默认浏览器中预览当前页面效果。
7. 导出最终网站
操作：
- 点击“文件”菜单 -> “导出为HTML”。
- 在对话框中，选择导出位置，并设置“导出选项”（通常保持默认即可）。
- 点击“导出”。Muse会生成一个包含所有HTML、CSS、JavaScript和图像资源的文件夹，可直接上传至任何Web服务器。
三、 常用功能进阶技巧
1. 主控与页面的高效复用： 将网站中重复的元素（如页眉、页脚、导航栏）放在“主控”上（页面面板顶部）。编辑一次主控，所有应用了该主控的页面都会同步更新。
2. 快速对齐与分布： 选中多个对象后，在控制面板使用对齐与分布图标（一排方块图标）来精确排列对象。快捷键 Cmd + Shift + [ 或 ] 可快速将对象置于顶层或底层。
3. 使用“资源”面板统一风格： 将常用的颜色和字体添加到“资源”面板。设计时，只需从该面板点击颜色或字体即可快速应用，确保整个网站视觉风格统一。
4. 固定位置元素： 在“选项栏”（控制面板右侧）或“交互”面板中，可以将元素的“位置”设置为“固定”。这常用于创建始终停留在视窗顶部的导航栏。
四、 常见问题与解决方案
问题1： 字体在预览或导出后显示不正确。
解决方案： Muse依赖于用户系统字体。为确保网页正常显示，应使用“Web安全字体”或通过“资源”面板中的“添加Web字体”功能嵌入来自Typekit等服务的字体。
问题2： 导出的网站在移动设备上布局错乱。
解决方案： 务必为每个页面检查并专门设计手机和平板断点下的布局。在每个断点视图下，手动调整元素大小、位置，并利用“隐藏/显示”功能（在图层面板点击眼睛图标）来控制元素的可见性。
问题3： 置入的图像模糊。
解决方案： 确保原始图像分辨率足够高（建议至少2倍于其显示尺寸）。在Muse中选中图像，在控制面板检查其“尺寸”是否被意外拉大。最好使用“文件”->“置入”命令导入图像。
问题4： 滚动时页面跳动或闪烁。
解决方案： 这通常与固定位置元素或浏览器渲染有关。尝试将可能引起冲突的元素的“位置”属性从“固定”改为“绝对”测试。确保所有Widget（如菜单）已更新到最新版本。
五、 Adobe Muse CC 2017 for Mac 快捷键汇总表
| 功能 | 快捷键 (Mac) | 说明 |
|---|---|---|
| 新建文件 | Cmd + N | 创建新项目 |
| 打开文件 | Cmd + O | 打开现有项目 |
| 保存文件 | Cmd + S | 保存当前项目 |
| 置入图像 | Cmd + D | 向画布置入图像文件 |
| 预览页面 | Cmd + P | 在浏览器中预览 |
| 复制 | Cmd + C | 复制选中对象 |
| 粘贴 | Cmd + V | 粘贴对象 |
| 粘贴于当前位置 | Cmd + Shift + V | 在原位置粘贴对象 |
| 编组 | Cmd + G | 将选中对象编组 |
| 取消编组 | Cmd + Shift + G | 解散选中编组 |
| 置于顶层 | Cmd + Shift + ] | 将对象移至图层最前 |
| 置于底层 | Cmd + Shift + [ | 将对象移至图层最后 |
| 放大/缩小画布 | Cmd + + / – | 缩放视图 |
| 实际大小 | Cmd + 1 | 缩放至100% |
| 选择工具 | V | 切换至选择工具 |
| 矩形工具 | M | 切换至矩形工具 |
| 文字工具 | T | 切换至文字工具 |
| 缩放工具 | Z | 切换至缩放工具 |
| 显示/隐藏标尺 | Cmd + R | 切换标尺显示 |
| 显示/隐藏参考线 | Cmd + ; | 切换参考线显示 |
