第5章图像和多媒体

第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