3多媒体元素的创建.docVIP

第三讲 多媒体元素的应用 【教学内容】 网页中多媒体元素的应用 网页中多媒体元素的HTML分析 【教学目的】 掌握Dreamweaver图片、动画的插入方法 掌握图像标记的应用 理解动画及音视频标记，了解其使用方法。 【教学重、难点】 重点：Dreamweaver中图片、动画的应用，img标记的使用。 难点：flash及音视频标记 【教学方式】 采取讲授、讨论和案例分析相结合的方式。 【教学】 一、简单个人网页分析 图2-3-1 简单个人网页效果图 ??? 问题1：该网页和上节课的网页有什么不同？ 上次课示例网页只有文字 本节课示例中网页不仅有文字还有图像和动画等多媒体元素的应用。 ??? 问题2：网页中图像运用的格式是说明。 ??? 问题3：网页中图像的嵌入方式是什么？是把图像变成代码嵌套在网页中呢？还是做一个图像链接，从而保证网页能把对应位置的图像显示出来？如果是后者，网页中图像的路径应该如何确定。 ??? 问题4：这些元素是如何应用到网页中的呢？ 二、网页中图像的应用 1.Dreamweaver中图像的应用 网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像，否则便使测览者觉得索然无味。 在示例网页中插入了我的照片，其操作步骤如下： （1）光标定位在“一、自我介绍”文字上方，点击常用插入栏中的“”按钮，如图如下： 图2-3-2 （2）在弹出的对话框中选择“我的照片”，如图2-3-3所示。 图中1区域选择显示了插入的图像名称及即网页中常用图像的格式。 网页中图像基本格式： 图像在网页中具有画龙点睛的作用，它能装饰网页，表达个人的情调和风格。但在网页上加入的图片越多，浏览的速度就会受到影响导致用户失去耐心而离开页面。网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件，其中使用最广泛主要是GIF和JPEG两种格式。 GIF格式是由Compuserve公司提出的与设备无关的图像存储标准，也是Web上使用最早、应用最广泛的图像格式，GIF是通过减少组成图像每个象素的储存位数和LZH压缩存储技术来减少图像文件的大小。DIF格式最多只能是256色的图像。GIF具有图像文件短小、下载速度快、低颜色数下GIF比JPEG装载的更快、可用许多具有同样大小的图像文件组成动画，在GIF图像中可指定透明区域，使图像具有非同一般的显示效果。 JPEG格式是在目前Internet中最受欢迎的图像格式，JPEG可支持多达16M颜色，它能展现十分丰富生动的图像，还能压缩。但压缩方式是以损失图像质量为代价，压缩比越高图像质量损失越大，图像文件也就越小。流行的Windows支持的位图BMP格式的图像一般情况下，同一图像的BMP格式的大小是JPEG格式的5至10倍。而GIF格式最多只能是256色，因此载入256色以上图像的JPEG格式成了Internet中最受欢迎的图像格式。 当网页中需要载入一个较大的GIF或JPEG图像文件时，装载速度会很慢。为改善网页的视觉效果，可在载入时设置为隔行扫描。隔行扫描在显示图像开始看起来非常模糊，接着细节逐渐添加上去直到图像完全显示出来。 图像的2区域显示了图像相对于当前文档的路径，即相对路径。 图2-3-3 （3）点击图2-3-3中的确定按钮，在弹出的对话框中输入替换文本即可把图像插入到网页中，效果如图2-3-4所示。 图2-3-4 （4）选中图像，在下面属性面板中设置图像属性，方法如图2-3-5，到此图像的插入完全结束。 图2-3-5 2.图像标记分析 （1）点击状态选项卡，把网页切换的拆分（混合）视图模式。选中设计视图中的“我的照片”，观察对应代码视图中的HTML标签。如图2-3-6所示。 图2-3-6 （2）代码视图中对应的HTML标记为：img src=images/lqm.jpg alt=我的个人照片 width=163 height=206 align=right （3）图片标记的基本语法结构如下：img 属性1=值1? 属性2=值2 … 属性n=值n，其中图像标记的属性及其取值范围如下表：　 属性 属性名称 取值范围 对齐方式 align top|middle|center|bottom|left|right 名称 name 合法字符串 指向 src url，图片所在地址 图片标题 title 文本，鼠标放上的文字 文本 alt 文本，当图片不显示时显示的替代文字 边框 border n 高 height n 宽 width n 左右边框 hspace n 上下边框 vspace n … … … 三、网页中其他多媒体元素的应用 1.Dreamwea