1、http:/ 网页中文字的处理网页中文字的处理n11.2 在网页中使用图像、动画在网页中使用图像、动画n11.3 在网页中播放音频文件在网页中播放音频文件n11.4 在网页中播放视频文件在网页中播放视频文件n11.5 上机指导上机指导n11.6 习题习题n11.1.1 文字颜色的设置文字颜色的设置n11.1.2 设置文本特效设置文本特效u 不论在FrontPage中还是Dreamweaver中，都可以对选定的文字进行颜色设置。在FrontPage中进行字体颜色设置时，可以通过单击【格式】|【字体】|【字体】命令，在【字体】窗口的【颜色】选项中选择字体所要设置的颜色。在Dreamweaver中操
2、作则更简单，可直接在Properties(属性)中进行设置。u在网页中不仅动画给人以动感，网页中文字的一些特效也会产生同样的效果，增添网页的美感。在此介绍一些使用代码实现文本特效的方法。u具体方法介绍详见书308313页n11.2.1 直接使用动画或图像直接使用动画或图像n11.2.2 制作动画效果制作动画效果1.直接使用图像u在网页中直接使用图像一般包括以下两种情况：作为背景或者作为装饰。u(1)在网页中使用图像作为背景，使得网页不再单调，不同背景的网页给人不同的感觉。在网页中设置背景的具体操作如下：u在FrontPage中，单击【格式】|【背景】命令，打开网页属性对话框，选中【背景图片】复
3、选框，单击Browse按钮，在打开的窗口中选择需要作为背景图片的文件，单击【确定】按钮即可。u在Dreamweaver中，单击modify|page properties命令，打开页面属性对话框，单击Background Image后的Browse按钮，选择需要作为背景的图片，单击OK即可。u(2)在网页中直接插入图像的方法很简单，在FrontPage中单击【插入】|【图像】命令即可；在Dreamweaver中，单击Insert|Image命令即可。2.直接插入动画u在Dreamweaver中插入Flash制作的SWF格式动画十分容易，单击对象工具栏上的Flash徽标或选择【媒体】|Flash
4、命令，就可以打开选择SWF动画文件的对话框，选好文件后在其属性面板中设定播放的参数即可。u在FrontPage XP中不支持直接插入SWF格式的Flash动画文件，可以按照以下方法进行操作：u(1)单击【插入】|【Web组件】命令，然后在打开的对话框左侧组件类型列表中选择【高级控件】选项，然后在右侧窗口中选择【ActiveX控件】选项。单击【下一步】按钮，在选择控件列表下方单击【自定义】按钮。在列表中选择Shockwave Flash Object控件，单击【确定】按钮返回【插入Web组件】对话框，选中Shockwave Flash Object复选框，并单击【完成】按钮。u(2)双击网页中出
5、现的白色矩形区域，打开【ActiveX控件属性】对话框。在Movie URL文本框中输入要插入的Flash动画文件的链接地址，并在Quality下拉列表中选择Flash动画的播放品质，在Scale选项后选择显示比例，如“Show All(完全显示)”，最后单击【确定】按钮返回即可看到网页中的动画了。u1.直接使用Flash制作动画u使用Flash制作的动画，最吸引人的地方除了其灵活的表现手法和广泛的创意之外，生成作品的swf文件非常小，适于加入到网页中。u关于具体制作Flash的方法，用户可参阅该类书籍，在此不再详细介绍。u2.设置交替显示图片效果u 使用Dreamweaver中Insert菜
6、单的工具实现：在D r e a m w e a v e r 界 面 中 单 击 I n s e r t|I n t e r a c t i v e Images|Rollover Image命令，在弹出的对话框中选择最初显示的图片以及鼠标滑过时要显示的图片。u利用图层实现：Dreamweaver中一个非常重要的特点就是图层的引入，利用图层可以实现许多特效。在此介绍利用图层实现幻灯片的效果。u3.利用Dreamweaver中的Timeline实现图片移动uDreamweaver中的Timeline(时间轴)和Flash中的Timeline作用一样，都可以用来控制元素(图像或图层)的运动。在此以运
7、用时间轴控制图层的显示事件为例介绍时间轴的使用方法。u具体操作参见书315317页。n11.3.1 在在FrontPage中播放音频文件中播放音频文件n11.3.2 在在Dreamweaver中播放音频文件中播放音频文件n11.3.3 直接使用代码实现直接使用代码实现u1.使用插件播放音频文件u在网页中使用插件播放音频文件的具体操作步骤如下：u(1)选择【插入】|【Web组件】命令，在【组件类型】列表中选择【高级控件】选项，并在右边的控件框中选择【插件】选项。单击【完成】按钮后，网页中添加了一个标志，如图11.8所示。如图11.8u(2)同时会打开【插件属性】对话框，在其中单击【浏览】按钮，在
8、打开的【选择插件数据源】对话框中选择要播放的音频文件，我们可以选择扩展名为wav、mid、snd、au的音频文件。选好要播放的文件后，单击【打开】按钮，显示【插件属性】对话框，在该对话框中可以设置插件的属性，如大小、布局。u2.直接插入音频文件u在网页中播放音频文件还可以使用插入音频的方法。嵌入要使用插件来播放音频文件，离开了插件，嵌入的文件就不能够正常播放，而插入则不同，它在播放多媒体时并不依赖插件，只和浏览器有关。目前，Internet Explorer支持对插入的音频的播放，而Netscape Navigator还不能支持。u3.直接插入音频文件u还有一种使用音频的方法，就是链接音频文件
9、。单击【插入】|【超链接】命令，打开【插入超链接】对话框，选择要链接的音频文件，如图11.15所示，然后单击【确定】按钮。u现在用浏览器可以看到，单击超链接时，音频文件就在独立的Active Movie中播放了；用鼠标右键单击超链接选择【目标另存为】命令可以将音频文件下载。u1.直接插入法u具体操作步骤如下：u(1)用Dreamweaver打开一张需要插入背景音乐的网页，单击Window|Behaviors命令，打开Behaviors面板。u(2)单击“+”按钮，在打开的菜单中选择Play Sound命令。u(3)此时弹出Play Sound对话框，单击Browser按钮，在Select Fi
10、le对话框中选择音乐文件，注意，应选择浏览器支持的音乐文件格式(如mid、wav、aiff、au)。u(4)插入文件后网页里会显示一个“plugin”插件图标，但我们还需要作进一步的调整。因为 Dreamweaver 自动插入了一段控制代码，方便我们定制激活背景音乐。如果此功能不需要使用，就要把它删除。u要删除的代码如下：uuu如果Dreamweaver的版本不是XP，可能还要删除以下代码：u u(5)完成插入后的背景音乐还不能自动播放，在Properties卷展栏中单击右下角的Parameters按钮，在弹出的窗口中进行修改，把参数AutoStart后的Value默认值false改
11、成true，这样就达到打开页面背景音乐就响起的效果。u2.使用音频插件播放u有些人始终使用FrontPage也许就是因为一些元素的插入，Dreamweaver 没有提供类似的功能，或者使用不方便。但Dreamweaver 支持插件，声音插入插件为音频、视频文件的播放提供了方便。u3.通过超链接实现音频文件的播放u选中要链接的文字，在Properties卷展栏中的Link下拉列表框中选择要链接的音频文件。在预览时，单击超级链接即可播放选择的音频文件。u4.Plugin播放音频文件u在Insert卷展栏的Media面板中单击 按钮，在打开的Select File对话框中选择要播放的音频文件，然后单
12、击OK按钮。保存该文件后进行预览，即可播放该文件。但并不是一打开网页就播放音频文件，需要单击播放按钮才可以打开该文件。u1.常规背景音乐u在页面源程序的和之间加入以下HTML代码：uu2.可控制播放的背景音乐u在源程序的中加入以下HTML代码：uu3.用按钮控制播放的背景音乐u代码如下：uuuuuu把这段代码放在和之间。其中“id”是设定对象的标志，这个标志在这个页面中是惟一的。“onclick”是设定对象被单击时所执行的脚本程序。n11.4.1 在在FrontPage中播放视频文件中播放视频文件n11.4.2 Dreamweaver中播放视频文件中播放视频文件n11.4.3 视频点播系统的实
13、现视频点播系统的实现u1 嵌入视频文件u具体操作步骤如下：u(1)单击【插入】|【Web组件】命令，在【插入Web组件】对话框中选择【高级控件】选项，并在右边的控件框中选择【插件】选项，单击【完成】按钮后，网页中添加了一个标志。u(2)在打开的【插件属性】对话框中单击【数据源】文本框后的【浏览】按钮，在【选择插件数据源】文本框中选择要播放的视频文件。选好视频文件后单击【打开】按钮，打开【插件属性】对话框，在该对话框中可设置插件的属性，如大小、布局等。u该过程和嵌入音频的过程类似，在此不再详细介绍。u2.插入视频文件u在要插入视频的地方单击，设置插入点，选择【插入】|【图片】|【视频】选项。打开
14、【视频】对话框，选择插入的视频，然后单击【确定】按钮。切换到预览模式，视频就自动播放了。u3.链接视频文件u选中要作为超链接的文字，单击常用工具栏的【超链接】按钮，选择要链接的视频文件，然后单击【确定】按钮，超链接就做好了。u1.通过超级链接实现u选中要链接的文字，在Properties卷展栏中的Link下拉列表中选择要链接的视频文件。在预览时，单击超级链接即可播放选择的视频文件。u2.使用RealMedia插件播放视频文件u当在IE中单击一个RealPlayer链接时，系统会自动启动RealPlayer软件，不仅占用系统内存，而且在上网时RealPlayer容易出现错误。解决这问题的最好办法
15、就是将RealPlayer文件嵌入网页。只需安装一个Real Networks专门为Dreamweaver开发的Real Media插件即可。u在网页中插入RM音频文件的具体操作如下：u(1)保存网页。在网页中插入任何RealMedia的控件时，必须先保存网页，不然会出现图11.22所示的对话框。u(2)保存网页后，用鼠标单击RealMedia Audio按钮，打开Select File对话框。一般来说，所有的RealPlayer支持的文件都可以插入其中，如MP3也可以插入。u(3)如果要插入RealPlayer的视频文件，在网页中只能听到声音，却不见图像。这时可以修改Properties卷展
16、栏中的各项参数。RealMedia Audio各项参数设置如图11.24所示，图11.24u在RealMedia文本框中可以输入对应的名称，W栏和H栏就是长和高，它的默认属性是11。Src是播放文件具体的地址，可以单击文件夹图标进行选择。如果要让用户一打开这个页面，就能听到悦耳的音乐，可以选中Auto-Start复选框。一般的音频文件播放时，会出现Real Networks的商标，如果选中Hide Logo复选框，那么商标就不再出现了。u以IE 5.0为例介绍嵌入式Web视频点播系统的实现方法，其中用到了部分PHP和JavaScript技术。u具体操作方法如下：u(1)插入RealPlayer
17、 ActiveX对象(如果要进行测试，需要先安装RealPlayer播放器)u假定以下代码包含在video.php文档中(该文件将在主页面中通过进行链接)。uuuuuu/定义播放界面uuuu/定义状态栏uuuuparam name=SRC value=u uuuu/定义控制面板u其中，CONTROLS参数用来指定播放器的控件外观，可以用多个控件进行组合，并通过CONSOLE参数进行关联。u(2)使用DHTML动态控制RealPlayer控件的播放u以下代码包含在主页面中：uu，其中，video.php文件用力显示RealPlayer控件。u下面我们加入简单的JavaScript 代码用来控制视
18、频的播放。uufunction play(filename)u top.document.all(iVideo).src=video.php?src=+filename;u/iVideo 是刚刚定义的IFRAME 的标识符uu(3)检测用户是否安装RealPlayer播放器u在页面的部分加入以下JavaScript代码，用以检测用户是否安装RealPlayer播放器：u u!u var RealMode=0;u var RealPlayer5=0;u var RealPlayer4=0;u var RealPlayerG2=0;u if(navigator.userAgent.indexOf(
19、MSIE)0)u numPlugins=navigator.plugins.length;u for(i=0;i numPlugins;i+)uplugin=navigator.plugins【i】;uif(plugin.name.substring(0,10)=RealPlayer)uRealMode=1;u uuu/以下代码通过VBScript的CreateObject()函数动态的创建RealPlayer对象udocument.write(n);u document.write(on error resume next n);u d o c u m e n t.w r i t e(R e
20、 a l P l a y e r G 2 =(N O T IsNull(CreateObject(rmocx.RealPlayer G2 Control)n);ud o c u m e n t.w r i t e(R e a l P l a y e r 5 =(N O T IsNull(CreateObject(RealPlayer.RealPlayer(tm)ActiveX Control(32-bit)n);ud o c u m e n t.w r i t e(R e a l P l a y e r 4 =(N O T IsNull(CreateObject(RealVideo.RealV
21、ideo(tm)ActiveX Control(32-bit)n);udocument.write(n);uif(RealPlayerG2|RealPlayer5|RealPlayer4)u/可以在此处添加对象uelse if(RealMode)/NetScape浏览器用户u/可以在此处加入对象uelseuwindow.location.replace(install.htm);/转入install.htm页面指导用户进行安装uu-uu在网页中插入的多媒体元素比较多，可以根据自己的网页设计情况选择其中的一些插入网页中，来制作一个主页。要在这个网页中插入背景音乐、静态图像和动画，则在Dreamweaver中的具体操作步骤如下：u(1)插入表格，并根据需要将表格进行拆分。u(2)在表格中插入主页标志图片以及其他图像，包括静态的和动态的。如图11.27和11.28所示是gif动画变化前后的网页效果。图11.27 图11.28u(3)在网页中插入音频文件作为网页背景音乐。u(4)完善网页的其他部分，插入设计的其他内容。用户可以使用热区以及行为等设置鼠标滑过时显示不同图片的效果。u(5)设置完成后得到的效果，如图11.29所示。图11.29u 参见书p334页：一、选择题、二、填空题、三、判断改错题、四、简答题、五、操作题。
