1.4 Dreamweaver CS3操作界面介绍

Dreamweaver CS3的操作界面由标题栏、菜单栏、插入栏、文档工具栏、编辑窗口、状态栏、“属性”检查器和面板组等部分组成，如图1-19所示，其中编辑窗口是显示、编辑文档内容的工作区域，是网页设计的核心区域。

1.4.1 标题栏

标题栏位于Dreamweaver CS3界面顶端，与其他Windows应用程序并无太大区别，如图1-20所示。

① 软件图标 ② 软件名称 ③ 当前编辑文档名 ④ 文档规范 ⑤未保存标识符

⑥ “最小化”按钮 ⑦ “最大化”按钮 ⑧ “关闭”按钮

其中的未保存标识符“*”是Dreamweaver CS3所特有的，只有当编辑窗口中有尚未保存的文档存在时该标识符才会出现，以提醒用户保存当前修改过的文档。

1.4.2 菜单栏

Dreamweaver CS3的菜单栏由“文件”、“编辑”、“查看”、“插入记录”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”共10个菜单项组成，每个菜单项对应多个子菜单以及菜单命令，如图1-21所示。

1.4.3 插入栏

插入栏是Dreamweaver CS3中使用频率最高的部分，主要包括用于创建和插入对象（如表格、AP元素和图像）的按钮，如图1-22所示。当鼠标光标移动到某个按钮上时，会出现相应的提示信息，其中包含该按钮的名称。

① “常用”选项卡：用于创建和插入最常用的对象，如图像、表格等。

② “布局”选项卡：用于插入Div标签、AP元素和框架等布局对象。

③ “表单”选项卡：用于创建表单和插入表单元素。

④ “数据”选项卡：用于插入Spry数据对象和其他动态元素，如记录集、重复区域及插入记录表单和更新记录表单等。

⑤ “Spry”选项卡：用于构建Spry页面，包括Spry数据对象和构件。

⑥ “文本”选项卡：用于插入各种文本格式和列表格式标签，如<strong>、<em>、<p>、<h1>和<ul>等。

⑦ “收藏夹”选项卡：用于将插入栏中最常用的按钮分类组织到其中。

各选项卡中包含多个插入按钮，其中部分按钮右侧带有一个向下的黑色小箭头，表示该按钮包含有多个同类型按钮，即这是一个按钮组，单击按钮右侧的按钮，在弹出的下拉菜单中可选择该按钮组中的其他按钮，如图1-23所示。

1.4.4 工具栏

常用的工具栏主要包括文档工具栏、标准工具栏和样式呈现工具栏三种。

文档工具栏：文档工具栏位于插入栏的下方，它包括用于快速切换编辑窗口视图的视图按钮，一些与显示和查看文档、远程站点管理以及验证和检查当前文档相关的命令和选项，其中视图按钮和“标题”文本框是最常用的两项功能。文档工具栏的外观如图1-24所示。

① “代码”按钮

② “拆分”按钮

③ “设计”按钮

④ “标题”文本框

⑤ “文件管理”按钮组

⑥ “文档预览”按钮组

⑦ 视图相关功能

⑧ 验证相关功能

⑨ “检查页面”按钮

标准工具栏：包括新建、打开、保存、打印、复制、剪切、粘贴、撤销和重做等常见的文档编辑功能按钮，其外观如图1-25所示。

样式呈现工具栏：通过单击其中的按钮可切换文档的呈现方式，如屏幕媒体、打印媒体、幻灯媒体以及手持媒体等，其外观如图1-26所示。

默认情况下，标准和样式呈现两个工具栏并未显示在Dreamweaver界面中，如果需要使用，可通过选择“查看/工具栏”菜单下的子菜单命令来打开（或关闭）这两个工具栏，或在文档工具栏中单击鼠标右键，在弹出的快捷菜单中进行命令选择。

1.4.5 编辑窗口

编辑窗口显示当前文档的具体内容，对文档的编辑操作大都在编辑窗口中完成。编辑窗口有三种视图显示模式，分别是用于代码编辑的代码视图、用于页面设计的设计视图和兼顾设计与代码编写的代码/设计视图。

编辑窗口能以最大化方式显示，也能以层叠方式显示。最大化的编辑窗口中多个文档的标题将以选项卡方式排列，单击任意文档名称可切换到该文档对应的编辑窗口，如图1-27所示。而层叠方式显示的编辑窗口则以浮动窗口形式呈现，单击任意窗口即可切换到对应的编辑窗口，层叠方式的显示效果如图1-28所示。

1.4.6 状态栏

“文档”窗口底部的状态栏中显示着当前被编辑文档的相关信息，同时还包含了一些显示控制功能的工具。如图1-29所示为“设计”视图的状态栏。

① 标签选择器：显示环绕当前选择内容的标签的层次结构，单击该层次结构中的任何标签可选择该标签及其包含的全部内容。

② 选取工具：单击该工具可禁用手形工具，从窗口拖动状态回到选择状态。

③ 手形工具：对于尺寸较大的文档，编辑窗口可能无法全部显示，这时就需要通过手形工具拖动以查看编辑窗口中未显示的文档部分。

④ 缩放工具和“设置缩放比率”下拉列表框：通过它们可以为文档设置缩放比率。

⑤ 窗口大小设置工具（仅在“设计”视图中可见）：用来将编辑窗口的大小调整到预定义或自定义的尺寸。

⑥ 下载文档大小/下载时间：即时显示当前文档的大小和预计下载所需的时间。

1.4.7 “属性”检查器

“属性”检查器位于编辑窗口正下方，用于查看或编辑当前选定页面元素的常用属性，根据所选元素的不同，“属性”检查器所呈现的参数设置也会不同。例如，当选择页面上的某段文本，则“属性”检查器将显示为该文本的属性，如文本的格式、字体、样式和颜色等，如图1-30所示。

所有的“属性”检查器都由基本属性和扩展属性两部分组成，可通过单击“属性”检查器右下角的按钮来隐藏（或打开）扩展属性面板。

1.4.8 面板组

面板组是组合在相同标题下的相关面板的集合。Dreamweaver CS3的面板组由“CSS”、“应用程序”、“标签检查器”和“文件”4个面板组构成，各面板组又包含了多个面板，这些面板是一些具有关联性的特定功能的集合。

面板组位于Dreamweaver操作界面的右侧，由于屏幕的可视空间有限，同时也为了保证编辑窗口有足够的显示区域，面板组中的面板被设计成可折叠的显示方式，如图1-31所示，前面三个面板组都处于折叠状态，最后一个“文件”面板则处于展开状态。

另外，被归类为同一标题下的各个面板，将以选项卡的形式进行切换，单击其中任一选项卡即可切换到相应的面板中，如图1-31所示为“文件”面板组中包含了“文件”、“资源”和“代码片段”三个面板。

① 面板组拖动手柄：用于调整面板组位置。

② 面板组名称：相同类型的面板组合的标题。

③ 面板组折叠/展开按钮：用于展开或折叠对应面板组。

④ 面板名称选项卡：面板的名称，兼有选项卡功能。

⑤ 面板组隐藏/显示按钮：用于隐藏或显示整个面板组。

⑥ 面板操作区：面板的具体功能在这里体现。

⑦ 面板组选项按钮：用于对面板组中的参数进行设置。

如果发现需要的面板组没有显示在Dreamweaver操作界面中，可在“窗口”菜单项中选择相应的命令使其显示出来。