| 第一章 | 第二章 | 第三章 | 第四章 | 第五章 |
第三章 文档的基本操作
前面两章，主要介绍了Dreamweaver 3的工作环境和在源代码控制方面的功能，实际上都是在介绍Dreamweaver 3在网页编辑方面的特性，从本章开始，我们才真正接触到网页设计操作的实质性内容。
文档操作可以看作是设计网页的基本操作，它包括打开和编辑文档、控制文档属性、定义文档标题等多个方面，在设计网页时都是必须考虑到的。从一个良好的设计基础入手创作网页，不仅能起到事半功倍的效果，而且也能充分体现创作者的专业能力。
本章的内容在某些方面可能和前面章节重复，为了说明的完整性，本章将仍然保留这些重复内容。
文档的创建和存储
文档的创建和存储可以说是文档操作中最为基本的操作。
创建空白文档
要创建一个空白文档，您可以按照如下两种方法进行操作：
方法一：
启动Dreamweaver 3，即可直接创建一个空白文档，等候编辑。
方法二：
如果Dreamweaver 3已经启动，要创建空白文档，可以打开“File”（文件）菜单，选择“New”（新建）命令。
在默认情况下，当您采用第二种方法创建新文档时，会另外启动一个Dreamweaver 3窗口，使您在新窗口中编辑新文档，原先的窗口中仍然是以前文档的内容。您可以通过在Windows的任务栏上单击相应的窗口状态条在两个Dreamweaver 3程序窗口中切换。这种特性很像Word 2000。
打开现有文档
要打开现有文档，您可以按照如下三种方法进行操作：
方法一：
在Windows的资源管理器中选中要打开文档的图标，单击鼠标右键，然后从快捷菜单中选择“Edit with Dreamweaver”（用Dreamweaver编辑）命令。
方法二：
在Dreamweaver已经启动的情况下，打开“File”（文件）菜单，选择“Open”（打开）命令，这时候会出现Windows标准的文件打开对话框，选择需要的文件，按下“打开”按钮，即可打开该文档。
方法三：
如果要编辑的文档由Microsoft Word创建，则可以通过打开“File”（文件）菜单，选择“Import”（导入），再选择“Import Word HTML”命令来打开该文档。
同样，在打开文档时会启动新的Dreamweaver 3窗口，载入被打开的文档。如果该文档已被打开，则会自动切换到载入该文档的Dreamweaver 3窗口。
基于模板创建文档
利用模板，可以批量创建具有相同格式的文档，我们会在有关章节介绍如何使用模板，这里只简单介绍如何基于模板创建文档，方法如下：
1. 打开“File”（文件）菜单，选择“New From Template”（从模板创建）命令。
2. 这时会出现一个对话框，上面列有可使用的模板。
3. 选择需要使用的模板，单击“Select”（选择）按钮，即可基于模板创建新文档。
注意：要使用模板来创建文档，必须首先创建本地的站点。通常模板会存储在站点的根目录中。我们会在有关章节介绍如何创建站点。
存储文档
目的不同，保存文档的方法也不相同。
保存文档
要保存文档，您可以按照如下方法进行操作：
1. 如果同时打开了多个Dreamweaver窗口，则切换到要保存的文档所在的窗口。
2. 打开“File”（文件）菜单，选择“Save”（保存）命令，或是按下Ctrl+S组合键。
3. 如果文档尚未被保存，则会出现Windows标准的文件存储对话框。选择路径并输入文件名，按下“保存”按钮，即可存储文档。
4. 如果文档已经被保存，则会直接存储文档，不会出现Windows的文件操作对话框。
另存文档
如果希望将文档以另外的名称保存，可以按照如下方法操作：
1. 如果同时打开了多个Dreamweaver窗口，则切换到要保存的文档所在的窗口。
2. 打开“File”（文件）菜单，选择“Save As”（另存为）命令。
3. 这时会出现Windows标准的文件存储对话框。选择路径并输入新的文件名，按下“保存”按钮，即可将文档以另外的名称保存。
存储所有文档
在实际创作过程中，可能同时打开了多个Dreamweaver窗口，编辑多个Dreamweaver文档，如果希望将所有文档都保存，可以按照如下方法操作：
1. 在任意一个Dreamweaver窗口中，打开“File”（文件）菜单，选择“Save All”（全部保存）命令，即可将所有打开的Dreamweaver窗口中正在编辑的文档保存。
2. 如果某些窗口中的文档尚未保存过，则会出现Windows标准的文件存储对话框，提示您输入路径和文件名称。输入相应信息，按下“保存”按钮即可将之保存。
关闭文档
要关闭正在编辑的文档，可以采用如下方法：
1. 切换到要关闭文档的窗口。
2. 打开“File”（文件）菜单，选择“Close”（关闭）命令。
3. 如果文档尚未保存，则会出现提示对话框，提示您保存文档。单击“是”按钮则保存文档，单击“否”按钮则不保存文档，单击“取消”按钮则放弃关闭操作。
4. 如果系统中只开启了一个Dreamweaver窗口，而希望关闭其中的文档，则在关闭文档后，会出现一个对话框，提示您是否要同时退出Dreamweaver，如图 3‑1所示。单击“Yes”（是）按钮则同时退出Dreamweaver；单击“No”（否）按钮则不退出Dreamweaver，这时又会创建一个新文档等候编辑。如果您不希望再次看到该对话框，可以选中其上的复选框。
图 3‑1 退出Dreamweaver的提示信息
理解空白文档的初始代码
在创建了一个新文档后，如果这时候打开HTML源代码检视器，您会发现尽管新建的文档是空白的，但是其中已经有了不少源代码，在默认状态下，这些源代码如下所示：
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
如果希望学习HTML语言，从上述代码开始学习是最好的起步。在这里，我们将其中一些重要的标记介绍如下：
<html>和</html>
<html>和</html>标记是HTML文档的开始和结束标记，HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以<html>开始，以</html>结束的。
注意：在HTML 4.0标准里，可以在<html>标记之前添加一行HTML的版本描述信息，但是很少有网页这么做。
<head>和</head>
<head>和</head>标记一般位于文档的头部，用于包含当前文档的有关信息，例如标题和关键字等，通常我们将这两个标记之间的内容统称作HTML的“头部”。一般来说，位于头部的内容都不会在网页上直接显示，而是通过另外的方式起作用，例如，标题是在HTML的头部定义的，它不会显示在网页上，但是会出现在网页的标题栏上。
<title>和</title
每个HTML文档都应该有标题，在浏览网页时，标题文字出现在浏览器的标题栏上。在HTML文档中，标题文字位于<title>和</title>标记之间。<title>和</title>标记位于HTML文档的头部，也即位于<head>和</head>标记之间。
<body>和</body>
<body>和</body>用于定义HTML文档的正文部分，通常它在</head>标记之后，而在</html>标记之前。所有出现在网页上的正文内容都应该写在这两个标记之间。
<body>标记带有很多属性，主要用于控制文档的基本特征，如背景颜色等，现选择一些主要的属性介绍如下：
background = imgurl
该属性用于为文档指定一幅图像作为背景，其中imgurl是指向图像文件所在位置的地址，也即图像文件所在位置的统一资源定位符。
text = color
该属性用于定义文档中文本的默认颜色，也即文本的前景色。其中color是颜色的数值。
link = color
该属性用于定义文档中一个未被访问过的超级链接的文本颜色。其中color是颜色的数值。
alink = color
该属性用于定义文档中一个正在打开的超级链接的文本颜色。其中color是颜色的数值。
vlink = color
该属性用于定义文档中一个已经被访问过的超级链接的文本颜色。其中color是颜色的数值。
bgcolor = color
该属性定义文档的背景颜色，其中color是颜色的数值。
例如，如果希望将文档的背景颜色设置为白色，文本颜色设置为黑色，未访问超级链接的文本颜色设置为蓝色，已访问超级链接的文本颜色设置为红色，正在访问的超级链接的文本颜色设置为紫红色，则可以使用如下的<body>标记。
<body bgcolor = " white" text = "black" link = "blue" alink = "fuchsia" vlink = "red">
注意：
如果在网页中使用了框架（Frame），则正文部分包括在<frameset>和</frameset>标记中，而不是<body>和</body>之中。我们会在有关章节介绍框架标记。
添加文本和插入对象
往文档窗口中可以输入或粘贴文本，也可以利用“Insert”（插入）菜单或对象面板，往文档中插入图像。Dreamweaver还提供了一些更为便捷的特性，允许您往文档中很容易地添加日期，或是插入特殊字符。
添加文本
要在文档中添加文本，您可以采用如下的两种方法：
方法一：
直接在文档窗口中键入文本。
方法二：
1. 在其他的应用程序或窗口中复制文本，也即将文本复制到剪贴板上。
2. 切换回Dreamweaver文档窗口，将插入点设置到要放置文本的地方。
3. 打开“Edit”（编辑）菜单，选择“Paste as Text”（作为文本粘贴）命令。
插入对象
要往文档中插入图像、表格或其他对象，可以使用如下方法：
方法一：
打开“Insert”（插入）菜单，选择要插入对象的菜单项命令，即可将对象插入到当前文档窗口插入点所在的位置。
方法二：
1. 首先显示对象面板，找到要插入对象对应的按钮。
2. 单击相应的按钮，即可在插入点所在位置插入对象。
方法三：
1. 首先显示对象面板，找到要插入对象对应的按钮。
2. 将该按钮拖动到文档中要放置对象的位置。
3. 释放鼠标，即可在相应位置插入对象。
一般来说，当插入对象时，都会出现一个对话框，允许您进一步指定设置。如果不希望看到这些对话框，可以打开“Edit”（编辑）菜单，选择“Preferences”（参数选择）命令，打开Dreamweaver 3的参数选择对话框，从左方目录列表中选择“General”（常规），然后在右边取消对“Show Dialog When Inserting Objects”（当插入对象时显示对话框）复选框的选择。
我们会在相应的章节中介绍各种对象的插入方法。
插入日期
要往文档中插入当前日期，您可以按照如下方法进行操作：
1. 在文档窗口中，将插入点放置到要插入日期的位置。
2. 打开“Insert”（插入）菜单，选择“Date”（日期），或是单击对象面板上的“Insert Date”（插入日期）按钮（位于“Common”（通用）页），如图 3‑2所示。
图 3‑2 对象面板上的“Insert Date”按钮
3. 这时会出现如图 3‑3所示的对话框，提示您选择日期格式。
图 3‑3 插入日期对话框
l Day Format（星期格式） 在该下拉列表中，可以选择星期的格式，包括星期的简写方式，星期的完整显示方式，或是不显示星期。
l Date Format（日期格式） 在该下拉列表中，可以选择日期的格式。
l Time Format（时间格式） 在该下拉列表中，可以选择时间的格式，包括12小时制时间格式或24小时制时间格式。
l Update Automatically on Save（存储时自动更新） 选中该复选框，则每当存储文档时，都自动更新文档中插入的日期信息，该特性可以用来记录文档的最后生成日期。如果您希望插入的日期是普通的文本，将来不再变化，则应该清除该复选框。
4. 按下“OK”按钮，即可将日期插入到文档中。
插入特殊字符
在HTML中，插入特殊字符是一件很麻烦的事，因为特殊字符同普通的字符有所区别，您无法从键盘上直接输入，而且很多字符或许并不包含在当前文档的字符编码中，要在页面中显示它们，必须使用其他的方法。
字符参考
一般来说，在HTML中，一个特殊字符有两种表达方式，一种称作数字参考，一种称作实体参考。
所谓数字参考，就是用数字来表示文档中的特殊字符，通常由前缀“&#”，加上数值，再加上后缀“;”而组成，它可以采用如下两种方式。
&#D; 其中D是一个十进制数值
下面是一些特殊字符的数字参考示例：
© 对应于特殊字符“©”
® 对应于特殊字符“®”
所谓实体参考，实际上就是用有意义的名称来表示特殊字符，通常由前缀“&”，加上字符对应的名称，再加上后缀“;”而组成，其表达方式如下：
&name; 其中name是一个用于表示字符的名称，它是区分大小写的
例如，可以使用“©”来表示版权符号“©”，用“®”来表示注册商标符号“®”，很显然，这比数字要容易记忆得多。
遗憾的是，不是所有的浏览器都能够正确认出采用实体参考方式的特殊字符，但是它们都能够识别出采用数字参考方式的特殊字符，如果可能，对于一些特别不常见的字符，应该使用数字参考方式。
当然，对于那些常见的特殊字符，使用其实体参考方式是安全的，我们在实际应用中，只要记住这些常用特殊字符字符的实体参考就足够使用了。
表 3‑1显示了常用的一些字符实体参考和数字参考：
表 3‑1 常见的字符及其参考
|
字符实体参考 |
字符数字参考 |
显示 |
|
#nbsp; |
  |
|
|
© |
© |
© |
|
® |
® |
® |
|
™ |
™ |
™ |
|
£ |
£ |
£ |
|
€ |
€ |
€ |
|
¥ |
¥ |
¥ |
|
¢ |
¢ |
¢ |
|
§ |
§ |
§ |
|
< |
< |
< |
|
> |
> |
> |
|
& |
& |
& |
|
" |
" |
" |
|
× |
× |
× |
|
± |
± |
± |
|
· |
¸ |
• |
插入特殊字符
尽管记忆字符的参考非常不易，但是在Dreamweaver中，插入特殊字符却变得非常简单。Dreamweaver在对象面板上专门设置了常见的特殊字符按钮，只需要单击该按钮，即可完成特殊字符的输入。
您可以按照如下方法进行操作：
1. 在文档中，将插入点放置到要插入特殊字符的位置。
2. 打开对象面板上的下拉列表，然后选择“Characters”（字符），这时对象面板上就会显示常用特殊字符所对应的按钮，如图 3‑4所示。
图 3‑4 对象面板上的特殊字符按钮
3. 单击相应的按钮，即可插入相应的特殊字符，有些特殊字符插入后使用实体参考方式，而有些字符插入后使用数字参考方式。
4. 如果对象面板上没有需要的字符，可以单击面板上右下角的“Insert Other Character”（插入其他字符）按钮，这时会打开一个对话框，给您更多选择，如图 3‑5所示。
图 3‑5 插入其他字符
5. 单击需要的字符，该字符的参考就会出现在“Insert”（插入）文本框中，您也可以自行在该文本框中输入字符参考。
6. 单击“OK”按钮，确定操作，即可将字符插入到文档中。
字符#nbsp;在文档中显示为一个空格，这种空格称作非中断空格（Non-breaking Space），它同普通的空格不同，不会中断空格两端内容的联系。利用Dreamweaver的对象面板，可以直接插入这种空格，方法如下：
1. 将插入点放置到要插入空格的位置。
2. 打开对象面板上的下拉列表，选择“Invisibles”（不可见）。
3. 单击如图 3‑6所示的“Insert Non-breaking Space”（插入非中断空格）按钮，这时即可在文档中插入非中断空格。
图 3‑6 利用对象面板插入非中断空格
插入水平线
水平线在HTML文档中经常被用到，它主要用于分隔文档内容，使文档结构清晰明白，有时候，合理使用水平线可以获得非常好的效果。一篇内容繁杂的文档，如果合理放置几条水平线，很可能就变得层次分明，便于阅读。
插入和编辑水平线
要往文档中插入水平线，您可以按照如下方法操作：
1. 在文档中，将插入点放置到要插入水平线的地方。
2. 打开对象面板上的下拉列表，然后选择“Common”（常用），这时对象面板上就会显示常用对象按钮。
3. 单击对象面板上的“Insert Horizontal Rule”（插入水平线）按钮，如图 3‑7所示。
图 3‑7 插入水平线按钮
4. 这时文档中就插入了一条水平线，选中该水平线，可以在属性面板上编辑其属性，如图 3‑8所示。
图 3‑8 水平线的属性面板
l 在“W”文本框中，可以输入水平线的宽度，这个值可以是象素值，也可以是针对页面水平宽度的百分比，这取决于它右方单位列表框中的选择。
l 在“H”文本框中可以输入水平线的高度，它只能以象素作为单位。
l 在“W”文本框右边的下拉列表中，可以选择单位。您可以选择“pixels”（象素），或是“%”（百分比）。
l 在“Align”（对齐方式）下拉列表中，可以水平线在水平位置上的对齐方式。可以是“Left”（左对齐）、“Center”（居中对齐）或“Right”（右对齐），或者可以选择“Default”（默认），使用默认的对齐方式。
l 如果选中“Shading”（阴影）复选框，则水平线带有阴影效果。
l 在属性面板左下方的文本框中，可以为该水平线指定ID，在HTML 4.0规范中，几乎所有的标记都可以带有ID属性，用于标识该对象，但是在一般情况下都不会使用到它们。
理解水平线标记<hr>
在HTML中，水平线是由标记<hr>产生的。<hr>标记是非封闭标记，除了id属性外，它还带有width、size、align等属性。例如，对于图 3‑8所示的水平线，对应的语句是：
<hr width="400" size="5" id="Hori Rule" align="center">
如果取消阴影效果，则为<hr>标记添加noshade属性，如下所示：
<hr width="400" size="5" id="Hori Rule" align="center" noshade>
width属性可以用百分比表示，但是size属性则必须是象素，在上面的例子里，如果将水平线宽度定义为页面宽度的80%，则可以使用如下语句：
<hr width="80%" size="5" id="Hori Rule" align="center">
<hr>标记很简单，这里就不再详细介绍了。
在文档窗口中选择元素
通常，在文档窗口中，要选择某个元素，只需要单击它，或是拖动鼠标选中它就可以了，但是实际应用中，有些元素在屏幕上是不可见（例如源代码中的注释信息）的，而另外一些元素则很难完全选中（例如一对完整的标记，它在屏幕上也是看不见的），这时就需要使用一些其他的手段。
一般来说，在文档窗口中选择元素时，可以参考如下的方法：
l 如果要选中的是普通对象或元素，只需要单击它，或是拖动鼠标选中它。
l 如果要选中的是看不见的元素，可以通过Dreamweaver 3的参数设置对话框，设置相应的选项，将这些不可见元素显示，然后再选中它们。
l 如果要选中的是标记，可以利用文档窗口下方的标记选择器来选中它们，利用“Edit”菜单中的相关菜单项，还可以选中当前标记的父标记或第一个子标记。
本节主要介绍如何在文档窗口中显示不可见元素。
不可见元素
文档窗口毕竟是可视化操作的窗口，很多实际上在源代码中出现的内容，并不会在文档窗口中直接显示，如果希望对这些不可见元素进行编辑，就不得不转到代码级别的编辑器，如HTML源代码检视器中进行。
为了解决这种问题，Dreamweaver可以在文档窗口中，将每种不同类型的不可见元素以一个小图标的形式显示出来，以便于用户在文档窗口中对之定位。实际上，在默认设置下，大多数的不可见元素都可以以图标的方式在文档窗口中显示。
定制不可见元素的显示
有时候需要定制这些显示设置，例如，对于某些始终不会被编辑的不可见元素，可以设置它不在文档窗口中显示，以免影响视觉，而另外一些在编辑过程中要用到的不可见元素，则应该设置它在文档窗口中可显示。
您可以按照如下方法进行操作：
1. 打开“Edit”（编辑）菜单，选择“Preferences”（参数选择）命令，打开Dreamweaver 3的参数选择对话框。
2. 在左方目录列表中单击“Invisible Elements”（不可见元素）项，在对话框右方区域即可进行设置，如图 3‑9所示。
3. 选中相应复选框，则可以以相应图标显示该不可见元素，清除相应复选框，则不显示该元素（但是，可以在HTML源代码检视器中进行编辑）。
图 3‑10显示了这些不可见元素的含义。
图 3‑9 设置不可见元素的显示方式
图 3‑10 不可见元素的含义
显示不可见元素
前面一节的相关操作，决定了哪些不可见元素可以显示，而哪些不可见元素不可以显示，实际上，要在文档窗口中显示不可见元素，还需要激活Dreamweaver显示不可见元素的特性，方法如下：
打开“View”（查看）菜单，选择“Invisible Elements”（不可见元素）命令，当它被选中时，左方会出现选中的标记，这时即激活了Dreamweaver的显示不可见元素特性，不可见元素可以出现在文档窗口中。
再次打开“View”（查看）菜单，选择“Invisible Elements”（不可见元素）命令，清除对该菜单项的选择，则所有的不可见元素都不会显示在文档窗口中。
显示头部元素
在文档窗口中，主要显示的是正文部分的内容，也即位于<body>和</body>中的内容（我们暂时不考虑框架的情况），很多不可见元素实际上是位于HTML的头部的，也即位于<head>和</head>标记之间，如果希望看到这些头部内容，则可以按照如下方法进行操作：
打开“View”（查看）菜单，选择“Head Content”（头部内容）命令，当该菜单项被选中时，会在左方出现选中标记。这时在Dreamweaver的文档窗口上方中会多出一栏，其中显示头部内容，如图 3‑11所示。
再次打开“View”（查看）菜单，选择“Head Content”（头部内容）命令，清除对该项的选中，则又可以从文档窗口中隐藏头部信息。
在默认状态下，在文档的头部窗格中我们可以看到两个不可见元素标记，一个是文档的标题，也就是位于<title>和</title>之间的文本，另一个是META标记，定义当前文档的文字解码方式。
图 3‑11 显示头部内容
设置文档的页面属性
文档的页面属性包括文档的标题、文档的文字解码方式、文档正文中各个元素的颜色等，正确设置文档属性，是成功编写网页的必要前提。
要设置文档的页面属性，您可以按照如下方法进行操作：
1. 打开“Modify”（修改）菜单，选择“Page Properties”（页面属性），或是在文档窗口中单击鼠标右键，然后从快捷菜单中选择“Page Properties”（页面属性）。
2. 这时会打开如图 3‑12所示的对话框，允许您设置文档页面的整体属性。
图 3‑12 设置文档的页面属性
l Title（标题） 在该文本框中，可以输入文档的页面标题，它实际上是输入位于HTML头部的<title>和</title>标记之间的内容，在浏览页面时，会显示在浏览器的标题栏上。
l Background Image（背景图像） 在该文本框中，可以输入希望用作HTML文档的背景图像的路径和文件名称，单击“Browse”（浏览）按钮，可以从磁盘上选择图像文件。这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置的图像名称。实际上，这里设置的是<body>标记的background属性。
l Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是<body>标记的bgcolor属性。
l Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的text属性。
l Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置的是<body>标记的link属性。
l Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字颜色，实际上设置的是<body>标记的vlink属性。
l Active Links（正在访问的链接） 这里可以设置文档页面中正在访问的超级链接的文字颜色，实际上设置的是<body>标记的alink属性。
l Left Margin（左边距）、Top Margin（上边距）、Margin Width（页边宽度）和Margin Height（页边高度） 在这些文本框中，可以设置页面文字同页面边缘的间距。实际上分别设置的是<body>标记的leftmargin、topmargin、marginwidth和marginheight属性。但要注意，Netscape可以识别这些属性，但是Internet Explorer不识别它们，因此不建议使用它们。
l Document Encoding（文档解码方式） 在该列表框中，可以选择当前文档页面的文字解码方式，对于大陆使用的中文网页，应该选择“Simplified Chinese（GB2312）”。如果这里没有需要的解码方式，可以从列表中选择“Other”，这种情况下，页面会使用浏览器运行环境的解码方式。
l Tracing Image（草稿图） 在该文本框中，可以指定一幅图像作为网页创作时的草稿图，它显示在文档的背景上，便于在网页创作时进行定位和安放对象。在实际生成网页时，它并不显示在网页中，我们会在后面介绍其使用方法。
l Image（图像） 拖动该滑块，可以改变草稿图的透明程度，使用适当的透明程度可以避免干扰网页的编辑。
3. 设置完毕，单击“OK”按钮，确定操作。
前面一章里，我们曾经介绍过如何在Dreamweaver的对话框中通过颜色板选取颜色，这里再深入介绍一些同颜色相关的知识。
在HTML中，有两种方法来表示颜色，一种是采用十六进制的数值的方式（例如红色可表示为#FF0000），另一种方式是使用颜色名称（如红色可写成red）。当计算机运行在256色模式的情况下时，Microsoft Internet Explorer和Netscape Navigator这两种浏览器都能共同显示的颜色被称作Web安全（Web-safe）色。有216中颜色是共有的，它们可以用十六进制数值00，33，66，99，CC，或FF的组合来表示。
然而，经过测试表明，实际上只有212种颜色是真正的安全色，也即它们真正为Netscape Navigator和Microsoft Internet Explorer这两大浏览器所共有。Windows下的Internet Explorer不能正确显示颜色#0033FF，#3300FF，#00FF33，和#33FF00，所以应避免使用这4种颜色。
在Dreamweaver中，所有的颜色拾取器都使用这种212色的调色板；从调色板上选取一个颜色，会自动提取相应的十六进制颜色值。如果您希望使用前面提到的那另外4种颜色，可以在颜色文本框中手工输入其颜色值。
要选择位于Web安全色之外范围的颜色，可以单击颜色板右下角的“调色板”按钮，打开Windows系统本身的颜色对话框，然后选取颜色，在这里的颜色不受Web安全色的限制。不过我们不建议用户这样做。
注意：在UNIX操作系统下，Netscape Navigator使用同Windows下不同的调色板，如果您的网页是专为UNIX环境下而设计，则应该使用十六进制数值00，40，80，BF，或FF来组合成颜色值。
使用历史面板
Dreamweaver的历史面板记录了您在文档窗口中操作的历史，使用历史面板，可以帮助您撤销一个或多个步骤，或是重复进行一个多个步骤的操作，在网页的创作过程中，历史面板的作用举足轻重。
显示历史面板
要显示历史面板，可以使用如下方法：
方法一：
打开“Windows”（窗口）菜单，选择“History”（历史）命令。
方法二：
单击启动工具栏上的“History”（历史）按钮，如图 3‑13所示。
方法三：
按下F9键。
图 3‑13 启动面板上的History按钮
在历史面板中，会显示当前文档中进行过的操作列表，以及操作的动作内容。一个典型的历史面板结构如图 3‑14所示。
在默认情况下，在历史面板中最多可记录您前面50步内的操作，打开“Edit”（编辑）菜单，选择“Preferences”（参数选择）命令，打开Dreamweaver 3的参数选择对话框，从左方目录列表中选择“General”（常规），然后在右方的“Maximum Number of History Steps”（历史记录的最大步骤数目）文本框中输入需要的数目值。
图 3‑14 历史面板
撤销改变
如果在文档中进行了误操作，可以利用Dreamweaver的撤销操作功能，撤销这些操作。
如果仅仅希望撤销前一步操作，可以直接打开“Edit”（编辑）菜单，选择“Undo”（撤销）命令，或是按下Ctrl+Z组合键。连续进行该操作，可以一步一步撤销上次的改变。
利用历史面板同样可以实现对误操作的撤销，并且利用历史面板最大的优势在于，它可以一次撤销多步误操作。
您可以按照如下方法进行操作：
1. 显示历史面板，历史面板上会显示当前的进行过的操作列表。
2. 在历史面板上，找到希望撤销的最后一步。
3. 拖动滑块到该步骤所在的位置，也可以直接单击该位置列表左端位置，这时滑块会自动跳到该位置上。
4. 这时文档窗口中自动恢复到撤销操作后的状态，同时历史面板中被撤销的操作列表会变为灰色。如果希望恢复这些操作，可以重新将滑块拖动到该步骤上，这时被撤销的操作又会被恢复。
图 3‑15显示了利用历史面板撤销多个步骤的情形，在这个例子里，我们将文档恢复到为文字设置粗体格式之后，设置斜体格式之前的状态。
注意：一旦撤销了多步操作，然后又进行了新操作，则原先被撤销的操作将不可再恢复，历史面板中被撤销的操作列表会消失，而代之以新的操作步骤。
图 3‑15 利用历史面板撤销多个步骤
清空历史面板
如果确保历史面板中的记录不再需要，也可以将历史面板中的记录清空，以避免可能的误操作。其方法如下：
1. 在历史面板中单击鼠标右键，打开快捷菜单，也可以单击面板右上角三角图案的按钮，打开相应的菜单。
2. 选择“Clear History”（清空历史）命令，这时会出现一个提示对话框，告诉您如果清空历史面板，则不能撤销操作。
3. 单击“Yes”（是）按钮，即可清空历史面板中的所有操作记录。
自动完成任务
在历史面板中，不仅可以撤销已经进行过的操作，而且还可以重复已经进行过的操作步骤，这就是历史面板的自动完成任务特性。利用历史面板，不仅可以在当前的文档中重复步骤，还可以记录这些步骤，以在其他的文档窗口中重复进行相同的操作。
重复步骤
如果仅仅希望重复您前面进行的一步操作，可以打开“Edit”（编辑）菜单，选择“Repeat”（重复）命令。例如，首先输入“微文工作室”5字，通过执行Repeat命令，可以重复输入多个“微文工作室”。
如果希望重复前面进行的一系列步骤，则需要使用历史面板，这时您可以按照如下方法进行操作：
1. 显示历史面板，上面会显示您已经进行过的操作列表。
2. 选中要重复进行的一系列操作步骤。可以选中连续的多个操作步骤组成步骤序列，也可以选中多个不连续的操作步骤组成步骤序列。被选中的步骤序列会高亮显示，如图 3‑16所示。
图 3‑16 选中要重复操作的步骤序列
3. 单击“Replay”（重播）按钮，即可重复进行选中的步骤序列。同时历史面板上也会记录这一重复步骤操作本身。
注意：
在文档窗口中，一些鼠标的移动操作，例如单击或拖动选中的对象的操作，不能被重复进行，也不能被存储为命令。要避免出现这种情况，可以使用箭头键来替代鼠标完成在文档中设置插入点的操作。
某些其他类型的步骤也不能被重复，例如在页面中将某个页面元素拖动到另外的位置的操作。当您进行这类操作时，在历史面板中会出现一个带有红色小叉的菜单命令图标。
在其他对象上应用步骤
使用历史面板，也可以在文档中的其他对象上应用操作步骤，方法如下：
1. 选中该对象。
2. 在历史面板中选中要重复进行的步骤。
3. 单击“Replay”（重播）按钮。
注意：如果选择了多个对象，然后利用历史面板来重复步骤操作，则这些对象被作为单个的选中区域来对待，而不会分别对这些对象应用步骤。例如，您无法选中多幅图像，然后利用重复步骤的方式重新设置每个图像的大小。
在文档间拷贝和粘贴步骤
不仅可以在当前文档中重复进行某个步骤序列，也可以在其他文档中应用当前文档中的步骤序列。您可以按照如下方法进行操作：
1. 在历史面板上，选中希望组合成步骤序列的操作项。
2. 单击历史面板上的“复制步骤”按钮，这时选中的步骤就被复制到剪贴板上。
3. 打开要应用步骤序列的文档，将插入点设置到需要的位置，或是选中需要应用步骤的对象。
4. 打开“Edit”（编辑）菜单，选择“Paste”（粘贴）命令，即可在目标文档中应用相应的步骤序列。
注意：
这时在目标文档的历史面板中只会记录一个粘贴的操作步骤。
要注意在其他文档中应用步骤序列的过程中包括复制和粘贴操作，因此，如果步骤序列中包含复制操作或粘贴操作时，不能在文档间应用这些步骤序列。否则会导致不可预料的结果。
如果您将位于剪贴板中的步骤序列粘贴到HTML源代码检视器中，它会以JavaScript代码的形式出现，利用该特性，您可以学习这些步骤到底应该如何用JavaScript代码来表示。
从历史步骤中创建新命令
历史面板中的步骤列表是很不安全的，在关闭文档后，历史面板中的内容就会消失。如果希望在将来仍然可以重复进行某个步骤序列，可以将该步骤序列制作成新的命令，该命令会出现在Dreamweaver的“Commands”（命令）菜单中。
创建命令
要创建新命令，您可以按照如下步骤进行操作：
1. 从历史面板中，选中要组合成步骤序列的操作项。
2. 单击“存储为命令”按钮，这时会出现如图 3‑17所示的对话框，提示您输入命令的名称。
图 3‑17 输入命令名称
3. 输入一个明白易懂的名称，然后单击“OK”按钮，确定操作。
经过上述的操作，新的命令菜单项就会出现在Dreamweaver的“Commands”（命令）菜单中。下次需要应用该步骤序列时，打开“Commands”（命令）菜单，选择该命令项即可。
注意：
该操作实际上是将步骤序列对应的JavaScript代码存储到Dreamweaver安装目录中的Configuration/Commands文件夹中。
如果希望为该命令指定快捷键，可以在快捷键字母前添加字符“&”。例如，输入“T&ype My Name”则会菜单上显示为“Type My Name”，这样，通过按下Ctrl+C打开“Commands”（命令）菜单，再按下y键，即可启动该命令。
编辑命令列表
如果希望改变命令的名称，或删除命令，可以按照如下方法进行：
1. 打开“Commands”（命令）菜单，选择“Edit Command List”（编辑命令列表）。
2. 这时会出现如图 3‑18所示的对话框，上面显示所有自定义的命令。
图 3‑18 编辑命令列表
3. 要修改某个命令的名称，可以单击该命令项，这时该命令项变为可编辑状态，输入需要的名称，单击该命令项外任意位置，即可实现对命令的名称的修改。
4. 如果希望删除某条命令，可以选中该命令，然后单击“Delete”（删除）按钮。
5. 单击“关闭”按钮，可以关闭该对话框。
录制命令
在Dreamweaver中，允许您录制一组操作过程，将之作为一个命令来保存。这有些像Word中的录制宏特性，激活录制特性后，在文档中进行的操作都会被记录下来，直到关闭录制特性为止。
录制命令操作同我们利用历史面板进行的重复步骤操作不同，具体表现在下面几个方面：
l 录制命令是在文档中正在进行的，而在历史面板中选择步骤序列，实际上选中的是已经操作过的步骤。
l 录制命令时，Dreamweaver会自动防止记录那些不能录制的命令，例如鼠标的移动或对象的选择。
l 在录制命令时，如果切换到其他的文档窗口，Dreamweaver不会录制在其他文档窗口的操作。
l Dreamweaver一次只能录制一个命令，一旦您开始录制新的命令，则原先的命令就会丢失，因此Dreamweaver的录制命令特性适用于那些需要暂时使用的操作过程。所以，如果希望将命令永久保存，可以在录制命令之后，通过历史面板选择这些步骤序列，并将之存储为命令。
录制命令
要录制命令以供临时使用，可以按照如下步骤进行操作：
1. 打开“Commands”（命令）菜单，选择“Start Recording”（开始录制）命令，或是按下Ctrl+Shift+X组合键，这时鼠标指针变为一个“录音带”的形状。
2. 进行需要的文档操作，这些操作会被录制下来。
3. 如果希望停止录制，可以打开“Commands”（命令）菜单，选择“Stop Recording”（停止录制）按钮，或是再次按下Ctrl+Shift+X组合键。
使用被录制的命令
命令被录制好后，可以按照如下的方法在文档中使用：
打开“Commands”（命令）菜单，选择“Play Recorded Command”（播放录制的命令），即可使用被录制的命令。
也可以通过按下Ctrl+P组合键来应用被录制的命令。
将录制的命令存储为永久命令
被录制的命令只适合暂时使用，如果再次录制新命令，原先的命令就会被覆盖。如果希望永久保存录制的命令，可以按照如下方法进行操作：
1. 在文档中使用一次录制的命令，这时历史面板上会出现一个操作项，标以“Run Command”（运行命令）。
2. 在历史面板中，选中该“Run Command”（运行命令）操作项。
3. 单击面板右下角磁盘形象的按钮，然后在出现的对话框中输入命令名称。
4. 按下“OK”按钮，即可将该录制的命令保存。这时该命令就会出现在“Commands”（命令）菜单中。
编辑网页的头部内容
我们已经知道，一个HTML文件，通常由包括在<head>和</head>标记间的头部，和包括在<body>和</body>标记的正文两个部分组成。文档的标题信息就存储在HTML的头部位置，在浏览页面时，它会显示在浏览器的标题栏，当将页面放入浏览器的“收藏夹”时，文档的标题又会作为收藏夹中项目的名称。
除了标题之外，头部还可以包括很多非常重要的信息，例如文档的类型、语言的解码方式、JavaScript和VBScript的函数和变量，以及针对每个引擎的关键字和内容指示符等。
一般来说，不需要输入全部的头部内容。但是最好为文档设置标题和解码方式信息，养成良好的创作习惯。
要往文档的头部添加信息，您可以按照如下方法进行操作：
1. 如果在文档窗口中，没有显示头部内容，可以打开“View”（查看）菜单，选择“Head Content”（头部内容）命令，显示文档的头部内容。
2. 在对象面板上，打开其上的下拉菜单，选择“Head”（头部），显示同HTML头部相关的对象按钮，如图 3‑19所示。
图 3‑19 对象面板上的头部元素按钮
3. 要插入某种元素，可以单击相应的按钮，这时会出现一个对话框。
4. 输入需要的信息，确定操作，即可往文档的头部添加数据。
5. 如果希望编辑头部信息，可以在文档窗口的头部窗格单击选中相应的标记，然后在属性面板上修改。
注意：除了使用对象面板之外，也可以通过打开“Insert”（插入）菜单，选择“Head”（头部），再选择相应的命令来实现头部元素的插入。为了说明简单，我们后面将只使用对象面板来插入头部元素。
认识头部元素
元数据（meta data）是HTML头部的主要组成部分主要用于表示一个文档的页面信息，这些信息可以被计算机识别，用于某些特定的场合。在HTML中，元数据的表现方式是多种多样的。
除了元数据之外，在HTML头部还可以包含其他类型的标记，例如<base>标记和<link>标记等，我们都在后面进行介绍。
<meta>标记
<meta>标记是实现元数据的主要标记，它能够提供文档的关键字、作者、描述等多种信息，在HTML的头部可以包括任意数量的<META>标记。
<meta>标记是非封闭类型的标记，它包括如下几种属性：
name = string
name属性用于定义一个元数据属性的名称，其中string是用于表示名称的字符串。
content = cdata
content属性用于定义元数据的属性值，其中cdata表示相关数据。
scheme = cdata
scheme属性说明用于解释元数据属性值的机制，其中cdata表示相关数据。
http-equiv = string
http-equiv属性可以用于替代name属性，HTTP服务器可以使用该属性来从HTTP响应头部收集信息，其中string是用于表示名称的字符串。
charset = encoding
charset属性用于定义文档的字符解码方式，其中encoding表示解码方式。
在HTML规范中，并没有硬性指定的属性标准，因此用户可以自行定义元数据。
例如，可以采用如下语句定义作者信息。
<meta name = "author" content = "周明涛">
有些搜索引擎使用关键字（keywords）和描述（description）来进行搜索。这时，在文档中可以提供如下语句：
<meta name = "keywords" content = "周明涛, 微文工作室, Zhou Mingtao, Microtext">
<meta name = "description" content = "微文工作室周明涛制作的主页">
<base>标记
<base>标记定义了文档的基础URL地址，在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的。一篇文档中的<base>标记不能多于一个，必须放于头部，并且应该在任何包含URL地址的语句之前。
<base>包含如下的属性：
href = url
href属性指定了文档的基础URL地址。该属性在<base>标记中是必须存在的。
例如，如果希望将文档的基础URL定义为“http://www.microsoft.com”，则可以使用如下语句：
<base href = "http://www.microsoft.com">
当定义了基础URL地址之后，文档中所有引用的URL地址都从该基础URL地址开始，例如，对于上面的语句，如果文档中一个超级链接指向china/document.html，则它实际上指向的是如下URL地址：
http://www.microsoft.com/china/document.html
target = frameset
target属性同框架一起使用，它定义了当文档中的链接被点击后，哪一个框架集中展开页面。如果文档中超级链接没有明确指定展开页面的目标框架集，则就使用这里定义的地址代替。
其中frameset可以被设置如下的值，请参看表 3‑2。
表 3‑2 target的属性值
|
属性值 |
含义 |
|
_blank |
表明在新窗口中展开链接指向的页面 |
|
_self |
在当前文档的框架集中展开页面 |
|
_parent |
在当前文档的父级框架集中展开页面 |
|
_top |
在链接所在的完整窗口中展开页面 |
<link>标记
<link>标记定义了文档之间的包含。在HTML的头部可以包含任意数量的<link>标记。有些浏览器并不能很好处理link属性，因此不建议使用它。
<link>标记带有很多属性，下面是一些常用的属性：
href = url
href属性指向链接资源所在的URL，其中url是链接的地址。
title = string
title属性用于描述该链接关系。其中string是描述关系的字符串。
rel = linktype
rel属性定义了文档和所链接资源的链接关系，其中，linktype表明链接类型，可能的值包括Alternate，Stylesheet，Start，Next，Prev，Contents，Index，Glossary，Copyright，Chapter，Section，Subsection，Appendix，Help，和Bookmark等。如果希望指定不止一个链接关系，可以在这些值之间用空格隔开。
rev = linktype
rev属性定义了文档和所链接资源之间的反向关系。其中linktype表明链接类型，其可能的取值同rel属性相同。
插入元数据
利用Dreamweaver可以很方便地插入任意类型的元数据，您可以按照如下方法进行操作：
1. 单击对象面板上的下拉列表，选择“Head”（头部）。
2. 单击对象面板上的“Insert Meta”（插入元数据）按钮。
3. 这时会出现如图 3‑20所示的对话框，提示您输入元数据。
图 3‑20 插入元数据
l Attribute（属性） 在该下拉列表中，可以选择两种类型的属性：name和http-equiv。
l Value（值） 在该文本框中，可以输入属性值。
l Content（内容） 在该文本框中，可以输入属性内容。
4. 设置完毕，按下“OK”按钮，确定操作。
图 3‑20所示的情形实际上输入的是如下的代码：
<meta name="author" content="周明涛">
在这里也可以指定文档的解码方式，例如，要将文档的解码方式设置为中文简体，可以在“Attribute”（属性）下拉列表中选择“http-equiv”，在“Value”文本框中输入“Content-Type”，在“Content”（内容）文本框中输入“text/html; charset=gb2312”即可。这实际上是输入了如下的代码：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
如果希望编辑插入的元数据，可以首先显示文档的头部窗格，单击元数据标记，即可在属性面板上进行编辑，如图 3‑21所示。
图 3‑21 选中元数据时的属性面板
插入关键字
关键字信息仍然属于元数据的范畴，但是由于它经常被使用，Dreamweaver额外定义了相应的插入命令，允许直接插入关键字属性。
您可以按照如下方法操作：
1. 单击对象面板上的“Insert Keywords”（插入关键字）按钮。
2. 这时会出现如图 3‑22所示的对话框，允许您输入关键字信息。
图 3‑22 插入关键字
3. 输入相应的关键字信息，多个关键字之间可以使用逗号隔开。
4. 按下“OK”按钮，确定操作。
图 3‑22显示的操作，实际上等同于输入了如下语句：
<meta name="keywords" content="周明涛,微文工作室">
要编辑关键字信息，可以从文档的头部窗格中，选中关键字标记，然后在属性面板上修改，如图 3‑23所示。
图 3‑23 编辑关键字时的属性面板
插入描述信息
描述信息也属于元数据的范畴，Dreamweaver单独提供了插入描述信息的方法，您可以按照如下步骤进行操作：
1. 单击对象面板上的“Insert Description”（插入描述）按钮。
2. 这时会出现一个对话框，提示您输入描述信息，该对话框同图 3‑22所示的对话框类似。
3. 输入描述信息。
4. 按下“OK”按钮确定操作。
该操作相当于输入如下的语句，其中content的值就是这里输入的描述信息。
<meta name="description" content="微文工作室周明涛的主页">
要编辑描述信息，可以从文档的头部窗格中，选中描述标记，然后在属性面板上修改。
定义自动刷新
您可以为网页设置自动刷新特性，让它在被浏览器显示时，隔一段指定的时间，然后跳转到某个页面或是重新刷新自身。
您可以按照如下步骤进行操作：
1. 单击对象面板上的“Insert Refresh”（插入刷新）按钮，这时会出现如图 3‑24所示的对话框。
图 3‑24 定义刷新特性
2. 在“Delay...seconds”（隔...秒）文本框中，可以输入网页刷新的间隔时间。
3. 在“Action”（动作）区域可以设置刷新的动作，您可以指定在指定的时间间隔到达后跳转到某个页面上，或是仅仅重新在浏览器中刷新自身。
4. 设置完毕，按下“OK”按钮，确定操作。
自动刷新特性目前已经被越来越多的网页所使用。例如，可以首先在一个页面上显示欢迎信息，经过一段时间，自动跳转到指定的网页上。另外一种使用自动刷新特性的原因是网站地址的迁移，这时可以首先在原先网址的主页上显示新的网址信息，以通知访问旧网址的用户，然后经过一段时间，自动跳转到新地址上。
图 3‑24的设置实际上添加了如下的语句，我们可以看到，它仍然是元数据的一种表现形式。
<meta http-equiv="refresh" content="10;URL=www.microsoft.com">
要编辑自动刷新设置，可以从文档的头部窗格中，选中刷新标记，然后在属性面板上修改，如图 3‑25所示。
注意：需要展开属性面板看到定义延迟时间的文本框。
图 3‑25 设置自动刷新时的属性面板
设置基础URL地址
如果希望为文档中的URL设置基础URL地址，可以按照如下方法进行操作：
1. 单击对象面板上的“Insert Base”（插入基础）按钮，这时会出现如图 3‑26所示的对话框。
图 3‑26 插入基础URL地址
2. 在“Href”文本框中输入基础URL地址，也可以单击“Browse”按钮，选择基础地址路径，这实际上设置的是<base>标记的href属性。
3. 在“Target”下拉列表框中，可以选择链接文档在哪个框架集中被打开，这实际上设置的是<base>标记的target属性值。
4. 设置完毕，按下“OK”按钮，确定操作。
图 3‑26操作实际上生成的是如下语句：
<base href="www.microsoft.com" target="_parent">
要编辑基础URL地址，可以从文档的头部窗格中，选中基础标记，然后在属性面板上修改，如图 3‑27所示。
图 3‑27 编辑URL基础时的属性面板
设置文档链接
使用<link>标记可以定义文档和引用资源之间的链接关系。在Dreamweaver中，可以通过如下方法实现：
1. 单击对象面板上的“Insert Link”（插入链接）按钮，这时会打开如图 3‑28所示的对话框。
图 3‑28 设置文档链接关系
2. 在“Href”文本框中输入链接资源所在的URL地址，或单击“Browse”按钮从磁盘或网络上选择，这里实际上设置的是<link>标记的href属性。
3. 在“ID”文本框中输入ID值，这实际上设置的是<link>标记的ID属性。
4. 在“Title”文本框中输入对该链接的描述，这里实际上设置的是<link>标记的title属性。
5. 在“Rel”和“Rev”文本框中输入文档同链接资源的链接关系，这里实际上设置的是<link>标记的rel属性和rev属性。
6. 设置完毕，按下“OK”按钮，确定操作。
图 3‑28的设置实际上输入了如下语句：
<link href="file:///C|/WINNT/Web/Tip.htm" id="Tip" rel="Alternate" rev="Alternate" title="Tips">
要编辑链接关系，可以从文档的头部窗格中，选中链接标记，然后在属性面板上修改，如图 3‑29所示。
图 3‑29 编辑链接关系时的属性面板
| 第一章 | 第二章 | 第三章 | 第四章 | 第五章 | ||