Dreamweaver  工作流程和工作区

Dreamweaver  工作流程概述

您可以使用多种方法来创建 Web  站点，下面介绍的是其中的一种方法：

1、规划和设置站点

确定将在哪里发布文件，检查站点要求、访问者情况以及站点目标。此外，还应考虑诸如用户访问以及浏览器、插件和下载限制等技术要求。在组织好信息并确定结构后，您就可以开始创建站点。

2、组织和管理站点文件

在 “ 文件 ” 面板中，您可以方便地添加、删除和重命名文件及文件夹，以便根据需要更改组织结构。在 “ 文件 ” 面板中还有许多工具，可使用它们管理站点，向 / 从远程服务器传输文件，设置存回 / 取出过程来防止文件被覆盖，以及同步本地和远程站点上的文件。使用 “ 资源 ” 面板可方便地组织站点中的资源；然后可以将大多数资源直接从 “ 资源 ” 面板拖到 Dreamweaver文档中。还可以使用 Dreamweaver  来管理 Adobe®Contribute®  站点的各个方面。

3、设计网页布局

选择您要使用的布局方法，或综合使用 Dreamweaver  布局选项创建站点的外观。您可以使用 Dreamweaver AP  元素、 CSS定位样式或预先设计的 CSS  布局来创建布局。利用表格工具，您可以通过绘制并重新安排页面结构来快速地设计页面。如果您希望同时在浏览器中显示多个元素，可以使用框架来设计您的文档的布局。最后，您可以基于 Dreamweaver  模板创建新的页面，然后在模板更改时自动更新这些页面的布局。

4、向页面添加内容

添加资源和设计元素，如文本、图像、鼠标经过图像、图像地图、颜色、影片、声音、 HTML  链接、跳转菜单等。您可以对标题和背景等元素使用内置的页面创建功能，在页面中直接键入，或者从其它文档中导入内容。 Dreamweaver  还提供相应的行为以便为响应特定的事件而执行任务，例如在访问者单击 “ 提交 ” 按钮时验证表单，或者在主页加载完毕时打开另一个浏览器窗口。最后， Dreamweaver  还提供了工具来最大限度地提高 Web  站点的性能，并测试页面以确保能够兼容不同的 Web  浏览器。

5、通过手动编码创建页面

手动编写 Web  页面的代码是创建页面的另一种方法。 Dreamweaver  提供了易于使用的可视化编辑工具，但同时也提供了高级的编码环境；您可以采用任一种方法 （或同时采用这两种方法）来创建和编辑页面。

6、测试和发布

测试页面是在整个开发周期中进行的一个持续的过程。在这一工作流程的最后，在服务器上发布该站点。许多开发人员还会安排定期的维护，以确保站点保持最新并且工作正常.

Dreamweaver 工作区布局概述

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

在 Windows®  中， Dreamweaver  提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。

在 Mac OS®  中， Dreamweaver  可在一个窗口中显示多个文档，并使用选项卡来标识每个文档。 Dreamweaver  还可显示一个浮动工作区，其中的每个文档都显示在它自己的单独窗口中。面板组最初停靠在一起，但是可以将它们取消停靠使其位于自己的窗口中。

在 Windows  中一样，在停靠面板组并最大化文档区域后，调整面板大小或显示和隐藏面板会自动调整主文档大小。

工作区元素概述

工作区中包括以下元素。

注： Dreamweaver  另外提供了许多面板、检查器和窗口。若要打开面板、检查器和窗口，请使用 “ 窗口 ” 菜单。

欢迎屏幕 用于打开最近使用过的文档或创建新文档。还可以从 “ 欢迎 ” 屏幕通过产品介绍或教程了解关于 Dreamweaver  的更多信息。

应用程序栏 应用程序窗口顶部包含一个工作区切换器、几个菜单 （仅限 Windows ）以及其它应用程序控件。

文档工具栏 包含一些按钮，它们提供各种 “ 文档 ” 窗口视图 （如 “ 设计 ” 视图和 “ 代码 ” 视图）的选项、各种查看选项和一些常用操作 （如在浏览器中预览）。

标准工具栏 （在默认工作区布局中不显示。） 包含一些按钮，可执行 “ 文件 ” 和 “ 编辑 ” 菜单中的常见操作： “ 新建 ” 、 “ 打开” 、 “ 在 Bridge  中浏览 ” 、 “ 保存 ” 、 “ 全部保存 ” 、 “ 打印代码 ” 、 “ 剪切 ” 、 “ 复制 ” 、 “ 粘贴 ” 、 “ 撤消 ” 和 “ 重做 ” 。若要显示 “ 标准 ” 工具栏，请选择 “ 查看 ”>“ 工具栏 ”>“ 标准 ” 。

编码工具栏 （仅在 “ 代码 ” 视图中显示。） 包含可用于执行多项标准编码操作的按钮。

样式呈现工具栏 （默认为隐藏状态。） 包含一些按钮，如果使用依赖于媒体的样式表，则可使用这些按钮查看您的设计在不同媒体类型中的呈现效果。它还包含一个允许您启用或禁用层叠式样式表 (CSS)  样式的按钮。

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

属性检查器 用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在 “ 编码器 ” 工作区布局中， “ 属性 ” 检查器默认是不展开的。

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

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

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

文件面板 用于管理文件和文件夹，无论它们是 Dreamweaver  站点的一部分还是位于远程服务器上。 “ 文件 ” 面板还使您可以访问本地磁盘上的全部文件，非常类似于 Windows  资源管理器 (Windows)  或 Finder (Macintosh) 。

文档工具栏概述

使用 “ 文档 ” 窗口工具栏包含的按钮可以在文档的不同视图之间快速切换。工具栏中还包含一些与查看文档、在本地和远程站

点间传输文档有关的常用命令和选项。下图显示展开的 “ 文档 ” 工具栏。

A.  显示代码视图 B.  显示代码视图和设计视图 C.  显示设计视图 D.  实时代码视图 E.  检查浏览器兼容性 F.  实时视图 G.  CSS  检查模式 H.  在浏览器中

预览 / 调试 I.  可视化助理 J.  刷新设计视图 K.  文档标题 L.  文件管理

以下选项出现在 “ 文档 ” 工具栏中：

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

显示代码视图和设计视图 将 “ 文档 ” 窗口拆分为 “ 代码 ” 视图和 “ 设计 ” 视图。当选择了这种组合视图时， “ 视图选项 ” 菜单中的 “ 顶部的设计视图 ” 选项变为可用。

显示设计视图 只在 “ 文档 ” 窗口中显示 “ 设计 ” 视图。

注： 如果处理的是 XML 、 JavaScript 、 Java 、 CSS  或其他基于代码的文件类型，则不能在 “ 设计 ” 视图中查看文件，而且 “ 设计 ” 和 “ 拆分 ” 按钮将会变暗。

实时视图 显示不可编辑的、交互式的、基于浏览器的文档视图。

实时代码视图 显示浏览器用于执行该页面的实际代码。

文档标题 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。

文件管理 显示 “ 文件管理 ” 弹出菜单。

在浏览器中预览 / 调试 允许您在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

刷新设计视图 在 “ 代码 ” 视图中对文档进行更改后刷新文档的 “ 设计 ” 视图。在执行某些操作 （如保存文件或单击该按钮）之后，在 “ 代码 ” 视图中所做的更改才会自动显示在 “ 设计 ” 视图中。

视图选项 允许您为 “ 代码 ” 视图和 “ 设计 ” 视图设置选项，其中包括想要这两个视图中的哪一个居上显示。该菜单中的选项会应用于当前视图： “ 设计 ” 视图、 “ 代码 ” 视图或同时应用于这两个视图。

可视化助理 使您可以使用各种可视化助理来设计页面。

验证标记 用于验证当前文档或选定的标签。

检查浏览器兼容性 用于检查您的 CSS  是否对于各种浏览器均兼容