Dreamweaver 工作区

载入 Dreamweaver

安装 Dreamweaver 后，首次启动应用程序时，屏幕上会显示一个快速启动菜单，询问您三个问题，帮助您根据需要个性化 Dreamweaver 工作区。

根据您对这些问题的回答，Dreamweaver 会在开发者 Workspace（专注于代码的简洁布局）或标准 Workspace（具有可视化工具和应用内预览功能的分屏布局）中打开。 

选择工作区后，可选择您喜欢的颜色主题。 然后您可以开始使用。

改进的主屏幕

Dreamweaver 中的主页屏幕让您快速访问最近使用的文件、文件类型和入门模板。

根据您的订阅状态，“开始”工作区可能还会显示专门针对您的需求定制的内容。

Dreamweaver 在启动时或没有打开文档时显示主页屏幕。

Dreamweaver“开始”体验中的选项

单击"学习"可从此屏幕立即访问 Dreamweaver 教程。

通过单击显示的任何文件类型，开始在 Dreamweaver 中创建文档。

打开 Dreamweaver 附带的入门模板之一。 

单击"主页"返回到启动屏幕。 

您可以在开始屏幕中查看最近处理的文件。 如果您没有任何最近文件，此选项卡为空白。

您还可以通过使用此屏幕右上角的搜索图标来使用搜索功能。 当您输入搜索查询时，应用程序会显示与搜索查询匹配的最近文件、Creative Cloud 资源、帮助链接和图库图像。

您可以单击“新建”开始创建新的 Dreamweaver 文件。 如果您的系统中已有文件，请单击“打开”。 有关在 Dreamweaver 中创建和打开文档的信息，请参阅创建和打开文件。

工作区概述

使用 Dreamweaver 工作区，可以查看文档和对象属性。 工作区还将许多常用操作放置于工具栏中，使您可以快速更改文档。

工作区元素概述

工作区包括以下元素：

位于应用程序窗口顶部，包含工作区切换器、菜单（仅限 Windows）和其他应用程序控件。

包含为文档窗口的不同视图（例如设计视图、实时视图和代码视图）提供选项的按钮。

若要显示“标准”工具栏，请选择“窗口”>“工具栏”>“标准”。 工具栏包含来自文件和编辑菜单的常用操作按钮：新建、打开、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做。

位于应用程序窗口左侧，包含视图专用按钮。

显示您当前创建和编辑的文档。

用于查看和更改所选对象或文本的各种属性。 每个对象具有不同的属性。

位于“文档”窗口底部的状态栏中。 显示环绕当前选定内容的标签的层次结构。 单击该层次结构中的任何标签可以选择该标签及其全部内容。

帮助您监控和修改工作。 示例包括“插入”面板、CSS Designer 面板和“文件”面板。 若要展开某个面板，请双击其选项卡。

允许您上传和查看 Creative Cloud 中的 PSD 文件。 使用此面板，您可以从 PSD 合成文件中提取 CSS、文本、图像、字体、颜色、渐变和测量值到您的文档中。

包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。 每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。 例如，您可以通过单击“插入”面板中的“表格”按钮来插入一个表格。 如果愿意，可以使用“插入”菜单来插入对象，而不用通过使用“插入”面板。

无论它们是 Dreamweaver 站点的一部分还是位于远程服务器，都可以将它们用于管理文件和文件夹。 使用“文件”面板，还可以访问本地磁盘上的所有文件。 有关更多信息，请参阅管理文件和文件夹。

可让您跨不同的网页、不同的站点和不同的 Dreamweaver 安装保存和重复使用代码片段（使用同步设置）。 有关更多信息，请参阅使用代码片段重用代码。

是一个 CSS 属性检查器，让您"可视化"创建 CSS 样式、文件和设置属性以及媒体查询。

“文档”窗口概述

“文档”窗口显示当前文档。 要切换文档视图，请使用文档工具栏上的视图选项。 

您也可以使用"视图"菜单中的"视图"选项来切换视图。

可以真实地呈现您的文档在浏览器中的实际样子，并且您可以就像在浏览器中一样与文档进行交互。 您还可以在“实时”视图中直接编辑 HTML 元素并在同一视图中即时预览更改。 有关在实时视图中编辑的更多信息，请参阅在实时视图中编辑 HTML 元素。

是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。 在此视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。

是一个用于编写和编辑 HTML、JavaScript 以及任何其他类型代码的手工编码环境。

是 代码视图的拆分版本，让您可以滚动浏览，同时处理文档的不同部分。 

让您可以在单个窗口中同时查看同一文档的代码视图和实时视图。

让您可以在单个窗口中同时查看同一文档的 代码视图和 设计视图。

显示浏览器用于执行页面的实际代码，并且可以在您与 实时视图中的页面交互时动态更改。

当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，其中显示所有打开的文档的文件名。 如果您进行了尚未保存的更改，Dreamweaver 会在文件名后显示星号。

Dreamweaver 还会在文档的选项卡下（如果在单独窗口中查看文档，则在文档标题栏下）显示“相关文件”工具栏。 相关文档指与当前文件关联的文档，例如 CSS 文件或 JavaScript 文件。 若要在“文档”窗口中打开这些相关文件之一，请在“相关文件”工具栏中单击其文件名。

在视图之间切换

使用“文档”工具栏可在各种视图之间快速切换。 有关更多信息，请参阅 文档工具栏概述。

您也可以使用"视图"菜单中的以下选项在视图之间切换：

• 仅代码视图：选择"代码"
• 拆分视图：选择"拆分"并选择任何拆分选项
• 视图模式：在实时视图和设计视图之间切换
• 切换视图：从一个视图切换到另一个视图。

以层叠方式、平铺方式放置文档窗口或重新排列文档窗口

如果一次打开了多个文档，您可以采用层叠方式或平铺方式放置这些文档。

要层叠文档窗口：选择"窗口">"排列">"层叠"。

要平铺文档窗口：

• (Windows) 选择"窗口">"排列">"水平拼贴"或"垂直拼贴"。
• (Macintosh) 选择"窗口">"排列">"拼贴"。

打开多个文件时，"文档"窗口将以选项卡方式显示。 若要重新排列选项卡式"文档"窗口，请将某个窗口的选项卡拖动到组中的新位置。

调整“文档”窗口的大小

状态栏显示“文档”窗口的当前尺寸（以像素为单位）。 若要将页面设计为在使用某一特定尺寸大小时具有最好的显示效果，可以将“文档”窗口调整到任一预定义大小、编辑这些预定义大小或者创建新的大小。

更改设计视图或实时视图中页面的视图大小时，仅更改视图大小的尺寸。 而不更改文档大小。

除了预定义和自定义大小外，Dreamweaver 还会列出在媒体查询中指定的大小。 选择与媒体查询对应的大小后，Dreamweaver 将使用该媒体查询显示页面。 还可更改页面方向以预览用于移动设备的页面，在这些页面中根据设备的持握方式更改页面布局。

要调整文档窗口大小，请从文档窗口底部的"窗口大小"弹出菜单中选择其中一个尺寸。

显示的窗口大小反映浏览器窗口的内部尺寸（不包括边框）；右侧列出显示器大小或移动设备。

更改窗口大小弹出菜单中列出的值

向窗口大小弹出菜单中添加新的大小

文档工具栏概述

使用“文档”工具栏包含的按钮，可以在文档的不同视图之间快速切换。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

以下选项将显示在“文档”工具栏中：

仅在“文档”窗口中显示“代码”视图。

在“代码”视图和“实时/设计”视图之间拆分“文档”窗口。 流体网格文档不提供设计视图选项。

是一个交互式预览，可准确地实时呈现 HTML5 项目和更新，以便在您做出更改时显示您的更改。 您也可以在“实时”视图中编辑 HTML 元素。 利用“实时”选项旁边的下拉列表，可以在“实时”视图和“设计”视图之间切换。 流体网格文档中不提供此下拉列表。

显示文档的表示形式，显示用户在 web 浏览器中查看文档的方式。 

“标准”工具栏概述

若要显示“标准”工具栏，请选择“窗口”>“工具栏”>“标准”。 该工具栏包含来自 文件和 编辑菜单的常用操作按钮：新建、打开、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和 重做。

“浏览器导航”工具栏概述

“浏览器导航”工具栏在实时视图中成为活动状态（仅当您通过选择“窗口”->“工具栏”->“标准”完成设置时），并显示您正在“文档”窗口中查看的页面地址。 “实时”视图的作用类似于常规的浏览器，因此即使浏览到您的本地站点（例如 http://www.adobe.com）以外的站点，Dreamweaver 也将在“文档”窗口中加载该页面。

默认情况下，不激活“实时”视图中的链接。 在不激活链接的情况下可选择或单击“文档”窗口中的链接文本，而不进入另一个页面。 要在 Live 视图中测试链接，您可以通过选择"视图">"Live 视图选项">"关注链接 (Ctrl+点击链接)"或"持续关注链接"来启用一次性点击或连续点击。

工具栏概述

工具栏垂直显示在“文档”窗口的左侧，在所有视图（“代码”、“实时”和“设计”视图）中可见。 工具栏上的按钮是特定于视图的，并且仅在适用于您所使用的视图时显示。 例如，如果您正在 Live 视图中工作，则不会显示特定于代码视图的选项（如"格式化源代码"）。 

自定义工具栏

您可以根据需要通过添加菜单选项或从工具栏中删除不需要的菜单选项来自定义此工具栏。

要自定义工具栏，请执行以下操作：

要还原默认工具栏按钮，请在"自定义工具栏"对话框中点击"还原默认设置"。

状态栏概述

“文档”窗口底部的“状态”栏提供与正创建的文档有关的其他信息。

标签选择器

显示环绕当前选定内容的标签的层次结构。 单击该层次结构中的任何标签以选择该标签及其全部内容。 单击 <body> 可以选择文档的整个正文。 若要在标签选择器中设置某个标签的 class 或 ID 属性，请右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 该标签，然后从上下文菜单中选择一个类或 ID。

“输出”面板

点击此图标可显示 Output 面板，该面板显示文档中的代码错误。

代码颜色

（仅在代码视图中可用）

从此弹出菜单中选择任一编程语言，以更改代码的颜色显示效果。

插入和覆盖切换

（仅在代码视图中可用）

允许您在代码视图中工作时在插入和覆盖模式之间切换。

行和列编号

（仅在 Code 视图中可用。）

显示光标所在位置的行号和列号。

属性检查器概述

Property Inspector（"窗口">"属性"）允许您检查和编辑当前选定页面元素（如文本或插入的对象）的最常用属性。

“属性检查器”的内容根据选定的元素的不同会有所不同。 例如，如果选择页面上的图像，则“属性检查器”将改为显示该图像的属性（如图像的文件路径、图像的宽度和高度、图像周围的边框（如果有），等等）。

默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。

若要访问特定属性检查器的帮助，请单击属性检查器右上角的帮助按钮，或者从属性检查器的“选项”菜单中选择“帮助”。

查看并更改页面元素的属性

上下文菜单

使用上下文菜单可以很方便地访问与正在处理的对象或窗口有关的最有用的命令和属性。 上下文菜单仅列出适用于当前选择的命令。

要打开上下文菜单，请在代码视图中右键点击（Windows）或按住 Ctrl 键点击（Mac）代码段，或者在 Live 或 Design 视图中点击对象。

在 Dreamweaver 中重新排列面板

您可以根据需要自定义所有 Dreamweaver 面板的位置和外观。

停放和取消停放面板

• 要停放面板，请将其标签拖移到停放中（顶部、底部或两个其它面板之间）。
• 要停放面板组，请将其标题栏（标签上面的实心空白栏）拖移到停放中。
• 要删除面板或面板组，请将其标签或标题栏从停放中拖走。 您可以将其拖移到另一个停放中，或者使其变为自由浮动。

移动面板

在移动面板时，您会看到蓝色突出显示的放置区域，您可以在该区域中移动面板。 例如，通过将一个面板拖移到另一个面板上面或下面的窄蓝色放置区域中，可以在停放中向上或向下移动该面板。 如果拖移到的区域不是放置区域，该面板将在工作区中自由浮动。

• 若要移动面板，请拖动其标签。
• 若要移动面板组，请拖动其标题栏。

添加和删除面板

如果从停放中删除所有面板，该停放将会消失。 您可以通过将面板移动到工作区右边缘直到出现放置区域来创建停放。

• 若要移除面板，请右键单击 (Windows) 或按住 Control 单击 (Mac) 其选项卡，然后选择"关闭"，或从"窗口"菜单中取消选择该面板。
• 要添加面板，请从"窗口"菜单中选择该面板，然后将其停放在所需的位置。

处理面板组

• 要将面板移到组中，请将面板标签拖到该组突出显示的放置区域中。
• 要重新排列组中的面板，请将面板标签拖移到组中的一个新位置。
• 要从组中删除面板以使其自由浮动，请将该面板的标签拖移到组外部。
• 要移动组，请拖动其标题栏（选项卡上方的区域）。

堆叠浮动的面板

当您将面板拖出停放但并不将其拖入放置区域时，面板会自由浮动。 您可以将浮动的面板放在工作区的任何位置。 您可以将浮动的面板或面板组堆叠在一起，以便在拖动最上面的标题栏时将它们作为一个整体进行移动。

• 要堆叠浮动的面板，请将面板的标签拖动到另一个面板底部的放置区域中以拖动该面板。
• 要更改堆叠顺序，请向上或向下拖移面板标签。
• 要从堆叠中删除面板或面板组以使其自由浮动，请将其标签或标题栏拖走。

调整面板大小

• 要将面板、面板组或面板堆叠最小化或最大化，请双击选项卡。 也可以双击选项卡区域（选项卡旁边的空白区）。
• 若要调整面板大小，请拖动面板的任意一条边。 

折叠和展开面板图标

您可以将面板折叠为图标以避免工作区出现混乱。 在某些情况下，在默认工作区中将面板折叠为图标。

• 若要折叠或展开列中的所有面板图标，请单击停放区顶部的双箭头。
• 若要展开单个面板图标，请单击它。
• 若要调整面板图标大小以便仅能看到图标（看不到标签），请调整停放的宽度直到文本消失。 若要再次显示图标文本，请加大停放的宽度。
• 若要将展开的面板重新折叠为其图标，请单击其选项卡、其图标或面板标题栏中的双箭头。

创建自定义工作区

您可以根据需要添加或删除面板来自定义工作区。 然后，您可以通过保存工作区来保存这些更改，以便稍后从文档工具栏中的 Workspace 切换器进行访问。

通过将面板的当前大小和位置另存为命名的工作区，即使移动或关闭了面板，您也可以恢复该工作区。

要保存自定义工作区：

1. 选择"窗口">"工作区布局">"新建工作区"。
2. 键入工作区的名称。

工作区将保存，并在“文档”工具栏中的工作区切换器中可见。

要删除自定义工作区：

从应用程序栏的工作区切换器中选择“管理工作区”以打开“管理工作区”对话框。 选择工作区，然后点击"删除"。

显示或切换工作区

从文档工具栏中的工作区切换器选择一个工作区。

在多用户系统中自定义 Dreamweaver

您可以自定义 Dreamweaver 来满足您的需求，即使在多用户操作系统（如 Windows XP 或 Mac OS X）中也是如此。

Dreamweaver 可防止任何用户的自定义配置影响任何其他用户的自定义配置。 为此，当您首次在 Dreamweaver 可识别的某个多用户操作系统中运行它时，该应用程序将创建各种配置文件的副本。 这些用户配置文件存储在一个属于您的文件夹中。

如果您重新安装或升级 Dreamweaver，Dreamweaver 会自动为现有的用户配置文件创建备份副本，因此，如果您手动自定义了这些文件，您仍然可以访问所做的更改。

显示选项卡式文档（仅在 Mac 上）

可以在一个“文档”窗口中显示多个文档，并使用选项卡来标识每个文档。 还可以将这些文档显示为浮动工作区的一部分，此时每个文档都显示在自己单独的窗口中。

在单独的窗口中打开选项卡式文档

按住 Ctrl 键单击选项卡，然后从上下文菜单中选择“移至新窗口”。

更改默认选项卡式文档的设置

1. 选择“Dreamweaver”>“首选参数”，然后选择“常规”类别。
2. 选择或取消选择“以选项卡方式打开文档”并单击“确定”。

在您更改首选参数时，Dreamweaver 不会更改当前打开的文档的显示。 但是，在选择新的首选参数之后打开的文档将按照您所选的首选参数进行显示。

在启动 Dreamweaver 时以及未打开任何文档时，将显示欢迎屏幕。 您可以选择隐藏“欢迎”屏幕，并在以后再显示它。 当欢迎屏幕被隐藏且没有打开任何文档时，“文档”窗口处于空白状态。

常见 Dreamweaver 面板

您在 Dreamweaver 中将使用大量面板。 这里介绍了一些常用面板。

“插入”面板概述

“插入”面板（“窗口”>“插入”）包含用于创建和插入对象（例如表格、图像和链接）的按钮。 这些按钮被分为几个类别，您可以从顶部的下拉列表中选择所需类别来切换。

某些类别具有带弹出菜单的按钮。 从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。 例如，如果您从 字符按钮的弹出菜单中选择 换行符，下次单击 字符按钮时，Dreamweaver 会插入换行符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。

“插入”面板按以下类别进行组织：

让您创建和插入最常用的 HTML 元素，如 div 标记和对象，如图像和表格。

包含用于创建表单和插入表单元素的按钮，如搜索、月份和密码。

让您将文档另存为模板，并将特定区域标记为可编辑区域、可选区域、重复区域或可编辑的可选区域。

包含 Bootstrap 组件，提供导航、容器、下拉菜单等，您可以在响应式项目中使用。

包含用于构建使用 jQuery Mobile 的站点的按钮。
\n

让您插入 jQuery UI 元素，如折叠面板、滑块和按钮。

用于将“插入”面板中最常用的按钮分组和组织到某一公共位置。

插入对象

使用"插入"面板插入对象：

编辑“插入”面板首选参数

在“插入”面板的“收藏夹”类别中添加、删除或管理项目

“文件”面板概述

使用 文件面板查看和管理 Dreamweaver 站点上的文件。

您可以使用“文件”面板查看文件和文件夹，检查它们是否与 Dreamweaver 站点相关联，也可以执行标准文件维护操作（如打开和移动文件）。

“文件”面板还可帮助您管理文件并在本地和远程服务器之间传输文件。 

有关您可以使用"文件"面板执行的所有操作的更多信息，请参阅管理文件和文件夹。

CSS Designer

CSS 设计器面板（窗口 > CSS 设计器）是一个 CSS 属性检查器，让您以"可视化"方式创建 CSS 样式、文件、设置属性以及媒体查询。

可以使用 Ctrl/Cmd+ Z 撤消或使用 Ctrl/Cmd + Y 还原您在 CSS Designer 中执行的所有操作。 更改会自动反映在“实时”视图中，相关 CSS 文件也会刷新。 为了让您觉察到相关文件已更改，受影响文件的选项卡将在一段时间内（约八秒）突出显示。

CSS 设计器面板包含以下窗格和选项：

全部 列出与当前文档关联的所有 CSS、媒体查询和选择器。 您可以筛选所需的 CSS 规则并修改属性。 您还可以使用此模式开始创建选择器或媒体查询。

此模式对选定内容不敏感。 这意味着当您选择页面上的元素时，关联的选择器、媒体查询或 CSS 不会在 CSS 设计器中突出显示。

当前 列出当前文档的“设计”或“实时”视图中所有选定元素的已计算样式。 当您在"代码"视图中对 CSS 文件使用此模式时，会显示焦点选择器的所有属性。

此模式是上下文相关的。 使用此选项可编辑与文档中选定元素关联的选择器属性。

源 列出与文档相关的所有 CSS 样式表。 使用此窗格，您可以创建 CSS 并将其附加到文档，也可以定义文档中的样式。

@媒体 在“源”窗格中列出所选源中的全部媒体查询。 如果您不选择特定 CSS，则此窗格将显示与文档关联的所有媒体查询。

选择器 在“源”窗格中列出所选源中的全部选择器。 如果您同时还选择了一个媒体查询，则此窗格会为该媒体查询缩小选择器列表范围。 如果没有选择 CSS 或媒体查询，则此窗格将显示文档中的所有选择器。

当您在"@Media"窗格中选择"全局"时，将显示所选来源中不包含在媒体查询中的所有选择器。

属性 显示可为指定的选择器设置的属性。 有关更多信息，请参阅设置属性。

如果您在 CSS Designer 中展开或折叠窗格，窗格的大小在会话中保持不变。 “源”和“媒体”窗格会保持自定义大小，直到您再次更改其大小。

注意：选择某个页元素时，在“选择器”窗格中选择最具体的选择器。 要查看特定选择器的属性，请在窗格中单击该选择器的名称。

若要查看所有选择器，可以在“源”窗格中选择“所有源”。 要查看所选来源中不属于任何媒体问题的选择器，请在 @Media 窗格中单击"Global"。

可视化参考线概述

Dreamweaver\n提供了多种可视化指南来帮助您设计文档\n并大致预测它们在浏览器中的显示效果。您可以执行以下任何操作：

• 立即将“文档”窗口与所需的窗口大小对齐，查看元素如何适合页面。

• 用跟踪图像作为页面背景，可帮助您复制在插图或图像编辑应用程序（如 Adobe® Photoshop® 或 Adobe® Fireworks®）中创建的设计。

• 用标尺和辅助线为精确定位和调整页面元素提供可视的提示。

• 使用网格可以精确定位绝对定位元素（AP 元素）以及调整其大小。

  页面上的网格标记有助于对齐 AP 元素，启用对齐后，当移动 AP 元素或调整其大小时，AP 元素会自动与最近的网格点对齐。 （其他对象，如图像和段落，不与网格对齐。） 不论网格是否可见，对齐都有效。

放大和缩小页面

Dreamweaver 允许您在“文档”窗口中提高缩放比率（放大），以便查看图形的像素精确度、更加轻松地选择小项目、使用小文本设计页面和设计大页面等等。

要缩放页面，请选择"视图">"设计视图选项">"缩放"，然后选择任何可用的缩放选项。

您可以从各种缩放比率选项中选择。 您还可以选择：

• 适合选择 - 选择对象或文字，然后选择此选项将选择内容填充到文档窗口。
• 全部适合 - 将整个页面填充到文档窗口
• 适合宽度 - 将页面的整个宽度填充到文档窗口

设置 Dreamweaver 的常规首选参数

在 Dreamweaver 中设置文档的字体首选参数

文档编码决定文档在浏览器中的显示方式。 通过 Dreamweaver 字体首选参数，可按所需的字体和大小查看给定编码。 但是，您在“字体首选参数”对话框中选择的字体只影响字体在 Dreamweaver 中的显示方式；它们不影响文档在访问者的浏览器中的显示方式。 若要更改字体在浏览器中的显示方式，您需要通过使用属性检查器或应用 CSS 规则来更改文本。

有关为新文档设置默认编码的信息，请参阅创建和打开文档。

自定义 Dreamweaver 高亮颜色

使用"突出显示"偏好设置来自定义在 Dreamweaver 中标识模板区域、库项目、第三方标记、布局元素和代码的颜色。

更多类似内容

• 打开相关文件
• 有关在 Dreamweaver 中编码的常规信息
• 设置编码首选参数
• 查看和编辑 head 内容
• 使用可视化助理进行布局
• 预览页面
• 在“文件”面板中处理文件