版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、计算机网络与网页制作Chapter 18:用行为增加页面的互动复旦大学计算机学院肖川1目标行为的含义为网页对象添加动作选择触发动作的事件使用行为增加页面的交互性在页面内创建可拖-放的对象2效果31. 什么是行为?行为 = 事件 + 动作“行为”面板4行为的本质行为是由事件触发的动作;事件是用户的某个操作,如打开页面、单击鼠标、移动鼠标等;动作是用JavaScript语言编写的函数,它具有某项功能,如显示-隐藏页面元素、弹出信息等;行为的本质是建立事件与动作的关联,使得浏览器捕获到这个事件时自动触发指定的动作。52.为超链接添加“显示-隐藏元素”动作添加链接绘制AP Div后选择菜单 插入图像6
2、重复绘制AP Div并层叠phone1phone6 AP Div分别插入图像层叠7为数字链接“1”添加动作8设置将引发这个动作的事件只显示phone1 AP Div,其他Div则隐藏9为数字链接26添加类似的行为事件:onMouseOver动作:隐藏-显示元素每个链接要显示或隐藏的AP Div是不同的10设置图片的初始显示状态只显示phone1 AP Div,其他Div则隐藏onLoad表示页面在浏览器中刚打开时11预览页面的初始状态123.用“拖动AP元素”动作创建一个匹配游戏游戏描述页面中有四种不同型号的手机图像排成一行,第二行是四个空白的方框,每个方框内用文字显示上述四种手机之一的型号。
3、浏览者可以用鼠标拖动一个手机图像至某个方框内,如果方框内的文字正好是手机的型号,则弹出信息窗口告知浏览者匹配正确,否则不会弹出消息窗。13绘制四个AP Div面板 插入布局 (标准)绘制AP Div 四个AP Div的标识依次为answer14,宽度70px,高度110px14添加类CSS规则.answer面板 CSS样式新建CSS规则15把.answer规则作用于四个AP Div在每个AP Div的“属性”面板内的“类”下拉列表中选择“answer”16给每个AP Div添加手机型号文本17在第一排绘制四个AP Div四个AP Div的标识依次为phone14,宽度65px,高度105px。无需对齐。面板 插入布局 (标准)绘制AP Div 18往第一排的AP Div内插入图像定位光标于AP Div内,菜单 插入图像19将phone1 拖至answer1内可以选中phone1 AP Div,再敲击方向键(上、下、左、右)来微调此phone1 AP Div的位置20为标签添加行为21添加针对phone24 AP Div的行为事件:onLoad动作:拖动AP元素此时这四个AP Div位于正确的位置上22错开phone AP Div
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 二零二五年度新能源企业聘用合同范本4篇
- 二零二五年度人工智能辅助软件服务合同模板2篇
- 二零二五美容院美容护理技术培训合同3篇
- 《短视频编剧:选题构想+脚本制作+剧本策划+镜头拍摄》课件 第5章 了解剧本:创作优剧本的基础
- 二零二五年度某局劳务分包结算与人才培养计划合同4篇
- 二零二五农机绿色生产技术研发与应用合同4篇
- 二零二五年度棉被品牌授权生产及销售合同4篇
- 二零二五年度智能制造名义合伙人合同4篇
- 二零二五版南京海事法院海洋石油开发合同4篇
- (必会)公路水运工程助理试验检测师《交通工程》近年考试真题题库(含答案解析)
- 中药材产地加工技术规程 第1部分:黄草乌
- 危险化学品经营单位安全生产考试题库
- 基于视觉的工业缺陷检测技术
- 案例分析:美国纽约高楼防火设计课件
- 老客户维护方案
- 移动商务内容运营(吴洪贵)任务一 用户定位与选题
- 万科物业管理公司全套制度(2016版)
- 2021年高考化学真题和模拟题分类汇编专题20工业流程题含解析
- 工作证明模板下载免费
- (完整word)长沙胡博士工作室公益发布新加坡SM2考试物理全真模拟试卷(附答案解析)
- 机械点检员职业技能知识考试题库与答案(900题)
评论
0/150
提交评论