电子商务网页设计项目十使用JavaScript制作动态效果美化电子商务网页.pptx

Dreamweaver内置行为的网页特效 1 任务分析 通过使用JavaScript的一些内置行为,可以简单有效地制作出一些动态效果,但是仅仅如此是不够的。在本任务中我们将学习JavaScript语言,了解该语言的常用结构和主要特点,掌握用内置行为制作网页特效。 相关知识 1.了解JavaScript JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言。如今随着电子商务网站的发展,客户要求越来越高,JavaScript在网页制作方面被广泛应用起来。JavaScript是 Netscape公司开发的一种脚本语言(Scripting Language),或称为描述语言。JavaScript的出现使得网页和用户之间有了一种实时性、动态性、交互性的关系,可使网页包括更多活跃的元素和更加精彩的内容。 JavaScript具有以下一些基本特点: (1) 解释性。 (2) 动态性。 (3) 跨平台性。 (4) 安全性。 2.JavaScript的基本结构 JavaScript程序是根据HTML文件中出现的顺序来逐行执行。整个HTML文件中都可以嵌入JavaScript,但最好放在HTML文件中的head和/head之间。 3.使用Dreamweaver 的内置行为 Dreamweaver的行为是将内置的JavaScript代码放置在文档中,以实现Web页的动态效果。“行为”控制面板是在窗口菜单下,选择“行为”项目显示出来的。 (1)弹出信息。 (2)打开浏览器窗口。 (3)显示和隐藏层。 (4)交换图像。 (5)拖动AP元素。 任务实施 使用“绘制AP元素”按钮绘制层,使用“图像”按钮为层插入图像,使用“拖动AP元素”制作组合“西瓜人”效果。 素材位置:E:\10\素材\游戏网页。 操作步骤如下: (1)选择“文件”→“打开”命令,在弹出菜单中选择“游戏网页”→“index.html”文件 。 (2)选择“插入”菜单→“布局对象”→“AP Div”,插入一个层,并插入图像“ing_03.jpg”。用同样的方法分别插入图像“ing_02.gif”、“ing_04.gif”、“ing_05.gif” 。 (3)选择“窗口”→“行为”命令,弹出“行为”面板。 (4)在编辑栏中,选中标签body,并单击“添加行为”按钮,在弹出菜单中选择“拖动AP元素”命令,弹出“拖动AP元素”对话框。 (5)在“AP元素”选项右侧下拉列表中选择div“apDiv1”,“移动”选项右侧下拉列表中选择“不限制”,单击“取得目前位置”按钮,“靠齐距离”选项自动显示50,设置参数 (6)设置“行为”参数 。 (7)保存文档,按F12键浏览网页 。 (8)分别选择层,将其移动到“西瓜”图像适当的位置,组合成“西瓜人”效果。 使用JavaScript制作网页特效 2 任务分析 在本任务中我们将学习用JavaScript制作出网页特效,让网页更加生动,达到吸引浏览者的目的。 相关知识 1.实现鼠标经过图片时的变换 使用Dreamweaver操作界面可以很简单地实现图片的变换,为了加深对JavaScript代码的认识,下面直接使用JavaScript编程来实现图片的变换,加强对JavaScript语法结构的理解。 2.制作日期特效 为了让网页功能更加完善,可在页面上制作日期特效,显示当前日期。要实现这个特效,必须使用JavaScript的日期时间函数,并结合document.write()方法。 3.漂浮广告特效 漂浮广告是新建一个层,把广告信息放置在其中,运用JavaScript代码控制层在页面中漂浮,起到吸引浏览者注意的作用。 4.文字滚动特效 在要滚动的文字两端添加MARQUEE/MARQUEE脚本代码,就可实现文字在网页中滚动。 任务实施 使用“显示—隐藏元素”行为设置图片的切换效果,使用JavaScript语言制作日期特效,使用“弹出信息”行为设置弹出欢迎窗口效果 。 素材位置:光盘\10\素材\时尚礼品屋网页。 操作步骤如下: (1)选择“文件”→“打开”命令,在弹出菜单选择“时尚礼品屋网页”→“index.html”文件 。 (2)选择“插入”菜单→“布局对象”→“AP Div”,在素材中间空白位置插入一个层,并插入图像“1_0a.jpg”。用同样的方法分别插入图像“1_0b.gif”、“1_0c.gif”、“1_0d.gif”,并把四个层对齐放置 。 (3)点击背景图,在“属性”中选择“矩形热点工具”图标 (4)在背景图的四个小图中分别划出四个矩形热点区域 。 (5)选择“窗口”→“行为”命令,弹出“行为”面板,选中第一个热点区域并单击“添加行为”按钮,在弹出菜单选择“显示—隐藏元素”命令,弹出“显示—隐藏元素”对话框 。 (6)第一个热点