2.1 熟悉Dreamweaver CS6工作界面

读者在使用Dreamweaver CS6进行网页制作之前，首先要对Dreamweaver CS6的工作界面进行全面的熟悉。

2.1.1 工作界面的组成

在安装了Dreamweaver CS6之后，选择“开始”→“程序”→“Adobe”→“Adobe Dreamweaver CS6”命令，即可启动软件。首次打开软件会提示关联文件，使用默认选项即可。Dreamweaver CS6在经过一系列初始化后，显示欢迎屏幕，如图2-1所示，用户可以选择“打开最近的项目”“新建”“主要功能”组中的选项来新建不同类型的网页文件。

操作点拨：

用户可以执行“编辑”→“首选参数”命令，打开“首选参数”对话框，在“常规”分类中撤销选中“显示欢迎屏幕”复选框，可以取消在启动软件后显示欢迎屏幕。

用户新建或打开网页文档后，即可进入工作界面，如图2-2所示。Dreamweaver CS6的工作界面包括标题栏、菜单栏、状态栏、“属性”面板、浮动面板组等。

操作点拨：

操作界面的这些构成部分也可以根据用户的需要在“查看”菜单和“窗口”菜单来调节显示或不显示。

1．菜单栏

Dreamweaver CS6的菜单栏包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助菜单，如图2-3所示。

菜单栏上的每一项都有子菜单，其中的每个菜单命令都可以进行一些相关的命令执行或属性的设置。

文件：用来管理文件，例如新建、打开、保存、另存为等。

编辑：用来编辑文本，例如剪切、复制、粘贴、查找、替换和参数设置，以及对Dreamweaver软件中“首选参数”的访问。

查看：用来切换网页文档的视图模式，以及显示和隐藏标尺、网格线等辅助视图功能。

插入：用来插入网页中的各类元素，例如图像、多媒体文件、表格、框架及超链接等。

修改：具有对页面元素修改的功能，例如进行表格中单元格的合并与拆分等。

格式：用来对文本进行操作，例如设置文本格式等。

命令：包含所有附加命令项。

站点：用来创建和管理网站站点。

窗口：用来显示和隐藏各面板，以及切换工作区的布局等。

帮助：具有联机帮助功能。

2．文档编辑区

文档编辑区是用户对网页文档进行操作的主要工作区域，包含文档标签栏、文档工具栏、文档窗口、文档状态栏，如图2-4所示。

文档标签栏：其左侧显示当前打开的网页文档的文件名及关闭文档的按钮，右侧显示文档的保存路径及向下还原文档窗口的按钮，如图2-5所示。

文档工具栏：可以使用户快速地切换文档的视图模式，设置网页标题，在浏览器中预览等。按钮具体功能如图2-6所示。

文档窗口：打开或新建一个网页文档后，用户就可以在文档窗口中进行编辑文字、插入表格、编辑图像等操作。文档窗口可以分为代码视图、拆分视图和设计视图3种方式，如图2-7所示。

操作点拨：

“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，用户编辑的文档基本上和在浏览器中查看到的页面内容一致，体现了Dreamweaver CS6的所见即所得的特点。“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码及任何其他类型代码的手工编码环境。“拆分”视图可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。

文档状态栏：显示与当前所打开文档相关的一些信息，各按钮功能如图2-8所示。

3．“属性”面板

“属性”面板用来设置页面上正被编辑对象的相关属性。“属性”面板会根据用户选择的对象来变换面板中的信息。例如，当前选择了一幅图像，那么“属性”面板上就出现该图像的相关属性；如果选择了表格，那么“属性”面板会相应地变换成表格的相关属性，初始情况下显示文档的基本属性信息，如图2-9所示。

4．浮动面板组

界面中的其他面板都可以浮动于编辑窗口之外，这些面板根据功能进行了分组。用户可以在“窗口”菜单中选择不同的命令打开与关闭所需要的面板，如图2-10所示。

2.1.2 可视化辅助工具

要想使用Dreamweaver CS6设计出更精美的网页，更准确地摆放网页中的素材位置，Dreamweaver提供了各种辅助工具。使用这些辅助工具，能够得心应手地制作网页，提高网页制作效率。

1．标尺

利用标尺可以精确地计算出所编辑的网页的宽度和高度，计算出页面中的图片、文字等页面元素与网页的比例，使用户设计出的网页能够更符合浏览器的显示尺寸要求。标尺显示在编辑窗口的左边框和上边框中，单位可设置为像素、英寸、厘米。在默认情况下，标尺的单位是像素。

操作点拨：

执行“查看”→“标尺”→“显示”命令，即可打开和关闭标尺。

标尺原点默认位于编辑窗口的左上角，在该处按住鼠标左键不放拖动，即可将标尺原点拖动到编辑窗口中的任一点，如图2-11所示。

操作点拨：

如要将标尺原点恢复到默认左上角的位置，执行“查看”→“标尺”→“重设原点”命令即可。

2．网格线

网格线主要是针对AP元素进行绘制、定位、大小调整的可视化操作。借助网格线，可以使页面元素在被移动后自动对齐。

操作点拨：

若要将网格线显示在编辑窗口中，执行“查看”→“网格”→“显示网格”命令，如图2-12所示。

若要使网页中的AP元素自动对齐到网格线上，执行“查看”→“网格”→“靠齐到网格”命令即可，如图2-13所示。

执行“查看”→“网格”→“网格设置”命令，打开了“网格设置”对话框，如图2-14所示，其具体参数解释如下。

“颜色”：设置网格线的颜色。

“显示网格”：切换复选框选中状态，将会显示与隐藏网格线。

“靠齐到网格”：选中复选框，将会使网页中的AP元素自动靠齐到网格线。

“间隔”：设置网格间的间距，后面的下拉列表中可以设置间距的单位。

“显示”：设置网格线显示为线条或点。

3．辅助线

辅助线与网格线的功能异曲同工，也是用来对齐AP元素的，不过使用辅助线比网格更加灵活方便。在一般情况下，辅助线要和标尺搭配使用，使用鼠标可从编辑窗口的左侧或顶部的标尺中拖出一条辅助线到编辑窗口中，如图2-15所示。

操作点拨：

执行“查看”→“辅助线”→“显示辅助线”命令，即可显示或隐藏已经绘制好的辅助线。

执行“查看”→“辅助线”→“编辑辅助线”命令，打开“辅助线”对话框，如图2-16所示。具体参数解释如下。

“辅助线颜色”：设置辅助线的颜色。

“距离颜色”：当用户把鼠标指针定位在辅助线之间时，将显示一个作为距离指示器的颜色，此项参数就是用来设置这个线条颜色的。

“显示辅助线”：选中该复选框，可以设置辅助线可见。

“靠齐辅助线”：选中该复选框，可以使页面元素在页面中移动时靠齐辅助线。

“锁定辅助线”：选中该复选框，可以将辅助线锁定在当前位置上。

“辅助线靠齐元素”：选中该复选框，拖动辅助线时将辅助线靠齐页面上的元素。

“清除全部”按钮：单击该按钮，将从页面中清除所有的辅助线。

2.1.3 设置首选参数

在使用Dreamweaver CS6制作网页之前，可以结合自己的需要来定义该软件的使用规则。这些规则可以通过设置首选参数来实现。执行“编辑”→“首选参数”命令，打开“首选参数”对话框，如图2-17所示。

1．“常规”分类

在“常规”分类中可设置文档选项和编辑选项。如选中“允许多个连续的空格”复选框，将允许使用〈Space〉键来输入多个连续的空格。

2．“复制/粘贴”分类

切换到“复制/粘贴”分类，如图2-18所示，在此分类中可以定义粘贴到Dreamweaver CS6文档中的文本格式。

粘贴方式有以下几种。

仅文本。

带结构的文本（段落、列表、格式等）。

带结构的文本以及基本格式（粗体、斜体）。

带结构的文本以及全部格式（粗体、斜体、样式）。

在设置了一种适用的粘贴方式后，就可以直接选择菜单栏中的“编辑”→“粘贴”命令粘贴文本，而不必每次都选择“编辑”→“选择性粘贴”命令。如需改变粘贴方式，再选择“选择性粘贴”命令进行粘贴即可。

3．“新建文档”分类

切换到“新建文档”分类，如图2-19所示。可以在“默认文档”下拉列表中选择默认文档类型，如“HTML”；在“默认扩展名”文本框中输入扩展名，如“.html”；在“默认文档类型”下拉列表中选择文档类型，如“XHTML 1.0 Transitional”；在“默认编码”下拉列表中选择编码类型，通常选择“Unicode（UTF-8）”选项。