计算机网络与网页作Chapter18用行为增加页面的互动.docxVIP

计算机网络与网页制作Chapter 18：用行为增加页面的互动 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn 1 目标 行为的含义 为网页对象添加动作 选择触发动作的事件 使用行为增加页面的交互性 在页面内创建可拖-放的对象 2 效果 3 1. 什么是行为？ 行为 = 事件 + 动作 “行为”面板 4 行为的本质 行为是由事件触发的动作； 事件是用户的某个操作，如打开页面、单击鼠标、移动鼠标等； 动作是用JavaScript语言编写的函数，它具有某项功能，如显示-隐藏页面元素、弹出信息等； 行为的本质是建立事件与动作的关联，使得浏览器捕获到这个事件时自动触发指定的动作。 5 2.为超链接添加“显示-隐藏元素”动作 添加链接 绘制AP Div后选择菜单 插入图像 6 重复绘制AP Div并层叠 phone1～phone6 AP Div 分别插入图像 层叠 7 为数字链接“1”添加动作 8 设置将引发这个动作的事件 只显示phone1 AP Div，其他Div则隐藏 9 为数字链接2～6添加类似的行为 事件：onMouseOver 动作：隐藏-显示元素 每个链接要显示或隐藏的AP Div是不同的 10 设置图片的初始显示状态 只显示phone1 AP Div，其他Div则隐藏 onLoad表示页面在浏览器中刚打开时 11 预览页面的初始状态 12 3.用“拖动AP元素”动作创建一个匹配游戏 游戏描述 页面中有四种不同型号的手机图像排成一行，第二行是四个空白的方框，每个方框内用文字显示上述四种手机之一的型号。浏览者可以用鼠标拖动一个手机图像至某个方框内，如果方框内的文字正好是手机的型号，则弹出信息窗口告知浏览者匹配正确，否则不会弹出消息窗。 13 绘制四个AP Div 面板 插入布局 (标准)绘制AP Div 四个AP Div的标识依次为answer1～4，宽度70px，高度110px 14 添加类CSS规则.answer 面板 CSS样式新建CSS规则 15 把.answer规则作用于四个AP Div 在每个AP Div的“属性”面板内的“类”下拉列表中选择“answer” 16 给每个AP Div添加手机型号文本 17 在第一排绘制四个AP Div 四个AP Div的标识依次为phone1～4，宽度65px，高度105px。无需对齐。 面板 插入布局 (标准)绘制AP Div 18 往第一排的AP Div内插入图像 定位光标于AP Div内，菜单 插入图像 19 将phone1 拖至answer1内 可以选中phone1 AP Div，再敲击方向键（上、下、左、右）来微调此phone1 AP Div的位置 20 为body标签添加行为 21 添加针对phone2～4 AP Div的行为 事件：onLoad 动作：拖动AP元素 此时这四个AP Div位于正确的位置上 22 错开phone AP Div与answer AP Div 图像方框与型号方框在位置上并不是上下对应的 23 预览效果 24 小结 添加行为 选择动作 设定事件 25