电子商务网页制作教学课件ppt作者谢嵘08课件.ppt

主编：谢嵘 项目导学 网页中除了可以添加图片和超链接以外，为了让页面更生动，更有吸引力，我们还可以为网页添加动态效果。该项目就是学习如何制作网页动态效果。 行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种办法。对象是产生行为的主体。web中的很多元素都可以成了对象，例如：整个HTML文档、插入的一个图像、一段文本、一个媒体文档等。事件是触发动态效果的条件。web事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下。有的事件还和web关于，如web下载完毕，web切换等。对于同一个对象，不同版本的网站页面浏览器支持的事件种类和多少也是不一样的。 体验活动一：使用行为制作页面 活动任务： 在页面的公告栏处使用滚动字母效果。 活动指导： 如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息，而又不想占用太多的网页空间，可以使用滚动公告栏。页面中动态效果不易过多，适当的添加可以吸引浏览者的兴趣，在适当的位置制作动态效果不失为网页增添亮点。使用Dreamweaver为用户提供的（ScrollableArea）插件可以快速便捷地制作出滚动公告栏。 体验活动一：使用行为制作页面 活动步骤： 安装插件。打开Dreamweaver cs4选择工具栏中的 “扩展Dreamweaver”按钮，选择“扩展管理器”选项，打开扩展管理器。 体验活动一：使用行为制作页面 活动步骤： 打开Adobe extension manager cs4 选择“文件”菜单中的“安装扩展”命令。 在“选取要安装的扩展”对话框中找到“scrollablearea.mxp”文件并打开。 体验活动一：使用行为制作页面 活动步骤： 安装“DHTML Scrollable Area”扩展。 安装“DHTML Scrollable Area”扩展后如图所示，表示安装操作已完成，并重启Dreamweaver。 体验活动一：使用行为制作页面 活动步骤： 设置滚动公告栏，在Dreamweaver cs4中打开网上书店页面，光标定位于公告栏处。 选择“命令”菜单中的“dhtml AP Scroll area”命令。 体验活动一：使用行为制作页面 活动步骤： 在弹出的对话框中设置各参数。 选择“content”选项卡填充其内容。 体验活动一：使用行为制作页面 活动步骤： 使用“标签选择器”插入marquee标签。把光标插入点放在需要插入滚动字幕的地方。单击“插入”面板的“标签选择器”。选择 marquee标签，点击“插入”按钮。 转换到代码视图。把光标插入点放在 marquee标签内。 体验活动一：使用行为制作页面 活动步骤： 选择“窗口”菜单中选择“标签检查器”。在窗口右边的面板中选择“属性”，单击“未分类”前面的“＋”。 点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。此处我们选择“scroll”。 体验活动一：使用行为制作页面 活动步骤： 设置direction属性设置字幕内容的滚动方向，此处向上滚动，选择“up”。 scrollamount属性设置字幕滚动的速度。此处直接输入数值“1”。 体验活动一：使用行为制作页面 活动步骤： scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。此处设置为1毫秒。 width属性设置滚动字幕的宽度。此处设为100。 体验活动一：使用行为制作页面 活动步骤： style属性设置字幕内容的样式。此处设置字幕文字大小为14，输入了“font：14px；”。 loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。 体验活动一：使用行为制作页面 活动步骤： 设置2个行为。onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。在Dreamweaver cs4中需要打开“行为”面板设置。 体验活动一：使用行为制作页面 活动步骤： 在IE中浏览该页面，此处为由下往上滚动显示的文字。 体验活动二：插入动画图片 活动任务： 在页面中插入GIF动画。 活动指导： 通过插入GIF动画图片实现动画效果。 体验活动二：插入动画图片 活动步骤： 将光标定位于需要加入gif图片的地方。 选择“插入”菜单中的图像命令。 体验活动二：插入动画图片 活动步骤： 在选择图像源文件中选择图片。 将图片出入到页面中，并在“属性”面板中调整大小及位置。 体验活动二：插入动画图片 活动步骤： 在IE中浏览效果。 活动小结 完成体验活动二后，填写下表 体验活动三：插入FLASH动画 活动任务： 通过菜单及属性面板设置在页面中插入Flash