1、主编：谢嵘网页中除了可以添加图片和超链接以外，为了让页面更生动，更有吸引力，我们还可以为网页添加动态效果。该项目就是学习如何制作网页动态效果。行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种办法。对象是产生行为的主体。web中的很多元素都可以成了对象，例如：整个HTML文档、插入的一个图像、一段文本、一个媒体文档等。事件是触发动态效果的条件。web事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和web关于，如web下载完毕，web切换等。对于同一个对象，不同版本的网站页面浏览器支持的事件种类和多少也是不一样的。项目项目8 8 制作网
2、页动态效果制作网页动态效果 项目导学项目导学 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动任务：在页面的公告栏处使用滚动字母效果。活动指导：如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息，而又不想占用太多的网页空间，可以使用滚动公告栏。页面中动态效果不易过多，适当的添加可以吸引浏览者的兴趣，在适当的位置制作动态效果不失为网页增添亮点。使用Dreamweaver为用户提供的（ScrollableArea）插件可以快速便捷地制作出滚动公告栏。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：1.安装插
3、件。打开Dreamweaver cs4选择工具栏中的“扩展Dreamweaver”按钮，选择“扩展管理器”选项，打开扩展管理器。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：2.打开Adobe extension manager cs4 选择“文件”菜单中的“安装扩展”命令。3.在“选取要安装的扩展”对话框中找到“scrollablearea.mxp”文件并打开。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：4.安装“DHTML Scrollable Ar
4、ea”扩展。5.安装“DHTML Scrollable Area”扩展后如图所示，表示安装操作已完成，并重启Dreamweaver。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：6.设置滚动公告栏，在Dreamweaver cs4中打开网上书店页面，光标定位于公告栏处。7.选择“命令”菜单中的“dhtml AP Scroll area”命令。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：8.在弹出的对话框中设置各参数。9.选择“content”选项卡填充其
5、内容。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：10.使用“标签选择器”插入marquee标签。把光标插入点放在需要插入滚动字幕的地方。单击“插入”面板的“标签选择器”。选择 marquee标签，点击“插入”按钮。11.转换到代码视图。把光标插入点放在 marquee标签内。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：12.选择“窗口”菜单中选择“标签检查器”。在窗口右边的面板中选择“属性”，单击“未分类”前面的“”。13.点击behavior设置项
6、右边的下拉箭头，选择滚动字幕内容的运动方式。此处我们选择“scroll”。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：14.设置direction属性设置字幕内容的滚动方向，此处向上滚动，选择“up”。15.scrollamount属性设置字幕滚动的速度。此处直接输入数值“1”。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：16.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。此处设置为1毫秒。17.width属性设置滚动字幕的宽度。
7、此处设为100。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：18.style属性设置字幕内容的样式。此处设置字幕文字大小为14，输入了“font：14px；”。19.loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：20.设置2个行为。onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。在Dream
8、weaver cs4中需要打开“行为”面板设置。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动一：体验活动一：使用行为制作页面使用行为制作页面活动步骤：21.在IE中浏览该页面，此处为由下往上滚动显示的文字。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动二：体验活动二：插入动画图片插入动画图片活动任务：在页面中插入GIF动画。活动指导：通过插入GIF动画图片实现动画效果。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动二：体验活动二：插入动画图片插入动画图片活动步骤：1.将光标定位于需要加入gif图片的地方。2.选择“插入”菜单中的图像命令。项目项目8 8 制
9、作网页动态效果制作网页动态效果 体验活动二：体验活动二：插入动画图片插入动画图片活动步骤：3.在选择图像源文件中选择图片。4.将图片出入到页面中，并在“属性”面板中调整大小及位置。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动二：体验活动二：插入动画图片插入动画图片活动步骤：5.在IE中浏览效果。项目项目8 8 制作网页动态效果制作网页动态效果 活动小结活动小结完成体验活动二后，填写下表 项目项目8 8 制作网页动态效果制作网页动态效果 通过内置编辑器改变图像的大小的几个关键步骤通过内置编辑器改变图像的大小的几个关键步骤1定位需要插入图片的位置2选择“”菜单，“”选项命令；3.在弹
10、出“”对话框；4.5.在IE浏览器中预览。体验活动三：体验活动三：插入插入FLASH动画动画活动任务：通过菜单及属性面板设置在页面中插入Flash动画。活动指导：Flash动画是网页上最流行的动画格式。在DW CS4中，Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将多媒体数据进行压缩，使文件变得很小，因此，非常适合在网上传播。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动三：体验活动三：插入插入FLASH动画动画活动步骤：1.将光标移至所需插入Flash动画的位置，选择“插入”菜单下“媒体”选项
11、中的SWF命令，打开“选择文件”对话框。选择所需插入的Flash动画，单击“确定”按钮，即可插入到网页文档中。2.在网页文档中插入的SWF文件显示为一个Flash动画图标。可以在“属性”面板中设置SWF文件的大小。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动三：体验活动三：插入插入FLASH动画动画活动步骤：3.在IE中预览。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动四：体验活动四：插入插入flashpaper动画动画活动任务：在页面中插入flashpaper动画。在浏览器中打开包含FlashPaper文档的页面时，可以浏览FlashPaper文档中的所有页面，并
12、且不需要加载新的Web页。活动指导：FlashPaper的功能是将通用格式转为Flash格式后，在网页中显示。例如将word、pdf格式的文件转为swf格式后，用FlashPaper插入这个Flash后，就可以在网页中像电子阅读器那样浏览这个Flash了。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动四：体验活动四：插入插入flashpaper动画动画活动步骤：1.将光标移至要插入Flash文本的位置，选择“插入”菜单“媒体”中的“FlashPaper”命令，打开“插入FlashPaper”对话框。2.在“源”文本框中输入FlashPaper文件的路径，同时还可以修改FlashPa
13、per文件的高度和宽度。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动五：体验活动五：插入插入FLV视频视频活动任务：插入FLV视频。活动指导：FLV是Flash视频文件，在文档中插入的FLV文件是以SWF组件显示的，当在浏览器中查看时，该组件显示所选的FLV文件以及一组播放控件。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动五：体验活动五：插入插入FLV视频视频活动步骤：1.将光标移至要插入FLV文件的位置，选择“插入”菜单中选择“媒体”中的FLV命令，打开“插入FLV”对话框。2.累进式下载视频：将FLV文件下载到站点访问者的硬盘上，然后进行播放。3.流视频：对视频
14、内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在网页上播放该内容 项目项目8 8 制作网页动态效果制作网页动态效果 体验活动六：体验活动六：创建其他媒体文件创建其他媒体文件活动任务：在页面中插入其他媒体文件。活动指导：我除了插入的Flash媒体文件外，还可以插入Shockwave影片、Java Applet和插件等，但这些元素并不常用，下面就简单介绍这些元素的插入方法。插入的Shockwave和Java Applet文件必须安装相应的播放器才可以播放。项目项目8 8 制作网页动态效果制作网页动态效果 体验活动六：体验活动六：创建其他媒体文件创建其他媒体文件活动步骤：1.选择“插入”
15、菜单下“媒体”选项中的“Shockwave”命令，选择要插入的Shockwave影片，单击“确定”按钮即可插入到网页文档中。2.选择“插入”菜单下“媒体”选项中的“Apple”命令，选择插入的Java Applet文件插入到网页文档中。项目项目8 8 制作网页动态效果制作网页动态效果 相关知识相关知识1.Flash源文件(.fla)：使用Flash应用程序创建的项目的原始文件。这种类型的文件只能在Flash中打开，不能在Dreamweaver或浏览器中打开。但在Flash中打开该类型文件后，会自动生成可用于浏览器的SWF文件或SWT文件。2.Flash电影文件(.swf)：Flash电影文件是一种压缩了的Flash源文件，可以在浏览器中播放，也可以在Dreamweaver中预览，但不能进行编辑。当使用Flash按钮和文本对象时可以创建该类型文件。项目项目8 8 制作网页动态效果制作网页动态效果
