电子商务网页制作08课件

1、主编：谢嵘网页中除了可以添加图片和超链接以外，为了让页面更生动，更有吸引力，我们还可以为网页添加动态效果。该项目就是学习如何制作网页动态效果。行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种办法。对象是产生行为的主体。web中的很多元素都可以成了对象，例如：整个HTML文档、插入的一个图像、一段文本、一个媒体文档等。事件是触发动态效果的条件。web事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和web关于，如web下载完毕，web切换等。对于同一个对象，不同版本的网站页面浏览器支持的事件种类和多少也是不一样的。 项目8 制作网页动态

2、效果 项目导学 体验活动一：使用行为制作页面活动任务：在页面的公告栏处使用滚动字母效果。活动指导：如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息，而又不想占用太多的网页空间，可以使用滚动公告栏。页面中动态效果不易过多，适当的添加可以吸引浏览者的兴趣，在适当的位置制作动态效果不失为网页增添亮点。使用Dreamweaver为用户提供的（ScrollableArea）插件可以快速便捷地制作出滚动公告栏。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：安装插件。打开Dreamweaver cs4选择工具栏中的 “扩展Dreamweaver”按钮，选择“扩展管理器”选项

3、，打开扩展管理器。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：打开Adobe extension manager cs4 选择“文件”菜单中的“安装扩展”命令。在“选取要安装的扩展”对话框中找到“scrollablearea.mxp”文件并打开。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：安装“DHTML Scrollable Area”扩展。安装“DHTML Scrollable Area”扩展后如图所示，表示安装操作已完成，并重启Dreamweaver。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：设置滚动公告栏，在Dream

4、weaver cs4中打开网上书店页面，光标定位于公告栏处。选择“命令”菜单中的“dhtml AP Scroll area”命令。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：在弹出的对话框中设置各参数。选择“content”选项卡填充其内容。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：使用“标签选择器”插入marquee标签。把光标插入点放在需要插入滚动字幕的地方。单击“插入”面板的“标签选择器”。选择 marquee标签，点击“插入”按钮。转换到代码视图。把光标插入点放在 marquee标签内。 项目8 制作网页动态效果 体验活动一：使用行为制作页

5、面活动步骤：选择“窗口”菜单中选择“标签检查器”。在窗口右边的面板中选择“属性”，单击“未分类”前面的“”。点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。此处我们选择“scroll”。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：设置direction属性设置字幕内容的滚动方向，此处向上滚动，选择“up”。scrollamount属性设置字幕滚动的速度。此处直接输入数值“1”。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。此处设置为1毫秒。width属性设置滚动字

6、幕的宽度。此处设为100。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：style属性设置字幕内容的样式。此处设置字幕文字大小为14，输入了“font：14px；”。loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动步骤：设置2个行为。onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。在Dreamweaver cs4中需要打开“行为”面板设置。 项目8 制作网页动态效果 体验活动一：使用行为制作页面活动

7、步骤：在IE中浏览该页面，此处为由下往上滚动显示的文字。 项目8 制作网页动态效果 体验活动二：插入动画图片活动任务：在页面中插入GIF动画。活动指导：通过插入GIF动画图片实现动画效果。 项目8 制作网页动态效果 体验活动二：插入动画图片活动步骤：将光标定位于需要加入gif图片的地方。选择“插入”菜单中的图像命令。 项目8 制作网页动态效果 体验活动二：插入动画图片活动步骤：在选择图像源文件中选择图片。将图片出入到页面中，并在“属性”面板中调整大小及位置。 项目8 制作网页动态效果 体验活动二：插入动画图片活动步骤：在IE中浏览效果。 项目8 制作网页动态效果 活动小结完成体验活动二后，填写

8、下表 项目8 制作网页动态效果 通过内置编辑器改变图像的大小的几个关键步骤1定位需要插入图片的位置2选择“ ”菜单，“ ”选项命令；3. 在弹出“ ”对话框；4. 5. 在IE浏览器中预览。 体验活动三：插入FLASH动画活动任务：通过菜单及属性面板设置在页面中插入Flash动画。活动指导：Flash动画是网页上最流行的动画格式。在DW CS4中，Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将多媒体数据进行压缩，使文件变得很小，因此，非常适合在网上传播。 项目8 制作网页动态效果 体验活动三：插入FLASH

9、动画活动步骤：将光标移至所需插入Flash动画的位置，选择“插入”菜单下“媒体”选项中的SWF命令，打开“选择文件”对话框。选择所需插入的Flash动画，单击“确定”按钮，即可插入到网页文档中。在网页文档中插入的SWF文件显示为一个Flash动画图标。可以在“属性”面板中设置SWF文件的大小。 项目8 制作网页动态效果 体验活动三：插入FLASH动画活动步骤：在IE中预览。 项目8 制作网页动态效果 体验活动四：插入flashpaper动画活动任务：在页面中插入flashpaper动画。在浏览器中打开包含FlashPaper文档的页面时，可以浏览FlashPaper文档中的所有页面，并且不需要

10、加载新的Web页。活动指导：FlashPaper的功能是将通用格式转为Flash格式后，在网页中显示。例如将word、pdf格式的文件转为swf格式后，用FlashPaper插入这个Flash后，就可以在网页中像电子阅读器那样浏览这个Flash了。 项目8 制作网页动态效果 体验活动四：插入flashpaper动画活动步骤：将光标移至要插入Flash文本的位置，选择“插入”菜单“媒体”中的“FlashPaper”命令，打开“插入FlashPaper”对话框。在“源”文本框中输入FlashPaper文件的路径，同时还可以修改FlashPaper文件的高度和宽度。 项目8 制作网页动态效果 体验活

11、动五：插入FLV视频活动任务：插入FLV视频。活动指导：FLV是Flash视频文件，在文档中插入的FLV文件是以SWF组件显示的，当在浏览器中查看时，该组件显示所选的FLV文件以及一组播放控件。 项目8 制作网页动态效果 体验活动五：插入FLV视频活动步骤：将光标移至要插入FLV文件的位置，选择“插入”菜单中选择“媒体”中的FLV命令，打开“插入FLV”对话框。累进式下载视频：将FLV文件下载到站点访问者的硬盘上，然后进行播放。流视频：对视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在网页上播放该内容 项目8 制作网页动态效果 体验活动六：创建其他媒体文件活动任务：在页面中插入

12、其他媒体文件。活动指导：我除了插入的Flash媒体文件外，还可以插入Shockwave影片、Java Applet和插件等，但这些元素并不常用，下面就简单介绍这些元素的插入方法。插入的Shockwave和Java Applet文件必须安装相应的播放器才可以播放。 项目8 制作网页动态效果 体验活动六：创建其他媒体文件活动步骤：选择“插入”菜单下“媒体”选项中的“Shockwave”命令，选择要插入的Shockwave影片，单击“确定”按钮即可插入到网页文档中。选择“插入”菜单下“媒体”选项中的“Apple”命令，选择插入的Java Applet文件插入到网页文档中。 项目8 制作网页动态效果 相关知识一、Flash动画类型Flash源文件(.fla)：使用Flash应用程序创建的项目的原始文件。这种类型的文件