1.3 Dreamweaver工具的使用

为了方便网页制作，通常会选择一些较便捷的辅助工具，如EditPlus、Notepad++、Sublime、Dreamweaver等。其中，Dreamweaver工具依靠其可视化的网页制作模式，极大地降低了网站建设的难度，不同技术水平的设计师都能用其搭建出美观的页面。本节将详细介绍Dreamweaver工具的使用。

1.3.1 认识Dreamweaver界面

本书使用的版本是Adobe Dreamweaver CS6，软件的安装直接按照窗口提示操作即可，本书直接讲解软件安装后如何使用。

双击运行桌面上的软件图标，进入软件界面。这里建议用户依次选择菜单栏中的“窗口→工作区布局→经典”选项，如图1-18所示。

接下来，选择菜单栏中的“文件→新建”选项，会出现“新建文档”对话框。在“文档类型”下拉选项中选择“HTML5”，单击“创建”按钮，如图1-19所示，即可创建一个空白的HTML5文档，如图1-20所示。

需要注意的是，如果是初次安装使用Dreamweaver工具，创建空白的HTML文档时可能会出现图1-21所示的空白界面，此时单击“代码”按钮即可出现图1-20所示的界面效果。

Dreamweaver操作界面主要由6个部分组成，包括菜单栏、插入栏、文档工具栏、文档窗口、属性面板和常用面板，每个部分的具体位置如图1-22所示。

下面对图1-22中的6个部分进行详细讲解，具体如下。

1.菜单栏

Dreamweaver菜单栏由各种菜单命令构成，包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助共10个菜单项，如图1-23所示。

图1-23所示的各个菜单项介绍如下。

·“文件（F）”菜单：包含文件操作的标准菜单项，例如“新建”“打开”“保存”等。文件菜单还包括其他选项，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”“多屏预览”等。

·“编辑（E）”菜单：包含文件编辑的标准菜单项，如“剪切”“拷贝”“粘贴”等。此外“编辑”菜单还包括选择和查找选项，并且提供软件快捷键编辑器、标签库编辑器和首选参数编辑器的访问。

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

·“插入（I）”菜单：用于将各个对象插入文档，例如插入图像、Flash等。

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

·“格式（O）”菜单：用于设置文本的各种格式和样式。

·“命令（C）”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式、优化图像、排序表格等命令。

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

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

·“帮助（H）”菜单：提供对Dreamweaver帮助文档的访问，包括Dreamweaver使用帮助，Dreamweaver的支持系统、扩展管理和各种语言的参考材料等。

2.插入栏

在使用Dreamweaver建设网站时，对于一些经常使用的标签，可以直接选择插入栏里的相关按钮，这些按钮一般都与菜单中的命令相对应。插入栏集成了多种网页元素，包括超链接、图像、表格、多媒体等，如图1-24所示。

单击插入栏上方相应的选项，如“布局”“表单”等，插入栏下方会出现不同的工具组。选择工具组中不同的按钮，可以创建不同的网页元素。

3.文档工具栏

文档工具栏提供了各种“文档”视图窗口，如代码、拆分、设计等视图窗口，还提供了各种查看选项和一些常用操作，如图1-25所示。

下面介绍几个文档工具栏的常用功能按钮，具体如下。

· “显示代码视图”：单击“代码”按钮，文档窗口中将只留下代码视图，收起设计视图。

· “显示代码和设计视图”：单击“拆分”按钮，文档窗口中将同时显示代码视图和设计视图，两个视图中间以一条间隔线分开，拖动间隔线可以改变两者所占页面的比例。

· “显示设计视图”：单击“设计”按钮，文档窗口中收起代码视图只留下设计视图。

·：此处可以修改文档的标题，也就是修改源代码头部<title>标签中的内容，默认情况下为“无标题文档”。

· “在浏览器中预览/调试”：单击可选择浏览器对网页进行预览或调试。

· “刷新”：在代码视图中修改代码后，单击该按钮可刷新文档的设计视图。

需要注意的是，在Dreamweaver工具中，文档工具栏是可以隐藏的，选择“查看→工具栏→文档”命令，当“文档”为勾选状态时（见图1-26），显示“文档工具栏”，取消勾选状态则会隐藏“文档工具栏”。

4.文档窗口

文档窗口是Dreamweaver最常用到的区域之一，此处会显示所有打开的文档。分别单击文档工具栏里的“代码”“拆分”“设计”这3个选择按钮可变换区域的显示状态，图1-27为“拆分”状态下的结构，左方是代码区，右方是视图区。

5.属性面板

属性面板主要用于设置文档窗口中所选中元素的属性。在Dreamweaver中允许用户在属性面板中直接对元素的属性进行修改。选中的元素不同，属性面板中的内容也不一样。图1-28和图1-29分别为表格和图像的属性面板。

单击属性面板右上角的“”图标，可以打开选项菜单。如果不小心关闭了属性面板，可以从菜单栏选择“窗口→属性”选项重新打开，或者按“Ctrl+F3”组合键直接调出。

6.常用面板

常用面板中集合了网站编辑和建设过程中一些常用的工具。用户可以根据需要自定义该区域的功能面板，通过这样的方式既能够很容易地使用所需面板，也不会使工作区域变得混乱。用户可以通过“窗口”菜单选择需要打开的功能面板，将鼠标指针置于面板名称栏上（图1-30红框标示位置），拖曳面板，可使它们浮动在界面上，图1-30为“文件”面板浮动在代码区上面。

1.3.2 Dreamweaver初始化设置

在使用Dreamweaver时，为了操作更得心应手，通常都会做一些初始化设置。Dreamweaver工具的初始化设置通常包括以下5个方面。

1.设置工作区布局

打开Dreamweaver工具界面，选择菜单栏中的“窗口→工作区布局→经典”选项。

2.添加必备面板

设置为“经典”模式后，需要调出3个常用面板，即“插入”面板、“文件”面板、“属性”面板，这3个面板均可以通过“窗口”菜单打开，如图1-31所示。

3.设置新建文档

选择“编辑→首选参数”选项（或按“Ctrl+U”组合键），即可打开“首选参数”对话框，如图1-32所示。选中左侧“分类”区域中的“新建文档”选项，右侧就会出现该选项相应的设置项。可以选取目前最常用的HTML文档类型和编码类型（只需设置红框标识的选项即可）。

设置好新建文档的首选参数后，再新建HTML文档时，Dreamweaver就会按照默认设置直接生成所需要的代码。

注意：

在“默认文档类型”选项中，Dreamweaver CS6默认文档类型为XHTML1.0，使用者可根据实际需要更改为HTML5。

4.设置代码提示

Dreamweaver拥有强大的代码提示功能，可以提高书写代码的速度。在“首选参数”对话框中可设置代码提示，方法是：选择“代码提示”选项，然后选中“结束标签”选项中的第二项，单击“确定”按钮，如图1-33所示，即可完成代码提示设置。

5.浏览器设置

Dreamweaver可以关联浏览器，对编辑的网站页面进行预览。在“首选参数”对话框（见图1-33）左侧“分类”区域选择“在浏览器中预览”选项，在右侧区域单击“”按钮，即可打开图1-34所示的“添加浏览器”对话框。

单击“浏览”按钮，即可打开“选择浏览器”对话框，选中需要添加的浏览器，单击“打开”按钮，Dreamweaver会自动将浏览器的信息添加到“添加浏览器”对话框的“名称”和“应用程序”文本框中，如图1-35所示。

单击图1-35中的“确定”按钮，完成添加，此时在“浏览器”显示区域会出现添加的浏览器，如图1-36所示，如果勾选“主浏览器”选项，按“F12”快捷键即可进行快速预览。如果勾选“次浏览器”选项，按“Ctrl+F12”组合键可使用次浏览器预览网页。

本书建议将Dreamweaver主浏览器设置为“谷歌浏览器”，将次浏览器设置为火狐浏览器。

注意：

Dreamweaver设计视图中的显示效果只能作为参考，最终以浏览器中的显示效果为准。

1.3.3 Dreamweaver基本操作

完成Dreamweaver工具界面的初始化设置之后，就可以使用Dreamweaver工具搭建网页了。在使用Dreamweaver建设网站之前，首先要熟悉一下文档的基本操作。文档的基本操作主要包括新建文档、保存文档、打开文档、关闭文档，具体介绍如下。

1.新建文档

在启动Dreamweaver工具时，软件界面会弹出一个欢迎界面，如图1-37所示。

选择“新建”下面的“HTML”选项即可创建一个新的页面，也可以选择“新建”下面的“更多”选项，会弹出“新建文档”对话框，如图1-38所示。可以从“新建文档”对话框设置页面类型、布局、文档类型等，然后单击“创建”按钮，即可完成文档的创建。

需要说明的是，还可以从菜单栏中选择“文件→新建”选项（或按“Ctrl+N”组合键），打开“新建文档”对话框。

2.保存文档

在预览编辑或修改后的网页文档前需要先将其保存起来。保存文档的方法十分简单，选择“文件→保存”选项（或按“Ctrl+S”组合键），如果是第一次保存，会打开“另存为”对话框，如图1-39所示。设置相应的文件名和保存类型，单击“保存”按钮即可完成文档的保存。

当用户完成第一次保存文档后，再次执行“保存”命令，将不会弹出“另存为”对话框，计算机会直接保存结果，并覆盖源文件。如果用户既想保存修改的文件，又不想覆盖源文件，则可以使用“另存为”命令。选择“文件→另存为”选项（或按“Ctrl+Shift+S”组合键），会再次弹出“另存为”对话框，在该对话框中设置保存路径、文件名和保存类型，单击“确定”按钮，即可将该文件另存为一个新的文件。

注意：

执行“另存为”命令时，文件名称不能和之前的文件名相同。如果名称相同，那么后面保存的文档会覆盖原来的文件。

3.打开文档

如果想要打开计算机中已经存在的文件，可以选择“文件→打开”选项（或按“Ctrl+O”组合键），即可弹出“打开”对话框，如图1-40所示。

选中需要打开的文档，单击“打开”按钮，即可打开被选中的文件。除此之外，用户还可以将选中的文档直接拖曳到Dreamweaver主界面除文档窗口外的其他区域，快速打开文档。

4.关闭文档

对于已经完成编辑并保存过的文档，可以使用Dreamweaver工具的关闭文档功能将其关闭。通常可以使用以下2种方法关闭文档。

（1）选择“文件→关闭”选项（或按“Ctrl+W”组合键）可关闭选中的文档。

（2）单击需要关闭的文档窗口标签栏“”按钮（图1-41红框位置），可关闭该文档。