1、17 第2章 Dreamweaver基本操作 通过本章学习，你应当： （1）学会设置首选参数。 （2）学会新建、保存和关闭 HTML 文档。 （3）学会设置网页的页面属性。 （4）学会添加文字和图像的基本操作。 2.1 首选参数设置 为了使 Dreamweaver 更加适合工作的需要，在正式使用前需要进行一些基础设置。如是否 打开或关闭一些即时提示信息框、选择默认的网页语言版本等。 图2-1-1 图2-1-2 启动 Dreamweaver，执行“编辑 / 首选 参数”命令，打开如图 2-1-1 所示的“首选 参数”对话框。 选择分类栏中的“辅助功能”，分别单击 表单对象、框架、媒体和图像前面的
2、复选框， 将复选框中的去掉，如图2-1-2所示。 注 ： 这样设置可以阻止在插入表单、 框架、 媒体和图像时弹出属性提示框， 简化操作步骤。Dreamweaver CS3中文版实用教程 18 本例中选择默认文档为HTML，默认扩展名为 .html，默认编码为简体中文（GB2312）。 注 ： 默认编码可以根据实际工作的需要进行选择， 例如制作英文网页可以选择 UTF-8 编码。 制作中文网页时，默认的编码为 GB2312，所以这里一定要选择 GB2312 编码。 单击“确定”按钮，完成首选参数设置。 2.2 文档的基本操作 2.2.1 新建文档 （1）启动Dreamweaver，显示如图
3、2-2-1所示的起始页面。 图2-1-3 图2-2-1 如图 2-1-3 所示，选择分类栏中的“新 建文档”，根据需要设置默认文档的类型。 （2）单击新建栏中的“HTML”，新建 HTML 文档并进入到编辑界面。第2章 Dreamweaver基本操作 19 注： 也 可 以 单 击 菜 单“ 文 件 / 新 建 ”， 打 开 图 2-2-2 所 示 的“ 新 建 文 档 ” 对 话 框。 在 新 建 文档对话框中选择“空白页”中的“HTML”，单击“创建”按钮，新建 HTML 文档。 2.2.2 保存和关闭文档 执行“文件/保存”命令，可以保存当前文档。 图2-2-2 第一次执行“文件/
4、保存”命令时，会弹 出如图2-2-3所示的 “另存为” 对话框。 在 “另 存为” 对话框中设置文件的保存路径和文件名， 单击“保存”按钮完成文档保存。 当再次保存文件时，会以现有的路径和名称覆盖保存该文件。 需要将文件以不同路径或名称保存时，可以执行“文件/另存为”命令，在弹出的“另存为” 对话框中设置新的路径和名称保存文件。 执行“文件/关闭”命令，或单击Dreamweaver窗口右上角的“关闭”按钮，关闭程序。 2.2.3 打开文档 打开文档的方法有多种，下面以实例进行介绍。 （1）启动Dreamweaver程序，在起始页面中显示了最近编辑过的文件，如图2-2-4所示。 图2-2-3Dr
5、eamweaver CS3中文版实用教程 20 （2）单击目标文件，即可将其打开。 图2-2-4 2.3 制作网页的基本操作 在深入学习制作网页前，需要了解设置页面、添加头部信息和文本、插入图像等基本操作。 2.3.1 设置网页属性 制作网页时，首先需要设置文档的页面属性，它包括网页标题、背景图像、背景颜色、文 本颜色、链接颜色、页边距等。 图2-3-1所示为在浏览器中打开的一个网页，通过这个网页可以了解如下信息。 图2-2-5 注： 也 可 以 单 击“ 打 开 ” 按 钮 或 执 行“ 文 件 / 打开” 命令， 在弹出的图 2-2-5 所示的 “打 开” 对话框中选择目标文件， 然
6、后单击 “打开” 按钮。第2章 Dreamweaver基本操作 21 图2-3-1 标题 上边距 左边距 右边距 正文字体样式 链接样式 网页具有标题、页边距、链接样式、背景颜色和字体样式等页面属性。在建立网页时，可 以通过设置页面属性来制定网页的这些样式。下面开始设置网页属性。 设置页面属性的操作如下： （1）执行“修改 / 页面属性”命令，打 开如图2-3-2 所示的“页面属性”对话框。 图2-3-2 外观：图 2-3-2 所示为页面属性下的外 观类别。在外观选项中可以设置页面的默认字 体、背景颜色和页面边距等。单击目标选择框 会弹出相应的提示，选择目标项设置即可。 链接：图 2-3
7、-3 所示为页面属性下的链 接类别。在链接选项中可以设置链接的字体、 颜色和下划线样式等。 图2-3-3 注：也可以在新建网页后，单击属性面板中的“页面属性”按钮打开该对话框。 （2）设置各类参数，单击“确定”按钮完成设置。 页面属性对话框中各选项的含义如下：Dreamweaver CS3中文版实用教程 22 标题：图 2-3-4 所示为页面属性下的标 题类别。标题类别栏用于设置当前网页的文本 格式。标题是 HTML 文档默认保留的文本体 例，可以在这里重新定义各级标题的格式，然 后在工作中直接应用这些标题，定义文本的样 式。 标题 / 编码：图 2-3-5 所示为页面属性 下的标题和编
8、码类别。“标题”显示在浏览器 的标题栏和状态栏中，当网页被收藏时，标题 显示在收藏项目中；“编码”用来设置当前网 页文字采用的编码种类。计算机中显示的每种 文字都需要对应的编码支持，才能正确显示， 否则会出现乱码， 即无法正确显示文字的现象。 在中文模式下默认编码为简体中文GB2312。 跟踪图像：图 2-3-6 所示为跟踪图像类 别。它可在设计页面时插入用作参考的图像文 件。 图2-3-6 图2-3-5 图2-3-4 跟踪图像栏指定在复制设计时作为参考的图像。该图像只供参考，当文档在浏览器中显示 时并不出现。 图像透明度确定跟踪图像的不透明度，从完全透明到完全不透明。 设定完成后，若想查看实
9、际效果，可以单击“应用”按钮，即时查看设定的效果，而不用 退出页面属性设置面板。 2.3.2 编辑头部信息 头部信息中包含了网页的许多属性信息，除网页标题外，还包括网页关键字、网页描述等。 头部信息虽不直接显示在网页中，但可以通过其他方式起作用。如许多搜索引擎都是根据网页 关键字来查询网页的。下面我们就简单介绍插入网页关键字的方法。 （1）如图2-3-7所示，单击插入面板的“常用”选项卡，切换到“常用”选项卡。第2章 Dreamweaver基本操作 23 图2-3-7 图2-3-8 图2-3-9 （2） 单 击“ 文 件 头” 按 钮， 弹 出 图 2-3-8所示的菜单。 （3）单击菜单
10、中的“关键字”选项，打 开“关键字”对话框。输入站点或网页的关键 字， 即网站中关键内容描述， 如图2-3-9所示， 单击“确定”按钮，关闭对话框。 2.3.3 添加网页内容 1.添加文本 文字是构成网页的重要组成部分，在 Dreamweaver 中可以像使用文字排版软件一样，进行 文字的输入和编辑。 直接添加文本的操作如下： （1）启动Dreamweaver，单击起始页面中创建新项目下的HTML，新建 HTML 文档。 （2）单击编辑窗口内部，然后输入目标文字即可。 拷贝文件的操作如下： （1）新建HTML 文档。 （2）使用Word或其他文字编辑软件打开一段含有文字内容的文档。 （3）选取
11、目标文本，执行“编辑/复制”命令（或按“Ctrl+C”组合键），复制该文本。 （4）在 Dreamweaver 文档窗口执行“编辑 / 粘贴”命令（或者按“Ctrl+V”组合键），Dreamweaver CS3中文版实用教程 24 图2-3-13 图2-3-12 图2-3-10 图2-3-11 完成文本拷贝。 注：粘贴到 Dreamweaver 的文本，原文本字体被 Dreamweaver 默认的字体所代替。 2.插入图像 图像是网页中的重要元素，它能给网页增加美感。插入图像的具体操作方法如下： （1）新建HTML 文档。 （2）在文本的末尾处按回车键，确定插入图像的位置。单击“插入记录
12、/图像”，弹出“选 择图像源文件”对话框。 （3）在图 2-3-10 所示的“选择图像源 文件”对话框中选择目标文件，单击“确定” 按钮，导入图像。 如果当前新建网页没有被保存，那么会弹 出如图2-3-11所示的提示框。 注： 单 击“ 确 定 ” 按 钮 后， 如 果 没 有 设 置 首 选 参 数 的 辅 助 功 能 项， 那 么 在 默 认 参 数 下， 会 打 开 如 图 2-3-12 所 示 的“ 图 像 标 签 辅 助 功 能 属 性 ” 对 话 框。 该 对 话 框 不 用 设 置， 直 接 单 击“ 确 定 ” 按 钮 或 者“ 取 消 ” 按 钮 将 图 像 导 入 即可。
13、如 果 不 想 在 插 入 图 像 时 弹 出 该 对 话 框， 可 以 单 击 图 2-3-12 中 最 下 边 的 带 有 下 划 线 的 链 接 文 字， 打 开 图 2-3-13 所 示 的“ 首 选 参 数 ” 对 话 框， 单 击“ 图 像 ” 复 选 框， 将 该 复 选 框 中 的“”去掉。第2章 Dreamweaver基本操作 25 图2-3-14 图2-3-15 指向文件图标 链接文字 （4）如图2-3-14所示，在属性面板中设置导入图像的大小和位置。 3.建立超链接 建立超链接可通过属性面板来完成，下面以建立文字超链接为例，讲解具体建立的方法。 （1）使用鼠标框选需
14、要链接的文字。 （2）将鼠标指针移到属性面板中的链接栏右侧的指向文件图标，按住鼠标左键拖动到文件 面板中的目标链接网页，如图 2-3-15 所示。也可以在链接栏中直接输入链接网页的地址，例 如输入http:/，完成链接设置。Dreamweaver CS3中文版实用教程 26 （3）按 F12 键预览网页，如图 2-3-16 所示。将鼠标指针指向链接文件，鼠标指针变为手 指形状，单击链接文字会跳转至链接页。 图2-3-17 结果面板 图2-3-16 4.预览及检验相关操作 编辑网页的过程中，经常需要在浏览器中预览和检验相关操作。预览网页时，需要先保存 网页，然后按F12 键，在IE浏览器中
15、预览编辑结果。 执行“窗口/结果”，打开如图2-3-17所示的结果面板。使用结果面板的各项检验功能， 可以执行检验操作并在面板中列出检验结果。第2章 Dreamweaver基本操作 27 图2-4-1 2.4 辅 助 操 作 如图2-4-1所示，Dreamweaver中有3个辅助工具。这3个工具从左向右依次是选取工具、 手形工具和缩放工具，使用鼠标单击就可以选取目标工具。 选取工具可以选择目标对象和位置。 手形工具可以移动页面的显示中心。 缩放工具可以放大和缩小页面的显示比例。 选择缩放工具， 移动到页面位置单击可放大页面， 按住 Alt 键单击则缩小页面。也可以单击缩放工具右侧的缩放比
16、率框，在弹出的菜单中选择页 面的缩放比率。 2.5 小 结 本章讲解了 Dreamweaver 的一些基本操作。通过本章的学习，读者应该掌握首选参数的设 置，学会新建、保存和关闭文档的方法，学会向网页中添加简单的文字和图像内容，灵活地使 用Dreamweaver提供的辅助工具。 2.6 练 习 填空题 （1）为了使 Dreamweaver 更加适合工作的需要，在正式使用前需要在 进行一些 基本设置。 （2）制作中文网页时，默认的编码为 。 （3）当使用浏览器打开网页时，网页的标题显示在浏览器的 和 中，当网页被 收藏时，标题显示在收藏项目中。 问答题 （1）如何打开“首选参数”对话框？ （2）如何向网页中插入文本？ （3）如何在网页中插入图像？Dreamweaver CS3中文版实用教程 28 上机练习 （1）新建一个网页，并保存和关闭该网页。 （2）新建一个网页，并设置网页的标题、边距属性。 （3）向新建网页中导入一个图像，并使用缩放工具执行放大和缩小操作。放大图像时使用 手形工具移动图像到屏幕中心。
