第9章网页设计——多媒体

,*,- ,标记用来创建定义列表；,-,标记用来创建列表中的上层项目，此标记只能在,标记中使用。显示时,标记定义的内容将左对齐；,-,标记用来创建列表中的下层项目，此标记也只能在,标记中使用。显示时,标记定义的内容将相对于,标记定义的内容向右缩进。,Third level,Fourth level,Fifth level,Click to edit Master title style,第九章 网页中的多媒体应用,清华大学出版社,主要内容,重点掌握,标记和,标记,了解插入背景音乐标记,及其属性,掌握插入各种多媒体标记,及其属性,掌握采用超链接标记,插入多媒体文件的方法,9.1,图片,9.1.1,插入图片标记,IMG,高质量的图片一般用,TIFF,格式保存，但其图片体积过大，不太适合网络传输。,不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。,网页中常用的图片格式为,GIF,、,JPEG,和,PNG,。,一般在网页设计中选择的图片不要超过,8KB,，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。,如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。,在,HTML,文档中，显示图片所用的标记是,。,9.1.1,插入图片标记,IMG,基本语法：,9.1.1,插入图片标记,IMG,语法说明：,-,img,是插入图片的标记，其常用属性如表,9-1,。其中,src,是其必须的属性；,-,src,属性用来指定图像源，即图像的,URL,路径。该路径可以是相对路径，,也可以是绝对路径。,的属性,功能说明,src,指定图像源，即图像的,URL,路径,width,指定图像的显示宽度,height,指定图片的显示高度,hspace,指定图片的水平间距,vspace,指定图片的垂直间距,align,指定图片的对齐方式,border,指定图片的边框大小,alt,显示图像的说明文字,9.1.1,插入图片标记,IMG,示例代码,插入图片示例,使用绝对路径指定图像路径,9.1.1,插入图片标记,IMG,程序,9-1,采用,标记插入了两幅图片，其执行效果如图,9-1,所示。,其,src,属性分别采用了相对路径和绝对路径。,9.1.2,指定图像的高与宽,默认情况下，在,HTML,页面中显示的是图像的原始大小。,如果要显示指定的图像大小，就需采用,img,标记的,width,和,height,属性。,基本语法：,9.1.2,指定图像的高与宽,语法说明：,-,width,和,height,的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比；,-,在,width,和,height,属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。,9.1.2,指定图像的高与宽,示例代码：程序,9-2,分别采用绝对大小和相对大小的方式设置了同一幅图片的,width,属性，其,height,属性的设置方法和此例类似。,图片高和宽的设置,9.1.2,指定图像的高与宽,程序,9-2,的执行效果如图,9-2,所示。,已知原图大小为,600px*404px,。第一个图像设置宽为,300px,，所以，其为原图的四分之一大小。第二个图设置为,50%,，可明显看出其宽度为显示窗口宽度大小的二分之一。,9.1.3,指定图像的间距,标记的,hspace,和,vspace,属性分别用来指定图像的水平间距和垂直间距。,其值为数字，单位为,px,，默认值为,0,。,9.1.3,指定图像的间距,基本语法：,语法说明：,-,hspace,指的是所设置图片与相邻元素的水平间距；,-,vspace,指的是所设置图片与相邻元素的垂直间距。,9.1.3,指定图像的间距,示例代码, ,图像间距说明, ,图像间距示例, ,未指定图像间距, , , ,指定图像水平间距, , , ,指定图像垂直间距, , , ,指定了水平与垂直间距, ,9.1.3,指定图像的间距,程序,9-3,的执行效果如图,9-3,所示。,程序,9-3,通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。,9.1.4,指定图像的对齐方式,标记的,align,属性用来指定图像与周围元素的对齐方式。其取值如表,9-2,所示。,align,的取值,取值说明,left,在水平方向上向上左对齐,center,在水平方向上向上居中对齐,right,在水平方向上向上右对齐,top,图片顶部与同行其他元素顶部对齐,middle,图片中部与同行其他元素中部对齐,bottom,图片底部与同行其他元素底部对齐,absbottom,图片的底部与同行最低元素的底部对齐，常用于,Netscape,浏览器,absmiddle,图片的中部与同行最大元素的中部对齐，常用于,Netscape,浏览器,baseline,图片的底部与文本基准线对齐，常用于,Netscape,浏览器,texttop,图片的顶部与同行最高元素的顶部对齐，常用于,Netscape,浏览器,9.1.4,指定图像的对齐方式,基本语法：,语法说明：,-,与其他元素不同的是图像的,align,属性既包括水平对齐方式，又包括垂直对齐方式；,- align,的默认值为,bottom,。,9.1.4,指定图像的对齐方式,示例代码, ,水平对齐方式, ,水平对齐示例, , ,默认,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。, ,左对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。, ,居中对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。, ,右对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。,9.1.4,指定图像的对齐方式,程序,9-4,在一个表格内设置了图像,align,属性的水平对齐方式，并与未设置时的默认状态进行了比较。,程序,4-4,的执行效果如图,4-4,所示。比较可见，水平对齐均是水平方向向上对齐。,9.1.4,指定图像的对齐方式,示例代码, ,垂直对齐方式, ,垂直对齐示例, , ,默认,春天来了，我还含苞欲放。,春,天来了，我要绽放，开出漂亮的朵朵鲜花。, ,顶部对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。, ,居中对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。, ,底部对齐,春天来了，我还含苞欲放。,春天来了，我要绽放，开出漂亮的朵朵鲜花。,9.1.4,指定图像的对齐方式,程序,9-5,的执行效果如图,9-5,所示。,程序,9-5,在一个表格内设置了图像,align,属性的垂直对齐方式，并与未设置时的默认状态进行了比较。,9.1.5,指定图片的边框与文字说明,标记的,border,属性和,alt,属性分别用来指定图像的边框和图像文字说明。,基本语法：,9.1.5,指定图片的边框与文字说明,语法说明：,- border,的值用数字表示，默认单位为,px,；,-,默认情况下图片没有边框，即,border=0,；,-,图片边框的颜色不可调整，默认为黑色。当图片作为超,链接使用时，图片边框的颜色和文字超链接的颜色一,致，默认为深蓝色；,-,图片的,alt,属性用于对图片信息进行描述。在浏览器中,当图片无法正常显示时，在图片位置显示该描述信息。,当图片可以正常显示时，当鼠标放在图片上面时才显示,该描述信息；,- alt,属性可在,Web,浏览器不支持图像显示或用户关闭图像,下载功能时，告诉用户该处是一幅什么样的图像。,9.1.5,指定图片的边框与文字说明,示例代码, ,9.1.5,指定图片的边框与文字说明,程序,9-6,的执行效果如图,9-6,所示。,9.1.5,指定图片的边框与文字说明,据图,9-6,所示比较可以发现：,第一幅图由于路径错误而未能显示，其,alt,属性的值就显示到图像所在的位置，而后三幅图像只有当鼠标放到图像位置时才显示,alt,属性的值。,前两幅图像的边框属性,border,没有设定，所以默认边框宽度为,0,；后两幅图像的边框为,5px,。,第三幅图像的边框颜色默认为黑色；而第四幅图像被设为图像超链接，其颜色为蓝色。,9.2,滚动文字,插入滚动文字所用的标记是, . ,。其常用属性参数设置如表,9-3,所示。,属性,属性功能说明,属性的取值,各属性值的功能,behavior,设置文字的滚动方式,scroll,循环滚动（默认值）,slide,滚动一次停止,alternate,来回交替滚动,direction,设置文字的滚动方向,left,由右向左滚动（默认值）,right,有左向右滚动,up,由下向上滚动,down,由上向下滚动,bgcolor,设置滚动文字的背景颜色,英文颜色名称,表示所用颜色,#,rrggbb,表示所用颜色,width,和,height,设置滚动背景的宽和高,数字,设置背景的绝对面积,相对百分比,设置背景相对浏览器窗口的大小,hspace,和,vspace,设置滚动文字背景和周围其他元素的空白间距,数字,设置背景和周围其他元素的绝对间距,loop,设置滚动文字的循环次数,正整数,n,文字滚动,n,次,infinite,文字滚动无限次（默认值）,scrollmount,设置滚动文字每次移动的距离,数字,文字每次移动的距离,scrolldelay,设置滚动文字每次滚动后的间歇时间,数字（默认单位,ms,）,滚动文字每次滚动后的间歇时间,9.2,滚动文字,基本语法：,语法说明：,-,将要添加效果的文字放到,标记之间，同时也可以设置文字的字体、大小和颜色；,-,表,9-3,的各种属性为可选参数，根据需要可插入,标记之间；,-,默认情况下滚动背景的面积和文字等高，和浏览器等宽。设置绝对大小时默认单位为,px,；,-,默认情况下,hspace,和,vspace,的值为,0,，默认单位为,px,。,滚动文字内容,9.2,滚动文字,示例代码, ,公,&,nbsp,;,&,nbsp; ,;,告, , ,&,nbsp;&n,bsp,;,学校将于近期举办校园卡拉,OK,大赛，报名截,止日期,10,月,12,日，报名处在班文艺委员处，希望同,学们勇跃参加。, , ,9.2,滚动文字,程序,9-7,把滚动文字放到表格内，并根据表,9-3,对其相关属性进行了设置。,程序,9-7,的执行效果如图,9-7,所示。,9.3,背景音乐,除了使用图片和滚动文字外，也可以使用音频、视频、,Flash,等给浏览者创造氛围，使他们喜欢上你的网站。,背景音乐是它们中的一种，该设置在网页中不显示播放软件面板。,设置背景音乐的标记为,，其参数设定不多，可播放的声音文件格式包括,WAV,、,AU,、,MIDI,、,WMV,、,MP3,等。,9.3,背景音乐,基本语法：,语法说明：,-,src,指定声音文件的,URL,来源，即其路径，为必选属性；,- loop,指定声音文件的循环播放次数，其值为正整数可,指定播放次数，值为,-1,或,infinite,指定循环播放无限次。,9.3,背景音乐,示例代码,插入背景音乐示例, ,菊花,&,nbsp,;,飒飒西风满院栽，,&,nbsp,;,蕊寒香冷蝶难来。,&,nbsp,;,他年我若为青帝，,&,nbsp,;,报与桃花一处开。, ,9.3,背景音乐,程序,9-8,在头部通过,CSS,设置了背景图像及其重复方式和位置，在体部内通过,设置了背景音乐,music.mp3,，循环次数为无限次。,程序,9-8,的执行效果如图,9-8,所示。,9.4,其他多媒体文件,使用,标记只能添加声音文件，而且也不能显示和调整播放软件的控制面板。,使用,标记则可以插入各种各样的多媒体，如,WMV,、,MP3,、,AVI,、,SWF,、,MOV,、,RMVB,等格式的多媒体文件。,还可以采用超链接标记,将多媒体文件放到网页上，这样，当浏览者点击超链接时，浏览器会将这个多媒体文件先下载到浏览者的机器硬盘上，再调用相应的播放程序播放。,基本语法：,9.4,其他多媒体文件,语法说明：,-,src,指定多媒体文件的,URL,来源，即其路径，为必选属,性；,- loop,指定声音文件的循环播放次数，值为,true,可循环播,放无限次，值为,false,只播放一次，,false,为默认值；,-,autostart,指定对媒体文件在下载完后是否自动播放；,- width,和,height,分别指定多媒体窗口的宽和高。值都为,0,时类似背景音乐可隐藏面板；,- type,指定多媒体的播放类型；,-,pluginspage,指定插件页面。,9.4,其他多媒体文件,示例代码,插入音频或视频文件, ,插入,flash,文件, , , ,9.4,其他多媒体文件,程序,9-9,实现了在页面内插入自动播放无限次的音频,music.mp3,，也实现了插入,Flash,文件,2.swf,。,程序,9-9,的执行效果如图,9-9,所示。,9.4,其他多媒体文件,示例代码,程序,9-10,采用超链接插入了多媒体文件,music.mp3,，其在网页当中只显示超链接文字，而无播放软件面板，在点击超链接之后才调用相应的播放程序播放。, ,music.mp3,9.4,其他多媒体文件,程序,9-10,的执行效果如图,9-10,所示。,当用鼠标单击超链接,music.mp3,后，在网页外打开播放软件开始播放该音乐。,9.5,小实例,综合本章知识，以前面实例为基础写的小实例程序,9-11,见光盘。该实例实现了背景音乐、图片、,Flash,及滚动文字在页面的插入。同学们可以根据前面的讲解对其加以分析。,请从光盘中运行之。,小结,本章主要介绍了插入图片标记,及其属性、插入滚动文字标记,及其属性、插入背景音乐标记,及其属性、插入各种多媒体标记,及其属性、采用超链接标记,插入多媒体文件等内容。,这些技术对于丰富网页内容、吸引浏览者光顾网站等有很重要的作用，所以，对这些标记及其属性的使用应特殊掌握。,Thank You !,