《网页前端技术》HTML任务三.ppt

HTML 任务三 插入图片和多媒体让网页更生动 案例分解 案例资讯 我的音乐贺卡 我的网页也能看 电影 我的滚动相册 页面中的图片 背景音乐 插入AVI格式文件 插入FLASH动画 滚动 我们通过这个任务来学习在HTML中加入图片、声音等使得我们做出来的网页更加的生动。 教学目的：了解图片的格式 掌握背景音乐的设置方法 掌握插入动态影像文件的方法 掌握滚动相册的设置方法 教学重点：掌握背景音乐的设置方法 掌握插入动态影像文件的方法 掌握滚动相册的设置方法 教学难点：掌握背景音乐的设置方法 掌握插入动态影像文件的方法 掌握滚动相册的设置方法 案例一 我的音乐贺卡 案例资讯 学习在HTML文件中加入背景音乐和图片。 图片和图片格式 背景音乐 页面中的图像标签：img src=”image.gif/” img代表这里插入图片，src表示图片的路径。大多数情 况下，你只需输入图片的文件名就行。 一、页面中的图片 图像的格式不是gif和jpg，可用其它格式转换成这两种格式，如phpotoshop图像编辑软件 图像的位置： 1、图片在网络上 2、图像和html文件在同一目录下 3、文件名或地址的书写时区分大小写的（在Linux服务器环境中），所以务必正确使用图像标签。 网页添加背景音乐的方法一般有两种，bgsound标签和embed标签，前一种是和Dreamweave连用的，我们这里主要介绍embed标签， 语法：embed autostart=”true” 二、背景音乐 autostart：是用来设置打开页面时音乐是否自动播放 loop： 可以决定当前音乐文件是否循环播放，值为true和false（loop值默认为false），-1表示音乐无限循环播放 width ： 调整浏览器插件在页面中的宽度 height ： 调整浏览器插件在页面中的高度 hidden ： 用来隐藏插件的控制面板，让其在后台播放 balance： 设置音乐的左右均衡 dalay ： 设置进行播放延时 volume ：设置音量 案例步骤 一、插入图片 记事本中代码如下： html head title牡丹江简介/title /head body p牡丹江简介br nbsp;nbsp;nbsp;nbsp;牡丹江市位于黑龙江省东南部，北邻依兰县和勃利县，东俄罗斯接壤。br nbsp;nbsp;nbsp;nbsp;牡丹江市是黑龙江省东南部的政治、经济、文化中心。br nbsp;nbsp;nbsp;nbsp;牡丹江市资源丰富，风景秀丽，交通便利。br img src=镜泊湖1.jpg /br /p /body /html 二、插入背景音乐 记事本中代码如下： html head title背景音乐/title /head body p牡丹江简介br nbsp;nbsp;nbsp;nbsp;牡丹江市位于黑龙江省东南部，北邻依兰县和勃利县，东俄罗斯接壤。br nbsp;nbsp;nbsp;nbsp;牡丹江市是黑龙江省东南部的政治、经济、文化中心。br nbsp;nbsp;nbsp;nbsp;牡丹江市资源丰富，风景秀丽，交通便利。br img src=镜泊湖1.jpg /br /p embed src=牡丹江.mp3 autostart=true loop=true width=400 height=20hidden=true /body /html 说明：不隐藏时把hidden=true代码去掉。 案例二 我的网页也能看电影 AVI格式 FLASH格式 案例资讯 插入AVI格式文件 插入FLASH动画 一、插入AVI格式文件 用浏览器可以播放的格式有：MOV格式、AVI格式。 语法： embed src=”文件名.avi” /embed 说明：src后面的地址是相对的，一般直接输入文件名即可，也可以直接链接网上的地址。 语法： embed src=”文件名.swf” /embed 说明：src后面的地址也是相对的，一般直接输入文件名即可，也可以直接链接网上的地址。我们要注意，Flash地址后面必须空一格，否则无法显示。 二、插入FLASH动画 案例