1.2 Dreamweaver简介

使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境，以及更强大的代码编辑功能等特性。

Dreamweaver 8的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档窗口、属性面板及多个浮动面板，如图1-3所示。

1.2.1 标题栏

标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，还包括最小化按钮、最大化按钮以及关闭按钮。

单击Dreamweaver标记可以打开系统菜单。在Dreamweaver标记后面显示程序名称，之后的方括号“[ ]”内是当前打开的文档的标题，圆括号“（）”内是该文件的名称。每次新建一个文档，Dreamweaver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。其中，文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档的<title>和</title>标记中，是用浏览器打开文档时显示在浏览器窗口标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。

1.2.2 菜单栏

菜单栏位于标题栏的下方，它包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”10个菜单项，如图1-4所示。

下面简单介绍一下Dreamweaver中的各个菜单项。

· “文件”菜单：包含文件操作的标准菜单项，如“新建”、“打开”、“保存”等。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，如“在浏览器中预览”和“打印代码”。

· “编辑”菜单：包含文件编辑的标准菜单项，如“剪切”、“拷贝”和“粘贴”等。“编辑”菜单还包括选择和搜索命令，如“全选”、“选择父标签”和“查找和替换”、“转到行”等，并且提供对键盘快捷键编辑器、标签库编辑器和参数选择编辑器的访问。

· “查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和Dreamweaver工具。

· “插入”菜单：提供插入面板的各项，以用于将各种对象插入文档。

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

· “文本”菜单：用于设置文本的各种格式。

· “命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令、创建相册的命令，以及使用Macromedia Fireworks优化图像的命令。

· “站点”菜单：包含站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理当前站点中的文件。

· “窗口”菜单：提供对Dreamweaver中的所有面板、检查器和窗口的访问。

· “帮助”菜单：提供对Dreamweaver帮助文档的访问，包括用于使用Dreamweaver以及创建对Dreamweaver的扩展的帮助系统，并且包括各种语言的参考材料。

1.2.3 插入栏

对于一些经常使用的操作，如从菜单项中选择还是很不方便。插入栏上放置的是Dreamweaver提供的一些菜单命令的快捷方法，其按钮一般都和菜单中的命令相对应，运用插入栏可以更方便快捷。插入栏集成了多种网页元素，包括图像、文字等，如图1-5所示。

单击插入栏左边的倒三角形按钮，可以选择不同的工具组，包括布局、表单、文本等，如图1-6所示。如果选中“显示为制表符”选项，则以传统的方式显示插入栏，如图1-7所示。

“收藏夹”是用户自定义的组，在这里用户可以创建自己常用的按钮。

1.2.4 文档工具栏

“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如浏览器中预览），如图1-8所示。

要显示文档工具栏，可以选择“查看”→“工具栏”→“文档”菜单命令。文档工具栏中各个图标按钮的功能分别如下。

· “显示代码视图”：显示代码窗口。

· “显示代码和设计视图”：显示代码和设计窗口。

· “显示设计视图”：显示设计窗口。

· “活动数据视图”：用来查看实时数据视图。

· “标题”：用来设置或修改文档的标题。

· “文件管理”：单击该按钮，通过这里来实现消除只读属性、获取、取出、上传、存回、撤销取出、设计注意以及站点定位等功能。

· “在浏览器中预览/调试”：单击该按钮在定义好的浏览器中预览或调试，或是编辑浏览器列表。

· “刷新”：单击该按钮，可以刷新设计显示中通过代码更改的部分。

· “参考”：单击该按钮来启动代码属性设置面板。

· “代码导航”：单击该钮来移动文档里定义的JavaScript函数，设置或删除代码里的断点。

· “视图选项”（代码视图模式）：单击代码视图模式下的选项菜单按钮，可以选择自动换行、行数、高亮显示无效HTML、语法颜色、自动缩进等选项，以及在顶端查看设计视图。

· “视图选项”（设计视图模式）：单击设计视图模式下的选项菜单按钮，可以选择隐藏所有的可视化帮助或锁定可视化帮助，如表格边框、层边框、框架边框、图像地图、不可见元素、表头、标尺、网格，以及轮廓图像。

1.2.5 属性面板

属性面板主要用于显示在文档窗口中所选中元素的属性，允许用户在属性设置面板中对元素属性直接进行修改。根据选中元素的不同，属性设置面板上的内容也不同。如图1-9、图1-10分别为文本和图像的属性面板。

在属性设置面板的右下角，通常都有一个指三角形按钮。单击该三角形图标可以折叠属性面板。当属性面板被折叠时，单击倒三角形按钮又可以重新展开属性面板，显示更多的属性设置内容。

单击属性面板右上角的图标，则可以打开属性面板菜单。在菜单中可以选择属性设置面板的显示模式。

1.2.6 其他面板

在Dreamweaver中提供了一系列面板，在窗口的右侧以面板组的形式显示出来，如图1-11所示。它是一个工具集合的控制框架，可以将各种窗口、面板放置在其中，组合成为选项卡的形式，以节省屏幕空间。在必要时还可以将这些浮动窗口、面板拖离，成为独立的可停靠浮动面板，如图1-12所示。

如果希望将某个面板同其他面板组合成多个选项卡的形式，可以单击面板右上角的图标，从打开的菜单中选择“将XX组合在”子菜单中的一个面板进行组合，如图1-13所示。