第 9章 网页的动态效果
9.1 meta标签的使用
9.2 将多媒体加入网页
9.3 滚动的文字
9.4 显示 Flash动画
9.1 网页的特效
?Meta是用来在 HTML文档中模拟 HTTP协议的响应头报文
?meta 标签用于网页的 <head>与 </head>中
?meta 的属性有两种,name和 http-equiv。
?在 HTML文档中 可以包含任意数量的 <meta>标签
?META标签中 没有大小写之分
name属性
? 主要用于 主要用于对 HTML文档构成进行说明
? 用 name指出内容类型,并用 content给出
具体的内容
? 目的:便于搜索引擎机器人查找、分类
? 搜索引擎都有自己的“搜索机器人”( ROBOTS),并通过这些
ROBOTS在网络上沿着网页上的链接(一般是 http和 src链接)不
断抓取资料建立自己的数据库。
? 对于网站管理者和内容提供者来说,有时候会有一些站点内容,不
希望被 ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发
界提供了两个办法:一个是 robots.txt,另一个是 The Robots
META标签。
比较常用的 name 属性 有以下几个
1,<meta name=“Generator” contnt=“”>
用以说明生成工具
<meta name="generator" content="Microsoft Frontpage 5.0">
2,<meta name=“KEYWords” content=“”>
向搜索引擎说明你的网页的关键词
3,<meta name="DEscription" content="">告
诉搜索引擎你的站点的主要内容;
4,<meta name=“Author” content=“你的姓名, >
告诉搜索引擎你的站点的制作的作者;
比较常用的 name 属性 有以下几个
? 5,<meta name="Robots" content=
"all|none|index|noindex|follow|nofollow">
?name=”Robots”表示所有的搜索引擎,可以针对某个
具体搜索引擎写为 name=”BaiduSpider”
?content部分有四个指令选项,index,noindex、
follow,nofollow,指令间以“,”分隔。
?INDEX 指令告诉搜索机器人抓取该页面;
?FOLLOW 指令表示搜索机器人可以沿着该页面上的链接
继续抓取下去;
具体组合方式
? Robots Meta标签的缺省值是 INDEX和 FOLLOW,只有 inktomi除
外,对于它,缺省值是 INDEX,NOFOLLOW。
? 这样,一共有四种组合,
? <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
? <META NAME="ROBOTS"
CONTENT="NOINDEX,FOLLOW">
? <META NAME="ROBOTS"
CONTENT="INDEX,NOFOLLOW">
? <META NAME="ROBOTS"
CONTENT="NOINDEX,NOFOLLOW">
? 其中
? <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
可以写成 <META NAME="ROBOTS" CONTENT="ALL">
? <META NAME="ROBOTS"
CONTENT="NOINDEX,NOFOLLOW">
可以写成 <META NAME="ROBOTS" CONTENT="NONE">
http-equiv属性
? 主要用于 主要用于对 HTML文档性质进行说明
? 用 http-equiv指出性质类型,并用
content给出具体的性质
? 目的:指定 HTML文档的运行方式
比较常用的 http-equiv 属性 有以下几个
1,<meta http-equiv="Content-Type"
content="text/html";charset=gb_2312-80"> 和 <meta
http-equiv="Content-Language" content="zh-CN">
用以说明主页制作所使用的文字以及语言;又如英文是 ISO-
8859-1字符集,还有 BIG5,utf-8,shift-Jis,Euc,Koi8-
2等字符集;
2,<meta http-equiv="Refresh"
content="n;url=http://yourlink">
定时让网页在指定的时间 n内,跳转到页面 http://yourlink;
3,<meta http-equiv="Expires" content="Mon,12 May 2001
00:20:00 GMT">
可以用于 设定网页的到期时间,一旦过期则必须到服务器上
重新调用 。需要注意的是必须使用 GMT时间格式;
4,<meta http-equiv="Pragma" content="no-
cache">
用于设定禁止浏览器从本地机的缓存中调阅页
面内容,设定后一旦离开网页就无法从 Cache
中再调出;
5,<meta http-equiv="set-cookie"
content="Mon,12 May 2001 00:20:00 GMT">
cookie设定,如果网页过期,存盘的 cookie将
被删除 。需要注意的也是必须使用 GMT时间格
式;
比较常用的 http-equiv 属性 有以下几个
比较常用的 http-equiv 属性 有以下几个
6,<meta http-equiv="Pics-label" content="">
网页等级评定,在 IE的 internet选项中有一项内容设置,
可以防止浏览一些受限制的网站,而网站的限制级别就是
通过 meta属性来设置的;
7,<meta http-equiv="windows-Target" content="_top">
强制页面在当前窗口中以独立页面显示,可以防止自己的
网页被别人当作一个 frame页调用
8,<meta http-equiv="Page-Enter"
content="revealTrans(duration=10,transtion= 50)">
和 <meta http-equiv="Page-Exit"
content="revealTrans(duration=20,transtion=6)">
设定进入和离开页面时的特殊效果,这个功能即 FrontPage
中的, 格式 /网页过渡,,不过所加的页面不能够是一个
frame页面。
meta示例
? 自动跳转示例
? 示例 2
? 示例 3
9.2 将多媒体加入网页
我们知道,Web页面是多媒体的,可以
在 Web页面中 加入图像、视频、声音等多媒
体文件 。
?<embed>标签 可以将多媒体文件插入到网页

?当访问者用鼠标单击多媒体对象时,该类多
媒体文件所 关联的应用软件(声音、视频播放
软件)将被激活
?相应 软件必须已安装 在访问者的计算机内,
如 WMA,WMV,ASF,MPG,AVI的播
放器
9.2.1 插入多媒体文件
?<embed>标签主要有 src,height,width三个属性
?其语法如下,
<embed src="多媒体文件的名称 " width=宽度
height=高度 loop=播放次数 >
说明,
src属性,用于 指定多媒体文件的地址,该属性必须使用。
height和 width属性,用于设置 多媒体对象的高度和宽度,
单位为像素。
loop属性,用于 设置播放的次数,设为 true会无限制的重复
播放,直到你离开该网页或是单击播放网页中的停止按钮;
若设 为 no,则仅播放一次,默认值为 no。
新示例
? 关於自动播放
如上的最简洁写法,其预设就是会自动播
放。如果不想自动播放,加入参数
autostart=false 即可,范例如下 ∶
〈 embed src=档案位址 autostart=false〉
? 关於隐藏面版 ∶
只要加上这句参数 hidden=true,整个播
放面版就会不见,什麽都看不到,但还是会
播放歌曲 (只要你没有取消自动播放 )。语法
范例如下 ∶
〈 embed src=档案位址 hidden=true〉
ShowPosition Controls属性
? 加入这句
参 ShowPositionControls=false,播
放器的, 快进,,后退,,下一个,,上一个,
按钮就会统统消失,语法范例如下 ∶
<embed src=档案位址 ShowPositionControls=false〉
除了可以使用上述方法插入多媒体文件外,还
可以在网页中嵌入多媒体文件,它将不调用多媒体
播放器。
1.设置背景声音
<bgsound>标签来设置网页的背景声音。
<bgsound>标签有 src和 loop两个属性。其语法如下,
<bgsound src="声音文件的名称 " loop=次数 >
9.2.2 嵌入多媒体文件
说明,
src属性,用于指定声音文件的地址,声音文件可以
是,wav,midi和 mp3等类型的文件 。
loop属性,用于 设置声音文件循环播放的次数,若
设为 infinite时,声音文件将循环播放,直到网页
关闭为止,也可取一个具体数值 。
2.嵌入视频文件
使用 <img>标签可以在网页中嵌入视频文件。
<img>标签主要有 src,dynsrc,start、
loop四个属性 。
其语法如下,
<img src="图像文件 " dynsrc="视频文件 "
start=开始播放时间 loop=播放次数 >
说明,
dynsrc属性,用于指定要播放的视频文件,格式可以
是 Wav,Avi,AIFF,AU,MP3,Ra,Ram等等。给出音
频或视频文件及其路径。 必须是 avi格式 。
src属性,用于 指定作视频, 封面, 的图像文件,即
在浏览器未完全读入 avi文件时,先在 avi播放区域显
示该图像。
start属性,用于 设置视频文件播放的开始时间,参
数值为 fileopen和 mouseover。 fileopen为默认值,
即在打开网页时就开始播放视频文件。 mouseover参
数表示当鼠标移到 avi播放区域之上时开始播放视频
文件。
loop属性,用于设置视频文件循环播放的次数。
? 容器属性,
语法,height=# width=#
说明:取值为正整数或百分数。该属性规定
控制面板的高度和宽度。
height:控制面板的高度
width:控制面板的宽度
示例:
<img dynsrc="your.avi" height=200
width=200>
? 延时播放,
语法,loopdelay=#
说明,#=毫秒。该属性规定音频或视频文件的延时播放时间。
示例,<img dynsrc="your.avi" loopdelay=200>
? 补白属性,
语法,hspace=# vspace=#
说明:取值为正整数,单位为像素。两个属性应同时应用。
hspace:画面离页面左边的距离;
vspace:画面离页面顶部的距离。
示例:
<img dynsrc="your.avi" hspace=10 vspace=10>
? 说明文字,
语法,alt=#
说明,#为说明文字。 alt的值是对动画文件的非显示说明。
示例
<img dynsrc="your.avi" alt=your.avi( 200KB) >
?<marquee>标签可以简便地实现文字的移动,以
达到动感十足的视觉效果。
?<marquee>是一个 成对标签,它有 direction、
behavior,loop,scrollamount,scrolldelay、
align,bgcolor,height,width,hspace和
vspace等属性。
?其语法如下,
<marquee direction=参数值 behavior=参数值 loop=循
环次数 scrollamount=数值 scrolldelay=数值,align=
参数值,bgcolor="#" height=数值 width=数值 hspace=
数值 vspace=数值 >要滚动的文字 </maruqee>
9.3 滚动的文字
说明,
direction属性,用于 设置文字的移动方向,它的取值为 left
和 right。 left表示从右向左移动,这是默认方向。 right表示
从左向右移动。
behavior属性,用于设置 文字的移动方式,它的取值为 scroll、
slide或 alternate。 scroll表示滚动播出,slide表示滚动到
一方后停止滚动,alternate表示滚动到一方后向相反方向滚
动。
loop属性,用于设置 文字移动的循环次数,若未指定或取值为
,infinite”则循环不止,也可取一个具体数值。
scrollamount属性,用于设置 文字移动的速度 。
scrolldelay属性,用于设置 文字的移动延迟 。
align属性,用于设置 文字的对齐方式 。它的取值
为 top,middle,bottom。
bgcolor属性,用于设置 滚动文字的背景色 。
height,width属性,用于设置 滚动文字的宽度和
高度, 单位为像素或占浏览器窗口的百分比 。
hspace和 vspace属性,用于设置滚动 文字周围的
空白区域,单位为像素或占浏览器窗口的百分比。
?如今的商业网站中一般会有很多的 Flash动画。
Flash动画文件在画质好、文件小,从某种意义上
讲提高了用户的浏览速度。
?在 HTML中显示 Flash动画,需要使用 ClassID和
Flash插件。
9.4 显示 Flash动画
OBJECT对象
? 语法格式,
<OBJECT ID=“” WIDTH=“” HEIGHT=“”
CLASSID=“” CODEBASE=“” STANDBY=“” TYPE="">
</OBJECT>
? ID:指定一个标识,用来标识一个对象
? CLASSID,指定对象类型 ID号
? CODEBASE:指定该对象播放器的下载地址及版本号
? STANDBY:指定等待提示信息
? TYPE:指定对象类型
示例 1
? <OBJECT ID="WMPlay" WIDTH=320
HEIGHT=240
CLASSID="CLSID:22D6f312-B0F6-11D0-
94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/
activex/controls/mplayer/en/
nsmp2inf.cab#Version=6,4,5,715"
STANDBY="Loading Microsoft? Windows
Media? Player components..."
TYPE="application/x-oleobject">
</OBJECT>
PARAM 参数对象
? 语法格式,
<PARAM NAME="" VALUE="">
? NAME,指定参数名称
? VALUE, 指定参数值
示例
? <PARAM NAME="FileName" VALUE="">
<PARAM NAME="AutoStart" VALUE="false">
<PARAM NAME="ShowControls"
VALUE="false">
<PARAM NAME="ClickToPlay"
VALUE="false">
<PARAM NAME="ShowStatusBar"
VALUE="true">
<PARAM NAME="EnableContextMenu"
VALUE="true">