Chapter 02 文本、图像和多媒体对象
无论网页内容如何丰富，文本始终都是网页中最基本的元素。由于文本信息量大，输入、编辑方便，文件小，下载速度快，因此文本是网页制作的基础。图像在网页中的作用也是非常重要的，图像、按钮、标记可以使网页更加美观、形象生动，从而使网页的内容更加丰富多彩。
所谓“媒体”是指信息的载体，包括文字、图形、动画、音频和视频等。在Dreamweaver 8中，用户可以方便快捷地向Web站点添加声音和影片媒体，并可以导入、编辑多个媒体文件和对象。
2.1 文本在网页中的应用
文本是网页中最基本的元素。它不仅能准确表达网页制作者的思想，还有信息量大、输入修改方便、生成的文件小、易于浏览下载等特点。因此，对于网站设计者而言，掌握文本的使用非常重要。但是，与图像相比，文本很难激发浏览者的阅读兴趣，所以制作网页时，除了在文本的内容上多下功夫外，排版也非常重要。对于一个专业的网站设计者而言，在文档中灵活运用丰富的字体、多种段落格式以及赏心悦目的文本效果，是必不可少的一项技能。
2.1.1 输入文本
应用Dreamweaver 8编辑网页时，在文档窗口中文本光标默认为显示状态。要添加文本，首先应将光标移到文档窗口中的编辑区域，然后直接输入文本，就像在其他文本编辑器中一样。打开一个文档，在文档中单击鼠标左键，将光标置于其中，然后在光标后面输入文本，如图2-1所示。
图2-1
提 示
除了直接输入文本外，也可将其他文档中的文本复制后，粘贴到当前的文档中。需要注意的是，粘贴文本到Dreamweaver的文档窗口时，该文本不会保持原有的格式，但是会保留原来文本中的段落格式。
2.1.2输入连续的空格
在默认状态下，Dreamweaver只允许网站设计者输入一个空格，要输入连续多个空格，需要进行设置或通过特定的操作来实现。
1．设置首选参数对话框
（1）执行菜单【编辑】→【首选参数】命令，弹出【首选参数】对话框，如图2-2所示。
图2-2
（2）在【首选参数】对话框左侧的【分类】列表中选择【常规】选项，在右侧的【编辑选项】选项组中勾选【允许多个连续的空格】复选框，单击【确定】按钮完成设置。此时，可通过连续按【空格】键在文档编辑区内输入多个空格。
2．直接插入多个连续空格
在Dreamweaver中插入多个连续空格，有以下几种方法。
◎ 选择【插入】控制面板中的【文本】标签，单击【字符】展开式按钮
，选择【不换行空格】按钮
。
◎ 执行菜单【插入】→【HTML】→【特殊字符】→【不换行空格】命令，或按快捷键【Ctrl+Shift+Space】。
◎ 将输入法转换到中文的全角状态下。
2.1.3 设置是否显示不可见元素
在网页的设计视图中，有些元素仅用来标记该元素的位置，在浏览器中是不可见的。例如，脚本图标是用来标记文档正文中JavaScript或VBscript 代码的位置，换行符图标是用来标记每个换行符<br> 的位置等。在设计网页时，为了快速找到不可见元素的位置，常常改变这些元素在设计视图中的可见性。
显示或隐藏不可见元素的具体操作步骤如下。
（1）执行菜单【编辑】→【首选参数】命令，弹出【首选参数】对话框，如图2-3所示。
图2-3
（2）在【首选参数】对话框左侧的【分类】列表中选择【不可见元素】选项，根据需要选择或取消选择右侧的多个复选框，以实现不可见元素的显示或隐藏，单击【确定】按钮完成设置。
最常用的不可见元素是换行符、脚本、命名锚记、层锚记和表单隐藏区域，一般将它们设为可见。
但细心的网页设计者会发现，虽然在【首选参数】对话框中设置某些不可见元素为显示的状态，但在网页的设计视图中却看不见这些不可见元素。为了解决这个问题，还必须执行菜单【查看】→【可视化助理】→【不可见元素】命令。选择【不可见元素】选项后的效果如图2-4所示。
图2-4
提 示
要在网页中添加换行符不能只按【Enter】键，而要按快捷键【Shift+Enter】。
2.1.4 设置页边距
按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。
修改页边距的具体操作步骤如下。
（1）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图2-5所示。
图2-5
提 示
在【首选参数】对话框的【编辑框选项】中不勾选【使用CSS而不是HTML标签】复选框时，【页面属性】对话框提供的界面将发生改变，如图2-6所示。
图2-6
（2）根据需要在对话框的【左边距】、【右边距】、【上边距】、【下边距】、【边距宽度】和【边距高度】选项的数值框中输入相应的数值。这些选项的含义如下。
【左边距】、【右边距】：指定网页内容距离浏览器左、右页边的宽度。
【上边距】、【下边距】：指定网页内容距离浏览器上、下页边的高度。
【边距宽度】：指定网页内容距离Navigator浏览器左、右页边的宽度。
【边距高度】：指定网页内容距离Navigator浏览器上、下页边的高度。
（3）若要浏览器中没有页边距，可将4个页边距选项都设置为“0”。在源代码中，HTML标签“body”共有4项，它们依次定义了【左边界】、【顶部边界】、【边界宽度】和【边界高度】选项。
<body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0”>
在“body”标签中，每个属性之间都有一个半角的空格，而不是连接在一起的，如果连接在一起，文档就会出错。
（4）按快捷键【F12】，在浏览器中查看页边距的设置情况。
2.1.5 设置文本属性
利用文本属性可以方便地修改选中文本的字体、字号、样式、对齐方式等，以获得预期的效果。
执行菜单【窗口】→【属性】命令，弹出【属性】面板，如图2-7所示。
图2-7
【属性】面板中各选项的含义如下。
【格式】选项：设置所选文本的段落样式。例如，使段落应用【标题1】的段落样式。
【样式】选项：设置已定义的或引用的CSS样式为文本的样式。
【粗体】按钮
、【斜体】按钮
：设置文字格式。
【左对齐】按钮
、【居中对齐】按钮
、【右对齐】按钮
、【两端对齐】按钮
：设置段落在网页中的对齐方式。
【字体】选项：设置文本的字体组合。
【大小】选项：设置文本的字级。
【文本颜色】按钮
：设置文本的颜色。
【项目列表】按钮
、【编号列表】按钮
：设置段落的项目符号或编号。
【文本凸出】按钮
、【文本缩进】按钮
：设置段落文本向右突出或向左缩进一定距离。
2.1.6 改变文本的大小
Dreamweaver提供两种改变文本大小的方法，一种是设置文本的默认大小，一种是设置选中文本的大小。
1．设置文本的默认大小
（1）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框。
（2）在【页面属性】对话框左侧的【分类】列表中选择【外观】选项，在右侧的【大小】选项中根据需要选择文本的大小，如图2-8所示，单击【确定】按钮完成设置。
图2-8
2．设置选中文本的大小
为了对不同的文本设定不同的大小，Dreamweaver 8提供了两种改变选中文本大小的方法。
通过【属性】面板设置选中文本的大小
（1）在文档窗口中选中文本。
（2）在【属性】面板中，单击【大小】选项的下拉列表选择相应的值，如图2-9所示。
通过【文本】菜单设置选中文本的大小
（1）在文档窗口中选中文本。
（2）执行菜单【文本】→【大小】命令，在弹出的子菜单中选择相应的数值，如图2-10所示。
图2-9
图2-10
提 示
此命令在【首选参数】对话框中勾选【使用CSS而不是HTML标签】复选框时不可用。在【属性】面板的【大小】选项中选择【无】时，文字的大小按默认设置。
3．文本的相对大小和绝对大小
如果文本在<font>和</font>标签之间，可按相对大小和绝对大小两种方式来设置文本的大小。绝对大小是指应用特定的字体大小，其值从1到7，在默认状态下字级为3。相对大小是相对于默认字级而言的字体大小，若相对于默认字级变大，则在1到7的数字前加“+”号。若相对于默认字级变小，则在1到7的数字前加“-”号。
提 示
在【首选参数】对话框中不勾选【使用CSS而不是HTML标签】复选框时，在【属性】面板中，【大小】选项的下拉列表如图2-11所示。此时，按相对大小来设置文本的大小。
图2-11
2.1.7 改变文本的颜色
丰富的视觉色彩可以吸引用户的注意，网页中的文本不仅可以是黑色，还可以呈现为其他色彩，最多时可达到16777216种颜色。颜色的种类与用户显示器的分辨率和颜色值有关，通常是在216种网页色彩中选择文字的颜色。
在Dreamweaver 8中提供了两种改变文本颜色的方法。
1．设置文本的默认颜色
（1）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框。
（2） 在左侧的【分类】列表中选择【外观】选项，在右侧的【文本颜色】选项中选择具体的文本颜色，如图2-12所示，单击【确定】按钮完成设置。
图2-12
提 示
在【文本颜色】选项中选择文本颜色时，可以在颜色按钮右边的文本框中，直接输入文本颜色的十六进制数值。
2．设置选中文本的颜色
为了对不同的文字设定不相同的颜色，Dreamweaver 8提供了两种改变选中文本颜色的方法。
通过文本颜色按钮设置选中文本的颜色
（1）在文档窗口中选中文本。
（2）单击【属性】面板中的【文本颜色】按钮
选择相应的颜色，如图2-13所示。
图2-13
通过颜色菜单命令设置选中文本的颜色
（1）在文档窗口中选中文本。
（2）执行菜单【文本】→【颜色】命令，弹出【颜色】对话框，如图2-14所示。选择相应的颜色，单击【确定】按钮完成设置。
图2-14
2.1.8 改变文本的字体
Dreamweaver 8提供了两种改变文本字体的方法，一种是设置文本的默认字体，一种是设置选中文本的字体。
1．设置文本的默认字体
（1） 执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框。
（2）在左侧的【分类】列表中选择【外观】选项，在右侧选择【页面字体】选项，弹出其下拉列表，如果列表中有合适的字体组合，可直接单击选择该字体组合，如图2-15所示。否则，需选择【编辑字体列表】选项，在弹出的【编辑字体列表】对话框中自定义字体组合。
图2-15
（3） 单击按钮
，在【可用字体】列表中选择需要的字体，然后单击按钮
，将其添加到【字体列表】中，如图2-16所示。在【可用字体】列表中再选中另一种字体，单击按钮
，在【字体列表】中建立字体组合，单击【确定】按钮完成设置。
图2-16
（4） 重新在【页面属性】对话框的【页面字体】选项下拉列表中选择刚建立的字体组合作为文本的默认字体。
2．设置选中文本的字体
为了将不同的文字设定为不相同的字体，Dreamweaver提供了两种改变选中文本字体的方法。
通过字体选项设置选中文本的字体
（1）在文档窗口中选中文本。
（2）选择【属性】面板，在【字体】选项的下拉列表中选择相应的字体，如图2-17所示。
图2-17
通过字体菜单命令设置选中文本的字体
（1）在文档窗口中选中文本。
（2）执行菜单【文本】→【字体】命令，在弹出的子菜单中选择相应的字体，如图2-18所示。
图2-18
2.1.9 设置文本样式
文本样式是指字符的外观显示方式，例如加粗文本、倾斜文本和文本加下划线等。
1．通过样式菜单命令设置文本样式
（1）在文档窗口中选中文本。
（2）执行菜单【文本】→【样式】命令，在弹出的子菜单中选择相应的样式，如图2-19所示。
图2-19
（3）选择需要的选项后，即可为选中的文本设置相应的字符格式，被选中的菜单命令左侧会带有选中标记
。
提 示
如果希望取消设置的字符格式，可以再次打开子菜单，取消对该菜单命令的选择。
2．设置不同的文本样式
在菜单【文本】→【样式】命令的子菜单中，可以设置如下的文本样式。
选择【粗体】选项，可以将选中的文本加粗显示。该操作实际上是在选中的文本两端添加了<b>和</b>标记。例如，相应文本的加粗显示代码为“<b>加粗文本</b>”，其显示效果如图2-20所示。
图2-20
选择【斜体】选项，可以将选中的文本显示为倾斜格式。该操作实际上是在选中的文本两端添加了<i>和</i>标记。例如，相应文本的倾斜显示代码为“<i>倾斜文本</i>”，其显示效果如图2-21所示。
图2-21
选择【下划线】选项，可以在选中的文本下方显示下划线。该操作实际上是在选中的文本两端添加了<u>和</u>标记。例如，相应文本的下划线显示代码为“<u>下划线文本</u>”，其显示效果如图2-22所示。
图2-22
选择【删除线】选项，则在选中文本的中部横贯一条线，表明文字被删除。该操作实际上是在选中的文本两端添加了<s>和</s>标记。例如，相应文本的删除线显示代码为“<s>删除的文本</s>”，其显示效果如图2-23所示。
图2-23
提 示
使用<del>和</del>标记也可以实现文本的删除效果，但是有些浏览器不支持它，所以应该尽量使用<s>和</s>标记。也可以用<strike>和</strike> 标记来代替<s>和</s>标记，它们的含义是一样的。
3．通过属性面板快速设置文本样式
单击【属性】面板中的【粗体】按钮
和【斜体】按钮
可快速设置文本的样式，如图2-24所示。如果要取消粗体或斜体样式，再次单击相应的按钮。
图2-24
4．使用快捷键快速设置文本样式
另外一种快速设置文本样式的方法是使用快捷键。按快捷键【Ctrl+B】，可以将选中的文本加粗。按快捷键【Ctrl+I】，可以将选中的文本倾斜。
提 示
再次按相应的快捷键，则可取消文本样式。
2.1.10 为段落设定样式
段落是指描述一个主题并且格式统一的一段文字。在文档窗口中，输入一段文字后按【Enter】键，这段文字就显示在<P>……</P>标签中。
1．应用段落格式
通过格式选项应用段落格式
（1）将插入点放在段落中，或者选择段落中的文本。
（2）选择【属性】面板，在【格式】选项的下拉列表中选择相应的格式，如图2-25所示。
图2-25
通过段落格式菜单命令应用段落格式
（1）将插入点放在段落中，或者选择段落中的文本。
（2）执行菜单【文本】→【段落格式】命令，弹出其子菜单，如图2-26所示，选择相应的段落格式。
图2-26
2．指定预格式
预格式标记是<pre>和</pre>。预先格式化是指用户预先对<Pre>和</Pre>的文字进行格式化，以便在浏览器中按真正的格式显示其中的文本。例如，用户在段落中插入多个空格，但浏览器却按一个空格处理。为这段文字指定预格式后，就会按用户的输入显示多个空格。
通过格式选项指定预格式
（1）将插入点放在段落中，或者选择段落中的文本。
（2）选择【属性】面板，在【格式】选项的下拉列表中选择【预先格式化的】选项，如图2-27所示。
图2-27
通过段落格式菜单指定预格式
（1）将插入点放在段落中，或者选择段落中的文本。
（2）执行菜单【文本】→【段落格式】命令，弹出其子菜单，如图2-28所示，选择【已编排格式】菜单命令。
图2-28
通过已编排格式按钮指定预格式
单击【插入】→【文本】面板中的【已编排格式】按钮
，指定预格式。
提 示
若想去除文字的格式，可按上述方法，将【格式】选项设为【无】。
2.1.11 改变文本的对齐方式
文本的对齐方式是指文字相对于文档窗口或浏览器窗口在水平位置的对齐方式。对齐方式有以下四种。
【左对齐】按钮
：使文本在浏览器窗口中左对齐。
【居中对齐】按钮
：使文本在浏览器窗口中居中对齐。
【右对齐】按钮
：使文本在浏览器窗口中右对齐。
【两端对齐】按钮
：使文本在浏览器窗口中两端对齐。
通过对齐按钮改变文本的对齐方式
（1）将插入点放在文本中，或者选择段落。
（2）在【属性】面板中单击相应的对齐按钮，如图2-29所示。
图2-29
对段落文本的对齐操作，实际上是对<p>标记的align属性设置。align属性值有三种选择，其中Ieft表示左对齐，center表示居中对齐，而right表示右对齐。例如，下面的三条语句分别设置了段落的左对齐、居中对齐和右对齐方式，效果如图2-30所示。
图2-30
<p align="left">左对齐</p>
<p align="center">居中对齐</p>
<p align="right">左对齐</p>
通过对齐菜单改变文本的对齐方式
（1）将插入点放在文本中，或者选择段落。
（2）执行菜单【文本】→【对齐】命令，弹出其子菜单，如图2-31所示，选择相应的对齐方式。
图2-31
2.1.12 创建项目符号和编号列表
项目符号和编号用以表示不同段落的文本之间的关系，因此，在文本上设置编号或项目符号并进行适当的缩进，可以直观地表示文本间的逻辑关系。
1．设置项目符号或编号
通过项目列表或编号列表按钮设置项目符号或编号
（1）选择段落。
（2）在【属性】面板中，单击【项目列表】按钮
或【编号列表】按钮
，为文本添加项目符号或编号。设置了项目符号和编号后的段落效果如图2-32所示。
图2-32
通过列表菜单设置项目符号或编号
（1） 选择段落。
（2）执行菜单【文本】→【列表】命令，弹出其子菜单，如图2-33所示，执行【项目列表】或【编号列表】命令。
图2-33
2．修改项目符号或编号
（1）将插入点放在设置项目符号或编号的文本中。
（2）通过以下几种方法启动【列表属性】对话框。
◎ 单击【属性】面板中的【列表项目】按钮
。
◎ 执行菜单【文本】→【列表】→【属性】命令。
在对话框中，先选择【列表类型】选项，确认是要修改项目符号还是编号，如图2-34所示，然后在【样式】选项中选择相应的列表或编号的样式，如图2-35所示，单击【确定】按钮完成设置。
图2-34
图2-35
在HTML中，有三种类型的项目符号，它们分别是矩形、环形和球形，如图2-36所示。
图2-36
HTML中采用以下的语法结构来描述无序列表：
<ul>
<li>第一列表项</li>
<li>第二列表项</li>
⋯⋯
</ul>
通过设置<ul>标记的type属性，可以决定无序项目列表的项目符号类型。下面是三种属性值的含义：
type="square" 使用矩形的项目符号
type="circle" 使用环形的项目符号
type= "disc" 使用球形的项目符号
如果使用矩形项目符号，可以使用以下代码：
<ul type="square">
<li>第一小组</li>
<li>第二小组</li>
<li>第三小组</li>
</ul>
<Ii>标记同样带有type属性，如果为列表中的某个<Ii>标记设置type属性，会从该<Ii>标记所在的行开始使用新的项目符号。
3．设置文本缩进格式
设置文本缩进格式有以下几种方法。
◎ 在【属性】面板中单击【文本缩进】按钮
或【文本凸出】按钮
，使段落向右移动或向左移动。
◎ 执行菜单【文本】→【缩进】或【文本】→【凸出】命令，使段落向右移动或向左移动。
◎ 按快捷键【Ctrl+AIt+]】或【Ctrl+AIt+ [】，使段落向右移动或向左移动。
2.1.13 插入日期及特殊字符
Dreamweaver提供了无法从键盘输入的特殊符号和日期的功能。
1．插入日期
（1）在文档窗口中，将插入点放置在想要插入对象的位置。
（2）通过以下几种方法启动【插入日期】对话框，如图2-37所示。
图2-37
◎ 选择【插入】→【常用】面板，单击【日期】工具按钮
。
◎ 执行菜单【插入】→【日期】命令。
对话框中包含【星期格式】、【日期格式】、【时间格式】、【储存时自动更新】四个选项。前三个选项用于设置星期、日期和时间的显示格式，后一个选项表示是否按系统当前时间显示日期和时间，若选择此复选框，则显示当前的日期和时间，否则仅按创建网页时的设置显示。
（3）选择相应的日期和时间的格式，单击【确定】按钮完成设置。
提 示
如果在网页中插入系统的日期和时间，当用户在不同时间浏览该网页时，总是显示当前的日期和时间。
2．插入特殊字符
在网页中插入特殊字符，有以下几种方法。
单击【字符】展开式工具按钮
选择【插入】→【文本】面板，单击【字符】展开式工具按钮
，弹出12个特殊字符按钮，如图2-38所示。在其中选择需要的特殊字符的工具按钮，即可插入特殊字符。
图2-38
【换行符】按钮
：用于在文档中强行换行。
【不换行空格】按钮
：用于连续空格的输入。
【其他字符】按钮
：使用此按钮，可在弹出的【插入其他字符】对话框中单击需要的字符，该字符的代码就会出现在【插入】选项的文本框中，也可以直接在该文本框中输入字符代码，单击【确定】按钮，即可将字符插入到文档中，如图2-39所示。
图2-39
执行菜单【插入】→【HTML】→【特殊字符】命令
执行菜单【插入】→【HTML】→【特殊字符】命令，在弹出的子菜单中选择需要的特殊字符，如图2-40所示。
图2-40
2.1.14 插入换行符
为段落添加换行符有以下几种方法。
◎ 选择【插入】→【文本】面板，单击【字符】展开式工具按钮
，选择【换行符】按钮
，如图2-41所示。
图2-41
◎ 按快捷键【Shift+Enter】。
◎ 执行菜单【插入】→【HTML】→【特殊字符】→【换行符】命令。
在文档中插入换行符的操作步骤如下。
（1）按快捷键【Ctrl+O】，打开一个网页文件。输入一段文字，如图2-42所示。
图2-42
（2）按快捷键【Shift+Enter】，光标换到另一个段落，如图2-43所示。按快捷键【Shift+Ctrl+空格】，输入空格，输入文字，如图2-44所示。
图2-43
图2-44
2.2 标尺和网格
虽然Dreamweaver提供了所见即所得的编辑器，但是通过视觉来判断网页元素的位置并不准确。要想精确地定位网页元素，就必须依靠Dreamweaver提供的定位工具。
2.2.1 标尺
标尺显示在文档窗口的页面上方和左侧，用以标识网页元素的位置。标尺的单位分为像素、英尺和厘米。
1．在文档窗口中显示标尺
执行菜单【查看】→【标尺】→【显示】命令，此时标尺处于显示的状态，如图2-45所示。
图2-45
2．改变标尺的计量单位
执行菜单【查看】→【标尺】命令，在其子菜单中选择需要的计量单位，如图2-46所示。
图2-46
3．改变坐标原点
用鼠标单击文档窗口左上方的标尺交叉点，鼠标的光标变为十字形，按住鼠标左键向右下方拖曳鼠标，如图2-47所示。在要设置新的坐标原点的地方松开鼠标左键，坐标原点将随之改变，如图2-48所示。
图2-47
图2-48
4．重置标尺的坐标原点
执行菜单【查看】→【标尺】→【重设原点】命令，将坐标原点还原成（0,0）点，如图2-49所示。
图2-49
提 示
将坐标原点回复到初始位置，还可以用鼠标双击文档窗口左上方的标尺交叉点。
2.2.2 网格
使用网格可以更加方便地定位网页元素，在网页布局时网格也具有至关重要的作用。
1．显示和隐藏网格
执行菜单【查看】→【网格】→【显示网格】命令，使网格处于显示的状态，如图2-50所示。
图2-50
2．设置网页元素与网格对齐
执行菜单【查看】→【网格】→【靠齐到网格】命令，此时，无论网格是否可见，都可以让网页元素自动与网格对齐。
3．修改网格的疏密
执行菜单【查看】→【网格】→【网格设置】命令，弹出【网格设置】对话框，如图2-51所示。在【间隔】选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位，单击【确定】按钮关闭对话框，完成网格线间隔的修改。
图2-51
4．修改网格线的形状和颜色
执行菜单【查看】→【网格】→【网格设置】命令，弹出【网格设置】对话框，如图2-52所示。在对话框中，先单击【颜色】按钮并从颜色拾取器中选择一种颜色，或者在文本框中输入一个十六进制的数字，然后单击【显示】选项组中的【线】或【点】单选项，最后单击【确定】按钮，完成网格线颜色和线型的修改。
图2-52
2.3 图像在网页中的应用
发布网站的目的就是要让更多的浏览者浏览设计的站点，为了吸引浏览者的注意，网页除了包含文字外，还包含着各种赏心悦目的图像。因此，对于网站设计者而言，掌握图像的使用技巧是非常必要的。
2.3.1 网页中的图像格式
Web 页中通常使用的图像文件有JPEG、GIF、PNG三种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。由于要保证浏览者下载网页的速度，因此网站设计者也常使用JPEG和GIF两种压缩格式的图像。
1.GIF文件
GIF文件是在网络中最常见的图像格式，具有如下特点：
◎ 最多可以显示 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像。例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
◎ 使用无损压缩方案，图像在压缩后不会有细节的损失。
◎ 支持透明的背景，可以创建带有透明区域的图像。
◎ 是交织文件格式，在浏览器完成下载图像之前，浏览者即可看到该图像。
◎ 图像格式的通用性好，几乎所有的浏览器都支持此图像格式，并且有许多免费软件支持GIF图像文件的编辑。
2.JPEG文件
JPEG文件是一种“有损耗”压缩的图像格式，具有如下特点：
◎ 具有丰富的色彩，最多可以显示1670万种颜色。
◎ 使用有损压缩方案，图像在压缩后会有细节的损失。
◎ JPEG格式的图像文件比GIF格式的图像文件小，下载速度更快。
◎ 图像边缘的细节损失严重，所以不适合色彩对比鲜明的图像或文本图像。
3.PNG文件
PNG 文件是专门为网络而准备的图像格式，具有如下特点：
◎ 使用新型的无损压缩方案，图像在压缩后不会有细节的损失。
◎ 具有丰富的色彩，最多可以显示1670万种颜色。
◎ 图像格式的通用性差。IE4.0或更高版本和 Netscape4.04或更高版本的浏览器都只能部分支持PNG 图像的显示。因此，只有在为特定的目标用户进行设计时，才使用PNG 格式的图像。
2.3.2 插入图像
要在Dreamweaver 8文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示。因此，在建立站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需要的图像拷贝到其中。
在网页中插入图像的具体操作步骤如下。
（1）在文档窗口中，将插入点放置在要插入图像的位置。
（2）通过以下几种方法启用【图像】命令，弹出【选择图像源文件】对话框，如图2-53所示。
图2-53
◎ 选择【插入】→【常用】面板，单击【图像】展开式工具按钮
上的黑色三角形，在下拉菜单中选择【图像】选项。
◎ 执行菜单【插入】→【图像】命令。
在对话框中，选择图像文件，单击【确定】按钮完成设置。
2.3.3 设置图像属性
插入图像后，在【属性】面板中显示该图像的属性，如图2-54所示。下面介绍各选项的含义。
图2-54
【宽】和【高】选项：以像素为单位指定图像的宽度和高度。这样做虽然可缩放图像的显示大小，但不会缩短下载时间，因为浏览器在缩放图像前会下载所有图像数据。
【源文件】选项：指定图像的源文件。
【链接】选项：指定单击图像时要显示的网页文件。
【替换】选项：指定文本，在浏览设置为手动下载图像前，用它来替换图像的显示。在某些浏览器中，当鼠标指针滑过图像时也会显示替代文本。
【编辑】按钮
：启动Fireworks软件，并在其中弹出选定的图像。
【使用Fireworks最优化】按钮
：启动指定的图像编辑器如Fireworks，并在其中弹出选定的图像。
【裁剪】按钮
：修剪图像的大小。
【重新取样】按钮
：对已调整过大小的图像进行重新取样，以提高图片在新的大小和形状下的品质。
【亮度和对比度】按钮
：调整图像的亮度和对比度。
【锐化】按钮
：调整图像的清晰度。
【地图】和【指针热点工具】选项：用于设置图像的热点链接。
【垂直边距】和【水平边距】选项：指定沿图像边缘添加的边距。
【目标】选项：指定链接页面应该在其中载入的框架或窗口。详细参数可见链接一章。
【低解析度源】选项：为了节省浏览者浏览网页的时间，可通过此选项指定在载入主图像之前可快速载入的低品质图像。
【边框】选项：指定图像边框的宽度，默认无边框。
【对齐】选项：指定同一行上的图像和文本的对齐方式。
2.3.4 插入图像占位符
在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver提供的“图像占位符”功能，可满足上述需求。
在网页中插入图像占位符的具体操作步骤如下。
（1）在文档窗口中，将插入点放置在要插入占位符图形的位置。
（2）通过以下几种方法启用【图像占位符】命令，弹出【图像占位符】对话框，效果如图2-55所示。
图2-55
◎ 选择【插入】→【常用】面板，单击【图像】展开式工具按钮
，选择【图像占位符】选项
。
◎ 执行菜单【插入】→【图像对象】→【图像占位符】命令。
在【图像占位符】对话框中，按需要设置图像占位符的大小和颜色，并为图像占位符提供文本标签，单击【确定】按钮，完成设置，效果如图2-56所示。
图2-56
2.3.5 设置网页的背景图像
虽然网页的背景颜色可以更改，但色彩比较单一，很难吸引浏览者。Dreamweaver提供的“背景图像”功能可以帮助网站设计者制作色彩丰富的背景。
在网页中设置背景图像的具体操作步骤如下。
（1）按快捷键【Ctrl+O】，打开一个网页文件，如图2-57所示。
图2-57
（2）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，如图2-58所示。单击【背景图像】选项右侧的【浏览】按钮，打开【选择图像源文件】对话框，如图2-59所示。
图2-58
图2-59
（3）在【查找范围】选项框中选择一个图像文件，如图2-60所示，单击【确定】按钮返回到【页面属性】对话框，如图2-61所示。
图2-60
图2-61
（4）确认选择的背景图像无误后，单击【确定】按钮完成背景图像的设置，效果如图2-62所示。
图2-62
2.3.6 给图片添加文字说明
当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域，如图2-63所示。
图2-63
为了让浏览者在图片不能正常显示时也能了解图片的信息，常为网页的图像设置【替换】属性，将图片的说明文字输入【替换】文本框中，如图2-64所示。当图片不能正常显示时，网页中的效果如图2-65所示。
图2-64
图2-65
2.3.7 制作低分辨率图像
低分辨率图像是相对于高分辨率图像而言。高分辨率图像是指色彩丰富逼真，压缩比较少，浏览时等待时间较长的图像。而低分辨率图像是指色彩较少，压缩比较多，浏览时等待时间较短的图像。为了缩短用户浏览网页时的等待时间，Dreamweaver采取了折中的办法。当用户浏览网页时，先下载分辨率较低的图像，使用户能尽快地了解图的原貌。等下载完低分辨率的图像后，浏览器继续下载高分辨率的图像，此时，浏览者可以选择继续等待下载还是停止下载并跳转到其他页面。
实现上述效果的方法非常简单，只需在网页的设计窗口中选择高分辨率的图像，然后在【属性】面板中，将低分辨率图像的保存路径引入到【低解析度源】选项中即可，如图2-66所示。
图2-66
2.3.8 跟踪图像
在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。Dreamweaver利用“跟踪图像”功能来实现上述网页设计的方式。
设置网页蓝图的具体操作步骤如下。
（1）在图像处理软件中绘制网页的设计蓝图，如图2-67所示。
图2-67
（2）执行菜单【文件】→【新建】命令，新建文档。
（3）执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框，在【分类】选项框中选择【跟踪图像】选项，转换到【跟踪图像】对话框，如图2-68所示。单击【浏览】按钮，在弹出的【选择图像源文件】对话框中找到步骤（1）中设计蓝图的保存路径，如图2-69所示。
图2-68
图2-69
（4）在【页面属性】对话框中调节【透明度】选项的滑块，使图像呈半透明状态，如图2-70所示，单击【确定】按钮完成设置。
图2-70
2.4 调整图文的混排效果
网页中既有文字，又有图像，如何调整同一行文字和图像的摆放位置达到良好的视觉效果，这就涉及图像与文字的相对位置问题。
调整同一行图像与文字相对位置的具体操作步骤如下。
（1）在设计视图中选中图像。
（2）在图像【属性】面板中展开【对齐】选项的下拉列表，选择一种调整图像与文字相对位置的方式。【对齐】选项中提供了9种图像与文字的对齐方式，如图2-71所示。
图2-71
各种对齐方式的含义如下。
【默认值】选项：通常指定基线对齐。但站点访问者的浏览器不同，默认值也会有所不同。
【基线】选项和【底部】选项：将文本（或同一段落中的其他元素）的基线与选定对象的底部对齐。
【顶端】选项：将当前行中最高文本的顶端与图像的顶端对齐。
【居中】选项：将当前行的基线与图像的中部对齐。
【文本上方】选项：将文本行中最高字符的顶端与图像的顶端对齐。
【绝对居中】选项：将当前行中文本的中部与图像的中部对齐。
【绝对底部】选项：将文本行字母的底部与图像的底部对齐。
【左对齐】选项：将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。
【右对齐】选项：将图像放置在右边，文本在图像的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。
2.5 插入分割线
分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割开。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明，便于阅读。
1．创建水平线
启用【水平线】命令，有以下几种方法。
◎ 执行菜单【插入】→【HTML】→【水平线】命令。
◎ 在【插入】→【HTML】面板中，单击【水平线】按钮
。
2．修改水平线
在文档窗口中，选中水平线，执行菜单【窗口】→【属性】命令，弹出【属性】面板，可以根据需要对属性进行修改，如图2-72所示。
图2-72
在【水平线】选项下方的文本框中输入水平线的名称。
在【宽】选项的文本框中输入水平线的宽度值，其设置单位值可以是像素值，也可以是相对页面水平宽度的百分比值。
在【高】选项的文本框中输入水平线的高度值（粗细程度），这里只能是像素值。
在【对齐】选项的下拉列表中，可以选择水平线在水平位置上的对齐方式。可以是“左对齐”、“右对齐”或“居中对齐”，也可以选择“默认”选项使用默认的对齐方式，一般为“居中对齐”。
如果勾选【阴影】复选框，水平线则被设置为阴影效果。
2.6 创建网站相册
相册就是包含许多相片的影集，而网站相册就是包含有许多图像的网页集。网页集的前几个页面是显示每个图像缩略图的导航页，当浏览者单击某个缩略图时，便可弹出存放原图像的网页进行浏览。
在开始创建网站相册之前，将相册的所有图像放置在一个文件夹中（该文件夹不必位于站点中），并确保图像文件名的扩展名为：.Gif、.Jpg、.Jpeg、.Png、.Psd、.Tif 或 ．Tiff。首先，使用Fireworks 来为该文件夹中的每个图像创建一个缩略图和一个大尺寸的图像。然后，应用Dreamweaver创建一个 Web 页，它包含所有缩略图以及指向大图像所在网页的链接（带有无法识别的文件扩展名的图像是不会包含在相册中的）。
创建网站相册的具体操作步骤如下。
（1）建立一个文件夹，将所有图像文件放置在文件夹中。
（2）在 Dreamweaver 中，执行菜单【命令】→【创建网站相册】命令（只有在计算机中装有Fireworks软件时，此命令才为可用），弹出【创建网站相册】对话框，如图2-73所示。
图2-73
对话框中各选项的含义如下。
【相册标题】选项：缩略图所在页面顶部显示的标题。
【副标信息】选项：在标题下部显示的副标题信息。
【其他信息】选项：在标题下部显示的其他信息。
【源图像文件夹】选项：存放网站相册中所有图像的文件夹，此文件夹不一定在站点内。
【目标文件夹】选项：放置所有导出的图像和 HTML 文件。目标文件夹不应该已包含相册，如果已包含相册，那么任何新图像与先前使用的图像同名，则可能会覆盖现有的缩略图和图像文件。
【缩略图大小】选项：选择缩略图的大小。图像将按比例缩放，以创建适合具有指定像素尺寸的方框的缩略图。
【显示文件名称】选项：设置是否在相应的缩略图下显示其原始图像的文件名。
【列】选项：设置显示缩略图的表的列数。
提 示
【缩略图大小】选项、【显示文件名称】选项、【列】选项为指定缩略图图像的显示选项。
【缩略图格式】选项：设置缩略图图像的格式。Dreamweaver提供的模式有以下4种。
GIF 接近网页 128色：创建 GIF 缩略图，这些缩略图使用包含128 色的 Web 适应性调色板。
GIF接近网页256色：创建 GIF 缩略图，这些缩略图使用包含256 色的 Web 适应性调色板。
JPEG - 较高品质：创建品质较高且文件较大的 JPEG 缩略图。
JPEG - 较小文件：创建品质较低且文件较小的 JPEG 缩略图。
【相片格式】选项：对于每个原始图像，将创建一个具有指定格式的大尺寸图像。它可以不同于缩略图格式。它和【小数位数】选项都是设置大尺寸图像显示的选项。
提 示
由于 GlF 和 JPEG 之外的原始文件格式可能无法在所有浏览器中正确显示，所以【创建网站相册】命令不允许将原始图像文件用作大尺寸图像。如果原始图像是 JPEG 文件，则生成的大尺寸图像文件可能比原始文件大（或者其品质比原始文件低）。
【小数位数】选项：设置大尺寸图像的缩放百分比。缩放百分比将应用于所有图像，如果原始图像的大小不一样，那么按同一百分比缩放就不能产生所需的效果。
【为每张相片建立导览页面】选项：为每个源图像创建一个 Web 页，该 Web 页包含标有“后退”、“主页”、“前进”的导航链接，并且缩略图会链接到导航页。如果不选择此选项，缩略图将直接链接到大尺寸图像。
（3）在【创建网站相册】对话框中，设置相册标题、源图像文件夹、目标文件夹，并指定缩略图图像的显示、大尺寸图像的显示，以及是否为每张相片建立导览页面。
（4）单击【确定】按钮创建网站相册的 HTML 和大尺寸图像文件。
提 示
如果在处理开始后单击 Dreamweaver 对话框中的【取消】按钮，创建相册的进程并不会停止，只会防止 Dreamweaver 显示主相册页。
2.7 多媒体对象在网页中的应用
在网页中除了使用文本和图像元素表达信息外，用户还可以向其中插入FIash动画、Java Applet小程序、Activex控件等多媒体，以丰富网页的内容。虽然这些多媒体对象能够使网页更加丰富多彩，吸引更多的浏览者，但是有时必须以牺牲浏览速度和兼容性为代价。所以，一般的网站为了保证浏览者的浏览速度，不会大量运用多媒体元素。
2.7.1 插入Flash按钮
如果用户想在网页中插入一个具有交互效果的按钮，可通过“插入FIash 按钮”功能轻松实现。可以在文档中插入 FIash 按钮，但在插入 FIash 按钮前，必须先保存文档。
插入 FIash 按钮对象的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入 FIash 按钮的位置。
（2）通过以下几种方法启用【FIash按钮】命令，弹出【插入FIash按钮】对话框，如图2-74所示。
图2-74
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【FIash按钮】选项
。
◎ 执行菜单【插入】→【媒体】→【FIash按钮】命令。
对话框中各选项的作用如下。
【样式】选项：列表中提供了多种按钮样式。当用户选择某个样式后，在【范例】效果框中显示此按钮的效果。
【按钮文本】选项：此项参数为可选项。在文本框中输入要在按钮上显示的文本。
【字体】选项：选择按钮上显示文本的字体。
【大小】选项：在数值框中输入按钮上显示文本的大小。
【链接】选项：此项参数为可选项。在文本框中输入该按钮要链接文档的相对或绝对链接路径。
【目标】选项：此项参数为可选项。在下拉列表中指定链接网页的弹出位置。
【背景色】选项：此项参数为可选项。设置 FIash SWF的背景颜色。
【另存为】选项：在文本框中输入新SWF文件的文件名。可使用默认文件名（例如 button1.swf）或键入新文件名。但要注意，如果该文件包含文档相对链接，则用户必须将该文件保存到与当前HTML文档相同的目录中，以保持文档相对链接的有效性。
（3）在对话框中根据需要进行设置。先在【样式】选项中选择按钮的样式，再在【按钮文本】选项中输入按钮上的文字，然后在【链接】选项中选择链接网页，以便浏览者单击此按钮时能浏览该网页，最后在【另存为】选项中输入新SWF文件的文件名，如图2-75所示。
图2-75
（4）单击【应用】或【确定】按钮，将 FIash 按钮插入到文档窗口中。
（5）选中文档窗口中的FIash按钮，在【属性】面板中单击【播放】按钮测试效果，如图2-76所示。
图2-76
2.7.2 插入Flash 文本
FIash 文本是指只包含文本的 FIash 影片。FIash 文本使用户利用自己选择的设计字体创建较小的矢量图形影片。
插入 FIash 文本对象的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入 FIash 文本的位置。
（2）通过以下几种方法启用【FIash文本】命令，弹出【插入 FIash 文本】对话框，如图2-77所示。
图2-77
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【FIash 文本】选项
。
◎ 执行菜单【插入】→【媒体】→【FIash 文本】命令。
对话框中各选项的作用如下。
【字体】选项：设置具有悬停效果的文本的字体。
【大小】选项：在数值框中输入FIash文本的大小。
按钮：设置文本的对齐方式和效果。
【颜色】选项：设置 FIash文本的初始颜色。
【链接】选项：此项参数为可选项。在文本框中输入该FIash文本要链接文档的相对或绝对链接路径。
【目标】选项：此项参数为可选项。在下拉列表中指定链接网页的弹出位置。
【背景色】选项：此项参数为可选项。设置 FIash 文本的背景颜色。
【另存为】选项：在文本框中输入新 SWF 文件的文件名。但要注意，如果该文件包含文档相对链接，则用户必须将该文件保存到与当前网页相同的目录中，以保持文档相对链接的有效性。
（3）在对话框中根据需要进行设置。单击【应用】或【确定】按钮，将 FIash 文本插入到文档窗口中。
（4）选中文档窗口中的FIash 文本，在【属性】面板中单击【播放】按钮测试效果，如图2-78所示。
图2-78
2.7.3 插入Flash 动画
Dreamweaver 提供了使用FIash对象的功能，虽然FIash中使用的文件类型有FIash源文件(.FIa)、FIash SWF文件(.Swf)、FIash 模板文件(.Swt)，但Dreamweaver只支持FIash SWF文件。因为它是FIash (.FIa) 文件的压缩版本，已进行了优化，便于在 Web 上查看。
在网页中插入FIash 动画的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入影片的位置。
（2）通过以下几种方法启用【FIash】命令。
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【FIash】选项
。
◎ 执行菜单【插入】→【媒体】→【FIash】命令。
弹出【选择文件】对话框，选择一个后缀为．Swf的文件，如图2-79所示，单击【确定】按钮完成设置。此时，FIash占位符出现在文档窗口中，如图2-80所示。
图2-79
图2-80
（3）选中文档窗口中的FIash对象，在【属性】面板中单击【播放】按钮
，测试效果。
提 示
当网页中包含两个以上Flash动画时，要预览所有的Flash动画，可以按【Ctrl+Alt+Shift+P】键。
2.7.4 插入Shockwave 影片
Shockwave是Web上Macromedia标准的交互式多媒体电影，是一种压缩格式的文件。在 Macro-media Director 中创建的多媒体文件下载速度快，而且可以在大多数浏览器中进行播放。
在网页中插入Shockwave影片的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入Shockwave影片的位置。
（2）通过以下几种方法启用【Shockwave】命令。
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【Shockwave】选项
。
◎ 执行菜单【插入】→【媒体】→【Shockwave】命令。
弹出【选择文件】对话框，如图2-81所示，选择一个影片文件，单击【确定】按钮完成设置。此时，Shockwave影片的占位符出现在文档窗口中，如图2-82所示。
图2-81
图2-82
（3）选中文档窗口中的Shockwave影片，在【属性】面板中修改【宽】和【高】选项的值，设置影片的宽度和高度，单击【播放】按钮
，测试效果。
2.7.5 插入Applet程序
Applet 是用Java编程语言开发的可嵌入Web页中的小型应用程序。Dreamweaver提供了将Java Applet 插入到HTML文档中的功能。
在网页中插入 Java Applet程序的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入Applet程序的位置。
（2）通过以下几种方法启用【Applet】命令。
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【APPLET】选项
。
◎ 执行菜单【插入】→【媒体】→【Applet】命令。
弹出【选择文件】对话框，选择一个Java Applet程序文件，单击【确定】按钮完成设置。
2.7.6 插入ActiveX控件
ActiveX 控件，也称OLE控件。它是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。ActiveX 控件只在Windows系统上的Internet Explorer中运行。Dreamweaver中的ActiveX对象可为浏览者浏览器中的 ActiveX 控件提供属性和参数。
在网页中插入ActiveX 控件的具体操作步骤如下。
（1）在文档窗口的【设计】视图中，将插入点放置在想要插入ActiveX 控件的位置。
（2）通过以下几种方法启用【ActiveX】命令，插入ActiveX 控件。
◎ 在【插入】→【常用】面板中，单击【媒体】展开式工具按钮
，选择【ActiveX】选项
。
◎ 执行菜单【插入】→【媒体】→【ActiveX】命令。
（3）选中文档窗口中的ActiveX 控件，在【属性】面板中，单击【播放】按钮
测试效果。
2.8 编辑网页中的文本
案例效果：Ch02\效果\编辑文本\about.htm。
制作要点：熟练使用编辑文本的各种方法。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\编辑文本\about.htm”文件，如图2-83所示。选中需要的文字，效果如图2-84所示。
图2-83
图2-84
02 执行菜单【修改】→【页面属性】命令，弹出【页面属性】对话框。选择【分类】选项框中的【外观】选项，在【大小】选项的下拉列表中选择“12”，如图2-85所示。单击【确定】按钮，完成设置。
图2-85
03 选择标题文字“关于我们”，在【属性】面板【大小】选项的下拉列表中选择“14”，将【文本颜色】选项设为“深红色（#990000）”，如图2-86所示，标题文字效果如图2-87所示。
图2-86
图2-87
04 按快捷键【F12】保存并预览网页，效果如图2-88所示。
图2-88
2.9 创建项目符号
案例效果：Ch02\效果\项目符号\index.htm
制作要点：通过实例为内容添加项目符号。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\项目符号\index.htm”文件，如图2-89所示。
图2-89
02 将鼠标光标插入到文字“[建议]西太湖生态修复”所在的单元格中，按住【Shift】键，同时单击文字“[咨询]关于驾驶证”所在的单元格，将第1列的单元格全部选中，如图2-90所示。
图2-90
03 在【属性】面板中，单击【项目列表】按钮
，为单元格添加项目符号，效果如图2-91所示。
图2-91
04 用相同的方法，为右边表格的标题添加项目符号，保存并预览网页，效果如图2-92所示。
图2-92
2.10 插入版权字符
案例效果：Ch02\效果\插入版权字符\ index.htm。
制作要点：特殊符号在网页中的应用。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入版权字符\index.htm”文件，如图2-93所示。
图2-93
02 将鼠标光标置于网页最下方表格文字之前，如图2-94所示。
图2-94
03 执行菜单【插入】→【HTML】→【特殊字符】→【版权】命令，如图2-95所示。在文字的前面插入“版权符号”，效果如图2-96所示。
图2-95
图2-96
04 选中插入的版权符号，在【属性】面板【字体】选项的下拉列表中，选择字体【Arial】，将【大小】选项设置为“10”，如图2-97所示，效果如图2-98所示。
图2-97
图2-98
05 保存并预览网页，效果如图2-99所示。
图2-99
2.11 插入图像
案例效果：Ch02\效果\插入图像\index.htm。
制作要点：图像在网页中的应用。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入图像\index.htm”文件，如图2-100所示。
图2-100
02 将鼠标光标置入到第1行中，在【插入】→【常用】面板中单击【图像】按钮
，在弹出的【选择图像源文件】对话框中，选择光盘目录下“Ch02\素材\插入图像\ image”文件夹中的“01_01.png”，单击【确定】按钮完成图片的插入，效果如图2-101所示。
图2-101
03 用同样的方式分别将“01_02.p n g、01_03.p n g、01_04.p n g、01_05.p n g、01_06.p n g、01_07.png”文件插入到其他单元格中，效果如图2-102所示。
图2-102
04 保存并预览网页，效果如图2-103所示。
图2-103
2.12 设置图像属性
案例效果：Ch02\效果\设置图像属性\index.htm。
制作要点：图像在网页中的应用。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\设置图像属性\index.htm”文件，如图2-104所示。
图2-104
02 将鼠标光标置入到第2行第2列中，如图2-105所示。在【插入】→【常用】面板中单击【图像】按钮
，在弹出的【选择图像源文件】对话框中，选择光盘目录下“Ch02\素材\设置图像属性\ image”文件夹中的“tu_01.jpg”，单击【确定】按钮完成图片的插入，效果如图2-106所示。
图2-105
图2-106
03 选中新插入的图片，在【属性】面板中，显示该图片的属性，如图2-107所示。
图2-107
04 在【属性】面板中，将【宽】选项的数值“312”更改为“400”，将【高】选项的数值“191”更改为“243”，更改后的图片效果如图2-108所示。
图2-108
05 保存并预览网页，如图2-109所示。
图2-109
2.13 插入图像占位符
案例效果：Ch02\效果\图像占位符\index.htm。
制作要点：通过插入图像占位符来完成网页效果。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\图像占位符\index.htm”文件，如图2-110所示。
图2-110
02 现有网页中缺少一张图片，需要使用图像占位符暂时代替该图片。
03将光标置于最右侧表格的第2行单元格中，执行菜单【插入】→【图像对象】→【图像占位符】命令，弹出【图像占位符】对话框，如图2-111所示。
图2-111
04 在【名称】选项的文本框中输入“image”，将【宽度】选项设置为“112”, 【高度】选项设置为“194”，将【颜色】选项设置为“绿色（#005E1F）”，在【替换文本】选项的文本框中输入“壁纸”。单击【确定】按钮，完成图像占位符的插入，效果如图2-112所示。
图2-112
05 保存并预览网页，效果如图2-113所示。
图2-113
2.14 设置文字的对齐
案例效果：Ch02\效果\文字对齐\ index.htm。
制作要点：设置网页中的文字对齐效果。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\文字对齐\ index.htm”文件，如图2-114所示。
图2-114
02 选中文字“公司介绍”，如图2-115所示。在【属性】面板【水平】选项的下拉列表中选择【居中对齐】，如图2-116所示，效果如图2-117所示。
图2-115
图2-116
图2-117
03 使用相同的方法，将其他文字设置为居中对齐显示，效果如图2-118所示。
图2-118
04 保存并预览网页，效果如图2-119所示。
图2-119
2.15 插入分割线
案例效果：Ch02\效果\插入分割线\index.htm。
制作要点：单击水平线按钮，插入水平线，使页面清晰具有层次感。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入分割线\index.htm”文件，如图2-120所示。
图2-120
02 选中导航表格中的图片，如图2-121所示。单击窗口下方【标签选择器】中最后的<table>标签，如图2-122所示，选中图片所在的表格，此时【属性】面板上的内容为导航表格的属性，如图2-123所示。按键盘【→】键，使光标与导航表格并排显示。
图2-121
图2-122
图2-123
03 在【插入】→【HTML】面板中，单击【水平线】按钮
，插入一条水平线，如图2-124所示。
图2-124
04 保存并预览网页，效果如图2-125所示。
图2-125
2.16 制作相册
案例效果：Ch02\效果\制作相册\index.htm。
制作要点：通过创建网站相册菜单命令，在空白文档中制作电子相册。
提 示
在制作相册之前，首先要确保计算机中安装有Fireworks图像处理软件，Dreamweaver需要用它来处理图片。
01 新建一个用来存放图片的文件夹“image”，再建立一个“HTML”文件夹用来存放生成的htm文件。
02 将要放到相册中的图片保存到“image”文件夹中。
03在Dreamweaver文档中，执行菜单【文件】→【新建】命令，新建一个空白文档，用来存放电子相册。
04执行菜单【命令】→【创建网站相册】命令，弹出【创建网站相册】对话框，将【相册标题】选项设为“相册”, 【副标信息】选项设为“家居装饰”，在【源图像文件夹】选项中设置“image”文件夹的路径，在【目标文件夹】选项中设置“HTML”文件夹的路径，其他选项的设置如图2-126所示。
图2-126
05设置完成后，单击【确定】按钮，系统自动调用Fireworks软件，完成相册主页的创建，如图2-127所示。单击【确定】按钮，弹出相册的页面，如图2-128所示。
图2-127
图2-128
06 保存并预览网页，效果如图2-129所示。
图2-129
07 在预览状态下，单击相册中的缩略图可以放大图像，在图片的上方有一个导航条，通过单击导航条中的链接【前一个】、【首页】和【下一个】，可快速浏览相册中的其他图片，如图2-130所示。
图2-130
2.17 插入Flash按钮
案例效果：Ch02\效果\ 插入Flash按钮\index.htm。
制作要点：Flash按钮在网页中的应用。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入FIash按钮\index.htm”文件，如图2-131所示。
图2-131
02 将鼠标光标置入到右上角的第1列单元格中，执行菜单【插入】→【媒体】→【FIash按钮】命令，弹出【插入FIash按钮】对话框，如图2-132所示。
图2-132
03 在【样式】选项的下拉表中选择样式“Generic-BIue”，在【按钮文本】选项的文本框中输入“公司简介”，在【字体】选项的下拉列表中选择【方正琥珀简体】，在【大小】选项的数值框中输入“20”，单击【链接】选项后面的【浏览】按钮
，弹出【选择文件】对话框，选择光盘目录下“Ch02\素材\插入FIash按钮”文件夹中的“index.htm”，单击【确定】按钮，回到【插入FIash按钮】对话框。单击【确定】按钮，完成FIash按钮的插入，效果如图2-133所示。
图2-133
04 使用相同的方法，为第2列、第3列和第4列单元格插入FIash按钮，效果如图2-134所示。
图2-134
05 保存并预览网页，效果如图2-135所示。
图2-135
2.18 插入Flash文本
案例效果：Ch02\效果\插入Flash文本\index.htm。
制作要点：Flash文本在网页中的应用。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入FIash文本\index.htm”文件，如图2-136所示。
图2-136
02 将鼠标光标置入到导航表格的第1列中（标题“企业介绍”的上方），执行菜单【插入】→【媒体】→【FIash文本】命令，弹出【插入FIash文本】对话框，如图2-137所示。
图2-137
03 在【字体】选项的下拉列表中选择【方正准圆简体】，在【大小】选项的文本框中输入“15”，将颜色设置为“黑色（#000000）”，在【文本】选项的文本框中输入“首 页”，单击【链接】选项后面的【浏览】按钮，弹出【选择文件】对话框，选择光盘目录下“Ch02\素材\插入FIash文本\”文件夹中的“index.htm”，单击【确定】按钮，回到【插入FIash文本】对话框，将【背景色】选项设置为“银白色（#F8F8F8）”。单击【确定】按钮，完成FIash文本的插入，效果如图2-138所示。
图2-138
04 使用相同的方法，为第2列、第3列和第4列单元格插入FIash文本，效果如图2-139所示。
图2-139
05 保存并预览网页，效果如图2-140所示。
图2-140
2.19 插入Flash动画
案例效果：Ch02\效果\插入Flash动画\index.htm。
制作要点：使用Flash工具按钮，插入影片。
01 按快捷键【Ctrl+O】，打开光盘中的“Ch02\素材\插入FIash动画\ index.htm”文件，如图2-141所示。
图2-141
02 将鼠标光标置入到第2行第2列中，在【插入】→【常用】面板中单击【FIash】按钮
，弹出的【选择文件】对话框，如图2-142所示。选择光盘目录下 “Ch02\素材\插入FIash动画\image”文件夹中的“精美首饰广告．swf”，单击【确定】按钮完成FIash影片的插入，效果如图2-143所示。
图2-142
图2-143
03 保存并预览网页，效果如图2-144所示。
图2-144
小结
要制作赏心悦目的网页，就必须掌握网页基本元素的使用方法。本章系统详细地讲解了网页基本元素及其使用方法。通过本章的学习，可了解各种图像格式和多媒体对象，并能够在网页中熟练应用文字、图像和各种多媒体对象。