第5章图像和多媒体第5章图像和多媒体5.1网页中的图像和多媒体5.2定义图像的映射5.3多媒体实训五第5章图像和多媒体5.1网页中的图像和多媒体图像是网页中不可缺少的重要元素,它不仅可以装饰和美化网页,同时还可以传递信息。例如,使用图像来展示产品信息,制作商标或者公司徽标,利用图像建立站点的导航构架等。除此之外,还可以在网页中加入音频、视频以及动画等多种媒体信息。FrontPage2002提供了强大的多媒体技术支持,利用它可以方便地创建具有全新视听感觉的多媒体Web站点和网页。第5章图像和多媒体5.1.1网页中图像文件的格式图像文件有很多种格式。例如,常用的格式有JPEG、TIFF、GIF、PCX、PNG、BMP、TGA、WMF、EPS等。但是就目前来说,在网页中普遍使用的图像文件格式是GIF和JPEG两种,它们的共同特点是,适合网络传输,适用于各种浏览器。第5章图像和多媒体GIF(GraphicsInterchangeFormat)格式采用的是无损耗压缩方案,压缩时不会丢失图像信息,解压速度快。GIF支持交织的、透明的图像,这种技术在网页中非常有用。利用GIF的透明特性能够把插入到网页中的图片背景处理成透明的,以使插入图片的背景色与网页背景色相同。而交织特性可以使图像在浏览器中边加载边显示。另外,GIF格式还支持动画,它最多能够处理256种颜色。第5章图像和多媒体JPEG(JointPhotographicExpertsGroup)格式采用的是有损压缩方案,因此图像文件在压缩时会损失部分信息。不过这种压缩方案可以根据图像质量要求调整压缩比。压缩率越小,图像的品质越高,但同时图像文件也越大。JPEG格式的最大特点是支持真彩色,它能够包含多达1670万种颜色。因此常用于存储色彩要求高的图像,如人物肖像、风景名胜等摄影照片。第5章图像和多媒体另一种可以在网页中使用的图像文件是BMP(Bitmap)格式,这种格式支持224种颜色。但由于BMP是一种无压缩的格式,因此图像文件一般比较大,影响了它的传输速度,所以网页上较少使用。第5章图像和多媒体虽然能够在网页中使用的图像格式有限,但FrontPage2002却允许使用多种格式的图像文件。因为FrontPage能够将插入的其他图像文件格式转换为GIF或JPEG格式。当插入图像的颜色值大于256色时,FrontPage将其转换为JPEG格式,而小于256色时则转换为GIF格式。在FrontPage2002中可以转换的图像格式主要有PCD、PCX、PNG、EPS、TGA、WMF、TIFF、RAS等。第5章图像和多媒体5.1.2在网页中使用图像在网页中使用图像要注意,尽量不要使用很大的图像文件,单张图片的大小最好小于25 KB,如果必须使用大图片时,建议创建图片的缩略图。如果在一个网页中插入多个图片,则所有图片的大小之和最好不要超过30 KB,以免导致下载时间过长。第5章图像和多媒体1.在网页中插入图像(1)在普通“网页”视图中,将光标放在需要插入图像的位置。(2)单击“插入”菜单→“图片”→“来自文件…”命令,打开如图5-1所示的“图片”对话框。第5章图像和多媒体图5-1在网页中插入图像第5章图像和多媒体(3)单击“图片”对话框中的“查找范围”下拉列表框,从本地文件系统或者Web站点浏览到所需的图形,单击所需的图片,再单击“确定”按钮。这时图像已经插入到网页中。(4)单击“常用”工具栏上的“保存”按钮,这时会打开“保存嵌入式文件”对话框,如图5-2所示。第5章图像和多媒体图5-2保存图像文件第5章图像和多媒体(5)要将图像保存在当前站点的根目录中,可以在“保存嵌入式文件”对话框中,单击“确定”按钮。(6)要把图像文件保存在当前站点的images文件夹中,可以单击“更改文件夹”按钮,在打开“更改文件夹…”对话框中,选择该文件夹,然后单击“确定”按钮,如图5-3所示。第5章图像和多媒体图5-3更改文件夹第5章图像和多媒体(7)如果不想将图片保存到当前的站点中,可以在“保存嵌入式文件”对话框中,单击“设置操作…”按钮,打开“设置操作…”对话框,选择“不保存”单选框,单击“确定”按钮,如图5-4所示。第5章图像和多媒体图5-4选择保存方式第5章图像和多媒体(8)再单击“确定”按钮退出“保存嵌入式文件”对话框。注意,如果选择不将图形保存到当前Web站点时,会在网页上创建一个对其他Web站点上的图形的引用。不过,如果该图形从其他Web站点中或文件夹中删除了,就再也无法在当前的网页中看到该图形。第5章图像和多媒体2.在网页中插入万维网站点中的图像(1)在普通“网页”视图中,将插入点放在要插入图形的位置。(2)单击“插入”菜单→“图片”→“来自文件…”命令,打开如图5-1所示的“图片”对话框。(3)单击“搜索站点”图标并导航到包含图形的网页。(4)用鼠标右键单击选中的图形,再单击快捷菜单上的“复制”命令。第5章图像和多媒体(5)切换回MicrosoftFrontPage2002。(6)再次用鼠标右键单击,并从快捷菜单上选择“粘贴”,把图形直接插入到网页中。第5章图像和多媒体5.1.3创建图片库图片库是指包含图形集的网页。通常图形集中的图形是按照某种顺序和规律布局的。创建图片库是FrontPage 2002新增的功能,利用这个功能创建图片库十分方便,具体步骤如下。(1)在普通“网页”视图中,将插入点放在要插入图片库的位置上。(2)单击“插入”菜单→“Web组件…”命令,打开“插入Web组件”对话框,如图5-5所示。第5章图像和多媒体图5-5创建图片库第5章图像和多媒体(3)在“插入组件列表框”中选择图片库,在“选择图片库选项”列表框中,选择需要的图片集版式,单击“完成”按钮,就可以在指定的位置上插入图片库。FrontPage2002有4种图片库布局的样式。横排版式:在网页上按水平方式排列图片。横排版式能够自动创建图像的缩略图,并可在每幅图像的下面包含说明文字。第5章图像和多媒体蒙太奇版式:在网页上按蒙太奇版式排列图片。蒙太奇版式能够自动创建图像的缩略图,缩略图以拼贴画模式排列,当鼠标停留在图像上时,将显示图像的说明文字。幻灯片版式:在网页上以幻灯片版式排列图片。幻灯片版式能够自动创建图像的缩略图,缩略图按行排列,并可上下滚动。竖排版式:在网页上垂直排列图片。竖排版式能够自动创建图像的缩略图,缩略图按列排列,说明文字放在图像的右侧。第5章图像和多媒体(4)创建图片库之后还需要在图片库中加入图片。加入图片的方法是,在图片库上单击鼠标右键,在快捷菜单中单击“图片库属性”命令,打开“图片库属性”对话框,如图5-6所示。(5)单击“图片”选项卡,再单击“添加”按钮,选择“图片来自文件”,将显示“打开”对话框,如图5-7所示。第5章图像和多媒体图5-6把图片添加到图片库第5章图像和多媒体图5-7选择图片加入图片库第5章图像和多媒体(6)在“打开”对话框中,从指定的位置选择需要的图像,然后单击“打开”按钮,即可将图片添加到图片库中。(7)在“缩略图大小”选择框中,可以指定缩略图的大小。(8)在“标题”文本框中键入需要的文字,并且可以为文字选择合适的字体格式。(9)单击“编辑…”按钮,可以打开“编辑图片”对话框,如图5-8所示。第5章图像和多媒体图5-8编辑图片库中的图片第5章图像和多媒体(10)要改变图片在网页中的布局样式,可单击“布局”选项卡,如图5-9所示。从中选择新的布局样式,再单击“确定”按钮即可。创建好的图片库网页如图5-10所示。第5章图像和多媒体图5-9更改图片库布局第5章图像和多媒体图5-10创建好的图片库网页第5章图像和多媒体5.1.4在网页中使用剪贴画FrontPage2002附带了一个Microsoft剪辑管理器剪贴画库,其中包含图画、照片、声音、视频和其他媒体文件(统称为剪辑)。要在网页中使用剪贴画库,可按以下步骤进行。(1)在普通“网页”视图中,将光标放在需要插入剪贴画的位置上。第5章图像和多媒体(2)单击“插入”菜单→“图片”→“剪贴画…”命令,打开如图5-11所示的“插入剪贴画”任务窗口。(3)在“插入剪贴画”任务窗口中,可以在“搜索范围”列表框中选择要搜索的范围;在“结果类型”列表框中选择要搜索的文件类型。然后单击“搜索”按钮开始搜索。也可以在“搜索文字”文本框中键入要搜索的文件名,然后单击“搜索”按钮。第5章图像和多媒体(4)在“结果”列表中单击要插入的剪贴画,然后在弹出的快捷菜单中选择“插入”命令,即可插入选中的剪贴画。在“插入剪贴画”任务窗口中,单击“剪辑管理器”,可打开“Microsoft剪辑管理器”对话框,如图5-12所示。第5章图像和多媒体图5-11“插入剪贴画”任务窗口第5章图像和多媒体图5-12使用“Microsoft剪辑管理器”第5章图像和多媒体可在“Microsoft剪辑管理器”中浏览、剪辑收藏集,添加剪辑。单击“网上剪辑”即可链接到http//dg1.Microsoft.com站点,并可下载更多的剪辑文件。第5章图像和多媒体5.1.5设置图片的属性在网页中插入图像之后,还可以对图像的某些属性,例如图像文件的类型、图像的分辨率、图像的尺寸等进行设置。为了设置图像的各种属性,先要打开“图片属性”对话框。在普通“网页”视图中,单击要设置属性的图像,然后单击鼠标右键,在快捷菜单中单击“图片属性…”命令,即可打开“图片属性”对话框,如图5-13所示。在“图片属性”对话框中,有“常规”、“外观”和“视频”三个选项卡。下面先介绍选项卡中的各项设置。第5章图像和多媒体图5-13设置图像的常规属性第5章图像和多媒体1.“常规”选项卡“常规”选项卡中包含以下可以设置的属性。①“图片源”:显示图片的位置。如果图片来自万维网,则显示图片的绝对URL地址和文件名;如果图片位于当前Web站点上,则显示图片的相对URL和文件名;如果图片在本地的文件系统中,则显示文件的路径和文件名。使用“浏览…”按钮,可以选择其他图片来替换现有的图片。单击“编辑”按钮,将根据图像的文件类型启动默认的编辑器,如MicrosoftImageComposer或MicrosoftPhotoDraw。第5章图像和多媒体②类型:可以将所选择的图片格式设置为GIF或JPEG。③替代表示:设置在浏览器中下载主要图像时以一个低分辨率图像显示,或者在图像的位置上,以文本代替图像,目的是为了提高网页的下载速度。但是替代文本应该能够表达图像的含义。④默认超链接:可以定义一个与图像相关联的超链接。当在浏览器中单击图像时,这个超链接就被加载了。第5章图像和多媒体2.“外观”选项卡“外观”选项卡(如图5-14所示)中包含以下可以设置的属性。①环绕样式:可以设置图像与文本的相对位置关系。②布局:设置图像在网页中的位置。其中包含以下4个选项。●对齐方式:定义图片与周围文字之间的对齐方式。第5章图像和多媒体图5-14设置图像的外观属性第5章图像和多媒体●边框粗细:为图像设置边框。边框的宽度以像素为单位,可以在选择框中键入所需的边框宽度,边框的颜色将默认为当前超链接的颜色。●水平间距和垂直间距:设置图像与周围其他元素之间的距离。③大小:设置图像出现在浏览器中的大小。可以用像素或者百分比为单位设置图像的宽度和高度。在改变图像尺寸时,建议选择“保持纵横比”复选框。第5章图像和多媒体3.“视频”选项卡“视频”选项卡(如图5-15所示)中包含以下可以设置的属性。第5章图像和多媒体图5-15设置图片视频属性第5章图像和多媒体①视频源:设置要加入网页的视频文件的路径和文件名,或者使用“浏览…”按钮选择视频文件。②重复:定义视频在浏览器中播放的方式。●循环次数:设置视频重复播放的次数。●循环延时:设置视频在循环过程中浏览器的等待时间。③开始:设置视频在打开文件时播放,或者当鼠标移动到视频上时开始播放。第5章图像和多媒体5.1.6在网页中绘制图形,插入艺术字在FrontPage2002中,新增了一些很有用的功能,如插入自选图形、艺术字,绘制新图等。在F