复旦大学：《计算机网络与网页制作》课程PPT教学课件（讲稿）18 用行为增加页面的互动

计算机网络与网页制作 Chapter18:用行为增加页面的互动 复旦大学计算机学院 肖川 xiao@fudan edu cn 1

计算机网络与网页制作 Chapter 18：用行为增加页面的互动 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1

目标 行为的含义 *为网页对象添加动作 *选择触发动作的事件 *使用行为增加页面的交互性 *在页面内创建可拖放的对象

目标  行为的含义  为网页对象添加动作  选择触发动作的事件  使用行为增加页面的交互性  在页面内创建可拖-放的对象 2

新大陆手机商城 页产品务关于我们联系我们 随点地图1最 效果 手机图集 资讯导购 三里55830 1234 苹果 iPhone45 小米手机 苹集 IPhone4 幸爱1T18i 诺基亚N9 三星90 降价且! 新大陆手机商城 篇页产品形务天于共们联系线们 站点地旧1景 你知道这些手机的型号吗? 资讯导购 三星S5830 一请把手机图片拖至其正确型号的方框内 苹果 i Phone45 小米手机 苹果 iPhone4 It 索爱LT8i 诺基亚N9 三里19000 降价信息! 您知道妈?我们致力于使我们的客户有 galaxy 来自世界各地的最高品质的手机和设备 我们与供应商之闭的关系,使我们能够握 供最低的产品价格 3 新大陆手机商城◎版权所有

效果 3

1.什么是行为? *行为=事件+动作 交换图像 CS*式AP元标签检查 弹单出信息 属性行为标签ody> 恢复交换图像 回(+ 打开浏览器窗口 拖动AP元素 “行为”面板「onmr 改变属性 效果 onDblclick 显示-隐范元素 rror 检查插件 nKeyD 检查表单 onkeypress 设置文本 调用J avast onMousedown 跳转菜单 onMouseMove onMouseOut 跳转菜单开始 onMouseOver 转到URL onMouseUp onUnload 预先载入图像 获取更多行为

1. 什么是行为？  行为 = 事件 + 动作 “行为”面板 4

行为的本质 *行为是由事件触发的动作; *事件是用户的某个操作,如打开页面、单 击鼠标、移动鼠标等; *动作是用 JavaScript语言编写的函数,它具 有某项功能,如显示隐藏页面元素、弹出 信息等; 行为的本质是建立事件与动作的关联,使 得浏览器捕获到这个事件时自动触发指定 的动作

行为的本质  行为是由事件触发的动作；  事件是用户的某个操作，如打开页面、单 击鼠标、移动鼠标等；  动作是用JavaScript语言编写的函数，它具 有某项功能，如显示-隐藏页面元素、弹出 信息等；  行为的本质是建立事件与动作的关联，使 得浏览器捕获到这个事件时自动触发指定 的动作。 5

2.为超链接添加“显示-隐藏元素”动作 首页:产品:服务:关于我们;联系我们 *添加链接 手机图集 12345 首页:产品:服务:关于我们:联系我们 插入 布局◆ 标准扩展 手机图集 国插入Div标签 12245 绘制Aiv 自spry菜单栏 绘制APDⅳ后选择 菜单插入>>图像 图spry选项卡式面板 图spry折叠式 → SpRy可折叠面板 图表格 在上面插入行 在下面插入行 6

2.为超链接添加“显示-隐藏元素”动作  添加链接 绘制AP Div后选择 菜单 插入>>图像 6

重复绘制APDⅳ并层叠 phone phone AP Div *分别插入图像 首页;产品:服务:关于我们氵联系我们 *层叠 手机图集 12345 1035

重复绘制AP Div并层叠  phone1～phone6 AP Div  分别插入图像  层叠 7

为数字链接“1添加动作 标签检查器 属性们标签(> bodv><中区 ≡日三 交换图像 恢复交换图像 显示-隐藏元素 打开浏览器窗口 「确定 拖动AP元素 改变属性 效果 显示[隐藏】[默认 显示元素A 检查表单 设置文本 显示-隐藏元素 调用 JavaScript 照 跳转菜单 帮助 显示]隐藏[默认

为数字链接“1”添加动作 8

设置将引发这个动作的事件 CSs样式」AP元素」标签检查器 属性行为标签④ =+ 手机图集 显示_隐藏元素 23455 只显示 phone1AP Dⅳ,其他Dⅳ则隐藏 onClick onDblClick onFocus onkeyDown onkeyPress onKeyUp onMouseDown onMouseMove MouseOver nMouseUp 9

设置将引发这个动作的事件 只显示phone1 AP Div，其他Div则隐藏 9

为数字链接2~6添加类似的行为 事件: on Mouseover *动作:隐藏显示元素 *每个链接要显示或隐藏的APDi是不同的

为数字链接2～6添加类似的行为  事件：onMouseOver  动作：隐藏-显示元素  每个链接要显示或隐藏的AP Div是不同的 10