网页设计与制作 第12章 插入网络组件和多媒体.ppt

《网页设计与制作 第12章 插入网络组件和多媒体.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第12章 插入网络组件和多媒体.ppt（85页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 第第12章章插入网络组件和多媒体本章导读本章导读 l本章介绍如何使用网络组件和多媒体：主要内容包括Flash对象、Java Applet程序、Flash视频、背景音乐、ActiveX 控件、Shockwave对象等插件在网页中应用。本章要点本章要点 lFlash对象的使用lFlash视频的使用lJava Applet程序的使用l背景音乐的使用lActiveX 控件的使用lShockwave对象的应用l在网页制作中，除了使用文本和图像这两个重要的元素以外，动画和声音的适当运用也可使网页更加丰富多彩。应用Dreamweaver 8，可以在网页中插入Flash动画、Flash按钮、Flash文本、

2、Applet程序、ActiveX控件和背景音乐，以及利用插件在网页中插入音频等。12.1 插入插入Flash对象对象l网页中的动画一般有两种形式：一种是GIF动画，由若干个JPEG或GIF图片轮换而成；而另一种则是由Flash软件制作的SWF动画文件。Flash动画以其文件小、效果绚丽，并生成矢量动画而成为网页制作中不可或缺的元素，被越来越多地应用于网页制作中。同时，Flash动画的制作质量更成为衡量一个网站制作水平高低的标准。因此，将网页的动画制作成为Flash成为广大设计师的首选。12.1.1 插入插入Flash动画动画l下面以实例说明如何把Flash动画插入到网页中，具体步骤如下：l（1

3、）将光标定位于文档中表格的单元格中，如图1所示。图图1：l（2）选择菜单命令【插入】媒体】Flash】，弹出【选择文件】对话框，如图2所示。图图2：l（3）在对话框中选择要插入的Flash动画文件。l（4）单击【确定】按钮，在接下来的【对象标签辅助功能属性】对话框中设置标题，如图3所示。图图3：l（5）单击【确定】按钮，在文档中插入动画，Flash动画在文档中显示为一个灰色框，如图4所示。图图4：l（6）单击插入的Flash动画，在【属性】面板中设置相关属性，此时【属性】面板如图5所示。图图5:l（7）在【属性】面板左上角直接显示了Falsh的文件大小，在下部的文本框中可以设置插入Falsh的

4、名称，在此设置为“在线动画”。l（8）选中“循环”复选框，则该动画将在页面浏览时连续播放，如不选中则该动画只播放一次，默认为选中状态。l（9）选择“自动播放”复选框，可以设置在浏览网页时动画是否同时播放，默认为选中状态。l（10）在【属性】面板中可以设置Flash文件的宽、高以及垂直边距、水平边距。l（11）单击【编辑】按钮可以使用Flash编辑器对该Flash动画进行编辑，单击“重设大小”按钮，可以设置Flash动画的宽度和高度为实际大小。l l（12）通过设置【品质】下拉列表框中的选项，可以设置Flash动画画面的品质，此处有低品质、自动低品质、自动高品质、高品质4个选项，默认是高品质。l

5、（13）在【比例】下拉列表框中有3种比例可选，即默认（全部显示）、无边框和严格匹配，默认是全部显示，可以根据实际需要进行设置。l（14）设置Flash动画的对齐方式，在此提供了默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部8种对齐方式。l（15）设置动画的背景颜色，当动画没有显示出来时在动画的位置显示背景颜色。l（16）单击【播放】按钮，可以在Dreamweaver 8的文档视图中直接测试播放当前动画，此时按钮变为【停止】，单击此按钮则停止播放动画。12.1.2 插入插入Flash按钮按钮l为了使不会使用Flash的用户同样可以制作出具有专业效果的Flash按钮或者文本，Drea

6、mweaver 8中内置了制作Flash按钮和文本的功能，应用其内置的样式可以制作精美的Flash按钮，具体步骤如下：l（1）定位于要插入Flash按钮的位置，如图6所示。图图6:l（2）选择菜单命令【插入媒体Falsh按钮】，打开【插入Flash按钮】对话框，如图7所示。图图7:l（3）对话框种各参数的设置如下：l范例：可以通过【范例】右侧的窗口直接预览Flash按钮的动画效果；l样式：通过选择样式的名称，可以在范例右侧窗口中显示Flash按钮的样式；l按钮文本：可以设置按钮上的文本内容，此处输入“Enter MySite”；l字体：选择所写文本内容的字体；l大小：设置文本内容的大小；l链接

7、：设置Flash按钮的链接路径，也可以单击“浏览”按钮，选择链接文件的路径和名称；l目标：设置链接的打开方式，有_blank，_parent，_self，_top4种，此处选择_parent；l背景色：设置Falsh按钮的背景颜色，此处设为#999999；l另存为：设置生成的Flash按钮的文件名称，此处设为enter.swf。l（4）设置完成的对话框如图8所示。图图8:（5）单击【确定】按钮，关闭当前对话框，在弹出的【Flash辅助功能属性设置】对话框中设置标题为【进入站点】，如图9所示。图图9:l（6）保存文档，在浏览器中预览网页，效果如图10所示。图图10:12.1.3 插入插入Flas

8、h文本文本l在Dreamweaver 8中，不但可以在文档中插入Flash按钮，还可以用Dreamweaver 8内置的样式直接插入Flash文本，具体的操作步骤如下：l（1）定位于要插入Flash按钮的位置，选择菜单命令【插入媒体Flash文本】，打开【插入Flash文本】对话框，如图11所示。l（2）对话框中各参数设置如下：l文本：在文本框中输入要插入的Falsh文本内容，此处设置为Skip；l字体：在下拉列表中选择Flash文本的字体，此处设为宋体；l大小：在文本框中设置Flash文本的大小，值为像素，此处设为20；l颜色：设置Flash文本的颜色，可以在文本框中直接输入颜色值，也可以通

9、过单击【颜色选择器】按钮选择文本的颜色，此处设为#CCCCCC；l转换颜色：设置Flash文本的鼠标经过时的颜色，设置方法同上，此处设置为#FF6633；l文本：在多行文本框中设置Flash文本内容，最好为英文；l链接：设置在单击时的链接路径，此处设置为index.htm；l目标：设置链接的方式，有4种链接的方式可选择，即_blank、_parent、_self、_top；l背景色：设置Flash文本的背景颜色，此处设置成同网页背景同色；l另存为：设置Flash文本生成后的文件名，此处设置为test.swf。图图11:l（3）各参数设置完毕的对话框如图12所示。图图12:l（4）单击【应用】按

10、钮，在文档中可以看到Flash文本插入后的效果，确认效果后，单击【确定】按钮，弹出【Flash辅助功能属性】对话框，设置标题为“跳过动画直接进入主页”，如图13所示。图图13:l（5）单击【确定】按钮，在文档种插入Flash文本，此时预览效果如图14所示。图图14:l（6）如果想修改当前插入的Flash文本，只需在文档窗口中选中Flash文本对象，然后双击或者在属性面板中单击【编辑】按钮，即可在弹出【插入Flash文本】对话框中设置。l（7）选中Flash文本，单击【属性】面板中的播放按钮，可在文档中测试Flash文本的预览效果，单击【停止】按钮停止播放。12.2 插入插入Java Apple

11、t程序程序l现在互联网上已经有很多编写好的Java程序，它可以很方便的实现一些HTML语言无法实现的功能，如果把它们插入到网页中，就可以制作出更加丰富多彩的网页，以吸引读者的浏览，具体的操作步骤如下：l（1）定位于要插入Java Applet的位置，选择菜单命令【插入媒体Applet】，在弹出的【选择文件】对话框中选择class文件，如图15所示。图图15:l（2）单击【确定】按钮，弹出【Applet辅助功能属性】对话框，设置【替换文本】和【标题】文本框中的内容，如图16所示。图图16:l（3）单击【确定】按钮，在文档中插入Java Applet的小程序，该程序以图表形式显示，如图17所示。图

12、图17:l（4）选中Applet图标，可以在其【属性】面板中进行设置，如图18所示，各项参数设置如下：图图18:lApplet名称：在【属性】面板左上角的文本框内设置Applet的名称；l宽和高：设置Applet程序的宽度和高度；l代码：设置Applet程序的所在路径；l基址：设置Applet程序所在的文件；。l对齐：设置Applet的对齐方式，有默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐和右对齐等；l替换：设置Applet在无法显示时替换的文本；l垂直边框：设置Applet程序距离上下元素的距离；l水平边框：设置Applet程序距离左右元素的距离；l参数：单击该按钮

13、，可以对插入的Applet程序进行进一步详细的设置，单击后弹出的【参数】对话框，如图19所示。图图19:l（5）保存文件，按F12预览该网页，如图20所示。图图20:12.3 插入插入Flash视频视频lFlash视频是一种流媒体格式文件，它是Macromedia公司随Flash系列产品推出的一种产品，运用Flash软件可以将各类视频文件转换成Flash视频文件，然后再用Flashplayer进行播放，现在很多网站都有可以让浏览者直接观看的视频，如视频直播、播放影像文件等。视频文件可以直接插入到网页中，但只有在浏览器安装了相应的插件后才可以播放。因此一般在网页中插入视频时，大多采用多数浏览器支

14、持的Windows Media Player播放器，可以在页面中设置播放器的外观，包括播放器的播放、暂停、前进、后退、开始、结束等控制按钮，具体的操作步骤如下：l（1）定位于要插入视频的位置，选择菜单命令【插入媒体插件】，弹出【选择文件】对话框，选择要插入的文件，如图21所示。图图21:l（2）单击【确定】按钮，将视频文件插入到文档中，并设置相应的高度和宽度，此时该视频以插件图标显示，如图22所示。图图22:l（3）保存文件，在浏览器中观看插件视频的效果，如图23所示。图图23:l（4）此时采用的都是默认的播放样式，单击【属性】面板中的【参数】按钮，在打开的【参数】对话框中可以进行更详细的参数

15、设置，如图24所示。图图24:12.4 插入背景音乐插入背景音乐l带背景音乐的图片能增加吸引力，可以使用行为实现这种网页，也可以使用插件实现，但是在添加音乐时要注意控制文件的大小，因为它会导致网页加载时间变长。l添加背景音乐的格式一般以WMV、MP3、MID格式为主。MID格式的音乐因其文件小、反应快、可重复播放等特点而成为网页中默认的背景音乐格式；而MP3则是压缩率最高、音质最好的文件格式。添加背景音乐的步骤如下：l（1）将文档切换到代码视图，将光标定位于标记的下一行代码处，如图25所示。图图25:l（2）在光标处书写以下代码“”，如图26所示。图图26:l（3）保存文档，在浏览器中查看效果

16、，打开音箱即可听到背景音乐。12.5 插入插入ActiveX 控件控件lActiveX控件是一种可以再利用的控件，在网页中插入ActiveX控件，可以很快地在网址、应用程序和开发工具中加入特殊的功能。目前ActiveX控件可以在大部分的操作系统中运行，在网页中插入ActiveX控件的步骤如下：l（1）定位于要插入ActiveX控件的位置，选择菜单命令【插入媒体ActiveX】，弹出【对象标签辅助功能属性】对话框，在对话框中设置标题，如图27所示。图图27:l（2）单击【确定】按钮，在当前文档中插入ActiveX控件，文档中显示出ActiveX控件的图标，如图28所示。图图28:l（3）选中Ac

17、tiveX控件图标，在【属性】面板中设置控件的属性，如图29所示。图图29:l属性面板中各项参数的设置如下：l控件名称：ActiveX下面的文本框用来设置控件的名称，此处设置为Soft；l宽和高：用来设置ActiveX控件的宽度和高度，必须为数值，单位是像素；lClassID：下拉列表中有4种选择，为浏览器标识ActiveX控件，在页面加载时，浏览器用ClassID来确定它与该页面相关的ActiveX控件所需的ActiveX控件位置，如果选择了Shockwave for Director 6，则当前的ActiveX控件就变成了Shockwave属性面板，可以对Shockwave属性进行设置；如

18、果选择了Shockwave for Flash，则当前的ActiveX控件就变成了Flash面板，可以对Flash属性进行设置；l嵌入：选中【嵌入】复选框，可以在源文件的文本框中设置ActiveX控件的源数据文件，在此不选中此复选框；l对齐方式：提供了10种对齐方式，包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐，在此选中默认值；l垂直边距：设置ActiveX控件距离上下网页元素的距离；l水平距离：设置ActiveX控件距离左右网页元素的距离；l基址：设置ActiveX控件的路径，如果浏览者的浏览器没有安装设置ActiveX控件，则浏览器可以自动从该路径下载提

19、示用户安装，在此设置为activex；l编号：设置ActiveX控件的编号，在此设为0012；l数据：指定ActiveX控件的数据文件，根据需要进行设置，很多的ActiveX控件不需要设置数据文件；l替换图像：设置当ActiveX控件无法显示时，用来替代ActiveX控件的图像；l播放：单击该按钮，可以在Dreamweaver 8文档视图中预览该控件的显示效果；l参数：单击该按钮，可以设置ActiveX控件的参数，可以对其进行初始化等设置。l（4）保存文件，在浏览器中预览插入ActiveX控件后的效果。12.6 插入插入Shockwave对象对象lShockwave是Macromedia公司的

20、网上交互多媒体的标准，它是一种压缩了的媒体格式，集图像、动画、声音于一体，样式多彩、易于使用，在绝大多数的浏览器中可以快速下载和播放，因此是网上非常流行的一种多媒体播放形式，而Shockwave播放器既可作为浏览器的插件，也可以作为ActiveX控件来使用，在网页中插入Shockwave的步骤如下：l（1）将光标定位于要插入Shockwave动画的位置，选择菜单命令【插入媒体Shockwave】，打开【选择文件】对话框，选择.dcr文件的路径，如图30所示。图图30:l（2）单击【确定】按钮，在弹出【对象标签辅助功能属性】对话框中设置标题为“Shockwave游戏”，如图31所示。图图31:l

21、（3）单击【确定】按钮，将在文档中插入Shockwave文件，此时在文档的设计视图中Shockwave文件将以Shockwave图标的形式显示，如图32所示。图图32:l（4）选中Shockwave图标，在【属性】面板中设置属性，如图33所示。图图33:l属性面板中各参数设置如下：l名称：在左上角的文本框中设置Shockwave的名称；l宽和高：设置其宽度和高度；l垂直边距：设置Shockwave动画距离所在元素内上下的距离；l水平边距：设置Shockwave动画距离所在元素内左右的距离；l文件路径：设置Shockwave动画的文件所在的路径，单击浏览按钮可以查找本地文件路径；l对齐属性：设置

22、Shockwave动画的对齐属性，包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐，在此选中默认值；l背景颜色：设置Shockwave动画的背景颜色；l播放：单击“播放”按钮，可以在文档内测试播放Shockwave动画，不过需要安装相应的Shockwave插件才可以在设计视图中播放；l参数：单击【参数】按钮，可以在打开的【参数】对话框中设置参数，如图34所示。图图34:l（5）保存文档，在浏览器中标预览其效果，如图35所示。图图35:本本 章章 小小 结结l通过本章的学习，读者可以很详细地了解在网页中插入多媒体的一些方法和技巧，实现把Flash动画，视频文件、Java Applet程序、ActiveX控件等插入到网页中，以实现良好的视觉效果。