1.6 自定义操作界面

Dreamweaver CS3为用户提供了多项自定义功能，用户可以通过自定义操作界面来使Dreamweaver CS3更符合自己的使用习惯，从而进一步提高工作效率。

1.6.1 自定义工作区布局类型

不同角色的用户，可能需要不同的操作界面布局，以便提高工作效率。Dreamweaver CS3针对不同行业的用户特点，提供了3种不同的工作区布局类型。它们分别是“编码器”类型、“设计器”类型和“双重屏幕”类型。

“编码器”类型：主要针对Web应用程序开发人员，适用于代码编写，其操作界面布局如图1-33所示。

“设计器”类型：主要针对网页设计人员，以页面视觉设计为主，其操作界面布局如图1-34所示。

“双重屏幕”类型：兼顾以上两者，软件的各部分以悬浮方式布局，其界面布局如图1-35所示。

另外，用户也可以在这三种布局方式的基础上按自己的习惯进一步进行布局调整，并可单独保存为新的工作区布局方案，随时调用。

1.6.2 选择插入栏显示方式

插入栏有制表符和菜单两种显示方式，用户可根据自身习惯进行切换选择。制表符方式类似Windows中的选项卡，通过切换选项卡来打开对应的插入栏分类，切换分类比较方便，但占据的界面空间相对多一些，如图1-36所示。菜单方式通过切换下拉列表框中的选项来进入对应的插入栏分类，如图1-37所示，切换过程稍微麻烦一些。

下面介绍如何在插入栏的制表符方式和菜单方式间进行切换。

从“制表符”方式切换到“菜单”方式：当插入栏处于制表符显示方式时，单击其“选项”按钮，在弹出的下拉菜单中选择“显示为菜单”命令即可切换到菜单显示方式，如图1-38所示。

从“菜单”方式切换到“制表符”方式：当插入栏处于菜单显示方式时，单击插入栏左侧的菜单按钮，在弹出的下拉菜单中选择“显示为制表符”命令可切换到制表符显示方式，如图1-39所示。

1.6.3 自定义插入栏收藏夹

由于插入栏包含很多按钮，对用户来说操作起来不是很方便，为此Dreamweaver CS3专门向用户提供了自定义按钮组合的方式，可以将选定按钮添加到“收藏夹”选项卡。

STEP 01. 切换到“收藏夹”选项卡。单击“收藏夹”选项卡，将插入栏切换到“收藏夹”选项卡，如图1-40所示。

STEP 02. 选择命令。在插入栏的空白位置单击鼠标右键，在弹出的快捷菜单中选择“自定义收藏夹”命令，如图1-41所示。

STEP 03. 添加收藏夹对象。在打开的“自定义收藏夹对象”对话框的左侧选择“可用对象”列表框中的目标对象名称，单击按钮将选择的对象添加到右侧的“收藏夹对象”列表框中，如图1-42所示。

STEP 04. 收藏夹按钮的排序或删除。在右侧的“收藏夹对象”列表框中选择某个目标对象名称，单击或按钮调整其在“收藏夹对象”列表框中的排列顺序，如图1-43所示。

1.6.4 切换编辑窗口视图方式

Dreamweaver提供了三种编辑窗口视图方式，分别是“设计”视图、“代码”视图和“拆分”视图，它们分别对应三种不同的工作类型，切换编辑窗口视图方式也是Dreamweaver中最常使用的一项功能，其操作非常简单，只需单击相应的视图按钮即可。

“设计”视图：一种所见即所得的视图方式，网页中的对象都以图形化方式呈现，采用这种方式非常适合进行页面设计，如图1-44所示，在文档工具栏中单击“设计”按钮可将其切换到该视图。

“代码”视图：纯文本的编辑视图方式，编辑窗口以文本方式显示，并标有行号，编写网页或程序代码时常采用这种方式，如图1-45所示，在文档工具栏中单击“代码”按钮可将其切换到该视图。

“拆分”视图：编辑窗口被平分为上下两部分，上半部分以“代码”视图呈现，下半部分以“设计”视图呈现，无论在哪部分进行了修改，另一部分都将出现相应的变化，如图1-46所示，在文档工具栏中单击“拆分”按钮可将其切换到该视图。

1.6.5 自定义文档显示方式

Dreamweaver CS3中可以同时打开多个文档进行编辑，各个文档可以按最大化窗口方式显示，也可以按非最大化方式显示。在最大化显示方式下，多个文档之间通过编辑窗口的文档名称选项卡切换，如图1-47所示。

在非最大化显示状态，多个文档以独立的浮动窗口方式呈现，如图1-48所示，非最大化状态下可以完成一些最大化状态下无法实现的功能，比如，以拖动方式设置文档之间的超链接等。

当编辑窗口以最大化窗口方式显示时，单击其右上角的“还原”按钮，可将编辑窗口切换到非最大化显示方式。当编辑窗口以非最大化窗口方式显示时，单击任意编辑窗口右上角的“最大化”按钮，可将编辑窗口切换到最大化显示方式。

另外，在非最大化状态下，编辑窗口又有三种不同的层叠方式，可以通过选择“窗口”菜单项下的“层叠”、“水平平铺”和“垂直平铺”命令来实现多个编辑窗口的重新排列，如图1-49所示。

由于层叠显示方式会造成各个窗口之间相互遮挡的情况，为方便编辑窗口的切换，“窗口”菜单项还专门将文档名称罗列其中，选择任意文档名称，可将对应文档所在的窗口切换到所有窗口之前。

1.6.6 调整面板组停靠方式

Dreamweaver CS3中有多个面板组，而各面板组又包含多个功能面板，系统根据面板类型或功能将它们分类组合起来，并提供面板折叠功能，这样在最大限度上减小面板组所占用的操作界面的空间。

但这种折叠的方式并不一定适合所有的用户，它从一定程度上阻碍了一些用户的设计效率。为此，Dreamweaver CS3提供了面板组的自定义功能，除了能够对各面板组中的面板进行重新组合外，还可以将停靠于面板组中的面板调整为浮动面板，从而更方便地安排它在操作界面中的位置，以适应用户的操作习惯。调整面板组组合方式及停靠方式的具体操作方法如下。

调整面板的组合方式：在某一面板的选项卡上单击鼠标右键，在弹出的快捷菜单中选择“将（当前面板名称）组合至”命令，在弹出的子菜单中选择相应的选项即可把当前面板组合到对应的面板组中，如图1-50所示。

调整面板组的停靠方式：在面板组的左上角的拖动手柄上，或在某个面板的选项卡上按住鼠标左键不放，当鼠标光标变为形状时拖动面板组或面板，如图1-51所示，可将该面板组或面板调整为浮动面板组或浮动面板。

浮动面板组的呈现形式如图1-52所示，对于浮动面板，用户可以像一般窗口一样调整它的位置和大小，并且它始终会显示在Dreamweaver操作界面的最前端，不会受其他部分的阻挡，更便于操作。

当然，如果不再需要让面板组浮动，也可以将其恢复到Dreamweaver右侧的面板组中停靠，按住面板组的不放，将其拖回面板组序列中释放鼠标左键即可重新实现停靠。

1.6.7 标尺和网格的应用

与其他图形图像类设计软件类似，Dreamweaver CS3也提供了用于精确设计的辅助工具，如标尺、辅助线和网格等。

标尺：可用于测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。标尺在编辑窗口中的具体呈现形式如图1-53所示。通过选择“查看/标尺/显示”命令可切换标尺的显示和隐藏状态；拖动编辑窗口标尺左上角的“标尺原点”图标可更改标尺的原点位置；选择“查看/标尺/重设原点”命令可将标尺的原点恢复到默认位置；选择“查看/标尺”命令，在弹出的子菜单中选择“像素”、“英尺”或“厘米”命令，可更改标尺的度量单位，如图1-54所示。

辅助线：从标尺拖动到文档中的线条，它们有助于更加准确地放置和对齐对象。还可以使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分（可见区域），如图1-55所示。

网格：Dreamweaver中的另一种辅助标识工具，在编辑窗口中显示一系列的水平线和垂直线，如图1-56所示。网格对精确地放置对象很有用，选择“查看/网格设置/显示网格”命令可切换网格的显示状态，选择“查看/网格设置/靠齐到网格”命令可让经过绝对定位的网页元素在移动时自动靠齐网格，选择“查看/网格设置/网格设置”命令可调整网格线的颜色、间隔等参数，如图1-57所示。

1.6.8 应用案例——自定义Dreamweaver CS3操作界面

本节主要讲解了自定义Dreamweaver CS3操作界面的一些方法，下面通过综合案例巩固本章所学的各种自定义操作方法。

其具体操作步骤如下。

STEP 01. 选择命令。在操作界面中选择“窗口/工作区布局/编码器”命令将面板组调整到操作界面的左侧，如图1-58所示。

STEP 02. 切换插入栏显示方式。在插入栏的标题位置处单击鼠标右键，在弹出的快捷菜单中选择“显示为菜单”命令，将插入栏切换至菜单显示方式，如图1-59所示。

STEP 03. 选择命令。单击按钮，在弹出的下拉菜单中选择“收藏夹”命令，如图1-60所示。

STEP 04. 添加对象。在插入栏空白位置处单击鼠标右键，在弹出的快捷菜单中选择“自定义收藏夹”命令，在打开的“自定义收藏夹对象”对话框左侧的“可用对象”列表框中选择“图像”选项，单击按钮，将其添加到右侧的“收藏夹对象”列表框中，再单击按钮，如图1-61所示。

STEP 05. 切换视图。单击文档工具栏的“拆分”按钮，将编辑窗口切换到“拆分”视图，如图1-62所示。

STEP 06. 单击按钮。单击编辑窗口右上角的“还原”按钮，将其切换到非最大化状态，如图1-63所示。

STEP 07. 调整面板组顺序。按【F8】键打开“文件”面板，拖动其手柄，将其调整到面板组的最顶部，如图1-64所示。

STEP 08. 打开标尺。选择“查看/标尺/显示”命令，打开标尺显示，如图1-65所示。