W3C标准网页制作 主讲教师：张 涛
第13讲、多媒体页面 13.1.滚动文字 13.2.嵌入多媒体内容 13.3.背景音乐 13.4.嵌入JAVA APPLET
13.1.滚动文字 在HTML页面中，可以实现如字幕一般的滚动文字效果。在一个排版整齐的页面中，添加适当的滚动文字可以使页面显得更加生动灵活。 13.1.1 滚动文字标记 基本语法 <MARQUEE>滚动文字</MARQUEE> 文件范例：13-1.htm 在页面中制作文字滚动的效果。 <!-- ------------------------------------------ --> <!-- 文件范例：13-1.htm --> <!-- 文件说明：滚动文字 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>滚动文字</TITLE> </HEAD> <BODY> <MARQUEE>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY> </HTML>
13.1.滚动文字 13.1.2 滚动方向属性 DIRECTION 我们可以设定文字滚动的方向，分别为向上、向下、向左、向右， 使滚动的文字具有更多的变化。 基本语法 <MARQUEE DIRECTION=“VALUE”>滚动文字</MARQUEE> 语法解释 DIRECTION 属性值 描 述 Up 滚动文字向上 Down 滚动文字向下 Left 滚动文字向左 Right 滚动文字向右 在页面中制作不同方向文字滚动的效果。 <HTML> <HEAD> <TITLE>不同方向的滚动文字</TITLE> </HEAD> <BODY> <MARQUEE Direction=Left>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.3 滚动方式属性 BEHAVIOR 通过这个属性能够设定不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。 基本语法 <MARQUEE BEHAVIOR=“VALUE”>滚动文字</MARQUEE> 语法解释 BEHAVIOR 属性值 描 述 Scroll 循环往复 Slide 只进行一次滚动 Alternate 交替进行滚动 在页面中制作不同方式文字滚动的效果。 <HTML> <HEAD> <TITLE>不同方式的滚动文字</TITLE> </HEAD> <BODY> <MARQUEE Behavior=“Scroll”>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.4 滚动速度属性 SCROLLAMOUNT 通过这个属性能够调整文字滚动的速度。 基本语法 <MARQUEE SCROLLAMOUNT=“VALUE”>滚动文字</MARQUEE> 文件范例：13-4.htm 调整文字滚动的速度。 <HTML> <HEAD> <TITLE>滚动文字的速度</TITLE> </HEAD> <BODY> <MARQUEE ScrollAmount=30>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.5 滚动延迟属性 SCROLLDELAY 通过这个属性，可以在每一次滚动的间隔产生一段时间的延迟。 基本语法 <Marquee ScrollDelay=“value”>滚动文字</Marquee> 文件范例：13-5.htm 调整文字滚动的延迟时间。 <HTML> <HEAD> <TITLE>滚动文字的延迟</TITLE> </HEAD> <BODY> <MARQUEE ScrollDelay=500 ScrollAmount=100>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.6 滚动循环属性 LOOP 基本语法 <MARQUEE LOOP=“VALUE”>滚动文字</MARQUEE> 文件范例：13-6.htm 调整文字滚动的循环次数。 <HTML> <HEAD> <TITLE>滚动文字的循环</TITLE> </HEAD> <BODY> <MARQUEE Loop=10>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.7 滚动范围属性 WIDTH，HEIGHT 对于各种方式的滚动方式，可以设定文字滚动的区域。 基本语法 <MARQUEE WIDTH=“VALUE” HEIGHT=“VALUE”>滚动文字</MARQUEE> 文件范例：13-7.htm 调整文字滚动的区域。 <HTML> <HEAD> <TITLE>滚动文字的区域</TITLE> </HEAD> <BODY> <MARQUEE Width=450 Height=60>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.8 滚动背景颜色属性 BGCOLOR 可以为滚动文字添加背景颜色。 基本语法 <MARQUEE BGCOLOR=“COLOR_VALUE”>滚动文字</MARQUEE> 文件范例：13-8.htm 调整文字滚动的背景颜色。 <HTML> <HEAD> <TITLE>滚动文字的背景颜色</TITLE> </HEAD> <BODY> <MARQUEE Width=450 Height=60 BgColor=“#00ccff”>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.1.滚动文字 13.1.9 滚动空间属性 HSPACE，VSPACE 在滚动文字的四周，可以设置水平空间和垂直空间。 基本语法 <MARQUEE HSPACE=“VALUE” VSPACE=“VALUE”>滚动文字</MARQUEE> 文件范例：13-9.htm 调整文字滚动的水平垂直空间。 <HTML> <HEAD> <TITLE>滚动文字的空间</TITLE> </HEAD> <BODY> <MARQUEE Width=450 Height=30 BgColor=“#00ccff” hspace=30 vspace=30>欢迎大家学习网络应用系统构建基础这门课！</MARQUEE> </BODY > </HTML>
13.2.嵌入多媒体内容 在页面中可以放置如MP3音乐、电影、SWF动画等多种多媒体内容。 基本语法 <EMBED SRC=“FILE_URL” WIDTH=VALUE HEIGHT=VALUE HIDDEN=HIDDEN_VALUE AUTOSTART=AUTO_VALUE LOOP=LOOP_VALUE></EMBED> 语法解释 HIDDEN用于控制播放面板的显示和隐藏，其VALUE的取值如表13-3所示。 AUTOSTART 用于控制多媒体内容是否自动播放，其VALUE的取值如表13-4所示。 AUTOSTART 用于控制多媒体内容是否自动播放，其VALUE的取值如表13-4所示。
13.2.嵌入多媒体内容 LOOP用于控制多媒体内容是否循环播放，其VALUE的取值如表13-5所示。
13.2.1 嵌入Flash动画 SWF是Flash软件产生的动画，具有丰富的视频动画效果。由于网络带宽的限制，在页面中放置过大的文件是不现实的。而Flash动画基于矢量，确保了文件精简的尺寸。另一方面，由于Flash软件功能强大，其生成的SWF动画早已成为因特网中矢量动画的标准。现在任何一个版本的浏览器只要安装好插件，就可以观看Flash动画了。 文件范例：13-10.htm 在页面中嵌入Flash动画。 <!-- ------------------------------------------ --> <!-- 文件范例：13-10.htm --> <!-- 文件说明：嵌入Flash动画 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>嵌入Flash动画</TITLE> </HEAD> <BODY> <EMBED SRC=13-10-1.swf WIDTH=300 HEIGHT=200></EMBED>
13.2.1 嵌入Flash动画 </BODY > </HTML> 文件说明 第10行嵌入了13-10-1.swf动画文件。 显示结果 点击链接FLASH就是嵌入Flash动画的页面效果。
13.2.2 嵌入MP3音乐 MP3是MPEG Layer3的简称，简单地说，就是一种数字音频格式。我们知道，在一张容量为640MB的普通CD中能够存储大约70分钟的声音文件，而MP3由于采用了高比率的数字压缩技术（压缩比率可以达到12：1），经过MP3编码软件进行编码后，在音质上几乎与CD音乐没有明显的区别。这就使在因特网上发布和传输歌曲成为可能。只要用户的计算机安装有播放MP3的软件，就可以欣赏嵌有MP3的网页了。 文件范例：13-11.htm 在页面中嵌入MP3音乐。 <!-- ------------------------------------------ --> <!-- 文件范例：13-11.htm --> <!-- 文件说明：嵌入MP3音乐 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>嵌入MP3音乐</TITLE> </HEAD>
13.2.2 嵌入MP3音乐 <BODY> <EMBED SRC=13-10-1.mp3 WIDTH=300 HEIGHT=200 Autostart=true Hidden=no></EMBED> </BODY > </HTML> 文件说明 第10行嵌入了13-10-1.mp3音乐文件。 显示结果 点击链接MP3就是嵌入MP3音乐文件的页面效果。
13.2.3 嵌入MPEG电影 MPEG的全称是Moving Pictures Experts Group(即动态图像专家组)，由ISO（International Standards Organization, 国际标准化组织）与IEC（International Electronic Committee）于1988年联合成立，致力于运动图像（MPEG视频）及其伴音编码（MPEG音频）标准化工作。MPEG共有4个版本，其中前两个版本MPEG-1和MPEG-2应用比较广泛，而MPEG-4虽然已推出近几年，但有关它的应用却直到最近才活跃起来。MPEG-4于1998年11月公布，预计投入使用的国际标准MPEG-4是针对一定比特率下的视频、音频编码，更加注重的是多媒体系统的交互性和灵活性。为此，MPEG-4引入了AV对象（Audio/Visual Objects）,使得更多的交互操作成为可能。因此，它将在数字电视、动态图像、因特网、实时多媒体监控、移动多媒体通信、Internet/Intranet上的视频服务与可视游戏、DVD上的交互多媒体应用等方面大显身手。 文件范例：13-12.htm 在页面中嵌入MPG电影。 <!-- ------------------------------------------ --> <!-- 文件范例：13-12.htm --> <!-- 文件说明：嵌入MPG电影 --> <!-- ------------------------------------------ -->
13.2.3 嵌入MPEG电影 <HTML> <HEAD> <TITLE>嵌入MPG电影</TITLE> </HEAD> <BODY> <EMBED SRC=13-12.mpg Autostart=true Hidden=no></EMBED> </BODY > </HTML> 文件说明 第10行嵌入了13-12.mpg电影文件。 显示结果 点击链接RM就是嵌入RM电影文件的页面效果。
13.2.4 嵌入AVI视频 AVI即Audio Video Interleaved，是微软公司推出的视频格式文件，它应用广泛，是目前视频文件的主流。这种格式的文件随处可见，例如一些游戏、教育软件的片头、多媒体光盘中，都会有许多AVI。 文件范例：13-13.htm 在页面中嵌入AVI视频。 <!-- ------------------------------------------ --> <!-- 文件范例：13-13.htm --> <!-- 文件说明：嵌入AVI视频 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>嵌入AVI视频</TITLE> </HEAD> <BODY> <EMBED SRC=13-13.avi Autostart=true Hidden=no></EMBED> </BODY >
13.2.4 嵌入AVI视频 </HTML> 文件说明 第10行嵌入了13-13.avi视频文件。 显示结果 点击链接AVI的就是嵌入AVI视频文件的页面效果
13.4嵌入JAVA APPLET Java语言可以编写两种类型的程序：应用程序（Application）和小应用程序（Applet）。应用程序是可以独立运行的程序，而Applet不能独立运行，需要嵌入HTML文件，遵循一套约定，在支持Java的浏览器运行，是Java一个重要的应用分支，也是当时Java最令人感兴趣的地方，即在网页设计中加入动画、影像、音乐等，而要达到这些效果使用最多的是Java Applet和Java Script。 基本语法 <APPLET CODE=“FILE_NAME” WIDTH=“VALUE” HEIGHT=“VALUE”> </APPLET> 文件范例：13-16.htm 嵌入Java Applet。 <!-- ------------------------------------------ --> <!-- 文件范例：13-16.htm --> <!-- 文件说明：嵌入Java Applet --> <!-- ------------------------------------------ --> <HTML> <HEAD>
13.4嵌入JAVA APPLET <TITLE>嵌入Java Applet</TITLE> </HEAD> <BODY> <applet code=“Lake.class” width=“262” height=“320”> </applet> </BODY > </HTML> 文件说明 第10行设定了嵌入的Java Applet程序为Lake.class，并设定了显示大小。 显示结果 如图13-12所示的就是嵌入Java Applet的效果。
谢谢!