第4章 设计丰富多彩的图像和多媒体网页

本章导读

图像是网页上最常用的对象之一，制作精美的图像可以大大增强网页的视觉效果，令网页更加生动多彩。在网页中恰当地使用图像，能够极大地吸引浏览者的眼球。因此，利用好图像，也是网页设计的关键。本章主要介绍在网页中插入图像、网页图像的应用和网页链接的创建等，通过本章的学习可以创建出精美的图文混排网页。利用Dreamweaver还可以迅速、方便地为网页添加声音和影片。可以插入和编辑多媒体对象，如Java Applet小程序、Flash影片、音乐文件、视频对象等。

内容要点

◎ 熟悉网页中图像的常见格式

◎ 掌握插入图像

◎ 掌握网页图像的应用

◎ 了解在网页中插入声音

◎ 掌握视频的插入

◎ 掌握Flash的插入

◎ 插入Java Applet

◎ 了解网页链接的创建

◎ 图文混排网页的创建

◎ 掌握创建网页锚点链接

学习流程

4.1 在网页中插入图像

在网页适当位置处放置一些图像，比单纯使用文字能够使网页更具有吸引力，这些图像是文本的说明及解释，不仅可以使文本清晰易读，而且可以使文档更具吸引力。

4.1.1 网页中图像的常见格式

网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图形都是最适合的。但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示。建议使用GIF或JPEG格式以满足更多人的需求。

1.GIF

GIF是Graphic Interchange Format的缩写，即图像交换格式，文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。

GIF格式最大优点就是制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成一张动画文件。

GIF格式的另一优点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。

2.JPEG

JPEG是Joint Photographic Experts Group的缩写，它是一种图像压缩格式，文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。

3.PNG

PNG是英文单词Portable Network Graphic的缩写，即便携网络图像，文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息，并且在任何时候所有元素都可以完全编辑。

4.1.2 上机练习——插入图像

美观的网页是图文并茂的，一幅幅图像和一个个漂亮的按钮、标记不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见，图像在网页中的作用是非常重要的。

在Dreamweaver中插入图像的效果如图4-1所示，具体操作步骤如下。

图4-1 插入图像的效果

CD-ROM/实例素材/练习文件/04/4.1.2/index.htm

CD-ROM/实例素材/完成文件/04/4.1.2/index1.htm

（1）打开网页文档，将光标置于要插入图像的位置，如图4-2所示。

图4-2 打开网页文档

（2）执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像文件，如图4-3所示。

图4-3 “选择图像源文件”对话框

（3）单击“确定”按钮，即可插入图像，如图4-4所示。

图4-4 插入图像

（4）执行“文件”|“保存”命令，保存文档，在浏览器中预览，效果如图4-1所示。

4.1.3 上机练习——设置图像属性

在“属性”面板中显示出关于图像的属性设置，这时就可以根据需要设置图像属性，设置图像属性后的效果如图4-5所示，具体操作步骤如下。

图4-5 设置图像属性的效果

CD-ROM/实例素材/练习文件/04/4.1.3/index.htm

CD-ROM/实例素材/完成文件/04/4.1.3/index1.htm

（1）打开网页文档，选中图像，如图4-6所示。

图4-6 打开网页文档

（2）执行“窗口”|“属性”命令，打开“属性”面板，将“对齐”设置为“右对齐”，如图4-7所示。

（3）在面板中将“垂直边距”和“水平边距”分别设置为“5”，如图4-8所示。

图4-7 设置图像的对齐方式

图4-8 设置图像的“垂直边距”和“水平边距”

（4）在“边框”文本框中输入“1”，如图4-9所示。

图4-9 设置边框

（5）保存文档，按【F12】键在浏览器中预览，效果如图4-5所示。

图像的“属性”面板中主要有以下参数。

● 图像：设置图像的名称。

● 宽和高：以像素为单位设定图像的宽度和高度。

● 源文件：指定图像的具体路径。单击按钮选择源文件或直接输入。

● 链接：为图像设置超级链接。可以单击按钮选择要链接的文件，或者直接输入URL路径。

● 目标：链接时的目标窗口或框架。在其下拉列表中包括以下4个选项。

blank：将链接的对象在一个未命名的新浏览器窗口中打开。

parent：将链接的对象在含有该链接的框架的父框架集或父窗口中打开。

self：将链接的对象在该链接所在的同一框架或窗口中打开。_self是默认选项，通常不需要指定它。

top：将链接的对象在整个浏览器窗口中打开，因而会替代所有框架。

● 替换：图片的注释。当浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。

● 编辑：启动“外部编辑器”首选参数中指定的图像编辑器并使用该图像编辑器打开选定的图像。

● 地图：名称和“热点工具”标注和创建客户端图像地图。

● 垂直边距：图像在垂直方向与文本域或其他页面元素的间距。

● 水平边距：图像在水平方向与文本域或其他页面元素的间距。

● 原始：指定在载入主图像之前应该载入的图像。

● 边框：以像素为单位的图像边框的宽度。默认为无边框。

● 对齐：设置图像的对齐方式。

4.1.4 上机练习——插入图像占位符

有时候没有已制作好的图片，而根据页面布局的需要，要在网页中插入一幅图片，这时可以使用占位符来代替图片位置。插入图像占位符的效果如图4-10所示，具体操作步骤如下。

CD-ROM/实例素材/练习文件/04/4.1.4/index.htm

CD-ROM/实例素材/完成文件/04/4.1.4/index1.htm

图4-10 插入图像占位符的效果

（1）打开网页文档，将光标放置在要插入图像占位符的位置，如图4-11所示。

图4-11 打开网页文档

（2）执行“插入”|“图像对象”|“图像占位符”命令，弹出“图像占位符”对话框，在对话框中进行相应的设置，如图4-12所示。

（3）单击“确定”按钮，插入图像占位符，如图4-13所示。

图4-12 “图像占位符”对话框

图4-13 插入图像占位符

（4）保存文档，按【F12】键在浏览器中预览，效果如图4-10所示。

4.2 网页图像的应用

在网页中不仅可以插入图像，还可以插入鼠标经过图像等，下面具体讲解。

4.2.1 上机练习——鼠标经过图像

鼠标经过图像就是当鼠标经过图像时，原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的：原始图像（页面显示时候的图像）和鼠标经过图像（当鼠标经过时显示的图像）。组成鼠标经过图像的两张图像必须有相同的大小；如果两张图像的大小不同，Dreamweaver CS5会自动将第二张图像大小调整成与第一张图像同样大小。

下面讲解如何插入鼠标经过图像，在网页中插入鼠标经过图像前的效果如图4-14所示，鼠标经过图像时的效果如图4-15所示，具体操作步骤如下。

图4-14 鼠标经过图像的前的效果

图4-15 鼠标经过图像时的效果

CD-ROM/实例素材/练习文件/04/4.2.1/index.htm

CD-ROM/实例素材/完成文件/04/4.2.1/index1.htm

（1）打开网页文档，如图4-16所示。

（2）执行“插入”|“图像对象”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图4-17所示。

图4-16 打开网页文档

图4-17 “插入鼠标经过图像”对话框

（3）在对话框中单击“原始图像”文本框右侧的“浏览”按钮，弹出“原始图像”对话框，在对话框中选择图像文件，如图4-18所示。

（4）单击“确定”按钮，添加原始图像。单击“鼠标经过图像”文本框右侧的“浏览”按钮，在弹出的“鼠标经过图像”对话框中选择图像文件，如图4-19所示。

图4-18 “原始文件”对话框

图4-19 “鼠标经过图像”对话框

（5）单击“确定”按钮，添加鼠标经过图像，如图4-20所示。

在“插入鼠标经过图像”对话框中主要设置以下参数。

图4-20 添加图像

● 在“图像名称”文本框中，输入名称。

● 在“原始图像”文本框中，单击“浏览”按钮选择图像源文件或直接输入图像路径。

● 在“鼠标经过图像”文本框中，单击“浏览”按钮选择图像文件或直接输入图像路径设置鼠标经过时显示的图像。

● 勾选“预载鼠标经过图像”复选框，让图像预先加载到浏览器的缓存中使图像显示速度快一点。

● 在“按下时，前往的URL”文本框中，单击“浏览”按钮选择文件或者直接输入当单击鼠标经过图像时打开的文件路径。如果没有设置链接，Dreamweaver CS5会自动在HTML代码中为鼠标经过图像加上一个空链接（#）。如果将这个空链接除去，鼠标经过图像将无法工作。

（6）单击“确定”按钮，插入鼠标经过图像。选中图像，在“属性”面板中将“对齐”设置为“右对齐”，效果如图4-21所示。

（7）保存文档，按【F12】键在浏览器中浏览效果，当鼠标经过图像前的效果如图4-14 所示和鼠标经过图像时的效果如图4-15所示。

图4-21 插入鼠标经过图像

4.2.2 上机练习——网页背景渐变效果

实现网页背景渐变的具体操作步骤如下。用一张渐变背景图作为渐变背景的效果如图4-22所示。

CD-ROM/实例素材/练习文件/04/4.2.2/index.htm

CD-ROM/实例素材/完成文件/04/4.2.2/index1.htm

图4-22 渐变背景图作渐变背景的效果

（1）打开网页文档，如图4-23所示。

（2）执行“修改”|“页面属性”命令，弹出“页面属性”对话框，如图4-24所示。

图4-23 打开网页文档

图4-24 “页面属性”对话框

（3）在对话框中单击“背景图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框，在对话框中选择相应的渐变背景图像，如图4-25所示。

（4）单击“确定”按钮，添加背景图像文件，如图4-26所示。

图4-25 “选择图像源文件”对话框

图4-26 添加背景图像文件

（5）单击“确定”按钮，插入渐变背景图像，如图4-27所示。

图4-27 插入渐变背景图像

（6）保存文件，在浏览器中预览，效果如图4-22所示。

4.3 插入声音

声音文件由很多种，目前在网页中运用的音乐文件主要是MP3、MID、WMA格式，在网页中对音乐文件的应用一般有3 种方式背景音乐、音乐连接和音乐嵌入。

4.3.1 关于音频文件格式

.midi或 .mid（乐器数字接口）格式用于器乐。许多浏览器都支持MIDI文件并且不要求插件。尽管其声音品质非常好，但根据访问者声卡的不同，声音效果也会有所不同。很小的MIDI文件也可以提供较长时间的声音剪辑。MIDI文件不能被录制并且必须使用特殊的硬件和软件在计算机上合成。

.wav（Waveform扩展名）格式文件具有较好的声音品质，许多浏览器都支持此类格式文件并且不要求插件。可以从CD、磁带、麦克风等录制你自己的WAV文件。但是，其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。

.aif（音频交换文件格式，即AIFF）格式与WAV格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不要求插件；还可以从CD、磁带、麦克风等录制AIFF文件。但是，其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。

.mp3（运动图像专家组音频，即MPEG-音频层-3）格式是一种压缩格式，它可令声音文件明显缩小，其声音品质也非常好，如果正确录制和压缩MP3文件，其质量甚至可以和CD质量相媲美。这一新技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于Real Audio文件，因此通过普通电话线连接下载整首歌曲可能仍要花较长的时间。若要播放MP3文件，访问者必须下载并安装辅助应用程序或插件，例如QuickTime、Windows Media Player或RealPlayer等。

.ra、.ram、.rpm或Real Audio格式具有非常高的压缩程度，文件大小要小于MP3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载完之前即可听到声音。其声音品质比MP3文件声音品质要差，但新推出的播放器和编码器在声音品质方面已有显著改善。访问者必须下载并安装RealPlayer辅助应用程序或插件才可以播放这些文件。

4.3.2 上机练习——添加背景音乐

通过代码提示，可以在代码视图中插入代码。在输入某些字符时，将显示一个列表，列出完成条目所需要的选项。下面通过代码提示讲解背景音乐的插入，效果如图4-28所示，具体操作步骤如下。

图4-28 使用代码提示添加背景音乐的效果

CD-ROM/实例素材/练习文件/04/4.3.2/index.htm

CD-ROM/实例素材/完成文件/04/4.3.2/index1.htm

（1）在使用代码之前，首先执行“编辑”|“首选参数”命令，弹出“首选参数”对话框，在“分类”列表框中选择“代码提示”选项，将“首选参数”对话框中的所有复选框选中，并将“延迟”选项右侧的指针移动至最左端，设置为“0”秒，如图4-29所示。

（2）打开网页文档，如图4-30所示。

图4-29 “首选参数”对话框

图4-30 打开网页文档

（3）切换到拆分视图，在代码视图中找到标签<body>，并在其后面输入“<”以显示标签列表，输入“<”时会自动弹出一个下拉列表框，双击标签bgsound以插入该标签，如图4-31所示。

图4-31 插入bgsound标签

（4）如果该标签支持属性，则按空格键以显示该标签允许的属性列表，从中选择属性“src”，如图4-32所示。这个属性用来设置背景音乐文件的路径。

（5）双击出现的“浏览”字样，弹出“选择文件”对话框，从对话框中选择音乐文件，如图4-33所示。选择音乐文件后，单击“确定”按钮。

图4-32 在代码视图中选择属性“src”

图4-33 “选择文件”对话框

（6）在新插入的代码后按空格键，在属性列表中选择属性“loop”，如图4-34所示。

图4-34 在代码视图中选择属性“loop”

（7）单击选中loop，出现“-1”并选中。在最后的属性值后，为该标签输入“>”，如图4-35所示。

图4-35 代码中的声音标签

（8）保存文档，按【F12】键在浏览器中预览，即可听到音乐。

4.4 插入视频

在Dreamweaver中能够轻松地在网页中插入Flash视频，无须使用Flash创作工具。Dreamweaver插入Flash视频组件，在浏览器中查看该组件时，它将显示选择的Flash视频内容及一组播放控件。

4.4.1 视频的文件格式

如果经常上网，一定见到过Real Audio或Real Video，这是Internet上的一种多媒体文件。Real是一种高压缩率的数据流，可以在Internet上实时播放带声音和动态图像的Real文件，就像在看电影一样。这种文件格式现在己经在Internet上广泛使用了。可以用制作Real文件的工具把WAV、AVI、MOV、QT、AU等文件压缩成Real特有的RM文件。

可以通过不同的方式和使用不同格式将视频添加到Web页中。视频可以被用户下载，或者可以对视频进行视频流式处理以便在下载它的同时播放。Web上用于视频文件传输的最常见流式处理格式有RealMedia、QuickTime和Windows Media。必须下载辅助帮助应用程序以查看这些格式。使用这些格式，可同时对音频和视频进行流式处理。

如果想包括可被下载而不是流式处理简短的剪辑，则可以链接到该剪辑或将该剪辑嵌入到页面中。这些剪辑通常采用AVI或MPEG文件格式。

4.4.2 上机练习——在网页中插入视频

插入Flash视频的效果如图4-36所示，具体操作步骤如下。

图4-36 插入Flash视频的效果

CD-ROM/实例素材/练习文件/04/4.4.2/index.htm

CD-ROM/实例素材/完成文件/04/4.4.2/index1.htm

（1）打开网页文档，如图4-37所示。

图4-37 打开网页文档

（2）将光标置于插入视频文件的位置，执行“插入”|“媒体”|“Flash视频”命令，弹出“插入FLV”对话框，如图4-38所示。

（3）在对话框中单击“浏览”按钮，弹出“选择FLV”对话框，在对话框中选择视频文件“shipin.flv”，如图4-39所示。

图4-38 “插入FLV”对话框

图4-39 “选择FLV”对话框

（4）单击“确定”按钮，添加视频文件，如图4-40所示。

（5）单击“确定”按钮，插入视频文件，如图4-41所示。

图4-40 添加视频文件

图4-41 插入视频文件

（6）保存文档，按【F12】键在浏览器中预览，效果如图4-36所示。

4.5 插入其他媒体文件

在网页中插入Flash影片、Java Applet等，可以增加网页的动感性，使网页更具吸引力，因此多媒体元素在网页中应用越来越广泛。

4.5.1 上机练习——插入Flash

Flash影片是在专门的Flash软件中完成的，在Dreamweaver CS5中能将现有的Flash动画插入到文档中。

在网页中插入Flash影片，下面通过图4-42所示的效果讲解网页中Flash影片的插入，具体操作步骤如下。

图4-42 插入Flash影片的效果

CD-ROM/实例素材/练习文件/04/4.5.1/index.htm

CD-ROM/实例素材/完成文件/04/4.5.1/index1.htm

（1）打开网页文档，如图4-43所示。

图4-43 打开网页文档

（2）将光标置于要插入Flash影片的位置，执行“插入”|“媒体”|“Flash”命令，弹出“选择SWF”对话框，在对话框中选择Flash，如图4-44所示。

（3）单击“确定”按钮，插入Flash，选中插入的Flash，打开Flash的“属性”面板，如图4-45所示。

图4-44 “选择SWF”对话框

图4-45 插入Flash

Flash的“属性”面板中可以进行如下设置。

● 名称：用来标识影片的名称。

● 宽和高：以像素为单位设置影片的宽和高。

● 文件：指定Flash文件的路径。单击按钮以浏览某一文件，或直接在文本框中输入文件的路径。

● 源文件：指向Flash源文档的路径。

● 循环：勾选该复选框，动画将在浏览器端循环播放。

● 自动播放：勾选该复选框，则文档被浏览器载入时，自动播放Flash动画。

● 垂直边距和水平边距：指定影片上、下、左、右空白的像素数。

● 品质：在影片播放期间控制失真。设置越高，影片的观看效果就越好，但要求更快的处理器以使影片在屏幕上正确显示。

● 比例：用来设置显示比例，有“默认（全部显示）”、“无边框”和“严格匹配”3个选项。

● 对齐：设置Flash影片的对齐方式。

● 背景颜色：为当前Flash动画设置背景颜色

● 编辑：用于自动打开Flash软件对源文件进行处理。

● 播放：用于在设计视图中播放Flash动画。

● 参数：单击该按钮，在弹出的对话框中输入能使该Flash顺利运行的附加参数。

（4）保存文档，按【F12】键在浏览器中浏览效果，如图4-42所示。

4.5.2 上机练习——插入Java Applet

Java是一款允许开发、可以嵌入Web页面的轻量级应用程序（小程序）的编程语言。在创建Java小程序后，可以使用Dreamweaver将该程序插入到HTML文档中，Dreamweaver使用<applet>标签来标识对小程序文件的引用。

插入Java Applet影片的效果如图4-46所示，具体操作步骤如下。

图4-46 插入Java Applet影片的效果

CD-ROM/实例素材/练习文件/04/4.5.2/index.htm

CD-ROM/实例素材/完成文件/04/4.5.2/index1.htm

（1）打开网页文档，如图4-47所示。

图4-47 打开网页文档

（2）将光标置于要插入Applet影片的位置，执行“插入”|“媒体”|“Applet”命令，弹出“选择文件”对话框，在对话框中选择相应的文件，如图4-48所示。

（3）单击“确定”按钮，插入Applet影片，如图4-49所示。

图4-48 “选择文件”对话框

图4-49 插入Applet影片

Java Applet“属性”面板中可以进行如下设置。

● 宽和高：设置Java Applet的宽度和高度，可以输入数值，单位是像素。

● 代码：设置程序的Java Applet路径。

● 基址：指定包含这个程序的文件夹。

● 对齐：设置程序的对齐方式。

● 替代：设置当程序无法显示时，将显示的替换图像。

● 垂直边距：设置程序上方及上方其他页面元素，程序下方及下方其他页面元素的距离。

● 水平边距：设置程序左侧及左侧其他页面元素，程序右侧及右侧其他页面元素的距离。

（4）打开代码视图，在代码视图中修改代码，如图4-50所示。

图4-50 修改代码

    <applet code="Lake.class" width="250" height="220" align="right"><PARAM NAME=
"image" VALUE="mihoutao.jpg">
    // mihoutao.jpg换为你的图像名
    </applet>

（5）保存文档，按【F12】键在浏览器中浏览效果，如图4-46所示。

4.6 网页链接的创建

网站就是由若干个网页组成的，这些网页之间就是通过超链接的方式链接起来的，在Dreamweaver中，利用超链接不仅可以进行网页之间的相互链接，还可以使网页链接到相关的图像文件、多媒体文件及下载程序等。

4.6.1 网页链接的基本类型

链接即网页的桥梁。通过链接，可以从当前网页跳转到站点中另外一页，或从当前站点跳转到网络上另外一个站点。有了链接，才使得网页、网站、网络成为一个有机体。在网页中制作超链接的方法很多，几乎每个网页元素都能创建链接。

● 图像热点链接：一般一张图像只能链接一个文件路径。如果在该图像的不同区域建立不同的链接，这个时候就会应用到“图像热点链接”了。图像热点链接可以用在地图对区域的链接介绍、人体图对肢体的链接介绍，以及在制作的一张整图中进行各部分链接的导航等。

● 锚记链接：通过锚记链接，可以迅速在一个页面中寻找已定义的某内容。

● 电子邮件链接：在网页中单击电子邮件链接时，网页浏览器会自动调用Microsoft Outlook邮件程序，使用该程序可以进行邮件的即时发送。

● 空链接很多时，在网页中需要一种超级链接的样式效果，但不需要其链接跳转到任何其他页面或者站点。此时，空链接无疑是最合适的。空链接指向的被链接文件是文件本身。

● 下拉菜单链接：多个超级链接使用一个下拉菜单，单击菜单选择其中的链接文本即可打开对应的超级链接，多应用在超级链接较多、超级链接分类的页面中。

● 框架网页链接：主要应用在框架结构的网页中，在效果方面的显示是这样的一个页面，在某块区域为页面的链接导航，某块区域为内容的显示，单击不同的超级链接，该区域显示不同的信息内容。

4.6.2 上机练习——图像热点链接

当需要对一张图像的特定部位进行链接时就用到了热区链接，当用户单击某个热点时，会链接到相应的网页，矩形主要针对图像轮廓较规则，且呈方形的图像；椭圆形主要针对圆形规则的轮廓；不规则多边形则针对复杂的轮廓外形，在这里以矩形为例介绍热区链接的创建，在创建过程中，首先选中图像，然后在“属性”面板中选择热点工具在图像上绘制热区。

在网页中创建图像热点链接方法非常简单，下面讲解网页中图像热点链接，效果如图4-51所示，具体操作步骤如下。

图4-51 图像的热点链接效果

CD-ROM/实例素材/练习文件/04/4.6.2/index.htm

CD-ROM/实例素材/完成文件/04/4.6.2/index1.htm

（1）打开网页文档，如图4-52所示。

图4-52 打开网页文档

（2）选中图像，打开“属性”面板，在“属性”面板中选择矩形热点工具，如图4-53所示。

图4-53 选择矩形热点工具

（3）将光标置于图像“首页”上，绘制一个矩形热点，在“属性”面板中的“链接”文本框中输入链接的文件，如图4-54所示。

图4-54 绘制热区

在“热点”的“属性”面板中主要有以下设置参数。

● 链接：输入相应的链接地址。

● 替换：填写了说明文字以后，光标移到热点就会显示相应的说明文字。

● 目标：不进行选择则默认在浏览器窗口打开。

（4）使用同样的方法绘制其他的热点链接，如图4-55所示。

（5）保存网页文档，在浏览器中预览效果，如图4-51所示。

图4-55 绘制其他的热点链接

4.6.3 上机练习——E-mail链接

电子邮件地址作为超链接的链接目标与其他链接目标不同。当用户在浏览器上单击指向电子邮件地址的超链接时，将会打开默认的邮件管理器的新邮件窗口，其中会提示用户输入信息并将该信息传送给指定的E-mail地址。在网页中创建E-mail链接的效果如图4-56所示。

图4-56 E-mail链接的效果

CD-ROM/实例素材/练习文件/04/4.6.3/index.htm

CD-ROM/实例素材/完成文件/04/4.6.3/index1.htm

（1）打开网页文档，如图4-57所示。

图4-57 打开网页文档

（2）将光标放置在要插入E-mail链接的位置，执行“插入”|“电子邮件链接”命令，弹出“电子邮件链接”对话框，在该对话框的“文本”文本框中输入“联系我们”，在“电子邮件”文本框中输入“mailto：sdhzmdq@163.com”，如图4-58所示。

（3）单击“确定”按钮，插入E-mail链接，如图4-59所示。

图4-58 “电子邮件链接”对话框

图4-59 插入E-mail链接

（4）保存网页文档，在浏览器中浏览时单击“联系我们”文字链接，效果如图4-56所示。

4.6.4 上机练习——下载文件链接

如果要在网站中提供下载资料，就需要为文件提供下载链接，如果超级链接指向的不是一个网页文件，而是其他文件例如ZIP、MP3、EXE文件等，单击链接的时候就会下载文件。

在网页中添加下载文件的链接的方法非常简单，下面通过图4-60所示的效果讲解网页中添加下载文件的链接，具体操作步骤如下。

图4-60 下载文件链接的效果

CD-ROM/实例素材/练习文件/04/4.6.4/index.htm

CD-ROM/实例素材/完成文件/04/4.6.4/index1.htm

（1）打开网页文档，如图4-61所示。

图4-61 打开网页文档

（2）选中要创建链接的文字，在“属性”面板中单击“链接”文本框右边的浏览文件按钮，弹出“选择文件”对话框，选择要下载的文件，如图4-62所示。

（3）单击“确定”按钮，将文件链接到“属性”面板的“链接”文本框中，如图4-63所示。

图4-62 “选择文件”对话框

图4-63 添加链接文件

（4）保存文档，按【F12】键预览，单击“文件下载”文字链接，效果如图4-60所示。

4.6.5 上机练习——锚点链接

在制作网页时，有些页面内容较多，页面就可能变长。为了方便浏览，可以在页面的底部增加返回到顶部的链接。在网页中创建锚点链接的效果如图4-64所示。

图4-64 锚点链接的效果

CD-ROM/实例素材/练习文件/04/4.6.5/index.htm

CD-ROM/实例素材/完成文件/04/4.6.5/index1.htm

（1）打开网页文档，如图4-65所示。

图4-65 打开网页文档

（2）将光标置于文字“公司介绍”的前面执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在对话框中的“锚记名称”文本框中输入“jianjie”，如图4-66所示。

（3）单击“确定”按钮，插入命名锚记jianjie，如图4-67所示。

图4-66 “命名锚记”对话框

图4-67 插入命名锚记

（4）选中文字“公司简介”，在“属性”面板中的“链接”文本框中输入“#jianjie”，如图4-68所示。

图4-68 输入链接

（5）同理插入其他的命名锚记，并设置链接，如图4-69所示。

图4-69 插入其他的命名锚记

（6）保存文档，按“F12”键在浏览器中预览，效果如图4-64所示。

4.6.6 上机练习——脚本链接

脚本链接是一种特殊的链接，访问者单击这类链接可以执行相应的JavaScript程序。在网页中创建脚本链接的效果如图4-70所示。

CD-ROM/实例素材/练习文件/04/4.6.6/index.htm

CD-ROM/实例素材/完成文件/04/4.6.6/index1.htm

（1）打开网页文档，如图4-71所示。

图4-70 脚本链接的效果

图4-71 打开网页文档

（2）选中文本“关闭网页”，在“属性”面板中的“链接”文本框中输入脚本“javascript:window.close()”，如图4-72所示。

图4-72 脚本链接

（3）保存文档，按【F12】键在浏览器中预览，单击脚本链接的效果如图4-70所示。

4.6.7 上机练习——空链接

在网页中为了保持页面文本效果的统一或者给一些文本或图像应用行为，就需要创建一些空链接。在网页中创建空链接的方法非常简单，打开网页文档，选中文本，打开“属性”面板，在“属性”面板中的“链接”文本框中输入“#”，进行空链接，如图4-73所示。

图4-73 进行空链接

4.7 实例精讲

在网页中添加精美的图像可以使网页更吸引人，而且能够使它表达出很多文字难以说明的意思。在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而保证图像的质量。

实例1——图文混排网页

图文混排恰当的网页总是让人得到视觉上的享受，作为一名网页设计者，掌握好网页图像和文本的运用就显得尤为重要。下面就通过具体的实例来讲述网页中图像和文本的排版。

图文混排网页的最终效果如图4-74所示。

CD-ROM/实例素材/练习文件/04/综合实例1/index.htm

CD-ROM/实例素材/完成文件/04/综合实例1/index1.htm

图4-74 图文混排效果

（1）打开网页文档，如图4-75所示。

图4-75 打开网页文档

（2）将光标置于要输入文字的位置，输入文字，如图4-76所示。

图4-76 输入文字

（3）选中输入文字的，在“属性”面板中单击“大小”下拉列表，弹出“新建CSS规则”对话框，在“选择器名称”中输入名称，如图4-77所示。

（4）单击“确定”按钮，设置字体大小为12，如图4-78所示。

图4-77 设置文字的属性

图4-78 设置字体大小

（5）单击“颜色”按钮，在弹出的颜色列表中选择要设置字体的颜色，如图4-79所示。

（6）将光标置于文字中，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择相应的图像文件，如图4-80所示。

图4-79 设置字体颜色

图4-80 “选择图像源文件”对话框

（7）单击“确定”按钮，插入图像，如图4-81 所示。保存文档，按【F12】键在浏览器中预览，效果如图4-74所示。

图4-81 插入图像

实例2——创建网页锚点链接

在制作网页时，有些页面内容较多，页面就可能变长。为了方便浏览，可以在页面的底部增加返回到顶部的链接。在网页中创建锚点链接的效果如图4-82所示。

图4-82 锚点链接的效果

CD-ROM/实例素材/练习文件/04/综合实例2/index.htm

CD-ROM/实例素材/完成文件/04/综合实例2/index1.htm

（1）打开网页文档，如图4-83所示。

图4-83 打开网页文档

（2）将光标置于文字“公司介绍”的前面，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“jieshao”，如图4-84所示。

图4-84 “命名锚记”对话框

（3）单击“确定”按钮，插入命名锚记jieshao，如图4-85所示。

图4-85 插入命名锚记jieshao

（4）选中文字“公司介绍”，在“属性”面板中的“链接”文本框中输入“#jieshao”，如图4-86所示。

图4-86 输入链接

（5）将光标置于文字“大记事”的前面，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“dajishi”，如图4-87所示。

图4-87 “命名锚记”对话框

（6）单击“确定”按钮，插入命名锚记，如图4-88所示。

图4-88 插入命名锚记

（7）选中文字“大记事”，在“属性”面板中的“链接”文本框中输入“#dajishi”，如图4-89所示。

图4-89 输入链接

（8）将光标置于文字“企业文化”的前面，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“qiyewenhua”，如图4-90所示。

图4-90 “命名锚记”对话框

（9）单击“确定”按钮，插入命名锚记，如图4-91所示。

图4-91 插入命名锚记

（10）选中文字“企业文化”，在“属性”面板中的“链接”文本框中输入“#qiyewenhua”，如图4-92所示。

图4-92 输入链接

（11）将光标置于文字“公司荣誉”的前面，执行“插入”|“命名锚记”命令，弹出“命名锚记”对话框，在“锚记名称”文本框中输入“gongsirongyu”，如图4-93所示。

图4-93 “命名锚记”对话框

（12）单击“确定”按钮，插入命名锚记，如图4-94所示。

（13）选中文字“公司荣誉”，在“属性”面板中的“链接”文本框中输入“#gongsirongyu”，如图4-95所示。

图4-94 插入命名锚记

图4-95 输入链接

（14）保存文档，按【F12】键在浏览器中预览，效果如图4-82所示。