《网页制作及网站设计_11dreamweaver用行为制作网页》由会员分享，可在线阅读，更多相关《网页制作及网站设计_11dreamweaver用行为制作网页（14页珍藏版）》请在金锄头文库上搜索。
1、项目十一,Dreamweaver用行为制作网页,内容摘要 理解什么是行为、事件和动作 学习行为面板的使用 学习添加、删除、修改行为、使用行为,学习目标,理解行为的概念、行为的组成 掌握行为的基本操作：添加、修改、删除行为 掌握在网页中利用行为实现特定的交互效果或特效,Dreamweaver用行为制作网页,任务一描述：行为概念 小刚在前面已经基本掌握了网页制作的方法，能够制作简单的网页了。可小刚的网页怎么不能像其他大型网站的网页那般好像能与用户交互呢？老师告诉了小刚一个秘密工具：行为。并且告诉他假如想要使网页更“聪明”的话，就要使用行为来感知外界的信息并做出相应的响应。这些外界信息包括鼠标的活动
2、，如页面的调用和关闭、鼠标移动到页面元素上点击元素或移开元素，连同焦点的改变和键盘的情况等各种变化，对不同的页面内容有不同的事件。接下来我们就先来了解一下什么叫行为。,解决方案 行为是Dreamweaver中制作绚丽网页的利器，功能强大，在学习利用行为实现各种特效前，我们先来了解行为的概念。,Dreamweaver用行为制作网页,知识讲解,行为是为影响某一具体事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。所以在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。 在Dreamweaver中，行为是事件和动作的组合。事件是特定的时间
3、或是用户在某市所发出的指令后紧接着发生的，而动作是事件发生后网页所要做出的反应。所谓的动作就是设置交换图像、弹出信息等特殊的JavaScript效果。在设定的事件发生时运行动作。,Dreamweaver用行为制作网页,知识讲解,事件：每个浏览器都提供一组事件，不同的浏览器有不同的事件，但常用的事件大部分浏览器都支持，常用的事件及作用说明如下。,动作：动作就是当用户触发事件后所执行的脚本代码，一般使用JavaScript或VBScript编写。这些代码可移植性特定的任务，如打开浏览器窗口以及显示或隐藏层等。,Dreamweaver用行为制作网页,任务二描述：行为基本操作 听完老师的讲解之后，小刚
4、知道了行为的强大功能，老师为了让小刚进一步了解行为，分别又讲解了行为面板和“行为”的基本操作。,解决方案 了解了行为的概念之后，我们来认识一下行为面板和。,Dreamweaver用行为制作网页,知识讲解,Dreamweaver CS3提供了丰富的内置行为，这些行为利用简单直观的语句设置手段，不需要编写任何代码就可以实现一些强大的交互性和控制功能，还可以从互联网上下载一些第三方提供的动作来使用。,【行为】面板的作用 事件：是浏览器对每一个网页元素的响应途径，与具体 的网页对象相关。 动作：是一段事先编辑好的脚本，可用来选择某些特殊的任务，如播放声音、打开浏览器口、弹出菜单等。 行为：实质上是事件
5、和动作的合成体。,Dreamweaver用行为制作网页,任务三描述：行为的应用 在了解行为概念和行为的基本操作之后，小刚兴趣大增，老师通过几个实例向小刚展示了行为的强大功能。,解决方案 在Dreamweaver CS3中自带的行为大约有20多种，在对象上添加这些行为后可以使网产生各种特效。,Dreamweaver用行为制作网页,知识讲解及操作步骤,交换图像 【交换图像】就是当鼠标指针经过图像时，原图像会变成另外一幅图，一个交换图像其实是由两幅图像组成，即原始图像和交换图像。 操作步骤： 打开网页文档 在菜单栏中选择【窗口】|【行为】命令，打开【行为】面板，在面板中单击【添加】 按钮，在弹出的菜
6、单中选择【交换图像】命令 弹出【交换图像】对话框，在对话框中单击【设定原始文档为】文本框右边的【浏览】按钮，在弹出的【选择图片源文件】对话框中选择相应的图像文件，输入新图像的路径和文件名 单击【确定】按钮，在【行为】面板中可以看到添加的行为 保存文档，在浏览器中浏览，交换图像后的效果,Dreamweaver用行为制作网页,知识讲解及操作步骤,弹出提示信息 【弹出信息】显示一个带有指定信息的警告窗口，因为该警告窗口只有一个【确定】按钮，所以使用这个动作可以提供信息，而不能为用户提供选择。 具体操作步骤： 打开网页文档 在菜单栏中选择【窗口】|【行为】命令，打开【行为】面板，在面板中单击【添加】
7、按钮，在弹出的菜单中选择【弹出信息】命令 弹出【弹出信息】对话框，在【消息】文本框中输入文本【欢迎光临】 单击【确定】按钮，将行为添加到【行为】面板，单击显示的下拉按钮，在弹出的列表中选择【onload】事件 保存文档，按F12键在浏览器中可以看到弹出提示信息，网页效果,Dreamweaver用行为制作网页,知识讲解及操作步骤,打开浏览器窗口 使用【打开浏览器窗口】动作在打开当前网页的同时，还可以再打开一个新的窗口。同时还可以编辑浏览器窗口的大小、名称、状态栏和菜单栏等的属性。 具体操作步骤： 打开网页文档 在菜单栏中选择【窗口】|【行为】命令，打开【行为】面板，在面板中单击【添加】 按钮，在
8、弹出的菜单中选择【打开浏览器窗口】命令 在对话框中单击【要显示的URL】文本框中右边的【浏览】按钮选取文件，或者输入需要显示的URL。在【打开浏览器窗口】对话框中可以设置一下参数 单击【确定】按钮，按F12键浏览效果,Dreamweaver用行为制作网页,知识讲解及操作步骤,拖动AP元素层 行为中的【AP元素层】动作允许访问者拖动层，使用此行为可以创建拼版游戏和其他可移动的页面元素。 具体步骤如下： 在菜单栏中选择【插入记录】|【布局对象】|【AP Div】命令，在网页中插入一个层 在【AP Div】中插入图像，单击文档窗口底部标签选择器中的标签 按Shit+F4组合键打开【行为】面板，单击【
9、行为】面板中的【添加】按钮 ，在弹出的菜单中选择【拖动AP元素】命令，弹出【拖动AP元素】对话框 保存文档，浏览效果,Dreamweaver用行为制作网页,知识讲解及操作步骤,显示-隐藏元素 【显示-隐藏元素】动作显示，隐藏或恢复一个或多个层的默认刊行。此动作用于在用户与页面进行交互式显示信息。 具体步骤如下： 打开网页文档，在菜单栏中选择【插入记录】|【布局对象】|【AP Div】命令，插入层 选择该图层，在【属性】面板中调整图层的位置，【背景颜色】设置为【#A9DDEA】，并输入相应的文本 选中图像【解决方案】，然后单击【行为】面板中的【添加】 按钮，在弹出的菜单中选择命令 在对话框中选择
10、层的编号，并单击【显示】按钮，最后单击【确定】按钮，返回到【行为】面板，将【显示-隐藏元素】行为的时间更改为【onMouseOver】 单击【行为】面板中的添加按钮 ，在弹出的菜单中选择【显示-隐藏元素】，弹出【显示-隐藏元素】对话框，在该对话框中单击【隐藏】按钮 单击【确定】按钮，返回到【行为】面板，将【显示-隐藏元素】行为的时间更改为【onMouseOut】 单击【确定】按钮，保存文档，按F12键在浏览器中浏览效果,Dreamweaver用行为制作网页,上机操作：制作“调查表”网页,学习了行为的使用方法后，我们来制作“调查表”网页,Dreamweaver用行为制作网页,项目小结,本章讲解了行为的概念，行为的基本操作以及行为的基本应用。通过学习应当掌握行为的概念：行为是为影响某一具体事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。行为的基本操作：添加、修改、删除行为。重点学会利用行为实现某种交互效果或特效， 使用行为给网页添加特效。,
