1、第9章 网页的动态效果,9.1 meta标签的使用 9.2 将多媒体加入网页 9.3 滚动的文字 9.4 显示Flash动画,第9章 网页的动态效果,9.1 Meta标签的使用,Meta标签是内嵌在网页中的特殊html标签，包含着有关于网页的一些隐藏信息。 Meta标签的作用是向搜索引擎解释你的网页是有关哪方面信息的。 对于高级的搜索引擎来说，html 的meta 标签并不是什么新奇的东西。但是无论如何它是一个优秀网页不可缺少的。,9.1 Meta标签的使用,Meta是用来在HTML文档中模拟HTTP协议的响应头报文 meta 标签用于网页的与中 meta 的属性有两种：name和http-e
2、quiv。 在HTML文档中可以包含任意数量的标签 META标签中没有大小写之分,name属性,主要用于主要用于对HTML文档构成进行说明 用name指出内容类型，并用content给出具体的内容 目的：便于搜索引擎机器人查找、分类 搜索引擎都有自己的“搜索机器人”（ROBOTS），并通过这些ROBOTS在网络上沿着网页上的链接（一般是http和src链接）不断抓取资料建立自己的数据库。,比较常用的name 属性有以下几个,1、 用以说明生成工具 ,比较常用的name 属性有以下几个,2、 向搜索引擎说明你的网页的关键词 例： ,比较常用的name 属性有以下几个,3、告诉搜索引擎你的站点的主
3、要内容；很多搜索引擎允许描述的字数在150个左右，所以要保证你的描述在150以下。 例：,比较常用的name 属性有以下几个,4、 告诉搜索引擎你的站点的制作者。,http-equiv属性,主要用于主要用于对HTML文档性质进行说明 用http-equiv指出性质类型，并用content给出具体的性质 目的：指定HTML文档的运行方式,比较常用的http-equiv 属性,1、 和 用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；,比较常用的http-equiv 属性,2、 定时让网页在指定
4、的时间n秒钟后，跳转到页面http:/yourlink；,比较常用的http-equiv 属性,3、 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用,比较常用的http-equiv 属性,4、 和 设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。,meta示例：自动跳转,Lx1.htm:ch9_lx1你好 转到lx2 ,Lx2.htmch9_lx2这是lx2 本页3秒钟后自动返回到lx1。 返回lx1 ,meta示例：网页过渡,Lx2.htmch9_lx2这是lx2 本页3秒钟后
5、自动返回到lx1。 返回lx1 ,9.2 将多媒体加入网页,我们知道，Web页面是多媒体的，可以在Web页面中加入图像、视频、声音等多媒体文件。,标签可以将多媒体文件插入到网页中 当访问者用鼠标单击多媒体对象时，该类多媒体文件所关联的应用软件（声音、视频播放软件）将被激活 相应软件必须已安装在访问者的计算机内，如WMA、WMV、ASF、MPG、AVI的播放器,9.2.1 插入多媒体文件,标签主要有src、height、width三个属性 其语法如下：说明： src属性：指定多媒体文件的地址，该属性必须使用。 height和width属性：用于设置多媒体对象的高度和宽度，单位为像素。 loop属
6、性：用于设置播放的次数，设为true会无限制的重复播放，直到你离开该网页或是单击播放网页中的停止按钮；若设为no，则仅播放一次，默认值为no。,关于自动播放,关於自动播放 如上的最简洁写法，其预设就是会自动播放。如果不想自动播放，加入参数 autostart=false 即可，范例如下 embed src=URL autostart=false 关於隐藏面版 只要加上这句参数 hidden=true，整个播放面版就会不见，什么都看不到，但还是会播放歌曲 (只要你没有取消自动播放)。语法范例如下 embed src=URL hidden=true,播放视频举例,播放视频视频播放 ,ShowPos
7、ition Controls属性,加入这句参 ShowPositionControls=false，播放器的“快进”“后退”“下一个”“上一个”按钮就会统统消失，语法范例如下,除了可以使用上述方法插入多媒体文件外，还可以在网页中嵌入多媒体文件，它将不调用多媒体播放器。 1设置背景声音标签来设置网页的背景声音。 标签有src和loop两个属性。其语法如下：,9.2.2 嵌入多媒体文件,说明：src属性：用于指定声音文件的地址，声音文件可以是：wav、midi和mp3等类型的文件。 loop属性：用于设置声音文件循环播放的次数，若设为infinite时，声音文件将循环播放，直到网页关闭为止，也可取
8、一个具体数值。,2嵌入视频文件使用标签可以在网页中嵌入视频文件。标签主要有src、dynsrc、start、loop四个属性。 其语法如下： ,说明： dynsrc属性：用于指定要播放的视频文件，格式可以是Wav、Avi、AIFF、AU、MP3、Ra、Ram等等。给出音频或视频文件及其路径。 src属性：用于指定作视频“封面”的图像文件，即在浏览器未完全读入avi文件时，先在avi播放区域显示该图像。 start属性：用于设置视频文件播放的开始时间，参数值为fileopen和mouseover。fileopen为默认值，即在打开网页时就开始播放视频文件。mouseover参数表示当鼠标移到av
9、i播放区域之上时开始播放视频文件。 loop属性：用于设置视频文件循环播放的次数。,例,播放视频视频播放 ,容器属性： 语法：height=# width=# 说明：取值为正整数或百分数。该属性规定控制面板的高度和宽度。 height：控制面板的高度 width：控制面板的宽度 示例：,容器属性： 延时播放： 语法：loopdelay=# 说明：#=毫秒。该属性规定音频或视频文件的延时播放时间。 示例：,容器属性： 补白属性： 语法：hspace=# vspace=# 说明：取值为正整数，单位为像素。两个属性应同时应用。 hspace：画面离页面左边的距离； vspace：画面离页面顶部的距离
10、。 示例：,容器属性： 说明文字： 语法：alt=# 说明：#为说明文字。alt的值是对动画文件的非显示说明。 示例 ,标签可以简便地实现文字的移动，以达到动感十足的视觉效果。 是一个成对标签，它有direction、behavior、loop、scrollamount、scrolldelay、align、bgcolor、height、width、hspace和vspace等属性。,9.3 滚动的文字,其语法如下： 要滚动的文字,9.3 滚动的文字,direction属性：用于设置文字的移动方向，它的取值为left和right。left表示从右向左移动，这是默认方向。right表示从左向右移动
11、。 behavior属性：用于设置文字的移动方式，它的取值为scroll、slide或alternate。scroll表示滚动播出，slide表示滚动到一方后停止滚动，alternate表示滚动到一方后向相反方向滚动。,属性说明,loop属性：用于设置文字移动的循环次数，若未指定或取值为“infinite”则循环不止，也可取一个具体数值。 scrollamount属性：用于设置文字移动的速度。 scrolldelay属性：用于设置文字的移动延迟。,属性说明,align属性：用于设置文字的对齐方式。它的取值为top、middle、bottom。 bgcolor属性：用于设置滚动文字的背景色。,属
12、性说明,height、width属性：用于设置滚动文字的宽度和高度，单位为像素或占浏览器窗口的百分比。 hspace和vspace属性：用于设置滚动文字周围的空白区域，单位为像素或占浏览器窗口的百分比。,属性说明,举例,会移动的文字(Marquee)会移动的文字(Marquee) 啦啦啦，我会移动耶！ 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我走得好快哟！ 啦啦啦，我走一步，停一停！ 啦啦啦，我会移动耶！ 啦啦啦，我会
13、移动耶！* 嗨, 啦啦啦，我会移动耶！ 大家好！ * ,39,如今的商业网站中一般会有很多的Flash动画。Flash动画文件在画质好、文件小，从某种意义上讲提高了用户的浏览速度。 在HTML中显示Flash动画，需要使用ClassID和Flash插件。,9.4 显示Flash动画,OBJECT对象,语法格式：ID：指定一个标识，用来标识一个对象 CLASSID: 指定对象类型ID号 CODEBASE：指定该对象播放器的下载地址及版本号 STANDBY：指定等待提示信息 TYPE：指定对象类型,示例1,PARAM 参数对象,语法格式：NAME ：指定参数名称 VALUE : 指定参数值,示例,插入Flash的网页,插入FLASH插入FLASH,注意：,标签是IE支持的，而标签是NetScape支持的，所以为了让两种浏览器都能正确浏览你的flasa动画，这两种标签一个也不能少。而标签里的classid是告诉浏览器插件的类型，codebase 可以没有；安装Flash插件的用户浏览网页时，自动连接到Shockwave的下载网页，自动下载并安装相关插件！,本章结束,
