实验八在网页中加行为.pptVIP

实验八：在网页中添加行为 实验目的 了解网页中有关行为的知识 掌握【行为】面板的使用 学会添加常用的行为 学会添加其他效果的行为 实验步骤及内容 1、行为的概念 行为是指在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。 在dreamweaver中，行为由事件和动作两个基本元素组成。通常动作是一段javascript代码，利用这些代码可以完成相应的任务；事件则由浏览器定义，事件可以被附加到各种页面元素上，也可以被附加到HTML标记中，并且一个事件总是针对页面元素或标记而言的。 实验步骤及内容 2、事件的分类 鼠标事件：onClick、onDblClick、onMouseDown、onMouseMove、onMouseOut、onMouseOver、onMouseUp 键盘事件:onKeyPress、onKeyDown、onKeyUp 表单事件:onChange、onFoucus、onBlur、onSelect、onSubmit、onReset 页面事件:onLoad、onUnload、onError、onMove、onResize、onScroll 实验步骤及内容 3、行为的基本操作 添加/删除行为 修改行为 实例：添加弹出提示信息的行为 实验步骤及内容 制作步骤： Step1：新建页面，插入一张图片，输入一行文字：单击此处查看原图； Step2：为图片添加行为——弹出信息，输入信息内容：“单击下方文字可以查看原图！”，设置该行为的事件为“onMouseOver”； Step3：选中页面中的文本，添加行为——转到URL命令，在打开的对话框中设置要转到的目标URL地址。 Step4：为文本的行为的事件选择为“onClick”。 实验步骤及内容 4、常用行为的操作 （1）打开浏览器窗口： 在文档窗口左下角选中body标签，添加行为——打开浏览器窗口，设置属性。 （2）显示隐藏元素： 先将需要隐藏/显示的元素以层的方式放置在合适的位置，并将该层的可见性设为不可见hidden。 选中需要注释说明的文本和图像，添加行为——显示隐藏元素，选中“显示”按钮，确定，将事件改为“onMouseOver”。 再次添加行为——显示隐藏元素，选中“隐藏”按钮，确定，将事件改为“onMouseOut”。 实验步骤及内容 4、常用行为的操作 （3）拖动AP元素： 在文档窗口左下角选中body标签，添加行为——拖动AP元素，修改其属性。 （4）设置文本： 设置状态栏文本： 选中body标签，添加行为——设置文本——设置状态栏文本 设置文本域文本（实例：实现文本域复制）： 插入一个表单标签、两个文本域（分别为text1和text2）和一个按钮 选中“复制”按钮，添加行为——设置文本—设置文本域文本，在对话框中文本域选择目标为“text2”，在新建文本框中输入“{text1.value}”,单击确定。 设置该事件为“onClick” 实验步骤及内容 5、设置“效果”行为 （1）添加增大/收缩效果： 选中目标元素，添加行为—效果/增大收缩，设置其属性即可。 （2）显示/渐隐效果（淡入/淡出） 方法同上 （3）晃动效果 （4）高亮颜色效果 注意如果应用于文字的话，必须将文本置于div标签内或者层内。 实例：利用行为使网页内容更加丰富多彩 Step1：分别选中文档中的两个介绍文本层“intro1”和“intro2”，设置它们的层属性为“hidden”。 Step2：选中图片1所在的层“apdiv1”，添加行为—效果/增大收缩，在对话框中设置效果为增大，增大自为100%，增大到为200%，确定。在行为面板中将事件改为“onMouseOver”。 Step3：再次选中层“apdiv”，添加“增加/收缩”行为，设置效果为收缩，收缩自为100%，收缩到为50%，确定。在行为面板中将事件设置为“onMouseOut”。 Step4：再次选中层“apdiv”，添加行为——效果/显示渐隐，设置目标元素为“div”“intro1”，效果为显示，显示自为0，显示到为100%，单击确定。在行为面板中将事件设为“onMouseOver”。 Step5：再次选中层“apdiv”，添加行为——效果/显示渐隐，设置目标元素为“div”“intro1”，效果为渐隐，渐隐自为100%，渐隐到为0%，单击确定。在行为面板中将事件设为“onMouseOut”。 Step6：参考以上步骤，为层“apdiv2”添加“增大”行为和“收缩”行为。然后再为“apdiv2”添加“显示”行为和“渐隐”行为，行为的目标元素改为“intro2”。 * * * 陕西师范大学 新闻与传播学院 Journalism and Communication College *