图像和多媒体.ppt

1、王会 wangh-,图像和多媒体,1.添加图像,万维网与其他网络类型（如FTP）最大的不同就在于它在网页上可以呈现丰富的色彩及图像。,1.1 添加图像img,网页中常用的图像格式：GIF格式、JPEG格式、PNG格式 语法： 在该语法中，src参数用来设置图像文件所在的地址。 实例：4-1 img.html ,img标记中常用的属性： height、width、 border、 hspace、vspace、 align、 alt,1.2 图像高度和宽度height、width,语法： 实例：4-2 height.html、4-3 width.html ,1.4 图像边框border,通过bor

2、der属性为图像添加边框。 语法： 宽度的单位是像素。 实例：4-4 border.html ,1.5 图像水平和垂直间距hspace、vspace,默认情况下，添加的图像会紧跟在文字之后，图像和文字之间的间距是可以调整的。 语法： 间距的单位是像素。 实例：4-5 hspace.html、4-6 vspace.html ,1.6 图像相对于文字基准线的对齐方式,图像的绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对于文字的对齐方式则是指图像与文字的相对位置。 语法：,1.6 图像相对于文字基准线的对齐方式,实例：4-7 align.html 图像的底端与文字的底端对齐 图像的中间与文字的

3、中间线对齐 图像的顶端与文字的顶端对齐 图像的中间线与文字的中间线对齐 图像的底端与文字的底端对齐 ,1.7 图像的提示文字alt,当图像没有装载到浏览器上时，图像的位置会显示提示文字，而下载图像以后，当鼠标停留在图像上方时也会显示出提示文字。 语法： 实例：4-8 alt.html 史密斯夫妇Mr. and Mrs. Smith ,2.动态文字,网页多媒体元素一般包括动态文字、动态图像、声音以及动画等。其中最简单的就是添加一些滚动文字。,2.1 滚动文字与图片marquee,语法：滚动的文字 只要在标记之间添加要进行滚动的文字或图片即可，文字或图片从右向左滚动。 实例：4-9 marquee

4、.html 你好，欢迎光临梦幻小屋!这里有欢乐的歌声，这里有美好的景色 ,2.2 滚动方向direction,语法：滚动文字 其中，滚动方向可以取up、down、left和right，分别表示文字向上、向下、向左和向右滚动。 实例：4-10 direction.html、4-11direction1.html 你好，欢迎您的光临 这里是梦想小屋 让我们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.3 文字的滚动方式behavior,语法：滚动文字 滚动方式共有3种，具体如下：,2.3 文字的滚动方式behavior,实例：4-12 behavior.html 你好，欢迎您的光临 让我

5、们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.4 滚动次数和速度设置loop、 scrollamount,loop参数控制滚动次数， scrollamount控制滚动速度。 语法：滚动文字 实例： 你好，欢迎您的光临 这里是梦想小屋 让我们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.5 滚动延迟scrolldelay,设置滚动文字滚动的时间间隔。单位是毫秒。 语法： 滚动文字 实例： 你好，欢迎您的光临 这里是梦想小屋 让我们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.6 滚动文字的背景bgcolor,滚动文字也可以单独设置背景色。 语法：滚动文字 实例：

6、你好，欢迎您的光临 这里是梦想小屋 让我们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.7 滚动背景面积width、height,默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽。需要时可以自行设置。 语法： 滚动文字 宽度和高度单位均为像素。 实例： 你好，欢迎您的光临 这里是梦想小屋 让我们与您分享您的点点快乐 让我们与您分担您的片片忧伤 ,2.8 设置空白空间hspace、vspace,默认情况下，滚动文字周围的文字或图像是与滚动背景紧密连接的，可以设置他们之间的空白空间。 语法： 滚动文字,练习,1、在以前的练习（文字段落格式）中添加图片，设置图片的宽度和高度，调整

7、文字和图片的水平间距和垂直间距为20个像素。 2、在以前的练习（文字段落格式）中添加另一张图片，设置边框宽度为3。 3、在以前的练习（嵌套列表）中添加图片，设置文字环绕图片，文字与图片的间距为40个像素，同时设置图片的提示文字。 4、新建html文档，输入几段文字，并加入图片，设置其滚动方向和滚动方式，不同的滚动方向和方式的文字颜色和字体不同。 5、新建html文档，输入几段文字，文字颜色为彩色，设置其滚动速度为20和延迟为300，同时设置其滚动文字的颜色。 6、在以上的练习中加入图片，设置图片和文字的间距。,3.背景音乐,作为背景音乐的可以是音乐文件，也可以是声音文件，其中最常用的是midi

8、文件。,3.1 设置背景音乐bgsound,作为背景音乐的文件有wav、mid、aiff、avi、au、mp3等,最常用的是mid文件。如果需要指定背景音乐的播放次数，可以使用loop属性。 语法： 实例：4-20 bgsound.html ,4.多媒体文件,在网页中加入音乐或视频文件，可以使单调的网页变得更加生动。如果要正确浏览嵌入了这些文件的网页，就需要在客户端安装相应的播放软件。,4.1 添加多媒体embed,网页中常见的多媒体文件包括声音文件和视频文件：midi、wav、aiff、au、mp3、swf、mpg等。 语法： 在该语法中，width和height一定要设置，单位是像素，否则

9、无法正确显示播放多媒体文件的软件。 实例：4-21 embed.html 下面是嵌入的多媒体文件： ,4.2 设置自动运行autostart,语法： 其中，true代表自动播放，false代表不自动播放。 实例：4-22 autostart.html 下面的视频文件中左边的视频文件将会自动播放，而右边的视频文件则需要手动播放： ,4.3 媒体文件的循环播放loop,语法： 其中，loop的值为true时多媒体将无限次的播放，值为false时只播放一次，也可以设置为播放次数。 实例：4-23 loop.html 下面的视频文件将循环播放： ,4.4 隐藏面板hidden,将媒体文件的声音保留而隐藏图像，这样就相当于设置了背景声音。 语法： 其中，hidden的值为true时表示隐藏面板，如果为false表示显示面板，如果要保留声音，就要设置文件的自动播放。 实例：4-24 hidden.html 下面的视频文件播放面板被隐藏： ,4.5 添加其他类型的媒体文件,除了avi媒体文件之外，在网页中还可以嵌入flash、mpeg等类型的媒体文件，方法与avi媒体文件相同。 实例：4-25 swf、mpeg.html 下面嵌入不同类型的媒体文件： ,练习,1、在以前的