多媒体与网页特效讲义课件

单击此处编辑母版样式,单击此处编辑幻灯片母版样式,第二层,第三层,第四层,第五层,*,第13章 多媒体与网页特效,本章的主要内容如下：,13-1,在网页中插入多媒体对象,13-2,行为,13-3,时间轴,13-4,制作弹出菜单,13.1 在网页中插入多媒体对象,13.1.1 插入flash动画,13.1.2 插入声音,13.1.3 插入视频,13.1.1 插入flash动画,网页中除了文本与图像表述网页内容以外，还离不开网页多媒体，如：Flash动画、声音、视频等，这些多媒体元素的加入，使得网页表现更丰富多彩，在文本和图像的基础上，多媒体的加入更是锦上添花。在学习本章内容之前请先建立站点,。,1. 插入Flash,插入在网页中的Flash格式为swf，Flash源文件格式为Fla，源文件不能直接插入到网页中，但可以在Flash软件中修改源文件。,【实例13.1】制作烟花效果的网页,制作过程：,（1）打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮,（2）弹出【选择文件】对话框，选择Flash文件13-1.swf.,（3）单击【确定】按钮后弹出【对象标签辅助功能属性】对话框，在输入标题后单击【确定】按钮即可将Flash文件插入到网页中，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示。,（4）在文档窗口单击这个Flash文件，就可以在属性面板中设置它的属性了，如图13-1所示。,（5）将Flash的背景透明，使得Flash内容与Flash下方的图像达到合二为一的效果。在【属性】面板中单击【参数】按钮，弹出【参数】对,框，作如图13-2所示的设置：,（6）选择“循环”复选框时影片将连续播放，否则影片在播放一次后自动停止。通过选择“自动播放”复选框后，可以设定Flash文件是否在页面加载时就播放。在“品质”下拉列表中可以选择Flash影片的画质，以最佳状态显示，就选择“高品质”。如图13-3所示即是保存了网页后按【F12】键在浏览器中预览网页的效果。,2. 插入Flash文本,打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，弹出【插入Flash文本】对话框，如图13-4所示：,字体随意，大小22px，颜色设置为#F5E458，转滚颜色为#54C994，文本为“图片素材”，背景颜色#6DCFF6，选择自己需要的路径链接。同样方法我们可以使用该功能，诸如制作“代码素材”、“Flash动漫”、“精美壁纸”和“音频视频”等Flash文本来制作一个导航栏。,3、插入Flash按钮,Flash按钮的存在使得网页的样式更加生动。在Dreamweaver中插入Flash按钮不需要用户设计，这些按钮是由Dreamweaver自动生成，并且有多种按钮样式可供用户选择。,打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，在列表中选择Flash按钮，弹出【插入Flash按钮】对话框，如图13-5所示：,【样式】用来选择按钮的外观，【按钮文本】用来输入按钮上的文字，【字体】和【大小】用于设置按钮上文字的字体和大小，字号变大，按钮并不会跟着改变。,【链接】用于输入按钮的链接，可以是外部链接，也可以是内部链接。【目标】用来设置打开的链接窗口,。,4. 插入Flash视频,Flash Video即Flash视频，它的后缀名为：.flv，是目前广泛流行的一种视频文件格式。一般的视频文件：asf、wmv、rm等都需要专门的播放器来支持视频文件的播放，否则根本无法收看，并且这类文件容量过大，下载慢，查看也不很流畅。为了解决播放器和容量的问题，可以将各类视频文件转换成Flash视频文件，即Flv格式。经过编码后的音频和视频数据，通过Flash Player传送。制作流程：,（1）打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，弹出【插入Flash视频】对话框，如图13-6所示：,（2）在 【URL】 文本框中，指定.flv 文件的相对路径，方法是单击【浏览】按钮，选择该 FLV 文件。,（3）从【外观】弹出式菜单中选择 一种外观皮肤。所选外观的预览会出现在“外观”弹出式菜单下方。【外观】选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。,（4）分别在【宽度】文本框与【高度】文本框中设置该视频的宽度与高度，然后单击【确定】按钮。,13.1.2 插入声音,虽然向Web页添加的声音文件可以有多种不同类型格式，但并不是所有的声音格式都适合在网页中应用。在确定采用哪一格式和方法添加声音前，需要考虑添加声音的目的、观众、文件大小、声音品质和不同浏览器的差异等因素。在网页中常用的格式有.wav、.midi、.rm和.mp3等。另外，用户在访问插入音频的页面时，只有在他的客户端浏览器具有可播放所选声音文件的适当插件，声音才可以播放出来。,网页中插入声音的常用方法有如下两种：其一为超级链接到声音文件，其二为嵌入声音文件到网页中。,1. 超级链接到声音文件,现在Internet上大量的在线音乐就是采用超级链接链接到声音文件。下面通过一个实例来说明。,（1）准备好一个音乐文件。选择作为超级链接载体的文本或图像，如图13-7所示的实例中选择的是文本“在线下载”。,（2）在属性面板的【链接】文本框中键入声音文件所在的路径和名称，或者单击后面的文件夹图标直接选择声音文件。实例中选择的是“莫扎特小夜曲.mp3”，如图13-8所示。,（3）保存文件，按 F12 键预览该网页。当鼠标移动到“在线下载”上时鼠标呈现小手的形状，单击将播放音乐，如图13-9所示。或者单击鼠标右键，在弹出菜单中选择“目标另存为”将该音乐文件下载到本地。,2. 将声音嵌入网页,如果希望插入声音的同时，在网页上还可以显示播放器的外观，包括播放、暂停、停止、音量调整等控制面板，需要使用嵌入声音文件到网页中的方法。,（1）准备好一个音乐文件，在页面添加文字“2、月满西楼”。,（2）打开【插入】面板，单击【常用】选项卡中的【媒体】，在下拉菜单中单击【插件】按钮，弹出【选择文件】对话框，选择一个准备好的音乐文件，本实例为“月满西楼.wma”，如图13-10所示。调整播放插件的大小外观。,（3）如果用户的计算机中没有安装相关音乐文件的播放插件，在属性面板的“插件URL”中输入该插件的地址，供用户链接并下载该插件。,（4）保存文件，按F12 键预览该网页，效果如图13-11所示。,3. 添加背景音乐,在网页中可以嵌入背景音乐。这种音乐多以MP3，MIDI文件为主。添加背景音乐有两种方法，一种是通过手写代码实现，还有一种是通过添加行为来实现。,在代码视图中，通过标记可以将网页设置上背景音乐，具体步骤是：,（1）准备好一个音乐文件，打开需要添加背景音乐的网页（网页和声音最好使用相对路径）。,（2）选择“代码视图”，将光标定位到之后，输入下面的代码：,插入背景音乐,（3）如果希望循环播放音乐，将在代码中添加一个loop属性即可：,（4）保存文件，按F12 键预览该网页，即可听见背景音乐。,插入视频和插入声音的方法类似，也有两种情况，其一为超级链接到视频文件，其二为嵌入视频文件到网页中。,1. 超级链接到视频文件,用户浏览器端必须拥有辅助应用程序才能查看常见的视频格式，如 Real One Player、QuickTime 和 Windows Media Player等。,（1）准备好一个视频文件，在网页中选择指向视频文件的链接载体（文本或图像）。,（2）在属性面板的“链接”文本框中输入视频文件的路径名称，或者单击后面的文件夹图标选择文件，如图13-12所示。,13.1.3 插入视频,（3）设置完毕，保存文件。按F12 键预览该网页，如果正确安装了播放程序，那么点击链接载体，可弹出MediaPlayer等辅助程序，并播放该视频文件。,2. 嵌入视频文件到网页中,如果希望添加视频文件并在网页上显示播放器的外观，请选择嵌入视频文件到网页中的方法。,（1）准备好一个视频文件，将光标置于需要嵌入视频文件的位置。,（2）打开【插入】面板，单击【常用】选项卡中的【媒体】，在下拉菜单中单击【插件】按钮，弹出【选择文件】对话框，选择其中的视频文件，将其添加到网页中，如图13-13所示。适当调节“插件”占位符的大小及位置。,（3）如果用户的计算机中没有安装相关视频文件的播放插件，在属性面板的“插件URL”中输入该插件的地址，供用户链接并下载该插件。,（4）设置完毕，保存文件。按F12 键预览网页，网页将显示相关播放插件并播放。如图13-14所示。,13.2 行为,13.2.1 行为基础知识,13.2.2 显示-隐藏层,13.2.3 设置状态条文本,13.2.4 设置层文本,13.2.5 设置弹出信息,13.2.1 行为基础知识,一般说来，动态网页是通过编写脚本代码来实现用户与页面的简单交互的。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。,行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。,1. 了解行为,“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分对象、事件和动作。,（1） 对象(Object),对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。,（2） 事件(Event),事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。,（3） 动作(Action),行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。,（4） 事件与动作,将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。,2. 应用行为,在Dreamwaever中，对行为的添加和控制主要通过【行为】面板来实现。执行“窗口”,“,行为”菜单命令，打开行为面板，如图13-15所示。,在行为面板上可以进行如下操作：,（1）单击【+】按钮，打开动作菜单，添加行为；单击【-】按钮，删除行为。添加行为时，从动作菜单中选择一个行为项。,（2）单击事件列右方的三角，打开事件菜单，可以选择事件。,（3）单击向上箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。,3. 创建行为,一般创建行为有三个步骤：选择对象、添加动作、调整事件。,我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。,（1）打开13-4.html，选中图片。,（2）单击行为面板上的+按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。,在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。窗口宽度设为900px，窗口高度设为900px。窗口名称为“放大图片”。,( 3）当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标)，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)，如图13-16所示,：,13.2.2 显示-隐藏层,行为是实现网页上交互的一种捷径，行为将 javascript 代码放置在文档中，以允许访问者与 Web 页进行交互，从而以多种方式更改页面动作或执行某些任务。行为是事件和由该事件触发的动作的组合。,【实例13.2.2】光标移到图片上面。在它的右侧即显示一段其它内容（动画）。,这是两个行为：行为一：移入+显示；行为二：移出+隐藏。,事件是：鼠标移入和移出。动作是：显示和隐藏。,具体操作如下：,1. 在页面中插入一张图片，本例为兰花图片。,2. 在页面中插入一个层，贴入几个动画。具体操作是：打开【插入】面板单击【布局】选项卡中的【绘制层】按钮，在兰花图片右边绘制层，并在层里面插入几个动画，如图13-17所示：,3. 在层面板中，将该层设置成为隐藏。打开页面的时候不显示层面板状态，具体操作是：执行“窗口”,“层”菜单命令，打开层面板，在layer1左边的眼镜关闭，如图13-18所示：,4. 单击图片，打开行为面板（执行“窗口”,“行为”菜单命令）。在行为面板按“+”号，在弹出菜单中选中显示-隐藏层，系统弹出“显示隐藏层”对话框。单击该层，然后单击“隐藏”按钮。确定。如图13-19所示：,5、打开“行为”面板，我们可以在面板中看到事件和行为。需进一步对事件进行设置。单击“onLoad”，在下拉菜单中选择“onMouseOut”，如图13-20所示,6、上述方法是鼠标移出事件行为的设置，重复以上4-5的方法再对鼠标移上事件行为进行设置，把显示隐藏层设为（显示），如图13-21所示：,7. 行为事件设置，单击“onLoad”，在下拉菜单中选择“onMouseOver”，设置后的“行为”面板最终结果，如图13-22所示：,保存页面，预览网页。可以看到光标移动到兰花图片上就出现右侧的内容。,13.2.3 设置状态栏文本,网页浏览器的状态栏位于浏览器的下方，可以通过浏览器菜单栏上“查看”,“状态栏”选项将其打开或关闭。网页的状态栏顾名思义就是显示网页的状态信息。,【实例13.2.3】在网页状态栏里显示自定义的一行文字信息。,操作步骤,（1） 新建空白网页13-6.hmtl，在设计视图中输入文本“显示状态栏文本”。,（2） 执行“窗口”,“行为”菜单命令，打开行为面板，选择文本“显示状态栏文本”单击行为面板中【+】按钮，在弹出的菜单中执行“设置文本”,“设置状态栏文本”菜单命令，弹出“设置状态栏文本”对话框，如图13-23所示。在消息中输入“我在下面呢！”后单击【确定】按钮。,（3） 选择行为面板的事件为“onClick”事件，最终的行为面板的界面如图13-24所示：,（4） 按快捷键 F12 ，就可以预览到如图 13-25所示的状态栏文字效果了。,13.2.4 设置层文本,“设置层文本”动作用您指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的 HTML 源代码。通过在“设置层文本”对话框的“新建 HTML”文本框中包括 HTML 标签，可对内容进行格式设置。,【实例13.2.4】设置层文本。,（1） 新建空白网页13-7.hmtl，打开【插入】面板单击【布局】选项卡中的【绘制层】按钮，在设计视图中绘制层，在层中输入文本信息。,（2） 执行“窗口”,“行为”菜单命令，打开行为面板，选择设计视图中的层，单击行为面板中【+】按钮，在弹出的菜单中执行“设置文本”,“设置层文本”菜单命令，弹出“设置层文本”对话框，如图13-26所示。在消息中输入文本信息后单击【确定】按钮。,（3） 选择行为面板的事件为“onClick”事件，最终的行为面板的界面如图13-27所示：,（4） 按快捷键 F12 ，就可以预览到如图 13-28所示的设置层效果了。,13.2.5 设置弹出信息,如果希望别人进入你的网站首页的时候可以看见一个弹出的消息框来显示一些内容，则可以通过设置弹出信息的方法实现。,【实例13.2.5】设置弹出信息,（1） 新建空白网页13-8.hmtl。,（2） 执行“窗口”,“行为”菜单命令，打开行为面板，选择设计视图中的层，单击行为面板中【+】按钮，在弹出的菜单中执行“弹出信息”菜单命令，弹出“弹出信息”对话框，如图13-29所示。在消息中输入文本信息后单击【确定】按钮。,（3） 添加好提示文字之后，控制面板中就多出一个名为“弹出信息”的行为，此时还要点击左部的下拉菜单，并且从中选择“onLoad”一项，这样当别人进入页面之后就会自动执行设置的行为，自然也就能够看见弹出的消息框了。,（4） 按快捷键 F12 ，就可以预览到如图 13-30所示的设置层效果了。,13.3 时间轴,13.3.1 时间轴的概念,13.3.2 制作一个简单的时间轴动画,13.3.3 制作动态文字,13.3.4 制作飘动广告,13.3.1 时间轴的概念,时间轴通过随时间的变化改变层的位置、大小、可见性和叠放顺序来创建动画。这就是动态HTML的表达方式，也是Dreamweaver强于其它网页编辑器的地方。时间轴只能移动层，因此想让图象或文本对象移动，就须先创建层，然后在层中插入对象。,1. 在Dreamweaver中显示时间轴,时间轴描述了层和图像的属性随时间变化的情况。执行“窗口”,“时间轴”打开时间轴控制器，如图13-31所示。,2. 图13-31中时间轴的各项功能,（1）时间轴弹出菜单：表示当前的时间轴名称。,（2）时间轴指针：在界面上显示当前位置的帧。,（3）不管时间轴在哪个位置，一直移动到第一帧。,（4）表示时间指针的当前位置。,（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。,（6）自动不放：选中该项，则网页文档中应用动画后自动运行。,（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。,（8）行为通道：在指定帧中选选择要运行的行为。,（9）关键帧：可以变化的帧。,（10）图层条：意味着插入了“层”等对象。,（11）图层通道：它是用于编辑图层的空间。,可以看出，Dreamweaver里面的时间轴的运用是和Flash非常相似的，功能虽说没有Flash的强大，但使用方法简单，因为没有了诸如影片剪辑，库，组件的使用。相信读者朋友们很容易就能上手。,13.3.2 制作一个简单的时间轴动画,【实例13.3.2】制作一个简单的时间轴动画,操作步骤：,（1） 新建空白网页13-9.hmtl，打开【插入】面板单击【布局】选项卡中的【绘制层】按钮，在设计视图中绘制层，在层插入gif图片“004d.gif”。如图13-32所示：,（2） 鼠标右键单击层对象，在弹出的菜单中选择“添加到时间轴”菜单命令，这时会在“属性”面板的下面出现时间轴控制器，如图13-33所示：,（3） 在时间轴上，鼠标单击第15帧，选中层对象，将层对象拖动到右上方。如图13-34所示，将在视图中出现一条轨迹线。,（4） 单击时间轴上的【自动播放】按钮，并保存该页面，按F12健预览即看到，马从页面的左方跑向页面的右方。,13.3.3 制作动态文字,【实例13.3.3】制作动态文字,制作步骤：,（1） 新建一个页面13-10.html，把光标放到页面左上方的位置，打开【插入】面板单击【布局】选项卡中的【绘制层】按钮，创建5个层。分别输入文字“三”、“思”、“而”、“后”、“行”，将图层排列在适当的位置。,（2） 执行“窗口”,“时间轴”菜单命令，打开时间轴控制器。选择层对象Layer1，拖动该对象到时间轴的第一行上。,（3） 用同样的方法，把包含有其它文字的层对象也根据文字的顺序拖动到时间轴的第2-6行上。如图13-35所示：,（4）为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。如图13-36所示：,（5） 在时间轴中选择层对象Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（50），这样，可以把文字放置到上侧。,（6） 用同样的方法选择其余层的第一帧后，把坐对齐坐标值（,L,）统一设定为-50，如图13-37所示。,（7） 为了每隔一段时间从左方向右飘移一个文字，从第二个动画条开始向后移动5帧。勾选“自动播放选项”。如图13-38所示。,（8） 保存该页面，按F12浏览效果。可以看到五个字分别从左向右动态移动。,13.3.4 制作飘动广告,【实例13.3.4】利用时间轴制作飘动广告,制作步骤：,（1） 新建一个页面命名为13-11.html。，打开【插入】面板单击【布局】选项卡中的【绘制层】按钮，绘制一个层对象Layer1，将光标点到空白层内，执行“插入”,“图像对象”,“鼠标经过图像”菜单命令，插入一个鼠标经过图像，调整层大小，使层尽可能与图片大小相近。,（2） 执行“窗口”,“时间轴”菜单命令，打开时间轴控制器，鼠标单击选择层对象Layer1，拖动该对象到时间轴的第一行上。如图13-39所示。,（3） 拖动时间轴面板中最右侧的关键帧至75帧。鼠标单击第75帧，选择层对象，将层对象向右拖动一段距离。,（4） 鼠标单击时间轴上第10真所在位置，单击鼠标右键，在弹出的菜单中选择“增加关键帧”菜单命令。单击时间轴上的第10帧，拖动页面中的层对象到一个位置。,（5） 同样的方法在第20帧、第30帧、第40帧、第50帧和第60帧所在位置出增加关键帧，分别在各个帧位置出，拖动层对象到不同的地方。最后生成的移动路径与时间轴如图所示,13.4 制作弹出菜单,【实例13.4】使用行为面板制作弹出菜单。,（1） 新建一个页面命名为13-12.html，在页面中输入一行文字“这里是弹出菜单”。,（2） 选择文本“这里是弹出菜单”，在属性面板中的“链接”输入框中输入“#”，代表的是空链接，这时可以看到文本“这里是弹出菜单”具有超级链接的模式。,（3） 执行“窗口”,“行为”菜单命令，打开行为面板。,（4）选择文本“这里是弹出菜单”，单击按钮【+】，在弹出的菜单中选择“显示弹出式菜单”，这时弹出“显示弹出式菜单”对话框。如图13-41。,（5） 单击【继续】按钮，弹出如图13-42所示的对话框，该对话框用来设置弹出式的菜单。,（6） 选择“内容”选项卡，在文本一栏中的“新建项目”改为“菜单1”。在目标一栏中选择“_blank“，设置链接的值为”#“。如图13-43,。,（7） 单击“菜单”栏的【+】按钮，用上面的方法设置“菜单2”、“菜单3”。,（8） 为“菜单2”建立一个子菜单，操作方法为：鼠标单击对话框下方的“菜单2”，单击“菜单”栏的【+】按钮，在文本一栏中的“新建项目”改为“子菜单”。在目标一栏中选择“_blank“，设置链接的值为“#”。单击【缩进项】按钮，这样“菜单2”就具有一个子菜单，如图13-44所示。,建立多个子菜单方法相同，若要建立二级子菜单，请读者自己思考。按钮【-】是用来删除菜单，【左缩进项】按钮用来撤销子菜单的建立。,其他的选项卡如“外观”、“高级”和“位置”的用法，读者朋友们可以自行动手练习。,（9） 单击【确定】按钮。可以看到行为面板为如图13-55所示：,（10） 保存该页面，进行预览，结果如图13-46所示：,