Adobe Dreamweaver 2021 for Mac 详尽操作指南

Adobe Dreamweaver 2021 是一款专业的可视化网页设计与代码编辑软件，它将强大的代码编辑器与直观的实时视图设计界面相结合，支持最新的网页标准和技术，是网页设计师和前端开发者的高效工具。本指南将详细介绍其核心界面、完整工作流程及进阶技巧。

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

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

• 应用程序栏（顶部）： 包含菜单、工作区切换器（如“设计器”、“代码”、“拆分”）以及快速访问工具。
• 文档工具栏： 位于文档窗口上方，提供文件标题、代码/拆分/设计视图切换按钮、实时视图开关、多屏预览以及文档标题设置等。
• 文档窗口（中央工作区）： 这是编辑网页的核心区域。您可以选择：
  • 代码视图： 纯代码编辑环境。
  • 设计视图： 近似于浏览器的可视化设计环境（已逐步被实时视图取代）。
  • 拆分视图： 同时显示代码和实时视图，是最高效的工作模式。
• 实时视图： 基于 Chromium 的渲染引擎，能精确显示网页在浏览器中的实际效果，并允许在渲染结果中直接进行有限的交互式编辑。
• 面板组（通常位于右侧）：
  • “文件”面板： 管理本地站点、远程服务器文件及版本控制（如 Git）。
  • “CSS 设计器”面板： 可视化创建和管理 CSS 样式，包含源、@媒体、选择器和属性四个子面板。
  • “DOM”面板： 以树状结构显示文档对象模型，便于导航和选择元素。
  • “资源”面板： 集中管理站点内的图像、颜色、URL 等资源。
  • “插入”面板： 提供将各种对象（如 Div、图像、表单元素）快速插入文档的按钮，可通过“窗口”>“插入”打开。
• 属性检查器（底部）： 根据所选元素（在代码或实时视图中选中）动态显示其属性，并提供快速编辑字段，是修改元素 HTML 属性或 CSS 样式的快捷入口。

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

以下是从零开始创建一个简单网页并导出的标准流程。

1. 创建与管理站点

步骤一：定义新站点

在 Dreamweaver 中，站点是管理所有文件的基础。点击菜单栏 “站点” > “新建站点…”。在弹出的对话框中：

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

站点创建后，其所有文件将在右侧“文件”面板中显示。

2. 创建与编辑网页文件

步骤二：新建 HTML 文件

使用快捷键 Cmd + N，或点击 “文件” > “新建”。在“新建文档”对话框中选择“HTML”，文档类型选择“HTML5”，点击“创建”。

步骤三：设置页面标题与元信息

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

• 在代码区域的 <title> 标签内直接修改页面标题。
• 或在文档工具栏的“标题”字段直接输入。
• 在 <head> 区域可手动添加 <meta charset="UTF-8"> 等标签。

步骤四：使用“插入”面板构建页面结构

将光标置于代码视图的 <body> 标签内，或点击实时视图的编辑区域。

• 从“插入”面板选择“Div”，点击会弹出对话框，可为其指定 ID 或类，点击“确定”插入一个容器。
• 在“插入”面板选择“图像” > “图像”，从资源中选择图片插入。
• 直接输入文本内容。

步骤五：使用“CSS 设计器”面板进行样式设计

在“拆分”视图下，选中一个元素（如在代码中点击其标签，或在实时视图中点击它）。

• 右侧“CSS 设计器”面板的“选择器”子面板中，点击“+”添加新选择器。
• 在“属性”子面板中，展开相应分类（如“布局”、“文本”、“边框”），设置属性值（如 `width: 1000px;`, `margin: auto;`）。
• 所有样式会自动生成在“源”子面板指定的 CSS 文件或内嵌样式中。

步骤六：实时视图交互与代码导航

在“拆分”视图下，开启实时视图（文档工具栏的“实时视图”按钮）。

• 在实时视图中悬停元素，代码视图会自动高亮对应代码。
• 在实时视图中点击元素，其周围会显示蓝色边框，并可在属性检查器中直接编辑其 HTML 属性或 CSS。
• 使用快捷键 Cmd + / 可快速注释/取消注释选中的代码行。

3. 预览、测试与导出

步骤七：多屏预览与浏览器测试

点击文档工具栏的“多屏预览”按钮，可以查看页面在不同设备尺寸下的显示效果。要进行更全面的测试，请点击 “文件” > “在浏览器中预览”，并选择一个已安装的浏览器（或使用快捷键 Cmd + F12 在主浏览器中预览）。

步骤八：保存与导出

保存文件：使用 Cmd + S。Dreamweaver 没有独立的“导出”概念，您的网站就是本地站点文件夹中的所有文件集合。要发布网站，只需将整个本地站点文件夹通过 FTP 或其他方式上传到服务器。FTP 设置可在 “站点” > “管理站点” > 选择您的站点 > “服务器” 中配置。

三、常用功能进阶技巧

• 快速代码提示与补全： 在代码视图中输入标签或属性开头字母，按 Tab 或 Enter 接受提示。输入 CSS 属性后，按 : 也会触发值提示。
• 多光标编辑： 按住 Cmd 键并在代码不同位置点击，可创建多个光标，实现批量编辑。
• 使用 Emmet 缩写快速生成代码： 在代码视图中输入 Emmet 缩写（如 `ul>li*5>a`），然后按 Tab 键即可展开完整代码结构。
• 在“实时视图”中检查元素： 在实时视图中右键点击元素，选择“检查”，会在代码视图中精确定位并高亮该元素代码。
• 代码重构： 选中一段代码，右键选择“重构”，可进行“重命名”、“提取到文件”等操作，提升代码质量。
• 与 Creative Cloud 库集成： 在“资源”面板中切换到“库”选项卡，可直接使用 CC 库中的颜色、字符样式和资源。

四、常见问题与解决方案

• 问题：实时视图显示与最终浏览器效果有差异。
  
  解决方案： 实时视图基于 Chromium，请务必在多个实际浏览器（如 Safari、Chrome、Firefox）中进行最终测试。确保文档模式设置为“标准”。
• 问题：CSS 样式修改后，在实时视图中未立即更新。
  
  解决方案： 点击实时视图上方的“刷新”按钮，或按 Cmd + R。检查 CSS 选择器的优先级，可能被更高优先级样式覆盖。
• 问题：“文件”面板中站点文件列表不显示或混乱。
  
  解决方案： 在“文件”面板右上角菜单中，选择“刷新”（快捷键 Cmd + R）。或重新定义站点（“站点”>“管理站点”），确保本地站点文件夹路径正确。
• 问题：快捷键失效。
  
  解决方案： 检查是否与系统或其他应用快捷键冲突。可在 Dreamweaver 的“编辑”>“快捷键”菜单中查看和自定义快捷键。
• 问题：插入面板或某些功能面板找不到。
  
  解决方案： 前往“窗口”菜单，勾选对应面板名称（如“插入”、“CSS 设计器”）。通过“窗口”>“工作区”>“重置‘设计器’”恢复默认布局。

五、Dreamweaver 2021 for Mac 核心快捷键汇总