为网站添加图像、动画、音频和视频
3.1使用<img>元素添加图像
<img>元素至少附加两个特性,src和alt
3.1.1src特性
告诉浏览器图像的地址
3.1.2alt特性
图像的文本描述
3.1.3height和width特性
设定图像的宽度和高度,一般以像素为单位,也可以是浏览器窗口的百分比
3.1.4align特性
(弃用)
图像的对其方式,可以取值top、middle、bottom、left、right
3.1.5border特性
(弃用)
用于指定图像或者其他元素的边框,一般情况下图片是没有边框的。但是当图片作为链接使用时,IE浏览器会为图像加上边框,因此在图像中通常指定border=“0”。该特性已被css的border属性替换
3.1.6hspace特性和vspace特性
(弃用)
用于指定图像周围的空白,可以使用css中的border或者margin属性实现相同的效果
3.1.7ismap和usemap特性
用于图像映射
3.1.8longdesc(还未得到浏览器支持)
用于指定包含图像详细描述的文档
3.1.9name特性
(弃用)
为图像指定一个名称,id的前身
3.2使用图像作为链接
3.3图像映射
3.3.1客户端图像映射
方法一:在<img>元素中使用<map>元素和<area>元素
使用<img>将图像插图网页中,然后为<img>添加一个usermap特性,用以指示需要使用在相应<map>元素中保存的信息将图像转化为图像映射,usermap特性通常以#开头。eg:
<img src="xx" alt="" usermap="#xxname"/>
<map name="xxname">
<area shape="" coords="" href="" target="" alt==""/>
...
</map>
1).shape特性取值:rectangle或rect(默认)【矩形】、polygon或poly【多边形】、circle或circ【圆形】
2).coords特性:坐标取值,圆形只要设置好圆心和半径。系统会自动闭合图形
3).href和nohref特性
href类型于<a>中的href,nohref取值“nohref”
4).alt特性
类似于<img>中的alt
5).target特性
同<a>中的terget
6).tabindex特性
按下Tab键是,网页上各个项的切换个顺序
方法二:在<object>元素中使用<map>元素(
直到IE8才支持),eg:
<object data="XX图片" type="image/gif" alt="" usermap="#XXname">
<map name="XXname">
<a shape="" coords="" href="" >xx</a>
...
</map>
3.3.2服务端图像映射
<img>元素附带ismap特性,当设置ismap="ismap"时,点击图像,会将鼠标所在区域的坐标发给服务器
3.4选择正确的图像格式
浏览器通常支持3种常用的位图图形格式:GIF、JPEG、PNG
3.4.1GIF图像
适用于图像颜色单调的图片
3.4.2GIF动画
使用于图像包含大面积的单调颜色
3.4.3JPEG图像
用于存储和压缩具有很多颜色的图像,通常将压缩比例设置成60%~70%
3.4.4PNG图像
有PNG-8和PNG-24两种版本,IE浏览器直到IE7才支持PNG透明
3.4.5保存较小的文件尺寸
3.5为网页添加FLASH、视频和音频
在HTML5中<audio>向网页中添加音频文件,<video>向网页中添加视频文件
<object>元素可以告诉浏览器:
1.文件名以及存放文件的位置
2.文件格式
3.播放该文件所需插件的种类
3.5.1为网站添加FLASH影片(仿照YouTuBe)
1.为网页添加FLASH视频播放器,eg:
<object width="" height="">
<param name="movie" value="FLASH_URL"></param>
<embed src="FLASG_URL" type="application/x-shockwave-flash" width="" height=""></embed>
</object>
2.使用<object>元素和<embed>元素为网页添加FLASH
<object classid="" width="" height="" codebase="">
<param name="movie" value="本地FLash地址"/><!-- 指定元素要播放的Flash影片-->
<param name="play" value="true"/><!-- 是否自动播放该影片-->
<param name="loop" value="false"/><!-- 是否循环播放该影片-->
<embed src="本地Flash地址" width="" height="" play="true" loop="false" quality="best" type="" pluginspace="" />
</object>
classid:指定用哪种播放器播放这个文件
codebase:指定播放文件所需要的插件或者程序的下载地址
<embed>元素,特性分析:
src:Flash文件地址
play、loop同<object>中的<param>的name特性
quality:指定当前Flash的分辨率
pluginspace:指定播放文件所需要的插件或者程序的下载地址,同<object>中的codebase特性
3.使用SWFObject为网页添加FLash
使用SWFObject脚本,判定浏览器是否安装了播放器,以及播放器的版本是否满足播放需求 ,eg:
<script type="text/javascript" scr="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("Flash地址", "将要替换的div_id", "宽度","高度", "适合的最低版本");
</script>
<div id="div_id">播放器低于最低版本时,显示的内容</div>
3.5.2为网站添加视频
3.5.3使用Flash Video添加视频
第一步:将其他格式的视频文件,转化成flv格式
第二部:下载一个flv播放器
3.5.4视频大小
3.5.5为网站添加音频
1.使用默认的媒体播放器添加音频,,使用<object>,但是浏览器兼容性差异明显。不推荐
<object width="" height="" type="audio/mpeg" data="mp3文件地址">
<param name="src" value="mp3文件地址"/>
<param name="autoplay" value="false"/>
<param name="autostart" value="1"/>
<emben name="mp3文件地址" width="" height=""></embed>
</object>
2.使用Flash为网页添加mp3
3.5.6在加载网页时自动播放音频和视频
3.5.7深入学习<object>和<param>元素
<object>元素:
1.archive特性:通常与基于Java的应用程序共同使用
2.border特性
(弃用):由CSS的border替代
3.classid特性:用于指定所需应用程序的类型(或播放器的类型),浏览器使用该应用程序处理文件
4.codebase特性:指定插件下载地址
5.codetype特性:播放文件所需要的应用程序或代码的MIME类型
6.declare特性:declare="declare",是个布尔值,指定浏览器是否实例化对象
7.data特性:指定文件地址
8.height和width特性
9.hspace和vspace特性
10.name特性
(弃用)
11.standby特性:对正在加载对象的描述
12.tabindex特性:
13.usemap特性:
3.5.8<param>元素
用于像对象传递参数
1.name和value特性
可以使用name和value传递参数,和设置资源内容
2.valuetype特性
指定参数类型,文件(data)、URL(ref)、对象(object)
3.type特性
指定对象中使用内容的MIME类型,eg:
type="audio/mpeg"
3.6本章小结
介绍如何给网页添加图像及富媒体文件