计算机网络与网页制作PPT课件_第1页
计算机网络与网页制作PPT课件_第2页
计算机网络与网页制作PPT课件_第3页
计算机网络与网页制作PPT课件_第4页
计算机网络与网页制作PPT课件_第5页
已阅读5页,还剩20页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论