新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目13.pptVIP

《网页设计与制作项目实训教程》配套课件 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 项目13 行为和脚本的应用 项目描述 知识储备 实践向导 能力拓展 退 出 项目小结 13.1 项目描述 　　　行为和脚本的应用是网页制作中十分重要的一个环节，是增强网页交互性、表现力以及用户体验的主要手段之一。本项目通过多个实例学习如何使用Dreamweaver添加“行为和脚本”，通过弹出菜单和拼图游戏两个具体的任务巩固学习效果，为今后学习脚本代码编写奠定基础。 返 回 13.2 知识储备 13.2.1 行为概述 13.2.2 行为在网页中的应用 13.2.3 JavaScript脚本在网页中的应用 13.2.4 Spry选项卡式面板 13.2知识储备 13.2.1行为概述 1．行为面板简介 　　在Dreamweaver中，网页页面的主要交互效果是通过对浏览器和网页中的各个对象创建行为而产生的。所谓“行为”，就是为响应某一事件而采取的一个操作。当把行为赋予页面中某个对象时，也就是定义了一个操作，以及用于触发这个操作的“事件”。 　　“事件”，可以理解为对象或者页面发生的变化或动作，例如鼠标经过、鼠标离开、鼠标点击，都是不同的事件。例如，当鼠标点击这个“事件”发生后，页面改变了颜色，称为“动作”，那么这个“事件”加“动作”的过程我们就称之为一个“行为”。 　　　在Dreamweaver中，“行为面板”是为页面标签添加行为的主要手段之一。它可以对行为的参数进行修改。其本质上是Dreamweaver软件在HTML源代码中自动编写添加的JavaScript代码脚本。 13.2知识储备 13.2.2行为在网页中的应用 １．交换图像行为 　　交换图像行为是通过改变img标签的src属性，将一幅图像替换成为另外一幅图像。使用此行为可以创建鼠标经过的按钮效果以及其它图像效果。 使用交换图像的操作步骤如下： （1）在文档中插入图像。 （2）选择要交换的图像，打开行为面板。 （3）单击“添加行为（+）”按钮，在弹出的下拉菜单中选择“交换图像”命令，如图13-5所示。 （4） 打开“交换图像”对话框，在“设定原始档为”文本框中输入交换图像的文件路径和名称，如图13-6所示。 13.2知识储备 13.2.2行为在网页中的应用 １．交换图像行为 图13-5 选择交换图像 　　　　　　　　　　　 图13-6 交换图像 13.2知识储备 13.2.2行为在网页中的应用 １．交换图像行为 “交换图像”对话框中各选项说明如下： “图像”选项：选择一个需要改变其源文件的图像。 “设定原始档为”选项：输入新图像的文件路径和名称，或者单击“浏览”按钮选取一个新的图像文件。 “预先载入图像”选项：选择此项可以将新图像预先加载到浏览器缓存中，防止图像延迟。 （5）设置完成后，单击“确定”按钮，保存网页，按【F12】预览效果。 13.2知识储备 13.22行为在网页中的应用 2．弹出信息行为 　　使用“弹出信息”行为可以显示一个带有指定信息的JavaScript警告。因为JavaScript警告只有一个“确定”按钮，所以使用此行为可以提供信息，而不能为用户提供选择。 添加弹出信息行为操作步骤如下: (1)选择一个页面元素或者对象。打开行为面板，单击“添加行为”按钮，在弹出的下拉菜单中选择“弹出信息”命令。 (2)打开“弹出信息”对话框，如图13-7所示。 图13-7 “弹出信息”对话框 13.2知识储备 １３.２.２行为在网页中的应用 2．弹出信息行为 　　“消息”即是输入要显示的消息，也可以在“消息”框中输入任何JavaScript函数、属性、变量或者表达式。如果输入JavaScript表达式，则需将其放在大括号{}中。 例如：在“消息”右侧的文本框中输入“这个页面的URL地址是：{window.location}”（window是浏览器对象location是它的属性，表示URL） 　　(3)单击“确定”按钮后，保存网页，按F12预览效果。 13.2知识储备 １３.２.２行为在网页中的应用 3．打开窗口行为 　　使用“打开浏览器窗口”行为可以在一个新窗口中打开URL。操作步骤如下: （1）选择一个页面元素或者对象。打开行为面板，单击“添加行为”按钮，在弹出的下拉菜单中选择“打开浏览器窗口”命令。 （2）在 “打开浏览器窗口”对话框中进行参数设置，如图13-9所示。 （3）设置完成后，单击“确定”按钮，保存网页，按【F12】预览效果。 图13-9 “打开浏览器窗口”对话框 1.2知识