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