Dreamweaver 工作流程概述
您可以使用多种方法来创建 Web 站点，下面介绍的是其中的一种方法：
规划和设置站点
确定将在哪里发布文件，检查站点要求、访问者情况以及站点目标。此外，还应考虑诸如用户访问以及浏览器、插件和下载限制等技术要求。在组织好信息并确定结构后，您就可以开始创建站点。
组织和管理站点文件
在“文件”面板中，您可以方便地添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。在“文件”面板中还有许多工具，可使用它们管理站点，向/从远程服务器传输文件，设置“存回/取出”过程来防止文件被覆盖，以及同步本地和远程站点上的文件。使用“资源”面板可方便地组织站点中的资源；然后可以将大多数资源直接从“资源”面板拖到 Dreamweaver 文档中。还可以使用 Dreamweaver 来管理 Adobe? Contribute? 站点的各个方面。
设计网页布局
选择要使用的布局技术，或将 Dreamweaver 布局选项与布局技术结合使用来创建站点外观。可以使用 Dreamweaver 流体网格布局或默认模板开始。可以创建基于 Dreamweaver 模板的新页，这样更新模板时就会自动更新这些页面的布局。如果您希望同时在浏览器中显示多个元素，可以使用框架来设计您的文档的布局。
向页面添加内容
添加资源和设计元素，如文本、图像、鼠标经过图像、图像地图、颜色、影片、声音、HTML 链接、跳转菜单等。您可以对标题和背景等元素使用内置的页面创建功能，在页面中直接键入，或者从其它文档中导入内容。Dreamweaver 还可提供多种工具，用于最大限度提高网站性能以及对网页进行检测以确保与其他 Web 浏览器兼容。
通过手动编码创建页面
手动编写网页面的代码是创建页面的另一种方法。Dreamweaver 提供了易于使用的可视化编辑工具，但同时也提供了高级的编码环境；您可以采用任一种方法（或同时采用这两种方法）来创建和编辑页面。
针对动态内容设置 Web 应用程序
许多 Web 站点都包含了动态页，动态页使访问者能够查看存储在数据库中的信息，并且一般会允许某些访问者在数据库中添加新信息或编辑信息。若要创建此类页面，则必须先设置 Web 服务器和应用程序服务器，创建或修改 Dreamweaver 站点，然后连接到数据库。
创建动态页
在 Dreamweaver 中，您可以定义动态内容的多种来源，其中包括从数据库提取的记录集、表单参数和 JavaBeans 组件。要将动态内容添加到网页，仅将该动态内容拖放到网页即可。
您可以通过设置页面来同时显示一个记录或多个记录，显示多页记录，添加用于在记录页之间来回移动的特殊链接，以及创建记录计数器来帮助用户跟踪记录。
测试和发布
测试页面是在整个开发周期中进行的一个持续的过程。在这一工作流程的最后，在服务器上发布该站点。许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常。
工作区布局概述
使用 Dreamweaver 工作区，可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使您可以快速更改文档。
Dreamweaver 工作区
A. 应用程序栏?B. Extract 面板?C. 文档工具栏?D. “文档”窗口?E. 工作区切换器?F. 面板组?G. 实时视图?H. 代码视图?I. 标签选择器?
工作区元素概述
工作区中包括以下元素：
注意：Dreamweaver 提供了很多其它面板、检查器和窗口。若要打开面板、检查器和窗口，请使用“窗口”菜单。
欢迎屏幕
用于打开最近使用过的文档或创建新文档。还可以从欢迎屏幕中，通过产品介绍或访问适用于具有不同技能水平的用户的学习与帮助内容，了解有关 Dreamweaver 的更多信息，并了解当前和过去版本中的新增功能。欢迎屏幕还允许您创建一个新的起始页模板。
应用程序栏
位于应用程序窗口顶部，包含一个工作区切换器、几个菜单（仅限 Windows）以及其他应用程序控件。
文档工具栏
其中包含的按钮可以用于选择“文档”窗口的不同视图（例如，设计视图、实时视图和代码视图）、不同的查看选项以及执行一些常规操作，例如在浏览器中预览。
标准工具栏
若要显示“标准”工具栏，请选择“查看”>“工具栏”>“标准”。工具栏包含从“文件”和“编辑”菜单执行的常见操作的按钮：“新建”、“打开”、“在 Bridge 中浏览”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。
编码工具栏
（仅在代码视图中显示。）包含可用于执行多项标准编码操作的按钮。
“文档”窗口
显示您当前创建和编辑的文档。
属性检查器
用于查看和更改所选对象或文本的各种属性。每个对象都具有不同的属性。
标签选择器
位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
面板
帮助您监控和修改工作。示例包括“插入”面板、CSS 设计器面板和文件面板。若要展开某个面板，请双击其选项卡。
Extract 面板
允许您上传和查看 Creative Cloud 中的 PSD 文件。使用此面板，您可以将 PSD 复合中的 CSS、文本、图像、字体、颜色、渐变和度量值提取到您的文档。
“插入”面板
包含用于将图像、表格和媒体元素等各种类型的对象插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”面板中的“表格”按钮来插入一个表格。如果愿意，可以使用“插入”菜单来插入对象，而不用通过使用“插入”面板。
文件面板
无论它们是 Dreamweaver 站点的一部分还是位于远程服务器，都可以将它们用于管理文件和文件夹。使用“文件”面板，还可以访问本地磁盘上的所有文件。
“文档”窗口概述
“文档”窗口显示当前文档。若要切换到某个文档，请单击它的选项卡。
可以选择下列任一视图：
实时视图
（“视图”>“实时视图”） 实时视图可以更为真实地呈现您的文档在浏览器中的实际样子，并且您可以就像在浏览器中一样与文档进行交互。您还可以在“实时视图”中直接编辑 HTML 元素并在同一视图中即时预览更改。
设计视图
（“视图”>“设计”）用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在此视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。
代码视图
（“视图”>“代码”）用于编写和编辑 HTML、JavaScript 和其他任何类型代码的手动编码环境。
“拆分代码”视图
（“视图”>“拆分代码”）代码视图的拆分版本，可让您进行滚动以同时对文档的不同部分进行操作。
“代码和设计”视图
（“视图”>“代码和设计”）可让您在单一窗口中同时查看同一文档的代码视图和设计视图。
实时代码视图
（“视图”>“实时代码”）只有在实时视图中查看文档时才能使用。“实时代码”视图显示浏览器用于执行该页面的实际代码，当您在“实时”视图中与该页面进行交互时，它可以动态变化。“实时代码”视图不可编辑。
当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，其中显示所有打开的文档的文件名。如果您尚未保存已做的更改，则 Dreamweaver 会在文件名后显示一个星号。
Dreamweaver 还会在文档的选项卡下（如果在单独窗口中查看文档，则在文档标题栏下）显示相关文件工具栏。相关文档指与当前文件关联的文档，例如 CSS 文件或 JavaScript 文件。若要在“文档”窗口中打开这些相关文件之一，请在“相关文件”工具栏中单击其文件名。
文档工具栏概述
使用“文档”工具栏包含的按钮，可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
文档工具栏
A. 代码视图?B. 显示“实时视图”和“代码视图”?C. 实时视图?D. 转至“检查模式”?E. 在代码视图中显示实时视图源?F. 刷新?G. 文件路径和名称?H. 在浏览器中预览/调试?I. 实时视图选项?J. 文件管理?
以下选项将显示在“文档”工具栏中：
代码视图
仅在“文档”窗口中显示“代码”视图。
显示“实时视图”和“代码视图”
在“代码”视图和“实时/设计”视图之间拆分“文档”窗口。流体网格文档无设计视图选项可用。
实时视图
显示基于浏览器的交互式文档视图。您还可以在“实时视图”中编辑 HTML 元素。利用“实时”选项旁边的下拉列表，可以在实时视图和设计视图之间切换。此下拉列表在流体网格文档中不可用。
在浏览器中预览/调试
允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。
文件管理
显示“文件管理”弹出菜单。
标准工具栏概述
“标准”工具栏包含执行“文件”和“编辑”菜单中常见操作的按钮：“新建”、“打开”、“在 Bridge 中浏览”、“保存”、“全部保存”、“打印代码”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。可像使用等效的菜单命令一样使用这些按钮。
“浏览器导航”工具栏概述
“浏览器导航”工具栏在“实时”视图中成为活动状态，并显示正在“文档”窗口中查看的页面的地址。“实时”视图的作用类似于常规的浏览器，因此即使浏览到您的本地站点以外的站点（例如 http://www.adobe.com/cn），Dreamweaver 也将在“文档”窗口中加载该页面。
浏览器导航工具栏
A. 浏览器控件?B. 地址框?C. 实时视图选项?
默认情况下，不激活“实时”视图中的链接。在不激活链接的情况下可选择或单击“文档”窗口中的链接文本，而不进入另一个页面。若要在“实时”视图中测试链接，可通过从地址框右侧的“视图选项”菜单中选择“跟踪链接”或“持续跟踪链接”，启用一次性单击或连续单击。
编码工具栏概述
“编码”工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码以及插入最近使用过的代码片断，等等。“编码”工具栏垂直显示在“文档”窗口的左侧，仅当显示代码视图时才可见。
编码工具栏 (CC)
您不能取消停靠或移动“编码”工具栏，但可以将其隐藏（“视图”>“工具栏”>“编码”）。
您还可以编辑“编码”工具栏来显示更多按钮（例如“自动换行”、“显示隐藏的字符”和“自动缩进”）或隐藏不想使用的按钮。不过，为此您必须编辑生成该工具栏的 XML 文件。
状态栏概述
“文档”窗口底部的状态栏提供与正创建的文档有关的其它信息。
状态栏
A. 标签选择器?B. 手机大小?C. 平板电脑大小?D. 桌面大小?E. 窗口大小?
标签选择器
显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 <body> 可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 ID 属性，请右键单击 (Windows) 或按住 Control 键并单击 (Macintosh) 该标签，然后从上下文菜单中选择一个类或 ID。
手机大小
默认情况下，按手机大小 480 X 800 显示文档的预览。要更改默认大小，可单击“窗口大小”弹出式菜单>“编辑大小”。
平板电脑大小
默认情况下，按平板电脑大小 768 X 1024 显示文档的预览。要更改默认大小，可单击“窗口大小”弹出式菜单>“编辑大小”。
桌面大小
默认情况下，在宽度大小为 1000 像素的桌面中显示文档预览。要更改默认大小，可单击“窗口大小”弹出式菜单>“编辑大小”。
窗口大小弹出菜单
（在代码视图中不可用。）使用此工具，可以将“文档”窗口的大小调整到预定义或自定义的尺寸。更改设计视图或实时视图中页面的视图大小时，仅更改视图大小的尺寸。而不更改文档大小。
除了预定义和自定义大小外，Dreamweaver 还会列出在媒体查询中指定的大小。选择与媒体查询对应的大小后，Dreamweaver 将使用该媒体查询显示页面。还可更改页面方向以预览用于移动设备的页面，在这些页面中根据设备的持握方式更改页面布局。
属性检查器概述
使用属性检查器，可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。属性检查器的内容根据选定的元素的不同会有所不同。例如，如果选择页面上的图像，则属性检查器将改为显示该图像的属性（如图像的文件路径、图像的宽度和高度、图像周围的边框（如果有），等等）。
属性检查器
默认情况下，属性检查器位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作区中的浮动面板。
“插入”面板概述
“插入”面板包含用于创建和插入对象（例如表格、图像和链接）的按钮。这些按钮按几个类别进行组织，您可以通过从顶端的下拉列表中选择所需类别来进行切换。
“插入”面板
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，则下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入”面板按以下类别进行组织：
常用
用于创建和插入最常用的元素，例如 div 标签和对象（如图像和表格）。
结构
用于插入结构元素，例如 div 标签、标题、列表、区段、页眉和页脚。
媒体
用于插入媒体元素，例如 Edge Animate 排版、HTML5 音频和视频以及 Flash 音频和视频。
表单
包含用于创建表单和用于插入表单元素（如搜索、月和密码）的按钮。
jQuery Mobile
包含使用 jQuery Mobile 构建站点的按钮。
jQuery UI
用于插入 jQuery UI 元素，例如折叠式、滑块和按钮。
模板
用于将文档保存为模块并将特定区域标记为可编辑、可选、可重复或可编辑的可选区域。
收藏夹
用于将“插入”面板中最常用的按钮分组和组织到某一公共位置。
“文件”面板概述
使用“文件”面板可查看和管理 Dreamweaver 站点中的文件。
在“文件”面板中查看站点、文件或文件夹时，可以更改查看区域的大小，还可以展开或折叠“文件”面板。当折叠“文件”面板时，它以文件列表的形式显示本地站点、远程站点、测试服务器或 SVN 库的内容。在展开时，它会显示本地站点和远程站点、测试服务器或 SVN 库中的其中一个。
对于 Dreamweaver 站点，还可以通过更改默认显示在折叠面板中的视图（本地站点或远程站点）来对“文件”面板进行自定义。
“文件”面板中的文件夹将根据（本地、远程或测试）视图以不同颜色显示。
本地视图
Windows
Mac
远程服务器视图
Windows
Mac
测试服务器视图
Windows
Mac
存储库视图
Windows
Mac
文件面板定期与服务器交互以更新其内容。尝试在“文件”面板中执行某项操作，但该面板正在运行这些自动更新时，会显示一条错误消息。若要禁用自动更新，请打开“文件”面板选项菜单，然后在“查看”菜单中取消选中“自动更新”。
若要手动更新面板的内容，请使用面板中的“刷新”按钮。但是，只有在启用自动更新后，才会更新文件当前的签出状态。
CSS 设计器
“CSS 设计器”面板（Windows > CSS 设计器）属于 CSS 属性检查器，能让您“可视化”地创建 CSS 样式和规则并设置属性和媒体查询。
“CSS 设计器”面板
“CSS 设计器”面板由以下窗格组成：
源
列出与文档相关的所有 CSS 样式表。使用此窗格，您可以创建 CCS 并将其附加到文档，也可以定义文档中的样式。
@媒体
在“源”窗格中列出所选源中的全部媒体查询。如果您不选择特定 CSS，则此窗格将显示与文档关联的所有媒体查询。
选择器
在“源”窗格中列出所选源中的全部选择器。如果您同时还选择了一个媒体查询，则此窗格会为该媒体查询缩小选择器列表范围。如果没有选择 CSS 或媒体查询，则此窗格将显示文档中的所有选择器。
在“@媒体”窗格中选择“全局”后，将显示对所选源的媒体查询中不包括的所有选择器。
属性
显示可为指定的选择器设置的属性。
CSS 设计器是上下文相关的。这意味着，对于任何给定的上下文或选定的页面元素，您都可以查看关联的选择器和属性。而且，在 CSS 设计器中选中某选择器时，关联的源和媒体查询将在各自的窗格中高亮显示。
可视化辅助线概述
Dreamweaver 提供了几种可视化助理，帮助您设计文档和大概估计文档在浏览器中的外观。您可以执行以下任一操作：
立即将“文档”窗口与所需的窗口大小对齐，查看元素如何适合页面。
用跟踪图像作为页面背景，可帮助您复制在插图或图像编辑应用程序（如 Adobe? Photoshop? 或 Adobe? Fireworks?）中创建的设计。
用标尺和辅助线为精确定位和调整页面元素提供可视的提示。
使用网格可以精确定位绝对定位元素（AP元素）以及调整其大小。
页面上的网格标记有助于对齐 AP元素，启用对齐后，当移动 AP元素或调整其大小时，AP 元素会自动与最近的网格点对齐。（其它对象，如图像和段落，不与网格对齐。） 不论网格是否可见，对齐都有效。
