网页设计与制作使用行为
《网页设计与制作教程与实训》全套电子课件教案-第六章 行为的操作

第六章 行为的操作
(3)选择“改变为红色” ,打开行为面板,选择 “改变属性”,在对话框中的“对象类型”下拉列 表框中选择DIV选项,在“命名对象”下拉列表 框中选择div “Layer1”选项;在“属性”选项区选 择style.color选项,在“新的值”文本框中输入 “red”,单击“确定”按钮,
《网页设计与制作教程与实训 》
第六章 行为的操作
三、操作题
打开素材页面“htm\f61.htm”,为该网页添加背景音 乐;为表头图片设置弹出信息,当鼠标滑过该图片时会 弹出消息。
打开素材文件“htm\62.htm”,在该页面中插入层, 输入相应的文字,为该层创建任意路径的运动,让该层 在浏览网页的时候能自动循环播放。
《 Dreamweaver mx 2004网页制作与设计教程》
第六章 行为的操作 《 Dreamweaver mx 2004网页制作与设计教程》
第六章 行为的操作
(2)选中页面中的文字“改变为红色”,在 “属性” 面板中的“链接”下拉列表框中输入“#”,就将 此文本设置成了可以响应鼠标事件的空链接。 对“改变为蓝色”、“改变为黑色”、“改变文字。 恢复文字”、“隐藏文字。显示文字”都作如此 设置。
提示 使用此行为还可以针对整个文档,让用户在 打开网页的时候能随之打开另外一个小窗口,可 以为本网站做一个内容简介或主要导航,增加网 页的美观和实用性。
《网页设计与制作教程与实训 》
第六章 行为的操作
6.2.5播放背景音乐
使用“播放声音”行为可以针对当前网页设 置背景音乐,还可以针对某一对象设置音乐,并 可以对音乐播放进行控制,使用此行为可以给网 页带来更加精彩的多媒体效果。
网页设计基础-13使用行为

28
改变属性
元素ID:下列列表中列出所有所选类型的命名对象,
从中选择要改变的对象的名称。
属性,从中选择一个属性。 新的值:输入一个新值。
单击确定。
29
检查表单
利用【检查表单】动作可以为表单中各元素设置
有效性规则,并检查指定文本域的内容以确保用
户输入正确的数据类型
使用【检查表单】动作的操作步骤如下:
18
浏览器状态栏
•
注意:不一定设置的状态
栏文本能被所有的浏览器 支持,有些浏览器必须通
过用户设置才能支持这个
功能。 • 此类浏览器不支持的情况
也可能发生在后续介绍的
其他行为上。
19
设置文字:文本域文字
在制作表单时,希望能够在文本字段上显示一些 提示,当用户要输入时这些提示会自动清除,就 可以使用“设置文本域文字”
– – – –
•
•
1、易用性 2、动态交互性 3、跨平台性
4、安全性
JavaScript是安全性高的语言,它只能 通过浏览器实现对网络的访问和动态交 互,可以有效地阻止通过访问本地硬盘 或者将数据存入到服务器
8
JavaScript语言
JavaScript程序的示例:
<script type="text/javascript">
使用【弹出信息】动作的操作步骤如下:
①
选择<body>标签并打开行为面板。并从“添加动作” 菜单中选择【弹出信息】。打开“弹出信息”对话框。
②
③
在【消息】域中输入在信息框中将要显示的信息文字。
选择【行为】面板中事件onLoad事件
网页设计与制作第11章 使用行为

11.2 行为基本操作
11.2.1 【行为】面板 11.2.2 添加行为 11.2.3 编辑行为
11.2.1 【行为】面板
Dreamweaver CS6提供了一个专门管理和编辑行为的工具面板,即【行 为】面板。通过【行为】面板,用户可以方便地为文本、图像等页面对象添 加行为,还可以修改以前设置过的行为参数。选择菜单命令【窗口】/【行 为】,可打开【行为】面板。 使用【行为】面板可将行为附加到页面元素。已附加到当前所选页面 元素的行为显示在【行为】面板列表中,并按事件以字母顺序列出。如果同 一事件引发不同的行为,这个行为将按执行顺序在【行为】面板中显示。如 果行为列表中没有显示任何行为,则表示没有行为附加到当前所选的页面元 素。
11.1.2
事件
事件是由浏览器生成的消息,它提示该页的浏览者已执行了某种操作。 例如,当浏览者将鼠标光标移到某个链接上时,浏览器将为该链接生成一 个onMouseOver事件,然后浏览器检查在当前页面中是否应该调用某段 JavaScript代码进行响应。不同的页面元素定义不同的事件。例如,在大多 数浏览器中,onMouseOver和onClick是与超级链接关联的事件,而onLoad 是与图像和文档的body部分关联的事件。
11.2.3
编辑行为
编辑行为的方法是,首先选择一个附加有行为的对象,然后在 【行为】面板中根据具体情况进行以下相应操作: • 如果要编辑动作的参数,可在【行为】面板的行为列表中双 击动作的名称,或将其选中并按Enter键,也可单击鼠标右键,在弹 出的快捷菜单中选择【编辑行为】命令,打开相应的对话框,在对 话框中更改参数并确认即可。 • 如果要更改给定事件的多个动作的顺序,可在【行为】面板 的行为列表中选择某个动作,然后单击 或 按钮。 • 如果要删除某个行为,可在【行为】面板的行为列表中将其 选中,然后单击 按钮或按Delete键即可。
《网页设计与制作》教案-第20讲 网页特效-运用行为一

第20讲网页特效-运用行为一1.1教学目标:◆知识目标1.理解行为、事件的含义。
2.熟练掌握行为的添加与删除操作。
3.掌握触发事件的更换方法。
4.理解JavaScript脚本的运用。
◆技能目标能运用各自带行为制作页面动态效果◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点:1.熟练掌握行为的添加与删除操作。
2.掌握触发事件的更换方法。
1.3 教学难点理解行为、事件的含义,掌握触发事件的更换方法1.4教学方法:讲练结合,任务驱动、分子任务操练1.5课时安排:2课时1.6教学对象分析:这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。
1.7教学过程:一、激趣导入,揭示课题行为的设置可以使网页动起来,动的画面可以引发同学们极高的兴趣,抓住同学们感光趣的东西让他们找失误,在设置动作过程中想想为什么会有千差万别的变化,不同的对象为什么设置的效果不同,设置悬念,让同学们掌握应该掌握的内容。
二、行为的基础知识随着JavaScript技术的发展,Dreamweaver将JavaScript的强大功能和简单易用的拖放( Drag -and - drop)界面结合了起来。
所谓行为( behavior )被定义为事件和动作的组合,即当Web页的浏览者做了某件事情后,随之会有另外的事情发生,这个过程被称为行为。
由于基本上不需要编程,所以行为得到了广泛的应用。
行为是基于JavaScript的,这一点很重要,因为目前的各种浏览器对JavaScript的支持程度不同。
Dreamweaver简化了对特定浏览器中JavaScript命令适用性的验证任务,你只需简单地选择希望控制动作的Web页元素,同时从启动档(Launcher)中打开行为检查器(Behavior Inspector)。
网页设计与制作(Dreamweaver)《行为:事件+动作》

行为:事件+动作
认识行为
动作是指最终需完成的动态效果,如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时,系统会自动向页面中添加JavaScript代码,用户不必自 己编写。
行为:事件+动作
行为面板与菜单
行为:事件+动作
行为的基本操作
对行为的基本操作包括:添加行为、删除行为和编辑行为等。 1.添加行为 在编辑行为之前,先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮,在弹出的行为列表中选中一种行为,将打开对应的设置对话框, 然后进行详细的设置并确认。在“行为”面板中,单击添加的行为事件设置列,可为该行为选择一个合适的事件类型。 2.删除行为 选中文档窗口中的目标对象,“行为”面板中将罗列出该对象上被定义的所有行为,选中需要删除的行为,单击“删除事件” 按钮,即可将其删除。
行为:事件+动作
行为类型
弹出消息
方法:应用“弹出消息”行为的方法:选择一个事件对象(链接、图象、导航按钮或整 个文档“Body”)并打开“行为”面板。单击加号(+)按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框,在“消息”域中输入 要显示的信息,如“欢迎光临”等。单击“确定” 按钮,关闭设置对话框。
网页设计与制作项目12 使用行为完善网页功能

任务一
设置页眉部分
任务二
设置主体部分
任务一 设置页眉部分
(一) 设置状态栏文本
【操作步骤】 1.在Dreamweaver 8中定义一个本地站点,并将教学辅助光盘“项 目12\项目素材”文件夹下的内容复制到站点根文件夹下面, 然后在网站根文件夹下面打开主页文档“index.htm”。 2.在菜单栏中选择【窗口】/【行为】命令,打开【行为】面板, 如图所示。
3.单击 按钮,关闭对话框,在【行为】面板中将事件设置为 “onClick”。然后用相同的方法设置下面的图像。 4.保存网页并按F12键预览网页,单击“风景欣赏”栏目下面的第2 幅图像,将打开一个新窗口,如图所示。
(二) 交换图像
【操作步骤】 1.在文档中选定地图图像“images/map.jpg”,并确认在其【属性】面 板中设置了图像名称,这里为“map”。 2.在【行为】面板中单击 按钮,从【行为】菜单中选择【交换图 像】命令,打开【交换图像】对话框。 3.在【图像】列表框中选择要改变的图像“map”,然后在【设定原 始档为】文本框中定义其要交换的图像文件“images/xsbn6.jpg”, 并勾选【预先载入图像】和【鼠标滑开时恢复图像】两个复选 框,如图所示。
7.切换至【高级】选项卡,将【单元格宽度】设置为“80像素”, 将【单元格高度】设置为“25像素”,其他参数可以根据个人 喜好进行设置,如图所示。
8.切换至【位置】选项卡,在【菜单位置】选项中单击第4个按 钮,并勾选【在发生onMouseOut事件时隐藏菜单】复选框, 如图所示 。
9.单击 按钮,完成弹出式菜单设置工作,如图所示。 10.保存文档,然后按F12键预览网页,当鼠标光标经过栏目时, 便会弹出菜单,单击菜单中的某一项,便会打开所指向的 文档窗口,当鼠标光标离开栏目时,菜单便会消失。
网页设计与制作 PPT11

11.2.7 课堂案例——恒洲电子商务网页
使用设置状态栏文本命令设置在加载网页文档时在状态栏中 显示的文字。
效果图
课堂练习——游戏网页
使用AP Div按钮绘制层。使用拖动AP元素命令制作组合西瓜人效果。
效果图
课后习题——蟹来居饭店首
使用设置状态栏文本命令制作在浏览器窗口左下角的状态栏中显示消息。
11.2.3 设置容器的文本
使用“设置层文本”动作的具体操作步骤如下。 (1)选择“插入”面板“布局”选项卡中的“绘制AP Div”按 钮 ,在“设计”视图中拖曳出一个图层。在“属性”面板的“层 编号”选项中输入层的唯一名称。 (2)在文档窗口中选择一个对象,如文字、图像、按钮等,并 启用“行为”控制面板。 (3)在“行为”控制面板中单击“添加行为”按钮 ,并在弹 出的菜单中选择“设置文本 > 设置容器的文本”动作,弹出“设置 层文本”对话框。 (4)如果不是默认事件,则单击该事件,会出现箭头按钮 , 单击按钮 ,弹出包含全部事件的事件列表,用户可根据需要选择 相应的事件。 (5)按F12键浏览网页。
1.将行为附加到网页元素上 2.将行为附加到文本上
11.2 动作
打开浏览器窗口 拖动层 设置容器的文本 设置状态栏文本 设置文本域文字 设置框架文本 课堂案例——恒洲电子商务网页
11.2.1 打开浏览器窗口
使用“打开浏览器窗口”动作在一个新的窗口中打开指 定的URL,还可以指定新窗口的属性、特征和名称。
11.2.2 拖动层
使用“拖动层”动作的具体操作步骤如下。 (1)通过单击文档窗口底部标签选择器中的 <body> 标签选择 body对象,并启用“行为”控制面板。 (2)在“行为”控制面板中单击“添加行为”按钮 ,并在弹 出的菜单中选择“拖动AP元素”动作,弹出“拖动AP元素”对话框。 (3)如果不是默认事件,则单击该事件,会出现箭头按钮 , 单击按钮 ,弹出包含全部事件的事件列表,用户可根据需要选择 相应的事件。 (4)按F12键浏览网页。
网页设计与制作教程第12章 使用行为

Dreamweaver 提供网页常用行为,能够制 作很多常见页面交互式效果。其中包括:
弹出信息行为 打开浏览器窗口行为 显示-隐藏元素行为 跳转菜单行为 效果行为
9/14
12.2.1 弹出信息行为
“弹出信息”动作可以使指定的信息以 JavaScript 消息框的方式弹出,它只有一 个参数,即消息框中的文字信息。 演示——弹出信息行为 (p225~p226)
14/14
4/14
12.1.1 行为与事件 (续)
动作是指一个预先写好的 JavaScript 程序, 每个程序都可以完成特定的任务。例如打 开浏览器窗口动作、播放声音动作或显示/ 隐藏 AP 元素动作。 将事件与动作组合,就能获得各种动态效 果。例如,单击按钮时播放声音,加载网 页时弹出一个信息窗口等。
5/14
12.1.2 行为面板
在 Dreamweaver 中,可以为网页各种对 象添加行为。例如,网页<body>、表格 或单元格、Div 标签、图像、表单按钮等。 通常一个行为包含一个事件和一个动作。 行为允许指定多个动作,如果指定了多个 动作网页对象行为的动作将按照一定顺序 依次执行。
6/14
第12章 使用行为
1
本章要点
12.1 行为概述 12.2 使用内置的 Dreamweaver 行为
2/14
12.1 行为概述
本节内容包括:
行为基本概念 使用行为面板
3/14
12.1.1 行为与事件
行为是某个事件和由该事件触发动作的组合。 Dreamweaver 中的行为将 JavaScript 代码放置 到文档代码中,这样访问者就可以通过多种方式 更改网页,或者启动某些任务。 事件是指浏览器事先为网页对象定义的某种状态。 例如,当鼠标移动到某个链接上时,就会产生 “onMouseOver”事件;当用户加载网页时,就 会发生“onLoad”事件;当访问者单击某个对象 时就会发生“onClick”事件;当访问者的鼠标离 开某个对象时会发生“onMouseOut”事件。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
9.1
行为概述 9.1.1 【行为】面板 9.1.2 关于事件
1
第9章 使用行为
9.2 基本浏览器行为 9.2.1弹出信息 9.2.2打开浏览器窗口 9.2.3设置导航栏图像 9.2.4显示弹出式菜单 9.2.5交换图像 9.2.6播放声音 9.2.7拖动层 9.2.8显示与隐藏层 9.2.9控制Shockwave或Flash 9.2.10检查表单 9.2.11调用JavaScript 9.2.12转到URL 9.2.13检查插件 9.2.14检查浏览器
5
关于事件 事件的出现类型取决于所选对象和浏览器。所 选对象的不同,所能显示的事件也有所不同; 而不同的浏览器对事件的支持也不相同,可在 【添加行为】菜单的【显示事件】子菜单中指 定浏览器,浏览器的版本越高,能支持的事件 越多。
9.1.2
6
9.1.2 关于事件
下面列举一些不同的浏览器能引发的事件,同时介 绍各种事件的功能。 onAbort:当浏览器正载入一幅图像,用户停止 了浏览 器的运行时(例如,单击浏览器的【停止】按 钮),引发该事件。 onAfterUpdate:当页面上被选中的数据元素完 成了更新数据源后,引发该事件。 onBeforeUpdate:当页面上被选中的数据元素 已经改变并且将要失去焦点时(因些就要开始更 新数据源)时,引发该事件
4
9.1 行为概述
动作是最终产生的动态效果。动态效果可能是
图片的翻转、链接的改变、声音播放等。 行为可以附加到整个文档,还可以附加到链接、 图象、表单元素或其他网页对象中的任何一种, 用户可以为每个事件指定多个动作。动作按照 它们在行为面板的动作列表中列出的顺序发生。 注意:不同的显示器支持的行为事件是不一样 的。
10
9.1.2 关于事件
onMouseUp:当鼠标按键被释放时引发事件。
onMove:当一个窗口或一个框架移动时引发事件。
onReadyStateChange:当特定元素的状态改变时引
发这个事件。可能的元素状态包括未初始化、载入中 和完成。
11
9.1.2 关于事件
on Reset:当重置表单初始值时引发事件。
2
9.1 行为概述
行为的概念: 行为是Dreamweaver MX 2004中自带的一段 JavaScript代码,使用行为可以使用户与网页之 间产生一种交互,以改变一个页面或引发一个任 务。 Dreamweaver MX 2004提供了丰富的行为, 内置了21种常见的行为,这些行为的设置可以为 网页对象添加一些动态效果和简单的交互功能, 从而使那些不熟悉JavaScript或VBScript的用户, 也可以方便的设计出只有通过复杂的JavaScript 或VBScript语言才能实现的功能。 当然你也可以自己编写行为。
onResize:调整浏览器窗口大小或者框架大小时引发事件。 onRowEnter:所选中数据源的当前记录指针改变所引发的事件。 onRowExit:所选中数据源的当前记录指针将要改变所引发的事件。 onScroll:上翻滚动条或下翻滚动条时引发的事件 onSelect:当访问者在一个文本区域里选定文本时所引发的事件。 onStart:当字幕开始循环时引发事件。
onClick:当访问者用鼠标单击特定事物时,引发
该事件。 onDblClick:当访问者用鼠标双击特定物件时,引 发该事件。 onError:当载入一个页面或者图像,浏览器出现 8 错误时,引发该事件。
9.1.2 关于事件
onFinish:当个字幕元素的内容完成一个循环时,引发
该事件。 onFocus:当指定的元素成为访问者交互的焦点时,引 发该事件。 onHelp:当访问者点击浏览器的帮助按键时,引发该事 件。 onKeyDown:当访问者按下任何键(未释放)时,引发 该事件。 onKeyPress:当访问者按下按任何键(己释放)时,引 发该事件。这个事件就像【onKeydown】和 【onKeyUp】事件的组合。
onSubmit:当访问者提交表单时引发的事件。
onUnload:当访问者离开页面时引发的事件。12第9章 使用行为
9.2 基本浏览器行为 9.2.1弹出信息 9.2.2打开浏览器窗口 9.2.3设置导航栏图像 9.2.4显示弹出式菜单 9.2.5交换图像 9.2.6播放声音 9.2.7拖动层 9.2.8显示与隐藏层 9.2.9控制Shockwave或Flash 9.2.10检查表单 9.2.11调用JavaScript 9.2.12转到URL 9.2.13检查插件 9.2.14检查浏览器
9
9.1.2 关于事件
onKeyUp:当访问者按下一个键再释放它时,引发该事
件。 onLoad:当网页或图像完成载入时,引发该事件。 onMouseDown:当访问者按下鼠标键的时候(要引发 该事件,访问者不必释放鼠标键),引发该事件。 onMouseMove:当光标指向一个特定元素并移动鼠标时 产生(指光标停留在元素的边界以内)。 onMouseOut:当光标移出特定元素(通常指链接)的 边界时引发该事件。 onMouseOver:当光标刚刚指点向特定元素(通常指链 接)时,引发该事件。
7
9.1.2 关于事件
onBlur:这是和onFocus相反的事件,当指定元素不再是
用户与网页交互的焦点时,这个事件发生。例如,用户单击 了一个文本区域后,又单击文本区域外部的部分,就为这个 文本区域引发一个onBlur事件。 onChange:当改变了页面上的一个值,如在菜单中选择了 一个项目,或者先改变了文本区域的值,然后单击页面以外 的部分时,会引发这个事件。
3
9.1 行为概述
行为三打的组成要素:对象、事件和动作 对象是产生行为的主体。网页中的很多元素都可 以成为对象,例如:整个HTML文档、插入的一个图 片、一段文字、一个媒体文件等。对象也是基于成对 出现的标签中,在创建时首先选中对象的标签。 事件是触发动态效果的条件。网页事件分为不同 的种类。有的与鼠标有关,有的与键盘有关,如鼠标 单击、键盘某个键按下。有的事件还和网页相关,如 网页下载完毕,页面切换等。一个事件也可以触发许 多动作,你可以定义它们执行的顺序。对于同一个对 象,不同版本的浏览器支持的事件种类和多少也是不 一样的。