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

1、Dreamweaver内置行为的网页特效内置行为的网页特效1任务分析任务分析 通过使用JavaScript的一些内置行为,可以简单有效地制作出一些动态效果,但是仅仅如此是不够的。在本任务中我们将学习JavaScript语言,了解该语言的常用结构和主要特点,掌握用内置行为制作网页特效。相关知识相关知识1.了解JavaScriptJavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言。如今随着电子商务网站的发展,客户要求越来越高,JavaScript在网页制作方面被广泛应用起来。JavaScript是 Netscape公司开发的一种脚本语言(Scripting Language),

2、或称为描述语言。JavaScript的出现使得网页和用户之间有了一种实时性、动态性、交互性的关系,可使网页包括更多活跃的元素和更加精彩的内容。JavaScript具有以下一些基本特点:(1)解释性。(2)动态性。(3)跨平台性。(4)安全性。2.JavaScript的基本结构 JavaScript程序是根据HTML文件中出现的顺序来逐行执行。整个HTML文件中都可以嵌入JavaScript,但最好放在HTML文件中的和之间。3.使用Dreamweaver 的内置行为 Dreamweaver的行为是将内置的JavaScript代码放置在文档中,以实现Web页的动态效果。“行为”控制面板是在窗口菜

3、单下,选择“行为”项目显示出来的。(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、窗口”“行为”命令,弹出“行为”面板。(4)在编辑栏中,选中标签,并单击“添加行为”按钮,在弹出菜单中选择“拖动AP元素”命令,弹出“拖动AP元素”对话框。(5)在“AP元素”选项右侧下拉列表中选择div“apDiv1”,“移动”选项右侧下拉列表中选择“不限制”,单击“取得目前位置”按钮,“靠齐距离”选项自动显示50,设置参数(6)设置“行为”参数。(7)保存文档,按F12键浏览网页。(8)分别选择层,将其移动到“西瓜”图像适当的位置,组合成“西瓜人”效果。使用使用JavaScript制作网页特效制作网页特效2任务分析任务分析 在本任务中我们将学习用JavaScript制作出网页特效,让网页更

5、加生动,达到吸引浏览者的目的。相关知识相关知识1.实现鼠标经过图片时的变换使用Dreamweaver操作界面可以很简单地实现图片的变换,为了加深对JavaScript代码的认识,下面直接使用JavaScript编程来实现图片的变换,加强对JavaScript语法结构的理解。2.制作日期特效为了让网页功能更加完善,可在页面上制作日期特效,显示当前日期。要实现这个特效,必须使用JavaScript的日期时间函数,并结合document.write()方法。3.漂浮广告特效漂浮广告是新建一个层,把广告信息放置在其中,运用JavaScript代码控制层在页面中漂浮,起到吸引浏览者注意的作用。4.文字滚

6、动特效在要滚动的文字两端添加脚本代码,就可实现文字在网页中滚动。任务实施任务实施 使用“显示隐藏元素”行为设置图片的切换效果,使用JavaScript语言制作日期特效,使用“弹出信息”行为设置弹出欢迎窗口效果。素材位置:光盘10素材时尚礼品屋网页。操作步骤如下:(1)选择“文件”“打开”命令,在弹出菜单选择“时尚礼品屋网页”“index.html”文件。(2)选择“插入”菜单“布局对象”“AP Div”,在素材中间空白位置插入一个层,并插入图像“1_0a.jpg”。用同样的方法分别插入图像“1_0b.gif”、“1_0c.gif”、“1_0d.gif”,并把四个层对齐放置。(3)点击背景图,在

7、“属性”中选择“矩形热点工具”图标(4)在背景图的四个小图中分别划出四个矩形热点区域。(5)选择“窗口”“行为”命令,弹出“行为”面板,选中第一个热点区域并单击“添加行为”按钮,在弹出菜单选择“显示隐藏元素”命令,弹出“显示隐藏元素”对话框。(6)第一个热点的“显示隐藏元素”行为根据对应的图片进行设置。(7)重复(5)、(6)步骤,分别设置其余三个热点区域的图片切换。(8)切换“拆分”视图,在中输入如下代码。(9)在编辑栏中,选中标签,并单击“添加行为”按钮,在弹出菜单中选择“弹出信息”命令,弹出“弹出信息”对话框,输入欢迎文字,点击“确定”按钮。(10)保存文档,按F12键浏览网页。使用使用

8、Spry框架制作动态导航菜单框架制作动态导航菜单3任务分析任务分析 Dreamweaver中的Spry工具使用起来简洁并且具有较好的兼容性,可以使用CSS和JavaScript技术共同实现。本任务我们将学习怎么使用Spry框架制作动态的导航菜单。相关知识相关知识1.Spry菜单栏 Spry菜单栏与以往手工设置弹出菜单不同,Spry菜单栏的插入不涉及任何添加行为的操作,插入过程与其他网页元素没有区别。2.弹出菜单插入方法 在文档窗口的目标位置定位插入点,将插入栏切换到“Spry”分类,单击“Spry菜单栏”按钮,选择其放置方式:水平放置或垂直放置,如图1038所示。3.菜单文字的编辑和格式化 属

9、性的设置如图所示。4.理清站点的层次结构 制作Spry菜单栏之前有一项非常重要的工作要做,这就是理清站点的层次结构,然后根据清晰的站点导航地图来制作和调整Spry菜单栏,设置各项目名称和相关链接地址。任务实施任务实施 使用Dreamweaver内置行为设置“弹出信息”和“变换图像”;使用JavaScript语言制作滚动文字;使用“Spry菜单栏”绘制菜单。素材位置:光盘10素材比萨餐厅网页。操作步骤如下:(1)选择“文件”“打开”命令,在弹出菜单选择“比萨餐厅网页”“index.html”文件,并打开。(2)选择“窗口”“行为”命令,弹出“行为”面板,并单击“添加行为”按钮,选择“弹出信息”行

10、为。在弹出的对话框中输入“欢迎来到比萨餐厅!”。(3)选中图,单击“添加行为”按钮,选择“恢复交换图像”行为,设定原始档为“images”“title02.jpg”,形成颜色的交换。(4)设置文字“上等的比萨重要依据之一”为滚动显示效果。(5)使用“Spry菜单栏”绘制菜单,把光标停留在“联系我们”上面的单元格中,单击“插入”“Spry”命令,选择“Spry菜单栏”,选用“垂直”布局。(6)在属性中编辑层次结构,三个主菜单为“铁盘比萨”、“芝心比萨”和“无边比萨”。每个主菜单包括两个子菜单,分别是“9寸铁盘”、“12寸铁盘”,“10寸芝心”、“13寸芝心”,“9寸无边”、“12寸无边”。(7)在CSS样式面板下找出“ul.MenuBarHorizontal a.MenuBarItemSubmenu”样式,双击打开后修改其背景颜色为白色。(8)保存文档,按F12键浏览网页。