第5章图像和多媒体

1、第第5 5章章 图像和多媒体图像和多媒体 第第5章章 图像和多媒体图像和多媒体 5.1 网页中的图像和多媒体网页中的图像和多媒体5.2 定义图像的映射定义图像的映射 5.3 多媒体多媒体 实训五实训五 第第5 5章章 图像和多媒体图像和多媒体 5.1 网页中的图像和多媒体网页中的图像和多媒体 图像是网页中不可缺少的重要元素，它不仅可以装饰和美化网页，同时还可以传递信息。例如，使用图像来展示产品信息，制作商标或者公司徽标，利用图像建立站点的导航构架等。除此之外，还可以在网页中加入音频、视频以及动画等多种媒体信息。FrontPage 2002提供了强大的多媒体技术支持，利用它可以方便地创建具有全新

2、视听感觉的多媒体Web站点和网页。第第5 5章章 图像和多媒体图像和多媒体 5.1.1 网页中图像文件的格式网页中图像文件的格式 图像文件有很多种格式。例如，常用的格式有JPEG、TIFF、GIF、PCX、PNG、BMP、TGA、WMF、EPS等。但是就目前来说，在网页中普遍使用的图像文件格式是GIF和JPEG两种，它们的共同特点是，适合网络传输，适用于各种浏览器。第第5 5章章 图像和多媒体图像和多媒体 GIF(Graphics Interchange Format)格式采用的是无损耗压缩方案，压缩时不会丢失图像信息，解压速度快。GIF支持交织的、透明的图像，这种技术在网页中非常有用。利用G

3、IF的透明特性能够把插入到网页中的图片背景处理成透明的，以使插入图片的背景色与网页背景色相同。而交织特性可以使图像在浏览器中边加载边显示。另外，GIF格式还支持动画，它最多能够处理256种颜色。第第5 5章章 图像和多媒体图像和多媒体 JPEG(Joint Photographic Experts Group)格式采用的是有损压缩方案，因此图像文件在压缩时会损失部分信息。不过这种压缩方案可以根据图像质量要求调整压缩比。压缩率越小，图像的品质越高，但同时图像文件也越大。JPEG格式的最大特点是支持真彩色，它能够包含多达1670万种颜色。因此常用于存储色彩要求高的图像，如人物肖像、风景名胜等摄影照

4、片。第第5 5章章 图像和多媒体图像和多媒体 另一种可以在网页中使用的图像文件是BMP(Bitmap)格式，这种格式支持224种颜色。但由于BMP是一种无压缩的格式，因此图像文件一般比较大，影响了它的传输速度，所以网页上较少使用。第第5 5章章 图像和多媒体图像和多媒体 虽然能够在网页中使用的图像格式有限，但FrontPage 2002却允许使用多种格式的图像文件。因为FrontPage能够将插入的其他图像文件格式转换为GIF或JPEG格式。当插入图像的颜色值大于256色时，FrontPage将其转换为JPEG格式，而小于256色时则转换为GIF格式。在FrontPage 2002中可以转换的

5、图像格式主要有PCD、PCX、PNG、EPS、TGA、WMF、TIFF、RAS等。 第第5 5章章 图像和多媒体图像和多媒体 5.1.2 在网页中使用图像在网页中使用图像 在网页中使用图像要注意，尽量不要使用很大的图像文件，单张图片的大小最好小于25KB，如果必须使用大图片时，建议创建图片的缩略图。如果在一个网页中插入多个图片，则所有图片的大小之和最好不要超过30KB，以免导致下载时间过长。第第5 5章章 图像和多媒体图像和多媒体 1. 在网页中插入图像在网页中插入图像 (1) 在普通“网页”视图中，将光标放在需要插入图像的 位置。 (2) 单击“插入”菜单“图片”“来自文件”命令，打开如图5

6、-1所示的“图片”对话框。第第5 5章章 图像和多媒体图像和多媒体 图图5-1 在网页中插入图像在网页中插入图像第第5 5章章 图像和多媒体图像和多媒体 (3) 单击“图片”对话框中的“查找范围”下拉列表框，从本地文件系统或者Web站点浏览到所需的图形，单击所需的图片，再单击“确定”按钮。这时图像已经插入到网页中。 (4) 单击“常用”工具栏上的“保存”按钮，这时会打开“保存嵌入式文件”对话框，如图5-2所示。第第5 5章章 图像和多媒体图像和多媒体 图5-2 保存图像文件第第5 5章章 图像和多媒体图像和多媒体 (5) 要将图像保存在当前站点的根目录中，可以在“保存嵌入式文件”对话框中，单击

7、“确定”按钮。 (6) 要把图像文件保存在当前站点的images文件夹中，可以单击“更改文件夹”按钮，在打开“更改文件夹”对话框中，选择该文件夹，然后单击“确定”按钮，如图5-3所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-3 更改文件夹更改文件夹第第5 5章章 图像和多媒体图像和多媒体 (7) 如果不想将图片保存到当前的站点中，可以在 “保存嵌入式文件”对话框中，单击“设置操作”按钮，打开“设置操作”对话框，选择“不保存”单选框，单击“确定”按钮，如图5-4所示。第第5 5章章 图像和多媒体图像和多媒体 图5-4 选择保存方式第第5 5章章 图像和多媒体图像和多媒体 (8) 再单击

8、“确定”按钮退出“保存嵌入式文件”对话框。 注意，如果选择不将图形保存到当前Web站点时，会在网页上创建一个对其他Web站点上的图形的引用。不过，如果该图形从其他Web站点中或文件夹中删除了，就再也无法在当前的网页中看到该图形。第第5 5章章 图像和多媒体图像和多媒体 2. 在网页中插入万维网站点中的图像在网页中插入万维网站点中的图像 (1) 在普通“网页”视图中，将插入点放在要插入图形的位置。 (2) 单击“插入”菜单“图片”“来自文件”命令，打开如图5-1所示的“图片”对话框。 (3) 单击“搜索站点”图标 并导航到包含图形的网页。 (4) 用鼠标右键单击选中的图形，再单击快捷菜单上的“复

9、制”命令。 第第5 5章章 图像和多媒体图像和多媒体 (5) 切换回Microsoft FrontPage 2002。 (6) 再次用鼠标右键单击，并从快捷菜单上选择“粘贴”，把图形直接插入到网页中。 第第5 5章章 图像和多媒体图像和多媒体 5.1.3 创建图片库创建图片库 图片库是指包含图形集的网页。通常图形集中的图形是按照某种顺序和规律布局的。创建图片库是FrontPage2002新增的功能，利用这个功能创建图片库十分方便，具体步骤如下。 (1) 在普通“网页”视图中，将插入点放在要插入图片库的位置上。 (2) 单击“插入”菜单“Web组件”命令，打开“插入Web组件”对话框，如图5-5

10、所示。第第5 5章章 图像和多媒体图像和多媒体 图5-5 创建图片库第第5 5章章 图像和多媒体图像和多媒体 (3) 在“插入组件列表框”中选择图片库，在“选择图片库选项”列表框中，选择需要的图片集版式，单击“完成”按钮，就可以在指定的位置上插入图片库。 FrontPage 2002有4种图片库布局的样式。 横排版式：在网页上按水平方式排列图片。横排版式能够自动创建图像的缩略图，并可在每幅图像的下面包含说明文字。第第5 5章章 图像和多媒体图像和多媒体 蒙太奇版式：在网页上按蒙太奇版式排列图片。蒙太奇版式能够自动创建图像的缩略图，缩略图以拼贴画模式排列，当鼠标停留在图像上时，将显示图像的说明文

11、字。 幻灯片版式：在网页上以幻灯片版式排列图片。幻灯片版式能够自动创建图像的缩略图，缩略图按行排列，并可上下滚动。 竖排版式：在网页上垂直排列图片。竖排版式能够自动创建图像的缩略图，缩略图按列排列，说明文字放在图像的右侧。第第5 5章章 图像和多媒体图像和多媒体 (4) 创建图片库之后还需要在图片库中加入图片。加入图片的方法是，在图片库上单击鼠标右键，在快捷菜单中单击“图片库属性”命令，打开“图片库属性”对话框，如图5-6所示。 (5) 单击“图片”选项卡，再单击“添加”按钮，选择“图片来自文件”，将显示“打开”对话框，如图5-7所示。第第5 5章章 图像和多媒体图像和多媒体 图5-6 把图片

12、添加到图片库 第第5 5章章 图像和多媒体图像和多媒体 图图5-7 选择图片加入图片库选择图片加入图片库第第5 5章章 图像和多媒体图像和多媒体 (6) 在“打开”对话框中，从指定的位置选择需要的图像，然后单击“打开”按钮，即可将图片添加到图片库中。 (7) 在“缩略图大小”选择框中，可以指定缩略图的大小。 (8) 在“标题”文本框中键入需要的文字，并且可以为文字选择合适的字体格式。 (9) 单击“编辑”按钮，可以打开“编辑图片”对话框，如图5-8所示。第第5 5章章 图像和多媒体图像和多媒体 图5-8 编辑图片库中的图片 第第5 5章章 图像和多媒体图像和多媒体 (10) 要改变图片在网页中

13、的布局样式，可单击“布局”选项卡，如图5-9所示。从中选择新的布局样式，再单击“确定”按钮即可。创建好的图片库网页如图5-10所示。第第5 5章章 图像和多媒体图像和多媒体 图5-9 更改图片库布局 第第5 5章章 图像和多媒体图像和多媒体 图5-10 创建好的图片库网页第第5 5章章 图像和多媒体图像和多媒体 5.1.4 在网页中使用剪贴画在网页中使用剪贴画 FrontPage 2002附带了一个Microsoft剪辑管理器剪贴画库，其中包含图画、照片、声音、视频和其他媒体文件(统称为剪辑)。 要在网页中使用剪贴画库，可按以下步骤进行。 (1) 在普通“网页”视图中，将光标放在需要插入剪贴画

14、的位置上。第第5 5章章 图像和多媒体图像和多媒体 (2) 单击“插入”菜单“图片”“剪贴画”命令，打开如图5-11所示的“插入剪贴画”任务窗口。 (3) 在“插入剪贴画”任务窗口中，可以在“搜索范围”列表框中选择要搜索的范围；在“结果类型”列表框中选择要搜索的文件类型。然后单击“搜索”按钮开始搜索。也可以在“搜索文字”文本框中键入要搜索的文件名，然后单击“搜索”按钮。第第5 5章章 图像和多媒体图像和多媒体 (4) 在“结果”列表中单击要插入的剪贴画，然后在弹出的快捷菜单中选择“插入”命令，即可插入选中的剪贴画。 在“插入剪贴画”任务窗口中，单击“剪辑管理器”，可打开“Microsoft剪辑

15、管理器”对话框，如图5-12所示。第第5 5章章 图像和多媒体图像和多媒体 图5-11 “插入剪贴画”任务窗口 第第5 5章章 图像和多媒体图像和多媒体 图5-12 使用“Microsoft剪辑管理器” 第第5 5章章 图像和多媒体图像和多媒体 可在“Microsoft剪辑管理器”中浏览、剪辑收藏集，添加剪辑。单击“网上剪辑”即可链接到http/dg1. M站点，并可下载更多的剪辑文件。 第第5 5章章 图像和多媒体图像和多媒体 5.1.5 设置图片的属性设置图片的属性 在网页中插入图像之后，还可以对图像的某些属性，例如图像文件的类型、图像的分辨率、图像的尺寸等进行设置。为了设置图像的各种属性

16、，先要打开“图片属性”对话框。在普通“网页”视图中，单击要设置属性的图像，然后单击鼠标右键，在快捷菜单中单击“图片属性”命令，即可打开“图片属性”对话框，如图5-13所示。 在“图片属性”对话框中，有“常规”、“外观”和“视频”三个选项卡。下面先介绍选项卡中的各项设置。第第5 5章章 图像和多媒体图像和多媒体 图图5-13 设置图像的常规属性设置图像的常规属性第第5 5章章 图像和多媒体图像和多媒体 1. “常规常规”选项卡选项卡 “常规”选项卡中包含以下可以设置的属性。 “图片源”：显示图片的位置。如果图片来自万维网，则显示图片的绝对URL地址和文件名；如果图片位于当前Web站点上，则显示图

17、片的相对URL和文件名；如果图片在本地的文件系统中，则显示文件的路径和文件名。使用“浏览”按钮，可以选择其他图片来替换现有的图片。单击“编辑”按钮，将根据图像的文件类型启动默认的编辑器，如Microsoft Image Composer或Microsoft PhotoDraw。第第5 5章章 图像和多媒体图像和多媒体 类型：可以将所选择的图片格式设置为GIF或JPEG。 替代表示：设置在浏览器中下载主要图像时以一个低分辨率图像显示，或者在图像的位置上，以文本代替图像，目的是为了提高网页的下载速度。但是替代文本应该能够表达图像的含义。 默认超链接：可以定义一个与图像相关联的超链接。当在浏览器中单

18、击图像时，这个超链接就被加载了。第第5 5章章 图像和多媒体图像和多媒体 2. “外观外观”选项卡选项卡 “外观”选项卡(如图5-14所示)中包含以下可以设置的属性。 环绕样式：可以设置图像与文本的相对位置关系。 布局：设置图像在网页中的位置。其中包含以下4个选项。 对齐方式：定义图片与周围文字之间的对齐方式。第第5 5章章 图像和多媒体图像和多媒体 图5-14 设置图像的外观属性第第5 5章章 图像和多媒体图像和多媒体 边框粗细：为图像设置边框。边框的宽度以像素为单位，可以在选择框中键入所需的边框宽度，边框的颜色将默认为当前超链接的颜色。 水平间距和垂直间距：设置图像与周围其他元素之间的距离

19、。 大小：设置图像出现在浏览器中的大小。可以用像素或者百分比为单位设置图像的宽度和高度。在改变图像尺寸时，建议选择“保持纵横比”复选框。第第5 5章章 图像和多媒体图像和多媒体 3. “视频视频”选项卡选项卡 “视频”选项卡(如图5-15所示)中包含以下可以设置的属性。第第5 5章章 图像和多媒体图像和多媒体 图图5-15 设置图片视频属性设置图片视频属性第第5 5章章 图像和多媒体图像和多媒体 视频源：设置要加入网页的视频文件的路径和文件名，或者使用“浏览”按钮选择视频文件。 重复：定义视频在浏览器中播放的方式。 循环次数：设置视频重复播放的次数。 循环延时：设置视频在循环过程中浏览器的等待

20、时间。 开始：设置视频在打开文件时播放，或者当鼠标移动到视频上时开始播放。 第第5 5章章 图像和多媒体图像和多媒体 5.1.6 在网页中绘制图形，插入艺术字在网页中绘制图形，插入艺术字 在FrontPage 2002中，新增了一些很有用的功能，如插入自选图形、艺术字，绘制新图等。在FrontPage 2002中，可以使用这些功能，方便地在网页中插入艺术字，绘制流程图等。 艺术字也是网页中不可缺少的一个元素，例如网页的横幅、标题等用艺术字来表现，可以使网页更加具有吸引力。第第5 5章章 图像和多媒体图像和多媒体 在网页中插入艺术字的步骤如下。 (1) 在普通“网页”视图中，将光标放在需要插入艺

21、术字的位置上。 (2) 单击“插入”菜单“图片”“艺术字”命令，或单击“绘图”工具栏上的“艺术字”图标，打开“艺术字库”对话框，如图5-16所示。 (3) 在“艺术字库”对话框中，选择一种艺术字的形式，单击“确定”按钮。这时将打开“编辑艺术字文字”对话框，如图5-17所示。第第5 5章章 图像和多媒体图像和多媒体 (4) 在这个对话框的“文字”编辑框中，可以键入要显示为艺术字的文本，并且可以使用“字体”、“字号”、“字形”工具栏设置文字的属性。设置完成后单击“确定”按钮，即可将艺术字插入到网页中。第第5 5章章 图像和多媒体图像和多媒体 图图5-16 使用艺术字库使用艺术字库第第5 5章章 图

22、像和多媒体图像和多媒体 图图5-17 编辑艺术字编辑艺术字第第5 5章章 图像和多媒体图像和多媒体 在插入艺术字后，FrontPage 2002将显示“艺术字”工具栏，如图5-18所示。图图5-18 “艺术字艺术字”工具栏工具栏第第5 5章章 图像和多媒体图像和多媒体 “艺术字”工具栏中各项工具的功能如下。 插入艺术字：在网页中插入艺术字。 编辑文字：修改艺术字的内容、文字属性。 艺术字库：更改艺术字的形式。 设置艺术字格式：可以设置格式的诸多属性，稍后再作介绍。第第5 5章章 图像和多媒体图像和多媒体 艺术字形状：设置艺术字的显示形状。 艺术字字母高度相同：设置高度相同的艺术字。 艺术字的竖

23、排文字：设置艺术字的排列方向。 艺术字的对齐方式：设置艺术字的各种对齐方式。 艺术字的字符间距：设置艺术字的各种字符间距。 单击“设置艺术字格式”图标，将打开“设置艺术字格式”对话框，如图5-19所示。 第第5 5章章 图像和多媒体图像和多媒体 图5-19 设置艺术字属性第第5 5章章 图像和多媒体图像和多媒体 “颜色和线条”选项卡：可以设置艺术字的颜色、透明度、填充效果、字体的轮廓线形等。 “大小”选项卡：可以设置艺术字的大小、缩放比例、旋转角度等。 “版式”选项卡：可以设置艺术字的版式，如环绕样式、定位样式等。第第5 5章章 图像和多媒体图像和多媒体 5.1.7 在网页中绘制图形在网页中绘

24、制图形 在网页中绘制图形是FrontPage 2002的新增功能，使用这个功能可用于绘制诸如流程图之类的简单图形。 在网页中绘制图形的步骤如下。 (1) 在普通“网页”视图中，将光标放在需要绘制图形的位置上。 (2) 单击“插入”菜单“图片”“绘制新图形”命令。 这时FrontPage 2002在网页上插入了一个叫“绘图画布”的绘图区域，并显示出“绘图画布”工具栏和“绘图”工具栏，如图5-20所示。第第5 5章章 图像和多媒体图像和多媒体 (3) 在“绘图”工具栏中选择需要的形状工具，如“直线”、“圆”等或者在“自选图形库”中选择需要的各种图形，以进行各种简单图形的绘制。第第5 5章章 图像和

25、多媒体图像和多媒体 图5-20 在网页中绘制图形第第5 5章章 图像和多媒体图像和多媒体 5.1.8 设置网页背景设置网页背景 上面介绍了在网页中插入图像的方法。通常以这种方法插入的图像是作为网页的前景来使用的。在网页中也可以使用背景。网页背景有两种形式：一种是使用背景颜色；另一种是使用背景图片。下面分别介绍这两种背景的设置方法。 1. 设置网页的背景颜色设置网页的背景颜色 (1) 在普通“网页”中的任意位置上，单击鼠标右键，在弹出的快捷菜单中单击“网页属性”命令，打开“网页属性”对话框，如图5-21所示。第第5 5章章 图像和多媒体图像和多媒体 图5-21 设置网页的背景颜色第第5 5章章

26、图像和多媒体图像和多媒体 (2) 在“背景”选项卡的“颜色”列表框中选择所需的背景颜色，然后单击“确定”按钮。这时，被选择的颜色就应用到了当前网页中。第第5 5章章 图像和多媒体图像和多媒体 2. 设置网页的背景图片设置网页的背景图片 Microsoft FrontPage 2002可以使用任意格式的图像文件作为网页的背景图片。 设置网页背景图片的步骤如下。 (1) 在普通“网页”视图中，单击“格式”菜单“背景”命令，或者在网页上任意位置单击鼠标右键，在快捷菜单中单击“网页属性”命令，打开“网页属性”对话框，如图5-21所示。第第5 5章章 图像和多媒体图像和多媒体 (2) 在“网页属性”对话

27、框中，单击“背景”选项卡。 (3) 在“背景”选项卡中，选择“背景图片”复选框。 (4) 单击“浏览”按钮，打开“图片”对话框，如图5-22所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-22 使用背景图片使用背景图片第第5 5章章 图像和多媒体图像和多媒体 (5) 在“图片”对话框中选择背景需要的图片，然后单击“打开”按钮。这时，背景中插入了图片，如图5-23所示。 (6) 在“背景”选项卡中选择“水印”复选框，单击“确定”按钮即可。 “水印”复选框的作用是，保持背景图片不随前景图片及文本一起移动。第第5 5章章 图像和多媒体图像和多媒体 图5-23 使用网页背景 第第5 5章章 图

28、像和多媒体图像和多媒体 5.1.9 使用使用FrontPage 2002的图像工具的图像工具 FrontPage 2002中提供了一个“图片”工具栏，专门用于在网页中对图像进行编辑，如图5-24所示。图图5-24 “图片图片”工具栏工具栏第第5 5章章 图像和多媒体图像和多媒体 “图片”工具栏中各种工具的功能如下。 插入文件中的图片：在网页中插入图片。作用与使用“插入”菜单插入图像一样。 文本：在图像中加入文本。但是要插入文本的图像必须是GIF格式。如果不是，则FrontPage 2002会自动将其转换为GIF格式。 自动缩略图：为选中的图像创建一个图像的缩略图，并在缩略图中建立一个链接到原始

29、图像的超链接。第第5 5章章 图像和多媒体图像和多媒体 绝对定位：设置图像在当前层中的绝对位置。 上移一层：将图像上移一层。 下移一层：将图像下移一层。 上移一层和下移一层，都是用于在多个图像中设置图像之间的叠放关系。 向左旋转：将图像向左旋转90。 向右旋转：将图像向右旋转90。第第5 5章章 图像和多媒体图像和多媒体 水平翻转：将图像沿垂直线对称翻转。 垂直翻转：将图像沿水平线对称翻转。 增加对比度：增加图像前景和背景之间的对比度。 降低对比度：减少图像前景和背景之间的对比度。 增加亮度：增加图像的明亮度。 降低亮度：降低图像的明亮度。 裁剪：对图像进行裁剪。通过裁剪可以删除图像中不需要的

30、部分。第第5 5章章 图像和多媒体图像和多媒体 设置透明色：可以将图像中的某种颜色设置为透明。然后无论该颜色出现何处，背景都可以透过这个颜色显示出来。在一个图像中只能有一种颜色设为透明，并且只有GIF格式的图像能设为透明色。 颜色：在“颜色”按钮下有“黑白”、“灰度”和“冲蚀”3个选项。其中“黑白”和“灰度”选项可以将图像转换为黑白或灰度模式，“冲蚀”选项的作用是降低图像的对比度并提高其亮度，常用于制作网页的背景效果。第第5 5章章 图像和多媒体图像和多媒体 凸凹效果：在图像周围制作具有凸起的、三维外观的斜面。这个功能在制作图形按钮时非常有用。 重新采样：用于重新定义图像的大小。可以在改变图像

31、大小的同时，改变图像文件的大小。第第5 5章章 图像和多媒体图像和多媒体 热点按钮：热点按钮包括“长方形” 、“圆形” 、 “多边形” 按钮，用于在图像中定义热点，并且在热点上定义超链接。 突出显示热点：用于在图像中突出显示热点。 还原按钮：取消对图像的各种编辑，还原源图像。第第5 5章章 图像和多媒体图像和多媒体 下面将结合实例介绍“图片”工具栏中部分工具的使用方法，其余工具将在以后相应的章节中介绍。 1. 使用使用“设置透明色设置透明色”工具使图像中的颜色变成透工具使图像中的颜色变成透明明 在网页中插入图像时，经常会遇到图像的背景与网页的背景不相同，插入图像与网页背景之间格格不入，如图5-

32、25中图a所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-25 图像的透明处理图像的透明处理第第5 5章章 图像和多媒体图像和多媒体 要解决这个问题，可以使用“设置透明色”工具对插入图像的背景进行透明处理，除去图像的背景颜色，使图像的前景与网页的背景融为一体。 设置图像透明色的步骤如下。 (1) 在普通“网页”视图中，单击要设置为透明的图像。 (2) 单击“视图”菜单“工具栏”命令，再单击“图片”命令，打开“图片”工具栏。 (3) 在“图片”工具栏上单击“设置透明色”图标。第第5 5章章 图像和多媒体图像和多媒体 注意，由于只有GIF格式支持透明设置，如果所选图像为其他格式，Front

33、Page会提示将文件转换为GIF格式，然后才对其进行处理。 (4) 在图形中单击要变为透明的颜色，结果如图5-25中图b所示。 注意，如果FrontPage 2002将图形从其他文件格式转换为GIF格式，那么图形中颜色的数目将会减少，并且图形文件可能变得更大。第第5 5章章 图像和多媒体图像和多媒体 2. 在在GIF图像中添加文字图像中添加文字 在FrontPage 2002中，可以使用“图片”工具栏中的“文本”工具在图像中添加文字。这是一个很有用的功能，特别是对于已经插入网页中的图像添加文字非常方便。 在图像中加入文字的步骤如下。 (1) 在普通“网页”视图中，单击需要添加文字的图像。 (2

34、) 单击“视图”菜单“工具栏”命令，再单击“图片”命令，打开“图片”工具栏。第第5 5章章 图像和多媒体图像和多媒体 (3) 在“图片”工具栏上单击“文本”图标。 (4) 这时将在选中的图像中心打开一个文本框，在文本框中键入需要出现在图像中的文字。 (5) 利用文本框的控制柄把文字放置到图像中的适当位置。 文字放置好了之后，可以像在网页中一样对图像中的文字设置“字体”属性、“段落”属性等。一个在图像中添加文字的例子如图5-26所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-26 在图像中插入文字在图像中插入文字第第5 5章章 图像和多媒体图像和多媒体 3. 创建自动缩略图创建自动缩略图

35、 当网页中包含大型的图像时，网页的下载速度是比较缓慢的。因此在设计网页时，为大型图像创建缩略图是十分必要的。缩略图是由大型图像微缩而来的，因此它可以快速、准确地显示在浏览器中。FrontPage 2002在缩略图与原始图像之间建立了超链接，单击缩略图就可以显示原始图像。第第5 5章章 图像和多媒体图像和多媒体 创建缩略图，可以先设置它的属性，具体步骤如下。 (1) 在“网页”视图中，单击需要创建缩略图的图像。 (2) 单击“工具”菜单“网页选项”命令，打开“网页选项”对话框。 (3) 在“网页选项”对话框中，单击“自动缩略图”选项卡，如图5-27所示。第第5 5章章 图像和多媒体图像和多媒体

36、图图5-27 创建自动缩略图创建自动缩略图第第5 5章章 图像和多媒体图像和多媒体 (4) 可以在“设置”文本框中为“自动缩略图”设置宽度、高度。 (5) 如果需要缩略图有边框，可以选择“边框粗细”复选框进行设置。 (6) 选择“边缘凸凹效果”复选框，可以为缩略图添加边缘凸凹效果。第第5 5章章 图像和多媒体图像和多媒体 设置完缩略图的属性后，就可以创建缩略图，具体步骤如下。 (1) 在普通“网页”视图中，单击要创建缩略图的图像。 (2) 单击“图片”工具栏上的缩略图图标 。 这时便创建了一个自动缩略图，并包含了到原始图像的超链接。 注意，如果所选的图形比缩略图小，或者已经为图形设置了超链接或

37、热点，或者图形是动画，则“自动缩略图”功能将不可用。 第第5 5章章 图像和多媒体图像和多媒体 5.2 定义图像的映射 通常把包含一个或多个热点的图形称为图像映射。换句话说，图像映射不仅可以将整个图像作为一个超链接，还可以在同一个图像中同时定义多个超链接。而热点是图形上一个分配了超链接的区域。在FrontPage 2002中，可以在图像中使用文本热点，也可以在图像中使用如长方形、圆形或多边形等几何形状作为热点。第第5 5章章 图像和多媒体图像和多媒体 1. 使用文本热点使用文本热点 (1) 在普通“网页”视图中，单击要定义映射的图像。 (2) 在“图片”工具栏中单击文本图标 。(如果选择的图像

38、格式不是GIF格式，FrontPage 2002会提示将其转换为GIF格式。) (3) 在文本框中键入作为热点的字符串，并可以设置字符串的字体、大小、颜色等，然后移动到合适的位置上。第第5 5章章 图像和多媒体图像和多媒体 (4) 选中该字符串，单击鼠标右键并在快捷菜单中单击“图片热点属性”命令。 (5) 在打开的“插入超链接”对话框的“地址”文本框中键入要链接目标的URL。 这样，文本热点就定义好了，保存网页后在浏览器中单击该文本热点就可以链接到指定的超链接目标。第第5 5章章 图像和多媒体图像和多媒体 2. 使用几何形状作为热点使用几何形状作为热点 使用几何形状作为热点与使用文本热点的方法

39、基本相同。可以使用“图片”工具栏中的“图形”工具将图形插入要定义映射的图像中，然后在图形上定义超链接即可，如图5-28所示。第第5 5章章 图像和多媒体图像和多媒体 图5-28 创建图像映射第第5 5章章 图像和多媒体图像和多媒体 5.3 多 媒 体 5.3.1 音频文件的格式音频文件的格式 音频文件有很多种格式，如音频交换文件格式AIFF(文件的类型包括：.aif、.aifc和.aiff)、Windows 媒体音频和视频文件(文件的扩展名包括.asf、.asx、.wax、.wm、.wma、.wmd、.wmv、.wvx、.wmp和.wmx)、第第5 5章章 图像和多媒体图像和多媒体 运动图像专

40、家组(MPEG，包括的文件类型有.mpeg、.mpg、.m1v、.mp2、.mpa、.mpe、.mp2v*和.mpv2)、乐器数字接口(.mid、.midi、和 .rmi)、以及MP3(.mp3和.m3u)等。下面简单介绍几种音频文件格式的特点。第第5 5章章 图像和多媒体图像和多媒体 WAV格式属于Windows的音频文件，是一种最常用的数字化音频信号。计算机可以对其进行编辑、处理和播放。 MPEG(运动图像专家组)是视频和音频的国际标准格式，文件的最大压缩率是20:1，能够生成高质量的立体声。 乐器数字接口是一种乐器文件，它使用指令和数字描述乐器、音调、时间等参数。 第第5 5章章 图像和

41、多媒体图像和多媒体 播放音乐时MIDI播放器根据指令和数字生成各种乐器的音效。这种文件的特点是以较小的文件保存音频文件。 第第5 5章章 图像和多媒体图像和多媒体 5.3.2 在网页中使用音频在网页中使用音频 网页中加入声音有两种情况：一种是在网页下载时自动播放的背景音乐；另一种是由网页浏览者控制播放的音乐。 在FrontPage 2002中为网页添加背景音乐十分方便，具体步骤如下。 (1) 在普通“网页”视图中，将插入点放在要插入视频的位置。第第5 5章章 图像和多媒体图像和多媒体 (2) 单击“文件”菜单“属性”命令，或者在网页的任意位置上，单击鼠标右键并在快捷菜单中单击“网页属性”命令，

42、这时会出现“网页属性”对话框。 (3) 单击“常规”选项卡，然后单击“背景音乐”下的“浏览”按钮。这时将打开“背景音乐”对话框，如图5-29所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-29 在网页中插入背景音乐在网页中插入背景音乐第第5 5章章 图像和多媒体图像和多媒体 (4) 选择需要的音频文件，这时文件的URL将出现在“背景音乐”下的“位置”文本框中。 (5) 在“循环次数”选框中，键入背景音乐需要播放的次数。如果选择“不限次数”复选框，则只要网页被打开，背景音乐将始终播放。 (6) 单击“确定”按钮，音乐背景就被插入到了网页中。第第5 5章章 图像和多媒体图像和多媒体 (7)

43、 保存网页后，插入的背景音乐就可以在浏览器中播放。 要删除背景音乐，可以打开“网页属性”对话框，并除去“常规”选项卡的“背景音乐”地址框中的文件名，单击“确定”按钮即可。 目前在大多数的娱乐性网站中，都提供了音乐或歌曲 库。可以在浏览网页时选择播放。创建到歌曲文件或音乐文件超链接的方法和创建一般超链接的方法相同。第第5 5章章 图像和多媒体图像和多媒体 5.3.3 视频文件的格式视频文件的格式 在网页中使用的视频文件的格式主要有Windows音频和视频文件(文件类型有.avi、.wav)、运动图像专家组(MPEG，文件类型有.mpeg、.mpg、.m1v、.mp2、.mpa、.mpe、 .mp

44、2v*和.mpv2)。其中AVI格式是一种包含音频、视频信息的数字视频文件格式。在AVI文件中，运动图像和伴音数据以交替的方式存储。 第第5 5章章 图像和多媒体图像和多媒体 因此，用这种格式读取的信息在连续性方面比较好。而MPG则是PC机上全屏幕活动视频文件的标准格式，在1024768像素的分辨率下可以每秒24、25、30帧的速率，同步播放具有128000种颜色的全运动视频图像和CD音质的伴音。第第5 5章章 图像和多媒体图像和多媒体 5.3.4 在网页中使用视频在网页中使用视频 在FrontPage 2002中可以按以下步骤插入视频。 (1) 在普通“网页”视图中，将插入点放在要插入视频的

45、位置。 (2) 单击“插入”菜单“图片”“视频”命令，打开“视频”对话框，如图5-30所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-30 在网页中插入视频在网页中插入视频第第5 5章章 图像和多媒体图像和多媒体 (3) 在“视频”对话框的“视频源”文本框中键入视频文件的地址，或单击“浏览”按钮，可以在文件系统或万维网中选中需要插入的视频文件。 (4) 单击“确定”按钮，即可将视频插入到网页中，如图5-31所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-31 插入的视频插入的视频第第5 5章章 图像和多媒体图像和多媒体 还可以为插入的视频设置属性，具体步骤如下。 (1) 用鼠标

46、右键单击“视频”，在弹出的快捷菜单上单击“图片属性”，然后再单击“视频”选项卡，如图5-32所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-32 设置视频属性设置视频属性第第5 5章章 图像和多媒体图像和多媒体 (2) 如果要在网页加载到站点访问者的Web浏览器时播放视频，可选中“打开文件时”复选框。 (3) 如果要在站点访问者的鼠标移到视频上方时播放视频，可选中“当鼠标悬停于其上时”复选框。 (4) 在“循环次数”框中，键入视频需要播放的次数。如果选择“不限次数”复选框，视频将连续播放。 (5) 可以在“循环延迟”框中设置播放之间的延迟时间。 (6) 单击“预览”按钮，可以查看插入视

47、频的播放效果。第第5 5章章 图像和多媒体图像和多媒体 上述插入视频的方法比较简单，画面也比较简洁，但是不能够控制播放。要想控制播放，也可以使用“插件”。 使用“插件”插入视频的步骤如下： (1) 在普通“网页”视图中，将插入点放在要插入视频的位置。 (2) 单击“插入”菜单“Web组件”命令，打开插入“Web组件”对话框，如图5-33所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-33 使用插件使用插件第第5 5章章 图像和多媒体图像和多媒体 (3) 在“组件类型”列表框中选择“高级控件”选项，在“选择一个控件”列表框中选择“插件”选项，单击“完成”按钮后，将打开“插件属性”对话框，

48、如图5-34所示。 (4) 单击“浏览”按钮，打开“选择插件数据源”对话框，选择要插入的视频文件即可。 一个使用“插件”在网页中插入视频的实例屏幕显示如图5-35所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-34 设置插件属性设置插件属性第第5 5章章 图像和多媒体图像和多媒体 图图5-35 网页中插入的视频网页中插入的视频第第5 5章章 图像和多媒体图像和多媒体 5.3.5 在网页中应用动画在网页中应用动画 动画是网页中经常出现的一种文件形式。在网页中常用的动画文件有GIF格式动画文件，用Flash制作的SWF格式动画文件，以及用3DMAX制作的AVI格式文件。 在网页中插入动画的步骤如下。 (1) 在普通“网页”视图中，将插入点放在要插入动画的位置。 (2) 单击“插入”菜单“Web组件”命令，打开“插入Web组件”对话框，如图5-36所示。第第5 5章章 图像和多媒体图像和多媒体 图图5-36 在网页中插入在网页中插入Flash动画动画第第5 5章章 图像和多媒体图像和多媒体 (3) 在“组件类型”列表框中选择“高级控件”