第章使用行为创建特效网页演示教学

上传人:cl****1 文档编号:571159045 上传时间:2024-08-09 格式:PPT 页数:29 大小:12.73MB
返回 下载 相关 举报
第章使用行为创建特效网页演示教学_第1页
第1页 / 共29页
第章使用行为创建特效网页演示教学_第2页
第2页 / 共29页
第章使用行为创建特效网页演示教学_第3页
第3页 / 共29页
第章使用行为创建特效网页演示教学_第4页
第4页 / 共29页
第章使用行为创建特效网页演示教学_第5页
第5页 / 共29页
点击查看更多>>
资源描述

《第章使用行为创建特效网页演示教学》由会员分享,可在线阅读,更多相关《第章使用行为创建特效网页演示教学(29页珍藏版)》请在金锄头文库上搜索。

1、第章使用行为创建特效网页Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望学习目标学习目标熟悉行为的基本知识掌握Dreamweaver内置行为的使用教学目标和基本要求教学目标和基本要求_教学时间教学时间:本章共分_课时教学方法教学方法案例教学多媒体教学理论面授教学素材教学素材课程范例文件:sample第7章练习文件:exercise第7章7.1 行为概述行为概述行为是事件和由该事件触发的动作的组合。在【行为】面板中可以先指定一个动作,然后指定触发该动作的事件,从而将行为添加到页面中 。

2、7.1.1【行为行为】面板面板【行为】面板的作用是为网页元素添加动作和事件,使网页具有互动的效果。在介绍【行为】面板前先了解一下3个词语:事件、动作和行为 。7.1.2认识事件认识事件事件是访问者在浏览器上指定的一种操作。如当访问者将鼠标指针移动到某个链接上时,浏览器为该链接生成一个onMouseOver事件,然后浏览器查看是否存在相应的JavaScript代码。不同的页面元素定义了不同的事件,如在大多数浏览器中,onMouseOver和onClick是与链接关联的事件,而onLoad是与图像和文档body部分关联的事件 。7.1.3动作类型动作类型动作是由预先编写的JavaScript代码组

3、成的,这些代码指定特定的任务,如打开浏览器窗口、播放声音、控制Shockwave或Flash、设置状态栏文本和预先载入图像等 。7.1.4添加行为添加行为在Dreamweaver中,可以为整个页面、表格、链接、图像、表单或其他任何HTML元素增加行为,最后由浏览器决定是否执行这些行为 。7.2 小案例小案例制作指定大小的弹出制作指定大小的弹出窗口窗口使用【打开浏览器窗口】动作可以在一个新的窗口中打开网页,并且可以指定新窗口的属性、特征和名称。7.3调用调用JavaScript【调用JavaScript】动作允许使用【行为】面板指定当发生某个事件时应该执行的自定义函数或JavaScript代码行

4、。可以使用自己编写的JavaScript代码或使用网络上免费的JavaScript代码。使用此动作可以创建更加丰富的互动特效网页 。7.3.1小案例小案例利用利用JavaScript实现打印实现打印功能功能调用JavaScript打印当前页面,制作时先定义一个打印当前页函数printPage(),然后在中添加代码“OnLoad=printPage()”,当打开网页时调用打印当前页函数printPage()。利用JavaScript函数实现打印功能 。7.3.2小案例小案例利用利用JavaScript实现关闭实现关闭网页网页下面是利用【调用JavaScript】动作制作的自动关闭网页的效果 。7

5、.4设置浏览器环境设置浏览器环境使用【检查表单】动作和【检查插件】动作可以设置浏览器环境,下面就讲述这两个动作的使用 。7.4.1小案例小案例检查表单检查表单【检查表单】动作用于检查指定的文本域内容,以确保用户输入了正确的数据类型,防止表单提交到服务器后,存在任何指定的文本域包含无效的数据的情况 。7.4.2检查插件检查插件【检查插件】动作用来检查访问者的计算机中是否安装了特定的插件,从而决定是否将访问者带到不同的页面 。7.5小案例小案例显示显示/隐藏元素隐藏元素【显示-隐藏元素】动作,顾名思义就是改变一个或多个AP元素的可见性状态。【显示-隐藏元素】动作显示、隐藏或恢复一个或多个AP元素的

6、默认可见性。此动作用于在用户与网页进行交互时显示信息。7.6设置图像动作设置图像动作浏览网页时,经常碰到网页上插入大量图片的情况,使用【预先载入图像】动作和【交换图像】动作可以设置网页特效 。7.6.1小案例小案例交换图像交换图像【交换图像】就是当鼠标指针经过图像时,原图像会变成另外一幅图像。一个交换图像其实是由两幅图像组成的:原始图像(当页面显示时候的图像)和交换图像(当鼠标经过原始图像时显示的图像)。组成图像交换的两幅图像必须有相同的尺寸,如果两幅图像的尺寸不同,Dreamweaver会自动将第二幅图像尺寸调整成第一幅同样大小。 7.6.2小案例小案例预先载入图像预先载入图像【预先载入图像

7、】动作将不会立即出现在网页上的图像载入浏览器缓存中,这样可以防止当该图像出现时由于下载导致的延迟。7.6.3恢复交换图像恢复交换图像利用【恢复交换图像】动作,可以将所有被替换显示的图像恢复为原始图像,一般说来,在设置【交换图像】动作时会自动添加交换图像恢复动作,这样当鼠标离开对象时会自动恢复原始图像 。7.7设置文本设置文本【设置文本】行为中包含了4项针对不同类型的动作,分别为【设置状态栏文本】、【设置文本域文字】、【设置框架文本】和 【设置容器中文本】 。7.7.1小案例小案例设置状态栏文本设置状态栏文本【设置状态栏文本】动作用于在浏览器窗口底部左侧的状态栏中显示消息 。7.7.2小案例小案

8、例设置容器中的文本设置容器中的文本使用【设置容器中的文本】动作可以将指定的内容替换网页上现有AP元素中的内容和格式设置 。7.8设置特殊效果设置特殊效果要向某个元素应用效果,则该元素当前必须处于选定状态,或它必须具有一个ID。例如,如果要向当前未选定的Div标签应用高亮显示效果,则该Div必须具有一个有效的ID值。如果该元素还没有有效的ID值,将需要在HTML代码中添加一个ID值 。7.8.1小案例小案例增大增大/收缩效果收缩效果设置增大/收缩效果的效果 。7.8.2小案例小案例挤压效果挤压效果设置挤压效果的效果 。7.8.3小案例小案例晃动效果晃动效果设置晃动效果的效果 。7.9小案例小案例转到转到URL【转到URL】动作在当前窗口或指定的框架中打开一个新页面 。本本 章章 小小 结结有许多优秀的网页,它们不只包含文本和图像,还有许多其他交互式的效果,例如当鼠标移动到某个图像或按钮上,特定位置便会显示出相关信息,又或者一个网页打开的同时,响起了优美的背景音乐等。其实它们使用的就是本章中将要介绍的内容,Dreamweaver的另一大功能行为,使用它,网页中将会实现许多精彩的交互效果。对于“行为”本身,读者在使用时一定要注意确保合理和恰当,并且一个网页中不要使用过多的“行为”。只有这样,设计才能够得到事半功倍的效果。

展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 建筑/环境 > 施工组织

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号