第3章 插入媒体等对象.

Presentation on theme: "第3章 插入媒体等对象."— Presentation transcript:

1 第3章 插入媒体等对象

2 第3章插入媒体等对象 Dreamweaver可以轻松地帮助我们在网页内插入日期、和插件等对象，是网页更精彩。Shockwave影片、SWF动画、FLV视频、Applet、ActiveX

3 第3章插入媒体等对象 第3.1节 插入日期和Shockwave影片等对象 第3.2节 插入其他媒体对象 第3.3节 应用实例

4 第3.1节 插入日期和Shockwave影片等对象
插入日期和Fireworks HTML 1．插入日期 2．插入Fireworks HTML 3．插入Shockwave影片

5 插入日期和Fireworks HTML 1．插入日期 （1）单击“插入”（常用）工具栏中的“日期”按钮 ，调出“插入日期”对话框，如图3-1-1所示。利用它可以插入日期和时间。

6 插入日期和Fireworks HTML （2）在“插入日期”对话框的“星期格式”下拉列表框中选择是否显示星期和以什么格式显示，在“日期格式”下拉列表框中选择以什么格式显示日期，在“时间格式”下拉列表框中选择以什么格式显示时间。 （3）选择“存储时自动更新”复选框。则可以在保存网页文档时自动更新日期和时间。

7 插入日期和Fireworks HTML 2．插入Fireworks HTML （1）选择“插入”（常用）工具栏的“图像”下拉菜单中的Fireworks HTML命令，调出“插入Fireworks HTML”对话框，如图3-3-2所示。

8 插入日期和Fireworks HTML （2）在“Fireworks HTML 文件”文本框中输入Fireworks文件目录与文件名或者单击“浏览”按钮，调出“选择Fireworks HTML 文件”对话框，利用该对话框选择Fireworks生成的HTML格式文件名，单击“确定”按钮，即可插入Fireworks图像或动画。

9 插入日期和Fireworks HTML 3．插入Shockwave影片 Shockwave影片是Director软件创建的，插入它的方法如下所述。 （1）选择“插入”（常用）工具栏中的“媒体”下拉菜单中的“Shockwave”命令，调出“选择文件”对话框。利用该对话框可以插入Shockwave影片文件（它的扩展名为“.dcr”）。

10 插入日期和Fireworks HTML （2）插入Shockwave影片文件后，网页文档窗口内会显示一个Shockwave影片图标，如图3-3-3（a）所示。用鼠标拖曳Shockwave影片图标右下角的黑色控制柄，可以调整它的大小。

11 插入日期和Fireworks HTML （3）播放Shockwave影片的条件是在“C:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\Plugins”目录下有播放Shockwave影片的插件。该插件可从网上下载。

12 插入日期和Fireworks HTML （4）Shockwave影片对象的“属性”栏：如图3-3-3（b）所示，

13 第3.2节 插入其他媒体对象 插入SWF动画和FLV视频 插入Applet、ActiveX和插件对象

14 插入SWF动画和FLV视频 1．插入SWF动画 （1）创建一个网页文件，并保存。然后，选择“插入”（常用）工具栏中的“媒体”下拉菜单中的SWF命令，调出“选择SWF”对话框，如图3-2-1所示。选中要导入的SWF文件，单击“确定”按钮，如果SWF文件保存在站点文件夹内，在网页内导入SWF文件。

15 插入SWF动画和FLV视频 如果SWF文件没有保存在站点文件夹内，会显示如图3-2-2所示的提示框，单击该提示框内的“是”按钮，可以将SWF文件复制到站点文件夹内，同时导入站点文件夹内的SWF文件；单击该提示框内的“否”按钮，可以将SWF文件直接导入网页内。导入SWF文件后，在网页内形成的SWF图标如图3-2-3所示。

16 插入SWF动画和FLV视频 （2）SWF对象的“属性”栏（导入站点目录下“SWF”文件夹中的SWF文件）如图3-2-4所示。

17 插入SWF动画和FLV视频 图3-2-4“属性”栏中前面没有介绍过的各选项的作用如下。 ◎“文件”文本框与文件夹按钮 ：用来选择SWF影片源文件。 ◎“循环”复选框：选择它后，可循环播放。 ◎“自动播放”复选框：选择它后，可自动播放。 ◎“品质”下拉列表框：设置图像的质量。 ◎“比例”下拉列表框：选择缩放参数。 ◎“参数”按钮：单击它，可以调出“参数”对话框，利用它可以设置相关参数。例如，输入参数“wmode”，值为“transparent”，可使Flash动画透明，参看实例9。

18 插入SWF动画和FLV视频 2．插入FLV视频 （1）选择“插入”（常用）工具栏中的“媒体”下拉菜单中的“FLV”命令，调出“插入FLV”对话框，如图3-2-5（a）所示（还没有设置）。 （2）在“视频类型”下拉列表框内选择“累进式下载视频”选项后的“插入FLV”对话框如图3-2-5所示，选择“流视频”选项后的“插入FLV”对话框如图3-2-6所示。

19 插入SWF动画和FLV视频 （3）单击图3-2-5所示对话框内URL文本框右边的“浏览”按钮，调出“选择FLV”对话框，利用该对话框选择一个扩展名为“.flv”的Flash视频文件。 如果FLV文件没有保存在站点文件夹内，也会显示一个提示框，单击该提示框内的“是”按钮，可以将FLV文件复制到站点文件夹内，同时导入站点文件夹内的FLV文件；单击该提示框内的“否”按钮，可以将FLV文件直接导入网页内。 （4）在“外观”下拉列表框内选择一种播放器样式。其下边会显示相应播放器的外观。

20 插入SWF动画和FLV视频 （5）在“宽度”和“高度”文本框内分别输入FLV视频的宽和高，单位为像素。单击“检测大小”按钮，可自动在这两个文本框内显示视频实际的宽度和高度值。 （6）“自动播放”和“自动重新播放”复选框：用来设置播放方式。 设置完成后，单击“确定”按钮，即可在光标处插入一个FLV格式的视频。

21 3.2.2 插入Applet、ActiveX和插件对象
选择“插入”（常用）工具栏中的“媒体”下拉菜单中的Applet命令，调出“选择文件”对话框，导入扩展名为“.class”的Java Applet文件。使用Java Applet程序时应看程序作者给出的说明，再按照说明进行操作。插入文件后，网页内会显示一个Java Applet图标，如图3-2-7（a）所示。单击选中它后，可以拖曳插件图标的黑色控制柄，来调整它的大小。

22 3.2.2 插入Applet、ActiveX和插件对象
Java Applet对象的“属性”栏如图3-2-7（b）所示，其中主要选项的作用如下所述。 （1）“代码”文本框与按钮 ：文本框用来输入或导入Java Applet程序文件的路径 和名称。按钮 ，可调出“选择Java Applet文件”对话框，利用该对话框可导入Applet程序。 （2）“基址”文本框：用来输入Java Applet程序文件的名字。 （3）“替代”文本框与文件夹按钮：输入Java Applet替代图像的路径与名字。单击文件夹按钮，调出“选择文件”对话框，利用该对话框选择Java Applet的替代图像。 （4）“参数”按钮：单击该按钮，可以调出“参数”对话框，利用该对话框可以设置Java Applet程序中所使用的参数。

23 3.2.2 插入Applet、ActiveX和插件对象
2．插入ActiveX对象 ActiveX控件是Microsoft对浏览器的功能扩展，其作用与插件基本一样。不同的是，如果浏览器不支持网页中的ActiveX控件，则浏览器会自动安装所需软件。如果是插件，则需要用户自己安装所需软件。单击“插入”（常用）工具栏中的“媒体”下拉菜单中的ActiveX命令，可在文档窗口内创建一个ActiveX图标，如图3-2-8（a）所示。单击选中它后，可拖曳插件图标的控制柄。该对象的“属性”栏如图3-2-8（b）所示。

24 3.2.2 插入Applet、ActiveX和插件对象
图3-2-8（b）各选项的作用如下 （1）选中“嵌入”复选框，“源文件”栏变为有效，单击“源文件”栏的文件夹按钮 ，可调出“选择Netscape的插入文件”对话框。利用该对话框可以选择要加载的文件。 （2）“ClassID”列表框：它给出了3个类型代码，标明了ActiveX类型，其中一个用于Shockwave影片，一个用于Flash电影和一个用于Real Audio。如果要使用其他控件，需要自己输入相应的代码。选择不同类型代码后，“属性”栏会产生相应的变化。 （3）“编号”文本框：它在“属性”栏内的左最边，用来输入ActiveX的ID参数。 （4）“基址”文本框：用来输入加载的ActiveX控件的URL。 （5）“数据”文本框：用来输入加载的数据文件名字。

25 3.2.2 插入Applet、ActiveX和插件对象

26 第3.3节 应用实例 3.3.1【实例3-1】圣诞节和剪纸 （1）在JPG2文件夹中放置10个图像文件“剪纸1.jpg”… “剪纸10.jpg”。在JPG1文件夹内放置10个GIF动画文件TU1-1.gif、TU1-2.gif、… TU5-1.gif、TU5-2.gif，5个图像文件TU1.gif… “TU5.gif”，一个名称为“标题.jpg”的文字标题图像文件。在JPG2文件夹内放置“剪纸1.jpg”……“剪纸5.jpg”5个图像文件。

27 第3.3节 应用实例 （2）新建一个网页文档，将它以名称“H3-1.htm”保存到“D:\BDWEB2\H3-1”文件夹内。插入一个5行5列的表格，然后进行表格的合并和调整。在表格的“属性”栏内设置“填充”和“间距”均为1像素，“边框”为1像素，效果如图3-3-3所示。

28 第3.3节 应用实例 （3）在第1行导入一幅“JPG1/标题.jpg”文字标题图像，并使它居中对齐。在第3行的5个表格单元格内分别插入图像“JPG1/TU1.gif”…JPG1/TU5.gif，宽和高均设置为115像素。利用“属性”栏建立这5幅图像的链接分别是“JPG2/剪纸1.jpg”……“JPG2/剪纸5.jpg”。第1幅图像的“属性”栏如图3-3-4所示。

29 第3.3节 应用实例 （4）将光标定位到表格的第2行。单击“插入”（常用）栏中的“图像”快捷菜单中的“鼠标经过图像”按钮 ，调出“插入鼠标经过图像”对话框。在“插入鼠标经过图像”对话框内的ID文本框中输入IMG1。设置“原始图像”为“JPG1/TU1-1.gif”，“鼠标经过图像”为“JPG1/TU1-2.gif”，“按下时，前往的URL”，为“JPG2/剪纸1.jpg”，“替换文本”为“这是圣诞节图像”，“目标”下拉列表框中选择“_top”选项。

30 第3.3节 应用实例 （5）单击选中新创建的翻转图像，在其“属性”栏内的“高（H）”文本框中输入“90”，在“宽（W）”文本框中输入“100”。此时“属性”栏如图3-3-5所示。

31 第3.3节 应用实例 （6）按照上述方法，在表格第2行创建的翻转图像右边依次创建其他4个翻转转图像。 （7）将光标移到第4行中左边的单元格中，插入“JPG1/自转球1.gif”、“JPG1/自转球2.gif”和“JPG1/自转球3.gif”三个GIF动画，再分别复制多个GIF动画。将光标移到第4行中右边的单元格中，单击“插入”（常用）工具栏中的“日期”按钮，调出“插入日期”对话框，“插入日期”对话框的设置如图3-1-1所示。然后，单击“确定”按钮，在单元格中插入当前日期、星期和时间。在其“属性”栏内设置文字字体为宋体、大小为16像素、颜色为红色、加粗和居中。此时的“属性”（CSS）栏设置如图3-3-6所示。

32 第3.3节 应用实例 3.3.2【实例3-2】Flash动画透明 （1）新建网页文档，以名称“H3-2.htm”保存到“D:\BDWEB2\H3-2”文件夹内，该文件夹内的“素材”文件夹中放置一个SWF格式的Flash动画文件“top.swf”和一幅名称为“XJ.jpg”的图像文件。“top.swf”动画播放后，会在粉色背景之上，一些小雪花不断飘下来。 （2）在第1行插入一幅“XJ.jpg”背景图像，如图3-3-8所示。

33 第3.3节 应用实例 （3）单击“插入”（布局）工具栏中的“绘制AP Div”按钮 ，鼠标指针变为十字线状态，在页面顶部拖曳创建一个AP Div，单击该AP Div内部，将光标定位在AP Div内。 （4）选择“插入”（常用）工具栏中的“媒体”下拉菜单中的SWF命令，调出“选择SWF”对话框，如图3-2-1所示。选中“素材”文件夹中的“top.swf”SWF文件，单击“确定”按钮，在AP Div内插入SWF文件。然后调整AP Div和AP Div内SWF对象的大小，使AP Div内SWF对象与AP Div大小一样，如图3-2-9所示。关于AP Div将在第4章中介绍。

34 第3.3节 应用实例 （5）保存制作的网页，在浏览其内看网页，它是一个播放“top.swf”SWF动画的网页，其中的一幅画面如图3-3-10所示。可以看到，SWF动画的背景将其下面的图像完全覆盖了。

35 第3.3节 应用实例 （6）为了使SWF动画的背景透明，选中AP Div内SWF对象，单击其“属性”栏内的“参数”按钮，调出“参数”对话框。单击按钮 ，添加一行参数，设置参数为“wmode”，参数值为“transparent”，如图3-3-11所示。单击“确定”按钮，使SWF动画透明。

36 第3.3节 应用实例 （7）选择插入的SWF动画。单击“查看”→“代码和设计”命令，使“文档”窗口切换到“代码和设计”视图窗口状态，可以看到其内自动选择了与插入的Flash动画有关的代码，也增加了如下用于产生背景透明效果的命令。 <param name="wmode" value="transparent">

37 第3.3节 应用实例 3.3.3【实例3-3】多媒体播放器 （1）新建一个网页文档，以名称“H3-3.htm”保存到“D:\BDWEB2\H3-3”文件夹内。 （2）选择“插入”（常用）工具栏中的“媒体”下拉菜单中的“插件”命令，调出“选择文件”对话框。利用该对话框来选择一个MP3文件，如图3-3-13所示。单击“确定”按钮。

38 第3.3节 应用实例 3.3.4【实例3-4】Flash浏览 （1）在“D:\BDWEB2\H3-4”文件夹内创建一个SWF和TU文件夹，在TU文件夹内保存KONGBAI.gif空白图像、“FlashBT.jpg”标题文字图像和5幅网页中第2行的图像。在SWF文件夹内保存5个SWF格式的Flash动画文件。

39 第3.3节 应用实例 （2）新建一个网页文档，将该网页文档以名称“H3-4.html”保存到“D:\BDWEB2\H3-4”文件夹内。利用“页面属性”对话框设置网页的背景色为白色，以及标题文字。 （3）在“H3-4.html”网页第1行插入“TU/FlashBT.jpg”图像，在第2行依次插入TU文件夹内的5幅图像，这些图像分别是5个Flash动画播放中的一幅图像。然后在第2行各幅图像之间插入一幅“KONGBAI.gif”空白图像，调整图像之间的间距。然后，调整这5幅图像的大小。

40 第3.3节 应用实例 （4）选中网页第2行内第1幅图像，调出它的“属性”栏，在“链接”文本框内输入“SWF/可变探照灯.swf”，建立该图像与“SWF/可变探照灯.swf”的链接，在“目标”下拉列表框内选择“_new”选项，如图3-3-13所示。

41 第3.3节 应用实例 （5）按照上述方法，建立第2行内的其他图像与SWF的链接。文字为“可变探照灯”。单击“插入”（常用）工具栏中的“媒体”下拉菜单中的SWF命令，调出“选择SWF”对话框，选中“SWF”文件夹中的“可变探照灯.swf”文件，单击“确定”按钮，插入该动画。调整SWF图标大小，如图3-3-17所示。保存网页到“D:\BDWEB2\H3-4”文件夹内。

42 第3.3节 应用实例 （6）选中“H3-4.html”网页第2行内第1幅图像，在它的“属性”栏“链接”文本框内输入“Flash1.html”，建立该图像与“Flash1.html”网页的链接，如图3-3-18所示。

43 第3.3节 应用实例 3.3.5【实例3-5】媒体浏览 （1）在“D:\BDWEB2\H3-5”文件夹内保存本实例所有文件。新建一个主网页“H3-5..htm”。进入它的编辑状态后，利用“页面属性”对话框设置网页的背景颜色为黄色；链接字的颜色和已访问链接字的颜色均为黑色，以及标题文字“媒体浏览”。

44 第3.3节 应用实例 （2）制作“Flash1.htm”、“Flash2.htm”、“Flash3.htm”和“Flash4.htm”网页。每个网页内均插入一个SWF格式的Flash动画文件。 （3）在网页的第1行，设置文字“居中对齐”，字体为“华文彩云”，采用36px大小，然后输入“媒体浏览”文字。再按Enter键，将光标移到第2行。

45 第3.3节 应用实例 （4）单击“插入”（常用）栏中的“媒体”快捷菜单中的“Applet”命令 ，插入一个Java Applet对象。 （5）在“属性”栏中的“代码”文本框内输入Applet程序的名称“EFFICIENT.CLASS”。

46 第3.3节 应用实例 （6）单击“属性”栏中的“参数”按钮，调出“参数”对话框。在该对话框中输入Applet程序需要使用的参数，如图3-3-21所示。该Applet程序的作用是使设置的几幅图像交替显示，并产生渐变效果。其中，delay参数的作用是设置图像切换速度。 单击 按钮可以插入一个新参数选项，单击 按钮可以删除选中的参数选项。单击 按钮或 按钮，可改变选中的参数选项的上下位置。

47 第3.3节 应用实例 （7）按Enter键，将光标移到下一行。设置文字为“居中对齐”格式，依次插入5幅图像。选中第1幅图像，单击“属性”栏中的“链接”文本框右边的“浏览文件”按钮 ，调出“选择文件”对话框，利用该对话框为该图像建立链接，链接的网页是“Flash1.htm”。使用相同的方法分别为另外4幅图像建立链接，链接的网页分别是Flash2.htm、Flash3.htm、Flash4.htm 和Flash5.htm。然后单击“文件”→“保存”命令，保存制作好的主网页文档。