网页设计与制作插入多媒体对象课件.pptx

1、 我们可以很方便地在网页中插入文字、图像、表格、表单等元素。也可以很轻松地在网页中添加多媒体元素。如Java小程序，QuickTime或Shockwave影片，Flash动画，ActiveX控件、MP3音乐文件，Flash按钮和文本对象或其他声音和视频对象。通过这些元素的加入，可以将文字、声音和图像等元素以交互且动态的方式呈现在网页上。第八章第八章 插入多媒体对象插入多媒体对象 第八章第八章 插入多媒体对象插入多媒体对象 8.1 插入Flash动画 8.2 插入Shockwave影片 8.3 插入ActiveX控件 8.4 添加插件 8.5 插入Fireworks HTML 8.6 添加Jav

2、a Applet 8.7 添加声音 8.8 插入其他对象 8.1 插入Flash动画 【垂直边距】和【水平边距】：指影片上、下、左、右的留白间距。【品质】：为运行影片的object和embed标签设置quality参数。该设置关系到影片回放时使用的防锯齿的级别。在高的设置下看起来会好些，但这便要求一个更快的CPU在屏幕上进行显示。【低品质】设置重点强调速度，而【高品质】尽可能强调外观。【自动高品质】则会在开始时尽量保证两个方面的质量，但在需要时会牺牲品质来换取速度。【比例】：确定影片如何适合在【宽】和【高】文本框中设置的尺寸。【默认值】设置显示整个影片，维持原始的纵横比；【无边框】使影片适合设

3、定的尺寸，超出部分将自动裁剪，维持原始的纵横比；【严格匹配】对影片影片进行缩放以适合设定的尺寸，而不管原始的纵横比 如何。会压缩变形【参数】：将打开一个对话框，可在其中输入传递给影片的附加参数，如图8-2所示。影片必须已设计好，可以接收这些附加参数。当用户在文档中插入一个Flash影片时，Dreamweaver MX 2004将同时使用object标签（Microsoft为ActiveX 控件定义的标签）和embed标签（Netscape为插件定义的标签），以便在所有的浏览器类型中都能获得最佳效果。当用户在【属性】面板中对影片作修改时，Dreamweaver MX 2004将同时对object

4、标签和embed标签中的参数作适当的修改。8.1 插入Flash动画8.2 插入插入Shockwave影片影片 Shockwave电影是Macromedia公司在Web上的交互式多媒体。用于播放插入网页中应用Director软件创建的多媒体电影。Shockwave电影可以集动画、位图、视频和声音于一体，并将它们合成一个交互式界面。Shockwave电影允许媒体文件通过Macromedia的控制器下载，下载速度十分快，而且能被绝大多数的浏览器播放。Microsoft公司的Internet Explorer与Netscape公司的Navigator两种浏览器都可以播放Shockwave电影.Dre

5、amweaver MX 2004是利用object标签与embed标签来插入Shockwave电影的；object标签是通过Microsoft公司的ActiveX控件来定义的；embed标签是通过Navigator的插件来定义的。插入Shockwave电影的具体操作如下：(1)打开文档，将光标定位于要插入Shockwave影片的地方。(2)通过下列步骤之一插入Shockwave影片：l 在【常用】工具栏单击【媒体】下拉列表，从中选择【Shockwave】。l 选择【插入菜单/【媒体】/【Shockwave】。(3)在弹出对话框中的选择文件，选取一个Shockwave影片文件，Shockwave

6、影片文件的扩展名为dcr、dir、dxr。【文档】窗口中将出现一个Shockwave占位符。(4)设置Shockwave影片的属性，如图8-3所示。8.2 插入插入Shockwave影片影片 l 【名称】：为脚本程序指定Shockwave影片的名称。l 【宽】和【高】：指定Shockwave影片的宽度和高度，默认单位为象素。还可以指定以下单位：pc（十二点活字）、pt（点）、in（英寸）、cm（厘米）或%。l 【文件】：指定Shockwave影片文件的路径。点击文件夹图标可查找文件，或者键入路径。l 【垂直边距】和【水平边距】：指影片上、下、左、右的留白间距。l 【对齐】：确定电影与页面的对齐

7、方式。l 【背景颜色】：指定电影区域的背景颜色。l 【播放】：单击可观察电影的播放效果。l 【参数】：将打开一个对话框，在对话框中可输入其他参数传递给电影。8.2 插入插入Shockwave影片影片 8.3 插入插入ActiveX控件控件 ActiveX控件实际上是一个程序，它可以嵌入到网页中，随网页传送到客户的浏览器上，只要客户端的浏览器有支持ActiveX的功能，就会自动下载并执行它。ActiveX控件扩展了Web浏览器的功能。要插入ActiveX控件，具体操作如下：(1)打开文档，将光标定位于要插入ActiveX控件的地方。(2)通过下列步骤之一插入ActiveX控件：l 在【常用】工具

8、栏单击【媒体】下拉列表，从中选择【ActiveX】。l 选择【插入】菜单/【媒体】/【ActiveX】。(3)【文档】窗口中将出现ActiveX控件的一个占位符。(4)设置ActiveX控件的属性，如图8-4所示。l【名称】：为脚本程序指定ActiveX的名称。l【宽】和【高】：指定ActiveX对象的宽度和高度，默认单位为象素。还可以指定以下单位：pc（十二点活字）、pt（点）、in（英寸）、cm（厘米）或%。l【ClassID】：用于浏览器识别ActiveX控件。输入一个值，或在下拉列表中选择一个选项，载入页面时，浏览器使用ClassID确定播放ActiveX对象的ActiveX控件位置。

9、l 【嵌入】：为ActiveX控件在Object标签内添加embed标签。如果ActiveX控件具有等效和Netcaspe Navigateor插件，则Embed 将激活该插件。l【源文件】：如果启用了【嵌入】选项，将要用于Netscape Navigator 插件的数据文件。如果没有输入值，则有Dreamweaver将尝试根椐已输入的ActiveX属性确定该值。8.3 插入插入ActiveX控件控件 l【垂直边距】和【水平边距】：指ActiveX对象的上、下、左、右的留白间距，单位为像素。l【基址】：指定包含该ActiveX控件的URL，如果在访问者的系统中尚未安装该ActiveX控件，则I

10、nternet Explorer从该位置下载它。如果没有指定【基址】参数，并且访问者尚未安装相应的ActiveX控件，则浏览器不能显示ActiveX对象。l 【编号】：该文本框定义了ActiveX控件中的ID参数，该参数专门供ActiveX控件使用。l 【数据】：为ActiveX控件指定载入的数据文件，许多ActiveX控件（如Shockwave 和RealPlayer）不支持这个参数。l【替代图像】：该属性（只有当使用Object标签时才有效）指定一个图像，当用户的浏览器不支持ActiveX控件时，就显示该图像。l 【参数】：将打开一个对话框，在其中可以为该ActiveX对象添加更多的参数。

11、8.3 插入插入ActiveX控件控件 8.4 添加插件 在浏览网页时，常会遇到一些浏览器无法处理的文件，如动画文件、音乐文件。为了解决这个问题，要借助于插件，通过下载媒体公司为浏览器开发的插件，可以看到更多的媒体类型。插件处理程序是为扩展Netscape处理多媒体内容的能力而安装在Netscape浏览器中的执行程序。通过使用插件可以在Web站点上显示并播放一些已安装了插放器的媒体文件。插件主要是针对Netscape Navigator浏览器制作的，虽然 Internet Explorer也支持该功能，但仍有少数的插件在执行时会出问题。添加插件的具体操作步骤如下：(1)打开文档，将光标定位于要

12、插入插件的地方(2)通过下列步骤之一添加插件：l 在【常用】工具栏单击【媒体】下拉列表，从中选择【插件】。l 选择【插入】菜单/【媒体】/【插件】。(3)在弹出对话框中选择文件，这里选择一个mp3的声音文件，然后单击【确定】按钮。设置插件属性，【插件】的属性面板如图8-5所示：8.4 添加插件 l【源文件】：设置数据文件的路径及文件名。l【插件URL】：该设置是针对源文件中文件的类型来设置的，即此处应为播放源文件中数据文件的程序。例如，若源文件中选择的是mp3的声音文件，则此处应为Realone Player这一插件。如果浏览该网页的用户没有安装该插件，浏览器会将此位置指定的应用程序下载。l

13、其他参数的设置与【Active 控件】相同。Active控件和插件的区别是：控件和插件的区别是：如果有人载入了一个网页，且网页中带有他的浏览器不支持的ActiveX控件，浏览器就会自动安装所需软件；如果是插件，用户必须亲自找出支持软件并进行安装。但两者的作用还是基本相同的。8.4 添加插件 8.5 插入Fireworks HTML Fireworks主要用于网页的设计和图像的优化设计及处理。通过Fireworks所设计的网页避免了在Dreamweaver中设计网页的种种弊端，并能导出为HTML文档格式以供在Dreamweaver中使用。在Dreamweaver文档中，可以插入Fireworks

14、的HTML文件，具体操作如下：(1)打开文档，将光标定位。(2)选择【插入】/【图像对象】/【Fireworks HTML】，打开如图8-6所示对话框。(3)点击【浏览】按钮，选择要插入的Fireworks HTML文件。(4)如果勾选【插入后删除文件】，则完成该操作后，会将原始的Fireworks HTML文件移至【回收站】。(5)单击【确定】按钮，完成操作。选中刚插入的对象，切换到设计视图，可以看到它是用表格标签把图像、切片以HTML语言的格式组织起来。8.6 添加Java Applet Java是一种面向对象的网络编程语言。Applet是Java开发的小程序，可以嵌入到网页中，浏览器只要

15、安装了java虚拟机，就可以解释并执行applet小程序。Dreamweaver使用标签来标识applet小程序。现在的浏览器大多支持Java虚拟机，以Internet Explorer为例，打开IE浏览器，选择菜单【工具】/【internet选项】，切换到【高级】选项卡，勾选【Java】选项。重新启动计算机，浏览器就可以对applet进行解释执行。插入Java小程序的具体操作如下：(1)打开文档，将光标定位于要插入applet的地方(2)通过下列步骤之一添加apple：l 在【常用】工具栏单击【媒体】下拉列表，从中选择【applet】。l 选择菜单【插入】/媒体/【applet】。(3)在出

16、现的文件选择对话框中，选择一个applet小程序的文件，扩展名为.class。（注：要插入的Java小程序的扩展名为.class，该文件需放在与引用文件相同的文件夹下，引用文件名要区分大小写。）(4)在【属性】面板中对apple的参数进行设置。如图8-7的所示。8.6 添加Java Applet l 【Applet名称】：为脚本程序指定Applet小程序的名称。l【代码】：指定Applet文件的路径。点击文件夹图标可查找文件，或者键入路径。l【基址】：指定包含选定Java Applet文件的文件夹。l【替代】：如果用户的浏览器不支持Applet程序或者Java被禁止，该选项将指定一个代替显示的

17、内容，如文本或图像。其他参数的设置与插件【属性】面板相同。8.6 添加Java Applet 8.7 添加声音 1.声音文件格式 下面的列表描述了一些常见的声音文件，以及每种声音格式用于Web设计时的优点和缺点。.midi或或.mid（电子乐器化数据接口）（电子乐器化数据接口）主要用于电子乐器音乐。很多浏览器不用插件也可以支持MIDI文件。虽然其声音品质非常好，但同时也取决于访问者声卡的好坏。一个非常小的MIDI文件却可以提供相当长的声音剪辑。MIDI文件不能录制，而必须在计算机上使用特殊的硬件和软件进行人工合成。.wav（波形扩展）（波形扩展）该文件有好的声音品质，很多浏览器不用插件也可以支

18、持WAV文件。可以从CD，磁带，麦克风等输入设备录制自己的WAV文件。但它的文件非常大，限制了在Web页上使用声音剪辑的长度。.aif（声音交换文件格式，或（声音交换文件格式，或AIFF）和WAV格式一样它也有非常好的声音品质，很多浏览器不用插件也可以支持AIF文件。也可以从CD，磁带，麦克风等输入设备录制自己的AIF文件，但它的文件很大，在Web页上使用声音剪辑的长度。.mp3（电影专家组声音，或者（电影专家组声音，或者MPEG-Audio Layer-3）一种使声音文件大小有实质性缩小的压缩格式。其声音品质非常好：它的播放采用”流”的方式，文件边下载边播放，节省了等待的时间，很适合网上播放

19、。这样来访者就无须等待下载整个文件便可以听到音乐。然而MP3文件大小比Real声音文件要大，所以如果要通过普通电话线连接传输一首完整的歌曲可能要等上一段时间。若要播放MP3文件，来访者必须下载并安装一个辅助应用程序或插件如QuickTime，Windows Media Player或Realone Player。.ra，.ram，.rpm或或Real Audio有非常高的压缩比，所以比MP3文件还要小。完整的歌曲文件可以在较短的时间内完成下载。由于该类文件可以从一个普通的Web服务器上“流式”播放，所以来访者可以在文件还没完全下载之前便开始欣赏音乐。这类文件音质不如MP3文件，但最新版本的播放

20、器和解码器已经极大地提高了声音品质。来访者必须下载并安装Realone Player应用程序辅助插件来播放这些文件。8.7 添加声音 2链接到声音文件链接到声音文件 链接到声音文件是将声音添加到Web页面的一种简单而有效的方式。这种结合声音文件的方式让来访者可以选择他们所感兴趣的文件。具体操作如下：(1)在文档中输入声音文件名，例如”小小少年”，选中文本。(2)在【属性】面板中，点击【链接】文件夹图标选取声音文件，或者在【链接】域中键入文件名称和路径，例“02.mp3”。如图8-8所示。保存文档，按F12预览，查看效果。8.7 添加声音 3嵌入声音嵌入声音 嵌入声音是将声音播放器直接结合到页面

21、嵌入声音是将声音播放器直接结合到页面中，但只有在站点来访者装有可以播放选定声中，但只有在站点来访者装有可以播放选定声音文件的插件时，才可以播放声音。如果需要音文件的插件时，才可以播放声音。如果需要将声音作为背景音乐或者需要更多对声音表现将声音作为背景音乐或者需要更多对声音表现的控制时，可以嵌入声音文件。例如，可以设的控制时，可以嵌入声音文件。例如，可以设置音量，设置播放器在页面上的外观，设置声置音量，设置播放器在页面上的外观，设置声音文件自动开始播放或按下按钮后开始播放，音文件自动开始播放或按下按钮后开始播放，是否循环等。是否循环等。8.7 添加声音(1)打开文档，将光标定位在需要嵌入声音文件

22、的地方。(2)选择菜单【插入】【媒体】【插件】。(3)在【属性】面板中，点击文件夹图标选取声音文件，或者在【链接】域中键入文件名称和路径。在【属性】面板中设置【宽度】和【高度】的值，或者在【文档】窗口中调整插件占位符的大小。这些值决定了声音控制在页面中显示的大小。如图8-9所示。保存文档，按F12预览，查看效果 8.7 添加声音 4使用行为播放声音使用行为播放声音使用播放声音行为可以播放声音。例如，在鼠标经过某链接时播放声音文件，或者在加载页面时播放音乐剪辑等(1)在文档中输入文本，例如“我是草原小骑手”，选中该文本，在【属性】面板为文本建立空链接。(2)打开【行为】面板，点击（+）添加按钮并

23、从【行为】弹出式菜单中选择【播放声音】。如图8-10所示。(1)点击【浏览】按钮，选取声音文件，或者在【播放声音】域中输入路径和文件名称。(2)点击【确定】，检查默认事件是否是需要的事件。保存文档，按F12预览，查看效果。8.7 添加声音 8.8 插入其他对象 8.8.1 插入文件头标签 1插入Meta 2插入关键字 3插入说明 4插入刷新 8.8.2 插入特殊字符 8.8.3 插入注释8.8.4 插入时间 文件头标签就是标签，包含在中间，浏览网页是不会被显示。Meta标签中记录当前页面的重要信息，如文档类型、语言编码、关键字、文档说明等。META最大的作用就是提供搜索引擎关于本站的描述关键字

24、，简单的说，当搜索网站的机器人搜索到你的网站时，会首先检查META所描述的关键字，然后把这些关键字加入到数据库中，所以，利用好META标签会让你在搜索引擎中被搜索到的机会增加。8.8.1 插入文件头标签插入文件头标签 【属性】：下拉列表中包括【名称】和【HTTP-equivalent】两个选项。【名称】是描述网页的信息，【HTTP-equivalent】是标题信息，相当于HTTP文件头的作用，可以直接影响网页的传输。【值】：表示的Meta类型.。【内容】：指的是【值】选项所对应的具体的Meta里的信息。切换到代码视图，可看到对应的代码为：1插入插入Meta 2插入关键字插入关键字 插入关键字就

25、相当于设置Meta标签的content属性。关键字是网站主题、内容、风格的简洁描述。是为网络中的搜索引擎准备的。选择菜单【插入】/【HTML】/【文件头标签】/【关键字】，打开【关键字】对话框。如图8-13 所示。8.8.1 插入文件头标签插入文件头标签3插入说明插入说明 说明是对网站内容的详细描述。选择菜单【插入】/【HTML】/【文件头标签】/【描述】，打开【描述】对话框。如图8-14所示。8.8.1 插入文件头标签插入文件头标签4插入刷新插入刷新 插入刷新，可以让网页定时自动刷新。该功能对及时显示在线人员或离线人员时非常有用。选择菜单【插入】/【HTML】/【文件头标签】/【刷新】，打开【刷新】对话框。如图8-15所示。8.8.1 插入文件头标签插入文件头标签 经常要向网页中插入一些特殊的字符，如：版权、商标、换行符等。Dreamweaver提供了多种特殊字符的插入。只要选择菜单【插入】/【HTML】/【特殊字符】，就可在弹出菜单中进行选择。如图8-16所示。8.8.2 插入特殊字符插入特殊字符(1(1)从Internet上任意下载一个Flash 动画，然后用 Dreamweaver将其插入到自己编写的网页中。(2)在网页文档中插入一段MP3音乐，并插入一段Flash 文本和两个Flash按钮。操作题操作题