实例28 熟悉Dreamweaver的基本环境
一、要求与目的
★ 掌握Dreamweaver的基本工作环境：窗口、菜单、插入、文档工具栏、状态栏等
★ 掌握“属性”工作面板
二、过程与步骤
1．启动Dreamweaver软件
单击“开始－程序－启动－Macromedia－Macromedia Dreamweaver MX 2004” 启动Dreamweaver软件。
Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。使用者可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框，如图7－2所示。
图7－1 选择工作区布局
如果设计者熟悉编写代码，选择“代码编写者”；如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可在软件正常启动后使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如图7－2所示：
图7－2 更改工作区
注释：“设计者”工作区是一个使用多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。
“代码编写者”同样是集成工作区，但将面板组停靠在左侧，文档默认状态下显示代码窗口。
本例选择“设计者”工作区界面。
2．Dreamweaver工作界面
建立新页面或者打开已经完成的页面时，会出现工作区窗口，如图7－3所示。栏目说明如下：
(1)“插入栏”，也叫工具栏（如图7－4）：包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，设计者可以通过单击“插入”栏中的“表格”按钮插入一个表格。
图7－3 Dreamweaver工作环境
图7－4 插入栏
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入栏”中“常用”按钮里的选项说明：
u “常用”类别可以创建和插入最常用的对象，例如图像和表格。
u “布局”类别可以插入表格、div 标签、层和框架。还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。
u “表单”类别包含用于创建表单和插入表单元素的按钮。
u “文本”类别可以插入各种文本格式设置标签和列表格式设置标签。
u “HTML”类别可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
u “服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。
u “应用程序”类别可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。
u “Flash 元素”类别可以插入 Flash 元素。
u “收藏”类别可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
(2) “文档”窗口 显示当前创建和编辑的文档。
(3) 文档工具栏
文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。如图7－5。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
图7－4 文档工具栏
以下对选项进行说明：
u 显示代码视图 仅在“文档”窗口中显示“代码”视图。
u 显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。
u 显示设计视图 仅在“文档”窗口中显示“设计”视图。
u 标题 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。
u 没有浏览器/检查错误 使您可以检查跨浏览器兼容性。
u 文件管理 显示“文件管理”弹出菜单。
u 在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。
u 刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。
u 视图选项 允许您为“代码”视图和“设计”视图设置选项。
(4)“属性检查器”（如图7-6）： 用于查看和更改所选对象或文本的各种属性。
图7－6属性检查器
(5)“面板组”（如图7-7） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
(6) “文件”面板（如图7-8） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。
图7－7面板组 图7－8 文件面板
Dreamweaver MX 2004还提供很多的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。
(7) 状态栏 状态栏提供正创建的文档有关的其它信息。如图7－9所示。
图7－9状态栏
u 标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body> 可以选择文档的整个正文。
u 窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
u “窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
3．菜单的简要说明
Dreamweaver MX 2004中的菜单条如图7-10所示：
图7－10 菜单条
(1)“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
(2)“编辑”菜单 包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。
(3)“查看”菜单 使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。
(4)“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。
(5)“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
(6) “文本”菜单使您可以轻松地设置文本的格式。
(7) “命令”菜单 提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。
(8) “站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。
(9) “窗口”菜单 提供对 DW中的所有面板、检查器和窗口的访问。
帮助”菜单 提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。
在基础模板中的body可编辑区，在嵌套模板中已经成为锁定区，不能编辑，因此也就没有显示出来。
试用感受：Dreamweaver MX允许创建嵌套模板（可多重嵌套），这给我们进行网站开发和站点页面维护 、更新带来很大的方便，可以大大减 少一些简单重复的劳动，提高工作效率。
