使用图像和媒体.ppt

1、本章将介绍有关图像和媒体的基本知识及其在网页中的应用。,第4章使用图像和媒体,学习目标,了解常用图像的基本格式。 掌握插入和设置图像的方法。 掌握插入图像占位符的方法。 掌握设置网页背景的方法。 掌握插入Flash动画的方法。 掌握插入图像查看器的方法。 掌握插入ActiveX视频的方法。,4.1认识网页常用图像格式,GIF图像 JPEG图像 PNG图像,4.1.1GIF图像,GIF格式（Graphics Interchange Format，图像交换格式，文件扩展名为.gif）是由Compuserve公司提出的与设备无关的图像存储标准，也是在网页上使用最早、应用最广泛的图像格式。该格式图像具

2、有文件小、下载速度快、下载时隔行显示、支持透明色以及多个图像能组成动画的特点，是网页制作中首选的格式。由于最多只支持256色，因此适合对色彩要求不高的图像，不适合于有晕光、渐变色彩等颜色细腻的图像和照片。,4.1.2JPEG图像,JPEG格式（Joint Photographic Experts Group，联合图像专家组文件格式，文件扩展名为.jpg）是目前互联网中最受欢迎的图像格式。该格式可以设置图像质量，其图像大小由其质量的高低决定，质量越高文件越大，质量越低文件越小。在多数图像处理软件中（如Photoshop、Fireworks和Paintshop等）都可以设置JPEG文件的大小，使其

3、介于最低图像质量和最高图像质量之间。因此，该格式比较适合显示色彩较绚丽、质量要求较高的图像，如照片、油画和一些细腻、讲究色彩浓淡的图像。由于JPEG支持很高的压缩率，其图像的下载速度也非常快。,4.1.3PNG图像,PNG格式（Portable Network Graphics，便携式网络图像，文件扩展名为.png）是最近使用量逐渐增多的一种图像格式。该格式图像的优点是，在压缩方面能够像GIF格式的图像一样没有压缩上的损失，并能像JPEG那样呈现更多的颜色。而且PNG格式也提供了一种隔行显示方案，在显示速度上比GIF和JPEG更快一些。同时PNG格式图像又具有JPEG格式图像没有的透明度支持能

4、力。虽然PNG格式图像还没有普及到所有的浏览器，但在未来它有可能是一种非常受欢迎的图像格式。,4.2 在网页中应用图像,插入图像 设置图像属性,4.2.1 插入图像,插入图像主要有以下几种途径。 选择【插入记录】/【图像】命令。 在【插入】/【常用】工具栏中单击（图像）按钮或将其拖动到文档中。 在【文件】面板中选中图像并拖动到文档中。 在【资源】面板中选中图像并单击【插入】按钮或直接拖动到文档中。,图像的HTML标签格式是：“” 其中，“”是图像标签，属性“src”表示图像文件的路径，“width”表示图像的宽度，“height”表示图像的高度。,4.2.2 设置图像属性,选中图像，将显示图像

5、【属性】面板。在【属性】面板中，可以设置图像名称、大小、替换文本、边距、边框、图文混排方式等。,4.3 插入图像占位符,图像占位符作为临时代替图像的符号，是在网页设计阶段使用的重要占位工具。读者可以随意定义其大小，并且放置在预插入图像的位置，用自定义的颜色来代替图像。在有了合适的图像后，可以通过图像占位符【属性】面板的【源文件】文本框设置实际需要的图像文件，设置完毕后图像占位符将自动变成图像。 插入图像占位符的方法是，选择【插入记录】/【图像对象】/【图像占位符】命令，或在【插入】/【常用】面板的【图像】下拉按钮组单击（图像占位符） 按钮，打开【图像占位符】对话框进行设置即可。,4.4 设置网

6、页背景,设置背景颜色 设置背景图像,4.4.1 设置背景颜色,选择【修改】/【页面属性】命令，打开【页面属性】对话框，在【外观】分类中设置背景颜色,4.4.2 设置背景图像,打开【页面属性】对话框，在【外观】分类中设置背景图像和重复方式。,4.5在网页中插入媒体,插入Flash动画 插入图像查看器 插入ActiveX,4.5.1插入Flash动画,在Dreamweaver CS3中插入Flash动画的方法通常有以下3种。,选择【插入记录】/【媒体】/【Flash】命令 在【插入】/【常用】工具栏中单击 （媒体）按钮，在弹出的下拉按钮组中单击 （Flash ）按钮 在【文件】/【文件】面板中选中

7、文件，然后拖动到文档中,4.5.2插入图像查看器,插入图像查看器的方法是： 选择【插入记录】/【媒体】/【图像查看器】命令，插入Flash占位符。在文档中右键单击Flash占位符，在弹出的快捷菜单中选择【编辑标签】命令打开【标签编辑器object】对话框，切换至【替代内容】分类，在文本框内找到默认的图像文件路径名修改为现有图像的文件路径名。,4.5.3插入ActiveX,插入ActiveX来播放WMV视频格式文件的方法： 选择【插入记录】/【媒体】/【ActiveX】命令在文档中插入一个ActiveX占位符。 在【属性】面板的【ClassID】下拉列表框中添加“CLSID:22D6f312-b

8、0f6-11d0-94ab-0080c74c7e95”。 在【属性】面板中勾选【嵌入】复选框，然后单击【参数】按钮，打开【参数】对话框添加参数。,4.5.3插入ActiveX,插入ActiveX来播放RM视频格式文件的方法： 选择【插入记录】/【媒体】/【ActiveX】命令在文档中插入一个ActiveX占位符。 在【属性】面板的【ClassID】下拉列表框中添加“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。 在【属性】面板中勾选【嵌入】复选框，然后单击【参数】按钮，打开【参数】对话框添加参数。 最后设置【宽】和【高】为固定尺寸。,4.6实例设置“西湖十景”网页,通过前面各节