1、第13课 用行为为网页添加交互功能,本课要点 具体要求 本课导读 上机练习,本课要点,行为的添加与编辑 主要行为的使用,具体要求,了解什么是行为 掌握行为的添加方法 掌握行为的编辑方法 掌握主要行为的使用方法,本课导读,通过行为，可以在网页上实现一些简单的交互效果和实用特效，它是Dreamweaver CS3预置的JavaScript程序。通过使用行为，不进行复杂的编程就能实现许多常用的功能。,13.1 行为的添加与编辑,行为是Dreamweaver CS3中内置的脚本程序，使用行为能让用户与网页进行交互，如打开网页后弹出一些提示信息及在页面中制作飘浮动画等。,13.1 行为的添加与编辑,13
2、.1.1 知识讲解13.1.2 典型案例通过行为制作打字效果,13.1.1 知识讲解,Dreamweaver CS3中内置了23种较常用的行为。在使用这些行为之前，需先了解什么是行为以及如何添加行为。,13.1.1 知识讲解,1.什么是行为 2.认识【行为】面板3.添加行为4.编辑行为5.获取更多的行为,1.什么是行为,行为由事件和对应的动作组成，事件控制何时执行，动作控制执行什么。例如，将鼠标光标移动到某个超链接上时，该超链接就会产生一个onMouseOver事件；至于超链接文本变为其他颜色等效果，则是动作的具体内容了。,2. 认识【行为】面板,通过【行为】面板可以添加和控制行为。选择【窗口
3、】【行为】命令或按【Shift+F4】组合键，打开【行为】面板 。,3.添加行为,将行为添加到标签、超链接、图像或表单等网页对象中，可使其具有交互功能，实现一些特殊的效果。 添加行为的具体操作请教师参照软件和书中内容进行讲解。,4.编辑行为,可以对添加的行为进行修改，主要包括修改行为的事件、行为的动作和行为的顺序3个方面，具体操作方法请教师参照软件和书中内容进行讲解。 如果不再需要某种行为，则可以将其删除，方法是：选中要删除的行为，单击按钮或直接按【Delete】键。,5.获取更多的行为,单击【行为】面板上的按钮，在打开的【行为】菜单中选择【获取更多行为】命令，系统将启动网页浏览器并打开Ado
4、be公司的官方网站，在其中可以下载更多的行为。另外，在其他网站也可以下载一些行为，下载的行为的扩展名通常为.mxp；也有一部分是直接以网页的形式提供的，对于这种行为，根据提示文本复制并修改相应的代码即可使用该行为。,13.1.2 典型案例通过行为制作打字效果,案例目标本案例将安装下载的行为，并在10.1.2节制作的“花样年华”网页中添加行为。,13.1.2 典型案例通过行为制作打字效果,操作思路 （1）在【Adobe Extension Manager】窗口中安装下载的行为。 （2）添加行为。,13.1.2 典型案例通过行为制作打字效果,操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。,
5、13.1.2 典型案例通过行为制作打字效果,案例小结本案例练习了下载行为的安装和使用，不同的行为安装后在Dreamweaver CS3中出现的位置可能不同，可以在如图13.15所示的窗口中进行查看。本案例中使用的是一个打字效果行为，该行为要求页面中必须有AP元素来输出文本，具体的AP元素可以在【Typewriter】对话框的【Layer】下拉列表框中选择。,13.2 主要行为的使用,为对象添加行为可以使网页产生各种效果，比较常用的行为有“弹出信息”、“打开浏览器窗口”和“检查表单”等。,13.2 主要行为的使用,13.2.1 知识讲解13.2.2 典型案例通过添加行为制作“首饰展示”网页,13
6、.2.1 知识讲解,不同行为的设置参数各有不同，下面分别进行讲解。,13.2.1 知识讲解,1. 交换图像2. 弹出信息3. 打开浏览器窗口4. 拖动AP元素 5. 效果 6. 显示-隐藏元素 7. 检查表单,1. 交换图像,“交换图像”行为通过更改标签的src属性（该属性用于设置超链接的图像，即图像的路径及名称）实现一个图像和另一个图像的交换，该行为创建了按钮变换和其他图像效果，包括一次交换多个图像。添加“交换图像”行为的具体操作请教师参照软件和书中内容进行讲解。,2. 弹出信息,“弹出信息”行为一般用于标签，并使用“onLoad”事件；当然，也可以应用于其他元素，如文本等。 添加 “弹出信
7、息”行为的具体操作请教师参照软件和书中内容进行讲解。,3. 打开浏览器窗口,使用“打开浏览器窗口”行为可打开一个新的浏览器窗口来显示指定的文档，并且可以指定新窗口的属性，如大小、名称和是否显示状态栏等。添加“打开浏览器窗口”行为的具体操作请教师参照软件和书中内容进行讲解。,4. 拖动AP元素,“拖动AP元素”行为使浏览者在访问页面时可拖动AP元素的位置，其中包括设定浏览者向水平、垂直或任意方向拖动AP元素，并可以设定一个目标位置，当用户将AP元素拖向目标位置时，能将AP元素定位到目标位置。创建AP元素后（不要选中AP元素，可在页面空白区域单击），打开【行为】面板，单击 按钮，在弹出的【行为】菜
8、单中选择【拖动AP元素】命令，打开【拖动AP元素】对话框，该对话框中包括【基本】和【高级】两个选项卡。,5. 效果,“效果”行为可以设定页面元素的一些动态效果，包括“增大/收缩”、“挤压”、“晃动”、“滑动”、“显示/渐隐”、“遮帘”和“高亮颜色”等效果。,6. 显示-隐藏元素,使用“显示-隐藏元素”行为可以显示或隐藏指定的元素，下面通过一个具体的实例来介绍“显示-隐藏元素”行为的使用方法。首先在网页中添加一个AP元素和两个超链接，然后分别为这两个超链接添加“显示-隐藏元素”行为，一个用于显示元素，一个用于隐藏元素，具体操作请教师参照软件和书中内容进行讲解。,7. 检查表单,“检查表单”行为用
9、于检查用户在指定表单中输入的内容是否符合要求，如必须填写某些文本字段、必须填写数值和必须填写电子邮件地址等。使用【检查表单】命令就可以在提交表单时对用户输入的数据进行检查，只有用户输入的数据符合要求，才会提交数据到服务器上；否则，将打开一个对话框，提示用户输入的数据不符合要求。添加“检查表单”行为的具体操作请教师参照软件和书中内容进行讲解。,13.2.2 典型案例通过添加行为制作“首饰展示”网页,案例目标本案例主要为“首饰展示”网页中的图像添加“交换图像”行为及“设置文本”行为，实现当鼠标单击下方的缩略图时，在上方显示相应的大图及说明文本。,13.2.2 典型案例通过添加行为制作“首饰展示”网
10、页,操作思路 （1）选择第1个缩略图，在【行为】面板中为其设置行为。 （2）用同样的方法为其余5幅图设置行为。,13.2.2 典型案例通过添加行为制作“首饰展示”网页,操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。,13.2.2 典型案例通过添加行为制作“首饰展示”网页,案例小结本案例在网页中添加了“交换图像”行为和“设置文本”行为，主要练习为网页添加和修改行为的操作以及“交换图像”行为和“设置文本”这两个行为的具体使用方法。使用行为能够很方便地在网页中添加一些原本需要进行编程才能实现的功能，如果读者对JavaScript感兴趣，则可以在代码视图中查看这些行为的代码；也可以对这些代码进
11、行修改，以实现个性化的功能。,13.3 上机练习,13.3.1 添加“检查表单”行为 13.3.2 增大/收缩元素,13.3.1 添加“检查表单”行为,本练习将为12.3节中制作的“商品搜索”网页添加“检查表单”行为。,13.3.1 添加“检查表单”行为,操作思路： 选择表单中的【搜索】按钮作为添加行为的元素。 设置【商品关键字】和【商品所在地】文本框为必填、【价格范围】文本框为必填且为数字。,13.3.2 增大/收缩元素,本练习将为“手机报价”网页添加“增大/收缩”效果，当鼠标移动到图片上时，图片从80%渐变增大到100% 。,13.3.2 增大/收缩元素,操作思路： 为第1张缩略图添加动态效果。 用同样的方法为其他图片设置动态效果。,
