网页设计与制作老虎工作室2012年12月项目四图像和媒体──编排自然风景网页任务一在网页中使用图像任务二在网页中使用媒体实训设置“火焰山”网页在网页中文本固然是传递信息的最主要形式,但图像和媒体的作用也不可小视。当今互联网之所以具有极强的吸引力,与图像和媒体的普遍应用有着密切的关系。本项目以编排自然风景网页为例,介绍使用PhotoshopCS3处理图像、使用Flash8制作动画以及在网页中插入图像和Flash动画、图像查看器和ActiveX视频的方法。任务一在网页中使用图像(一)处理图像(二)插入图像(一)处理图像需要掌握的内容主要有:1、网页中图像的作用和常用格式2、使用PhotoshopCS3处理图像网页中图像的作用基本上可分为两种情况,一种是起装饰的作用,如背景图像,另一种是起传递信息的作用,它和文本的作用是一样的。目前,网页中经常使用的图像格式是GIF和JPG。GIF格式文件小、支持透明色、下载时具有从模糊到清晰的效果,是网页中经常使用的图像格式。JPG格式为摄影提供了一种标准的有损耗压缩方案,比较适合处理照片一类的图像。1、网页中图像的作用和常用格式2、使用PhotoshopCS3处理图像需要掌握的内容有:(1)PhotoshopCS3的界面(2)创建文件的方法(3)工具箱中常用工具按钮的使用(4)设置图层样式的方法(5)保存文件的方法(6)调整图像大小的方法(二)插入图像需要掌握的内容主要有:1、插入图像2、设置图像属性3、图文混排在网页中,插入图像的方法通常有3种:(1)在主菜单中选择【插入】/【图像】命令。(2)在【插入】/【常用】面板的【图像】下拉菜单中单击(图像)按钮。(3)在【文件】/【文件】面板中用鼠标选中文件,然后拖到文档中适当位置。1、插入图像在图像【属性】面板中,比较常设置的参数有:【宽】和【高】、【替换】【垂直边距】、【水平边距】、【边框】等。2、设置图像属性在网页中,经常出现文本和图像混排的现象。在学习表格等网页布局技术之前,要做到这一点就需要用到【属性】面板的【对齐】选项,【对齐】选项调整的是图像周围的文本或其他对象与图像的位置关系。在【对齐】下拉列表中共有10个选项,其中经常用到的是“左对齐”和“右对齐”两个选项。3、图文混排任务二在网页中使用媒体(一)制作Flash动画(二)插入Flash动画(三)插入图像查看器(四)插入ActiveX视频(一)制作Flash动画需要掌握的内容主要有:1、Flash8的开始页2、Flash8的工作界面3、创建Flash文档的方法4、Flash8工具栏的使用5、设置文档属性的方法6、【库】面板和【属性】面板7、【时间轴】面板8、导出影片(二)插入Flash动画需要掌握的内容主要有:1、插入Flash动画2、设置Flash动画属性1、插入Flash动画插入Flash动画的方法通常有3种:(1)在主菜单中选择【插入】/【媒体】/【Flash】命令。(2)在【插入】/【常用】/【媒体】面板中单击(Flash)图标。(3)在【文件】/【文件】面板中用鼠标选中文件,然后拖到文档中。2、设置Flash动画属性在【属性】面板的【宽】和【高】文本框中分别输入宽度和高度,勾选【循环】和【自动播放】选项,还可以根据需要设置其他参数。需要掌握插入图像查看器的过程。1、插入图像查看器Flash占位符2、设置Flash占位符属性3、修改图像文件路径(三)插入图像查看器在主菜单中选择【插入】/【媒体】/【图像查看器】命令,打开【保存Flash元素】对话框,为新的Flash动画命名。保存文档后,在文档中插入一个Flash占位符。1、插入图像查看器Flash占位符在Flash占位符【属性】面板中定义宽度和高度等参数。2、设置Flash占位符属性右键单击Flash占位符,在弹出的菜单中选择【编辑标签object】命令,打开【标签编辑器-Object】对话框,切换至【替代内容】选项,然后在文本框内找到默认的图像文件路径名,修改图像文件路径,使其可以显示预先准备好的图像。3、修改图像文件路径(四)插入ActiveX视频需要掌握的内容主要有:1、在网页中播放WMV视频文件2、在网页中播放RM视频文件1、在网页中播放WMV视频文件(1)在主菜单中选择【插入】/【媒体】/【ActiveX】命令,系统自动在文档中插入一个ActiveX占位符。(2)在【属性】面板的【ClassID】列表文本框中添加“CLSID:22D6f312-b0f6-11d0-94ab-0080c74c7e95”,然后按下Enter键。(3)选择【嵌入】选项,然后在【属性】面板中打开【参数】对话框,添加参数。(4)最后设置宽度和高度等属性。2、在网页中播放RM视频文件(1)在主菜单中选择【插入】/【媒体】/【ActiveX】命令,系统自动在文档中插入一个ActiveX占位符。(2)在【属性】面板的【ClassID】选项中选择“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。(3)选择【嵌入】选项,然后在【属性】面板中打开【参数】对话框添加参数。(4)最后设置【宽】和【高】为固定尺寸。实训设置“火焰山”网页本项目主要介绍了处理图像、制作Flash动画以及在网页中插入图像和媒体的基本方法,本实训将让读者进一步巩固所学的基本知识。要求:把素材文件复制到站点根文件夹下,然后根据操作提示设置图像和Flash动画。制作“送孟浩然之广陵”网页制作“送孟浩然之广陵”网页项目小结本项目主要介绍了图像和媒体在网页中的应用和设置方法,概括起来主要有以下几点。•使用PhotoshopCS3处理图像的方法。•使用Flash8制作简单Flash动画的方法。•在网页中插入图像和图像占位符的方法。•通过【属性】面板设置图像属性和实现图文混排的方法。•插入常用媒体的方法,如Flash动画、图像查看器和ActiveX视频。通过对这些内容的学习,希望读者能够掌握图像和媒体在网页中的具体应用及其属性设置的基本方法。