前端第3讲 在网页中多媒体内容.pptxVIP

第3讲 在网页中插入多媒体内容3.1 网页中常用的图片格式3.2 在网页中使用img插入图片3.3 使用object嵌入Flash动画3.4 使用embed嵌入多媒体内容3.5 使用video嵌入多媒体内容3.6 使用audio嵌入音频3.1 网页中的常用图片格式GIF（Graphics Interchange Format，图形交换格式）最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如站点图标、导航条等。JPEG（Join Photograph Graphic，联合图像专家组标准) 又称JGP，用来显示照片等颜色丰富的精美图像PNG（Portable Network Graphics，可移植网络图形）既融合了GIF格式透明显示的颜色，又具有JPEG处理精美图像的优势，是逐渐流行的网络图像格式3.2 在网页中插入图片1. 在网页中使用img标签插入图片基本语法： img src=”图片文件路径”语法说明: src属性指定需要插入的图片文件路径，为必设属性。 此时插入的一张原始的图片，图片的各个样式保持默认 效果。图片默认样式可通过CSS或img标签属性来修改， img元素的常用属性如下： 在网页中插入一张原始大小的图片:2.文件路径设置图片路径示例：绝对路径：指文件的完整路径文件相对路径：指相对于当前文件的路径文件相对路径有以下几种：图片相对路径设置：同一目录，只需输入要图片文件的名称下一级目录， 需在图片文件名前添加“下一级目录名/”上一级目录，需在图片文件名前添加“../”①图片文件和当前文件在同一目录下②图片文件在当前文件的下一级目录③图片文件在当前文件的上一级目录3. 使用img标签属性可以设置图片大小基本语法： img src=图片文件路径 width=宽度 height=高度语法说明: 宽度和高度为某个数值，单位是像素。两个属性可以同时 设置，也可以只设置其中一个。当只设置其中一个属性值 时，另一个属性值会等比缩放。 建议使用CSS设置图片大小使用标签属性设置图片大小：原图宽、度都为98px4. 使用img的title和alt属性设置图片的提示信息和替换信息图片提示信息，指用户将鼠标移到图片上时弹出图片的信息；替换信息，指因浏览器加载慢或者其他原因导致图片不显示时，在图片位置处显示图片的信息。基本语法： img src=图片路径 title=图片描述信息 alt=图片替换信息语法说明: 图片描述信息和替换信息可以包括空格、标点以及一些 特殊字符。在实际使用时，title和alt属性的值通常会设 置一样。为了提高友好性，alt属性一般都需要设置，而 title属性可选。设置图片的提示信息和替换信息：3.3 使用object嵌入Flash动画Object标签可用于windows IE3.0及以后浏览器或者其它支持ActiveX控件的浏览器，主要用于在网页中嵌入Flash动画(注：Firefox不支持object)基本语法： object及param常用属性： 属 性描 述classid设置浏览器的ActiveX控件codebase设置 ActiveX控件的位置，如果浏览器没有安装，会自动下载安装data在嵌套的object标签中指定嵌入的多媒体文件名type嵌套的object标签中设置媒体类型，对动画的类型是：application/x-shockwave-flashheight以百分比或象素指定嵌入对象的宽度width以百分比或象素指定嵌入对象的宽度name设置参数名称value设置参数值movie指定动画的下载地址quality指定嵌入对象的播放质量wmode设置嵌入对象窗口模式，可取：window|opaque|transparent，其中，window为默认值，表示嵌入对象始终位于html的顶层，opaque允许嵌入对象上层可以有网页的遮挡，transparent设置flash背景透明object标签使用示例：embed标签可用于在网页中嵌入flash动画、音频和视频等多媒体内容(注：Firefox不支持embed)基本语法： embed src=file_url/embed语法说明：src属性指定多媒体文件，这是一个必设属性。多媒体文件的格式可以是mp3、mp4、swf等。 3.4 使用embed嵌入多媒体内容embed常用属性： 属 性描 述src指定嵌入对象的文件路径width以像素为单位定义嵌入对象的宽度height以像素为单位定义嵌入对象的高度loop设置嵌入对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是falsehidden设置多媒体播放软件的可视性，默认值是false，即可见type定义嵌入对象的MIME类型embed标签使用示例：v