html图片和多媒体

1、 图片和多媒体文件的使用上节回顾上节回顾 表格的基本组成部分表格的基本组成部分 表格的简单应用表格的简单应用 利用表格进行排版利用表格进行排版第第19章章 图片和多媒体文件的使用图片和多媒体文件的使用 本章主要内容本章主要内容19.1 图片图片19.2 滚动文字滚动文字19.3 插入多媒体文件插入多媒体文件19.4 添加背景音乐添加背景音乐19.5 小实例小实例综合设置图片和多媒体综合设置图片和多媒体19.6 习题习题19.1 图片图片19.1.1 网页的图片格式网页的图片格式19.1.2 插入图片插入图片19.1.3 添加图片的提示文字添加图片的提示文字alt19.1.4 设置图片的宽度和高

2、度设置图片的宽度和高度width/height19.1.5 设置图片边框设置图片边框border19.1.6 设置图片对齐方式设置图片对齐方式align19.1.7 设置图片的间距设置图片的间距hspase/vspase19.1.8 设置图片链接设置图片链接19.1.1 网页的图片格式网页的图片格式1GIF格式格式2JPEG格式格式3PNG格式格式19.1.2 插入图片插入图片 基本语法19.1.2 插入图片插入图片 语法说明 img标记的作用就是插入图片，该标记含有多个属性，其中src属性为必要属性，其他属性将在后面几节内容中逐个介绍。 src属性用来指定图片文件所在的路径，这个路径可以是相

3、对路径，也可以是绝对路径。19.1.2 插入图片插入图片 实例代码19.1.2 插入图片插入图片 网页效果19.1.3 添加图片的提示文字添加图片的提示文字alt 基本语法基本语法 19.1.3 添加图片的提示文字添加图片的提示文字alt 语法说明语法说明 alt属性的提示文字可以是中文也可以是英文。19.1.3 添加图片的提示文字添加图片的提示文字alt 实例代码实例代码19.1.3 添加图片的提示文字添加图片的提示文字alt 网页效果网页效果19.1.4 设置图片的宽度和高度设置图片的宽度和高度width/height 基本语法基本语法 19.1.4 设置图片的宽度和高度设置图片的宽度和高

4、度width/height 语法说明语法说明 图片高度和宽度的单位可以是像素，也可以是百分比。 如果在使用的宽度和高度属性中，只设置了宽度或高度中的一个属性，那么另一个属性会按原始图片宽高等比例显示。但是如果两个属性没有按原始大小的缩放比例设置，图片很可能变形。19.1.4 设置图片的宽度和高度设置图片的宽度和高度width/height 实例代码实例代码19.1.4 设置图片的宽度和高度设置图片的宽度和高度width/height 接上页接上页19.1.4 设置图片的宽度和高度设置图片的宽度和高度width/height 网页效果网页效果19.1.5 设置图片边框设置图片边框border 基

5、本语法基本语法 19.1.5 设置图片边框设置图片边框border 语法说明语法说明 value为边框线的宽度，用数字表示，单位为像素。19.1.5 设置图片边框设置图片边框border 实例代码实例代码19.1.5 设置图片边框设置图片边框border 接上页接上页19.1.5 设置图片边框设置图片边框border 网页效果网页效果19.1.6 设置图片对齐方式设置图片对齐方式align 基本语法基本语法 19.1.6 设置图片对齐方式设置图片对齐方式align 语法说明语法说明19.1.6 设置图片对齐方式设置图片对齐方式align 实例代码实例代码19.1.6 设置图片对齐方式设置图片对

6、齐方式align 接上页接上页19.1.6 设置图片对齐方式设置图片对齐方式align 网页效果网页效果19.1.7 设置图片的间距设置图片的间距hspace/vspace 基本语法基本语法19.1.7 设置图片的间距设置图片的间距hspace/vspace 语法说明 hspace调整的是图片左右两边的空白距离，vspace调整的是图片上下两边的空白距离。 水平间距和垂直间距都是用数字表示的，并且单位都是像素。19.1.7 设置图片的间距设置图片的间距hspace/vspace 实例代码19.1.7 设置图片的间距设置图片的间距hspace/vspace 网页效果网页效果19.1.7 设置图片

7、的间距设置图片的间距hspace/vspace 实例代码19.1.7 设置图片的间距设置图片的间距hspace/vspace 接上页接上页19.1.7 设置图片的间距设置图片的间距hspace/vspace 网页效果网页效果19.1.7 设置图片的间距设置图片的间距hspace/vspace 效果说明效果说明 从图19-8的效果中可以看到图片的上下都存在一个空白距离，这个距离是由vspace值决定的，vspace的值越大，这个空白距离越大。如果不设置hspace和vspace两个属性的值，浏览器将显示图片和文字靠近的效果。19.1.8 设置图片链接设置图片链接 基本语法基本语法19.1.8 设

8、置图片链接设置图片链接 语法说明语法说明 href属性是用来设置图片的链接地址URL，target属性用来设置目标窗口的打开方式，包含有4个属性值，具体内容可参照第6章。 img标记中还可以添加其他的属性，如height、hspace、border等。19.1.8 设置图片链接设置图片链接 实例代码实例代码19.1.8 设置图片链接设置图片链接 网页效果网页效果19.1.8 设置图片链接设置图片链接 效果说明效果说明 通过单击图19-9中的图片链接，就可以打开图19-10来查看第二张图片。提示文字在图中没有显示出来，因为它只有在图片不能显示时才会起作用。同时，还发现在图19-9中的图片有一个边

9、框，这是因为给图片建立链接以后，浏览器自动就要给图片加一个边框，很像给文字建立链接时自动加的下划线。19.3 插入多媒体文件插入多媒体文件 基本语法基本语法 19.3 插入多媒体文件插入多媒体文件 语法说明语法说明 src属性用来指定插入的多媒体文件地址或多媒体文件名，同时文件一定要加上后缀名。 width属性用来设置多媒体文件的宽度，height属性用来设置多媒体文件的高度，都是用数字表示，单位为像素。 autostart属性用来设置多媒体文件的自动播放，有两个取值true和false，true表示在打开网页时自动播放多媒体文件；true是默认值，表示打开网页时自动播放。 loop属性用来设

10、置多媒体文件的循环播放，只有两个取值true和false，、true表示多媒体文件将无限循环播放；false表示多媒体文件只播放一次，false为默认值。19.3 插入多媒体文件插入多媒体文件19.3.1 插入插入flash动画动画19.3.2 插入音频插入音频19.3.3 插入视频插入视频19.3.1 插入插入flash动画动画 实例代码19.3.1 插入插入flash动画动画 网页效果网页效果19.3.1 插入插入flash动画动画 效果说明效果说明 图19-25是两个小球在自由跳动的flash动画，完整效果可参看光盘文件HTML1919-3-1.swf。19.3.2 插入音频插入音频 实

11、例代码实例代码19.3.2 插入音频插入音频 网页效果网页效果 19.3.2 插入音频插入音频 效果说明效果说明 图19-26是运行实例19-3-2.html代码的结果，自动会显示音乐播放器，同时音乐“中国人.mp3”也将自动播放。如果没有设置多媒体音乐为自动播放时，播放器就会显示一个播放按钮 ，只要单击该播放按钮即可播放多媒体音乐。19.3.3 插入视频插入视频 实例代码实例代码19.3.3 插入视频插入视频 网页效果网页效果19.4 添加背景音乐添加背景音乐 基本语法基本语法 19.4 添加背景音乐添加背景音乐 语法说明语法说明 src属性用来指定背景音乐文件的地址或音乐文件名，而且音乐文

12、件要加上后缀。 loop属性用来指定音乐播放的次数，用数字表示。如果设置loop=3，则背景音乐播放3遍后自动停止；如果想设置为无限循环播放的话，可以设置loop=-1即可。19.4 添加背景音乐添加背景音乐 实例代码实例代码19.4 添加背景音乐添加背景音乐 接上页接上页19.4 添加背景音乐添加背景音乐 网页效果网页效果19.4 添加背景音乐添加背景音乐 效果说明效果说明 图19-28为插入背景音乐的网页，只要一打开网页，背景音乐“明月几时有.mp3”就会开始播放，但是播放5次后自动停止，因为设置的循环次数为5。总结总结 图片和多媒体的熟练使用 图片标签属性的使用作业作业综合设置图片和多媒体综合设置图片和多媒体 效果说明效果说明 图19-29的效果图中综合应用到了图片插入标记和图片的对齐属性align，以及多媒体中插入背