2.2　Dreamweaver CS6界面

在Dreamweaver工作界面中，用户可以查看文档和对象的属性，工作界面中还将许多常用操作放置于工具栏中，用户可以快速对文档进行更改。

在Windows操作系统中，Dreamweaver提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。图2-6所示为Dreamweaver CS6工作界面的各组成部分。

2.2.1　菜单栏

菜单栏中包含“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单，如图2-7所示。

各菜单的含义如下：

（1）“文件”菜单：包含“新建”“打开”“保存”以及“保存全部”等命令，还包含其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”等操作命令。

（2）“编辑”菜单：包含对页面字符进行“查找”“替换”“选择”和“搜索”等命令，例如“选择父标签”和“查找和替换”命令。

（3）“查看”菜单：可以看到文档的各种视图（如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和Dreamweaver工具及工具栏。

（4）“插入”菜单：提供“插入”栏的替代项，用于将对象插入文档。

（5）“修改”菜单：可以更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性，更改表格和表格元素，并且为库和模板执行不同的操作。

（6）“格式”菜单：使用户可以轻松地设置文本的格式。

（7）“命令”菜单：提供对各种命令的访问，包括一个根据格式首选参数设置代码格式的命令、一个创建相册的命令等。

（8）“站点”菜单：提供用于管理站点以及上传和下载文件的命令。

（9）“窗口”菜单：提供用于窗口的控制操作，如打开和关闭属性面板、层叠和平铺工作窗口等。

（10）“帮助”菜单：提供对Dreamweaver文档的访问，包括关于使用Dreamweaver以及创建Dreamweaver扩展功能的帮助系统，还包括各种语言的参考材料。

2.2.2　“属性”面板

“属性”面板主要用于显示在网页中对象的属性，并允许用户在“属性”面板中对对象属性进行各种修改。默认情况下，“属性”面板会显示光标所在位置的文字属性，如图2-8所示。

在“属性”面板中，用户可以进行如下操作：

（1）在“文档”窗口中选择页面元素，可以查看并更改页面元素的属性。必须展开“属性”检查器才能查看选定元素的所有属性。

（2）在“属性”面板中，可以更改任意属性。

当用户在页面编辑窗口中选择图像时，“属性”面板会显示图2-9所示的图像属性。

说明

有关特定属性的信息，应在“文档”窗口中选择一个元素，然后单击“属性”面板右上角的菜单按钮 ，在弹出的菜单中选择“帮助”命令。

2.2.3　“文档”工具栏

Dreamweaver CS6中的“文档”工具栏主要包含对文档进行常用操作的按钮，如图2-10所示。通过“文档”工具栏中的按钮可快速对页面文档进行查看和编辑操作。

在“文档”工具栏中，各主要按钮含义如下：

（1）“代码”视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码（如PHP或ColdFusion标记语言CFML）以及任何其他类型代码的手工编码环境，如图2-11所示。

（2）“设计”视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容，如图2-12所示。

（3）“拆分”视图：在一个窗口中可同时看到同一文档的“代码”视图和“设计”视图，如图2-13所示。

（4）实时视图：与“设计”视图类似，实时视图更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档交互。实时视图不可编辑，不过可以在“代码”视图中进行编辑，然后刷新实时视图查看所做的更改。

（5）“实时代码”视图：仅在实时视图中查看文档时可用。“实时代码”视图显示浏览器用于执行该页面的实际代码，当在实时视图中与该页面进行交互时，它可以动态变化。“实时代码”视图不可编辑。

说明

当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。如果尚未保存已做的更改，则Dreamweaver会在文件名后显示一个星号。若要切换到某个文档，可选择相应选项卡。

Dreamweaver CS6的状态栏中，显示了“文档”窗口的当前尺寸（以像素为单位）。若要将页面设计为在使用某一特定尺寸大小时具有最好的显示效果，可以将“文档”窗口调整到任一预定义大小、编辑这些预定义大小或者创建新的大小。更改设计视图或实时视图中页面的视图大小时，仅更改视图大小的尺寸，而不更改文档大小。

2.2.4　“插入”面板

“插入”面板包含用于将各种类型的对象（如图像、表格和层）插入到文档中的命令。每个对象都是一段HTML代码，允许用户在插入时设置不同的属性。

单击“窗口”|“插入”命令，如图2-14所示，即可显示“插入”面板，如图2-15所示，再次单击“插入”命令，即可隐藏“插入”面板。单击“插入”面板上方的下三角按钮，在弹出的列表框中，用户可以选择需要插入的对象类型，如图2-16所示。

说明

如果用户处理的是某些类型的文件（如XML、JavaScript、Java和CSS），则“插入”面板和“设计”视图选项将变暗，因为无法将项目插入到这些代码文件中。

2.2.5　浮动面板

Dreamweaver中还有多种功能面板，用户可以根据实际需要对面板进行展开或者折叠操作，主要是方便用户对网页进行设计，符合用户的操作习惯。这些面板还可以任意组合和移动，称为“浮动面板”，如图2-17所示。通常将同一类型或功能的面板组合在一个面板组中，没有显示的面板还可以通过“窗口”菜单快速呈现。

例如，“历史记录”面板主要用于管理已执行的操作；“框架”面板反映了当前网页的框架结构；“层”面板显示了当前网页中的层，用户可利用它打开、关闭层或调整层顺序。在面板名字上右击，或者单击面板组右上角的按钮，可以打开图2-18所示的面板菜单，执行帮助、关闭以及关闭标签组等操作。

说明

一般情况下，浮动面板在界面中显示得越少越好，这样可以放大工作区的显示，使网页内容最大限度地展现出来，方便用户对网页页面进行设计。