DW第八讲 行为
注意
行为的应用
与时间线动画的结合 控制时间线动画的播放和停止.(动作列表中) 对象是帧 添加: 在与帧格相对应的动画轨道上单击,打开行为面板, 添加动作. 注意: 触发事件是:当播放指针播放到此帧时.(不可更改) 对象是动画对象
第八讲总结
行为的知识(作用、设置、组成、应用） 要求：根据网页需要正确添加行为。
Dreamweaver课件
第八讲
ቤተ መጻሕፍቲ ባይዱ
行为
主要内容(197)
认识行为 行为的组成 行为的设置
行为的应用
行为（P197）
认识行为
通过行为（在网页中进行的一系列动作），可实现与浏览者 的交互，而这些交互只靠HTML代码是无法做到的。
行为的组成（事件+动作） 事件(Event)：由浏览器所定义，针对各种页面元素。（如鼠 标单击、指定键按下等） 动作(Action)：一段已经编好的Javascript代码，用来完成某种 特殊任务（如播放动画、显示提示信息等），由事件触发。
行为
行为三要素 对象(事件作用的网页元素) 事件 动作
如: “鼠标单击按钮,弹出提示信息”这个行为中,“鼠标单击”是 事件,“弹出提示信息”是动作,“按钮”是对象.
注意: 三要素构成完整的行为,缺一不可.
事件(P199)
动作(P200)
行为的设置
步骤
1. 2. 3.
选中待触发的对象,打开行为面板(Shift+F3) 单击”+”按钮,添加动作 在行为面板上单击” “按钮选择触发事件 可以为一个触发对象添加多个动作,添加后可通过行为 面板上的” / “调整顺序.(上面的先执行) 文本作为触发对象时应为其添加虚链接. Onload事件的设置: 触发对象是网页的全部元素.选择 对象可按下Ctrl+A或单击标签选择器上的<body>标签.
合集下载
《dw教学》第八讲----行为
编辑ppt
11
Swap Image和 Swap Image Restore：Swap Image，可以制作轮替图；Swap Image Restore 用于将在Swap Image动作中设置的后一张图片， 恢复为设置的前一张图片。
有关Timeline的动作
Validate Form：检验指定文本框中的内容，以确 认用户输入了正确的数据类型，即验证表单。
Preload Images：可以在浏览器缓存中载入不会 立即出现在页面上的图像，而不使下载时间过长
Set Nav Bar Image：可以将图像转换成导航条图 像或改变在导航条中的图像显示，也可用来更新 、编辑导航栏图像。
Set Text：
Show-Hide Layer：可以显示、隐藏或恢复一个 或多个层默认的可见性
Layer：选择要操作的层
Movement（移动）：选择层被拖动时的移动方式
Constrained（受限制）
Unconstrained（不受限制）
Drop Target（拖动目标）区域：可设置层被移动到的位置
Get Current Position（获取当前位置）
Snap if With in（在……范围内则靠齐）
Jump Menu Go，可以给插入的跳转菜单加上一 个Go按钮。
Open Browser Window：调用此命令，可以让用 户在触发该行为时打开一个新的浏览器窗口，在 新窗口中可以载入指定URL地址上的网页。
Play Sound：可以为网页添加音乐
编辑ppt
10
Popup Message：用以制作弹出对话框。
加快一个运动的层的运动速度，应当如何操作？ 时间线动画在浏览器中是如何被播放的？哪些行
第8章 使用行为创建特效网页
8.7.1设置状态栏文本
【设置状态栏文本】动作在浏览器窗口底部左侧 的状态栏中显示消息。可以使用此动作在状态栏 中说明链接的目标而不是显示与之关联的URL。
8.7.2设置容器中的文本
使用【设置容器中的文本】 动作可以将指定的内容替 换网页上现有AP元素中的 内容和格式设置。
8.7.3 设置框架文本
第8章 使用行为创建特效网页
教学内容：行为可以说是DreamweaverCS6中最 有特色的功能，它可以让用户不用编写一行 JavaScript代码即可实现多种动态页面效果。
• •
教学重点 了解行为概述 掌握Dreamweaver CS6内置行为的使用
8.1 行为的概述
有许多优秀的网页，它们不只包含文本和 图像，还有许多其他交互式的效果，例如 当鼠标移动到某个图像或按钮上，特定位 置便会显示出相关信息，又或者一个网页 打开的同时等。
8.3.1 利用JavaScript实现打印功能
下面制作调用JavaScript打 印当前页面，制作时先定 义一个打印当前页函数 printPage()，然后在<body> 中添加代码 OnLoad="printPage()"，当 打开网页时调用打印当前 页函数printPage()。利用 JavaScript函数实现打印功 能。
8.6.2 交换图像
交换图像就是当鼠标指针经过图像时，原图像会 变成另外一幅图像。一个交换图像其实是由两幅 图像组成的：原始图像（当页面显示时候的图像） 和交换图像（当鼠标指针经过原始图像时显示的 图像）。
8.7 设置文本
【设置文本】行为中包含了4项针对不同类型的动 作，分别为【设置状态栏文本】、【设置文本域 文字】、【设置框架文本】和 【设置容器中文 本】。
网页设计与制作(Dreamweaver)《行为：事件+动作》
事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或 标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有 关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和 数量是不一样的，通常高版本的浏览器支持更多的事件。
行为：事件+动作
认识行为
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自 己编写。
行为：事件+动作
行为面板与菜单
行为：事件+动作
行为的基本操作
对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框， 然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件” 按钮，即可将其删除。
行为：事件+动作
行为类型
弹出消息
方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整 个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框，在“消息”域中输入 要显示的信息，如“欢迎光临”等。单击“确定” 按钮，关闭设置对话框。
行为：事件+动作
认识行为
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自 己编写。
行为：事件+动作
行为面板与菜单
行为：事件+动作
行为的基本操作
对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框， 然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件” 按钮，即可将其删除。
行为：事件+动作
行为类型
弹出消息
方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整 个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框，在“消息”域中输入 要显示的信息，如“欢迎光临”等。单击“确定” 按钮，关闭设置对话框。
在网页中使用行为
六、拖动层
1．打开一个网页，插入一个层，命名为layer1，在层插入图像。 2．选择窗口下方的<body>标签。 3．在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“拖动层”。 4．打开“拖动层”对话框， 如图所示。
5．在“基本”选项中，选择要拖动的层，其他使用默认设置。 6．单击“确定”按钮，退出“拖动层”对话框。 7．在行为面板设置事件为“OnLoad”。 8．保存并在浏览器中测试行为。
$ [知识目标]
1. 了解Dreamweaver8中的行为； 2. 掌握Dreamweaver8内置行为的添加方法； 3. 掌握行为的设置流程，及应用方法。
8 [能力目标]
1. 掌握行为面板的使用； 2. 熟练内置行为的添加与应用操作。
第一节 认识行为 第二节 使用Dreamwerver8内置的行为 本章小结
七、 检查浏览器
1．打开一个网页，选择窗口下方的<body>标签。 2．在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“检查浏 览器”。 3．打开“检查浏览器”对话框，如图所示。
4．对话框各项设置如下： “Netscape Navigator”：用于设置Netscape Navigator浏览器 的版本及打开的网页。 “Internet Explorer“：用于设置Internet Explorer浏览器的版本 及打开的网页。 “其他浏览器”：设置对于其他浏览器的选项设置，。 “URL”：用于设置要跳转的地址，单击“浏览”按钮可以选择跳 转的文件。 “替代URL”：用于设置替代的URL，也可以单击“浏览”按钮选 择文件。 5．设置完成后，单击“确定”退出对话框。 6．在行为面板设置事件为“OnLoad”。 7．保存并在浏览器中测试行为。
网页设计与制作初识chapter8)
onDblClick：当用户双击了指定的页面元素时 触发，适用于IE 6、IE 5.5、IE 5、IE 4。 onError：当浏览器载入页面或图像发生错误 时触发，适用于NS 6、NS 4、NS 3。 onFinish：当用户选择框元素中的内容完成一 个循环时触发，适用于IE 6、IE 5.5、IE 5。 onHelp：当用户选择浏览器“帮助”菜单命 令时触发，适用于IE 6、IE 5.5、IE 5、IE 4。 onKeyDown：当用户按下任意键时，在没有 释放之前触发，适用于IE 6、IE 5.5、IE 5、 IE 4。
步骤1 选择【命令】/【扩展管理】命 令，弹出“Macromedia扩展管理器”窗 口，如图12-7所示。 步骤2 在该窗口中选择【文件】/【安 装扩展】命令，弹出“选取要安装的扩 展”对话框。 步骤3 在该对话框中选择下载的行为， 单击“安装”按钮即可安装行为。
2.3主要行为的使用
Dreamweaver 8自带有大约二十多种行为， 为对象添加这些行为可以使网页产生各 种效果，如交换图像、弹出信息等 。 ① 交换图像 交换图像行为能够实现将一幅或多幅图像 显示为另外的图像的功能 。
步骤4 单击确定按钮，关闭该对话框即 可完成行为的添加，这时在“行为”面 板中将出现“弹出信息”的动作。 步骤5 将默认的onClick事件改为 onLoad事件 。
为<body>标签添加一个“弹出信 息”行为，将消息文本设置为“欢 迎您再次光临”，并选择onUnload 事件。
③ 打开浏览器窗口 使用“打开浏览器窗口”行为可打开一个 新的浏览器窗口并显示指定的文档，现 在很多网页中的弹出式广告都可以利用 该行为制作。 步骤1 新建一个空白网页，单击编辑窗 口右下角的<body>标签。
Dreamweaver行为事件
Dreamweaver教程：行为事件行为是实现网页上交互的一种捷径，Dreamweaver MX 2004 行为将javascript 代码放置在文档中，以允许访问者与Web 页进行交互，从而以多种方式更改页面动作或执行某些任务。
行为是事件和由该事件触发的动作的组合。
下面我们来学习行为的用法。
现在，举个例子加以说明。
看下图，光标移到图片上面。
在它的右侧即显示一段其它内容（动画）。
请您用鼠标测试，然后，我们来分析一下这个过程。
请您操作鼠标在花上移入移出这是两个行为：行为一：移入+显示；行为二：移出+隐藏。
事件是：鼠标移入和移出。
动作是：显示和隐藏。
具体操作如下：1、在页面中插入一张图片，本例为菊花图片。
2、在页面中插入一个层，贴入几个动画小人。
如下图：在层面板中，将该层设置成为隐藏。
打开页面的时候不显示。
层面板状态，如下图：3、单击图片，打开行为面板（「窗口」菜单＞行为）。
在行为面板按“+”号，在弹出菜单中选中显示-隐藏层，如下图：系统弹出显示－隐藏层对话框。
单击该层，然后单击“隐藏”按钮。
确定。
打开“行为”面板，如下图：4、我们可以在面板中看到事件和行为。
需进一步对事件进行设置。
单击“onLoad”，在下拉菜单中选择“<A>onMouseOut”，如下图：4、上述方法是鼠标移出事件行为的设置，重复以上方法再对鼠标移上事件行为进行设置，把显示－隐藏层设为（显示），如下图：行为事件设置，如下图：设置后的“行为”面板最终结果，如下图：5、保存页面，预览网页。
可以看到光标移动到菊花图片上就出现右侧的内容。
下面给出一些常见事件的一些解释onClick 单击onDbclick 双击onKeypress按键onMouseDown鼠标按下onMouseOut鼠标移出onMouseOver鼠标移上onMouseUp鼠标抬起。
行为是一个很有用的交互手段。
由于行为的门类繁多，也较复杂。
DW中行为
《网页开发工具》第八讲 行为
１１ 、转到ＵＲＬ：可以在当前窗口或指定框架内 打开一个新的页面。 １２ 、控制ＦＬＡＳＨ或ＳＨＯＣＫＷＡＶＥ：可 以控制ＦＬＡＳＨ的播放＼停止等。 １３ 、显示——隐藏层：改变一个或多个层的可见 性，利用这个动作可以制作处许多特殊效果。运用这 个动作时，首先要制作隐藏的层，再对层的可见性进 行设置。
8.1.2 常见动作
《网页开发工具》第八讲 行为
1、 播放声音：选择动作后在对话框播放声音处输入 声音文件的路径和文件名。
2、打开浏览器窗口：打开一个新的浏览器窗口，在 其中显示所指定的网页文档。
《网页开发工具》第八讲 行为
3、弹出信息：显示一个指定的提示信息框。选择 onmousemove事件和弹出信息动作，在对话框中输入 要显示的信息即可。 4、改变属性：在属性面板中给对象取好名字，打开 改变属性对话框；在对话框中先选择对象类型，再 选择对象的属性，再在新的值对话框中输入新的值。
《网页开发工具》第八讲 行为
实例三、制作带有提示效果的页面 1、建立站点和文件夹。 2、插入层1，在其中插入要显示的图象。 3、插入层2，在其中输入要显示的说明性文字。 4、将层2设为隐藏。 5、选中层1，添加两个“显示-隐藏层”行为，分别 为onmouseclick\显示，onmouseout\隐藏。
《网页开发工具》第八讲 行为
实例二、图片放大
1、建立站点和文件夹。 2、在文档中插入一个图象，将该图象缩小。 3、在小图象上方插入一个层，在层中再次插入该图 象但不缩小。
4、打开层面板，将层隐藏。 5、选中小图象，打开行为面板，添加两个“显示-隐 藏层”行为，分别将事件和动作选为onmousemove\ 显示、onmouseout\隐藏。 6、预览观看效果。
Dreamweaver CC 2018网页设计与制作-使用表单和行为
在网页文档插入表单后,在表单"属"面板将显示与表单有关地属,通过表单"属"面板,可以对 插入地表单设置ID,Class,Action,Method等属,如右图所示。
二,有关知识
（三）插入表单元素并设置属
一．文本输入类元 素
文本输入类元素主要包括常用地与文本有关地表单元素,如文本,搜索,文本区域,数字,范围,密 码,Url,Tel,电子邮件,日期时间,日期时间（当地）,月,周,日期,时间,颜色等。表单元素地插入方法 基本相同。下图所示为插入地文本元素。
二,有关知识
（三）插入表单元素并设置属 三．插入选择类元素
网页有时候需要行选择操作,如选择别,车型,城市等,此时需要用到选择类元素。选择类元素主 要是在多个项目选择其地一个选项,在页面一般以矩形区域地形式显示。
选择元素"属"面板
单选按钮元素"属" 面板
二,有关知识
（三）插入表单元素并设置属 三．插入选择类元素
（三）插入表单元素并设置属
一．文本输入类元 素
日期（Data）元素主要用于选择日期;而时间（Time）元素主要用于选择时间,日期,时间元 素地"属"面板与月元素地"属"面板基本相同。日期时间（Dat e T i m e）元素主要用于选择日期 与时间（带时区）;而日期时间（DateTime-Local）（当地）元素主要用于选择日期与时间（无 时区）。这两个元素地"属"面板相同。下图为插入日期时间元素地方法。
（二）常用行为地使用 一．弹出窗口信息
弹出窗口信息行为地作用是弹出一个窗口并显示一些信息。创建弹出窗口信息行为地方法 如下。
设置弹出信息
选择触发
二,有关知识
（三）插入表单元素并设置属
一．文本输入类元 素
文本输入类元素主要包括常用地与文本有关地表单元素,如文本,搜索,文本区域,数字,范围,密 码,Url,Tel,电子邮件,日期时间,日期时间（当地）,月,周,日期,时间,颜色等。表单元素地插入方法 基本相同。下图所示为插入地文本元素。
二,有关知识
（三）插入表单元素并设置属 三．插入选择类元素
网页有时候需要行选择操作,如选择别,车型,城市等,此时需要用到选择类元素。选择类元素主 要是在多个项目选择其地一个选项,在页面一般以矩形区域地形式显示。
选择元素"属"面板
单选按钮元素"属" 面板
二,有关知识
（三）插入表单元素并设置属 三．插入选择类元素
（三）插入表单元素并设置属
一．文本输入类元 素
日期（Data）元素主要用于选择日期;而时间（Time）元素主要用于选择时间,日期,时间元 素地"属"面板与月元素地"属"面板基本相同。日期时间（Dat e T i m e）元素主要用于选择日期 与时间（带时区）;而日期时间（DateTime-Local）（当地）元素主要用于选择日期与时间（无 时区）。这两个元素地"属"面板相同。下图为插入日期时间元素地方法。
（二）常用行为地使用 一．弹出窗口信息
弹出窗口信息行为地作用是弹出一个窗口并显示一些信息。创建弹出窗口信息行为地方法 如下。
设置弹出信息
选择触发
行为
插入行为
2．编辑行为
如果对于中文版Dreamweaver 8为动作设定的默 认事件不满意，可以在事件项中单击鼠标左键， 事件处于可编辑状态，然后输入事件的名称（必 须是在中文版Dreamweaver 8中定义的）或者单 击默认事件旁边的下拉按钮，从下拉列表中选择 其他的事件。 修改选定动作的属性，可以在【行为】面板右栏 中直接双击相应行为的动作，即可打开相关的动 作属性设置对话框，在该对话框中可以重新设置 选定行为的动作属性。
1．对象（Object）
对象是产生行为的主体，很多网页元素都可以 成为对象，如图片、文字、多媒体文件等，甚 至整个页面也可成为对象。
2．事件（Event）
事件是触发动态效果的原因，它可以被附加到各 种页面元素上，也可以被附加到HTML标记中。 一个事件总是针对页面元素或标记而言的，例如： 将鼠标移到图片上（onMouseOver）、把鼠标放 在图片之外（onMouseOut）、单击鼠标 （onClick），是与鼠标有关的三个最常见的事件。 不同的浏览器支持的事件种类和多少是不一样的， 通常高版本的浏览器支持更多的事件。
添加行为时，系统自动 为我们选择了事件 onMouseOver（鼠标 经过），如果想采用其 他的事件，可以单击行 为面板上的【事件菜单】 按钮。 打开事件菜单，如图所 示，重新选择一个触发 行为的事件。
事件菜单
onMouseOver的事件改为onDblclick方法
① 选择行为面板事件列中的onMouseOver。 ② 再单击【事件菜单】按钮，打开事件菜单。 ③ 选择onDblclick（双击鼠标），行为面板上 Events列中的事件立即改变。
dreamweaver 课件 第8课
二、动作补间动画
运用动作补间动画，可以制作出元件 的大小、位置、颜色、透明度变化和旋转 等种种效果。 在一个关键帧中放置一个元件，然后 在另一个关键帧中改变这个元件的大小、 颜色、位置、透明度等，Flash根据二者 之间的帧的值创建的动画被称为动作补间 动画。
创建动作补间动画的方法：
（1）新建或转化一个元件，并回到工作区。 （2）选中动画终止帧，击右键—“插入关 键帧”。 （3）分别选中起始帧和终止帧，设置 动画的起始和终止状态。 （4）选中起始关键帧，击右键——“创建 补间动画”。 或“属性”面板中“补间”框中的“动作” 项。
注意： ①若对象不是沿直线运动，可增加多个关 键帧。 ②对象必须是元件，且起始和终止 位置都为同一元件。 构成动作补间动画的元素是元件， 包括影片剪辑、图形元件、按钮、文字、 位图、组合等，但不能是形状，只有把 形状组合或者转换成元件后才可以制作 动作补间动画。
三、引导层动画
将一个或多个层链接到一个运动引导 层，使一个或多个对象沿同一条路径运动 的动画形式被称为引导路径动画。这种动 画可以使一个或多个元件完成曲线或不规 则的运动。 在引导层中绘制的路径，在动画播放 的时候是看不见的，所以它可以起到引导 被引导层中的元件沿指定路径运动，而路 径又不显示的效果。
(2) “引导层”中的对象在被引导运动时 还可作更细致的设置，比如运动方向，在“ 属性”面板上选中“路径调整”复选框，对象 基线就会调整到运动路径。而如果选中“对 齐”复选框，元件的注册点就会与运动路径 对齐。
一个最基本的“引导路径动画”由两个图 层组成：上面一层是“引导层”，下面一层是 “被引导层”。
注意： (1) “引导动画”最基本特别注意，在动画开始和结束的关键帧上， 被引导对象的起始、终点的两个注册点一定 要对准“引导线”的两个端点，否则无法引导
运用动作补间动画，可以制作出元件 的大小、位置、颜色、透明度变化和旋转 等种种效果。 在一个关键帧中放置一个元件，然后 在另一个关键帧中改变这个元件的大小、 颜色、位置、透明度等，Flash根据二者 之间的帧的值创建的动画被称为动作补间 动画。
创建动作补间动画的方法：
（1）新建或转化一个元件，并回到工作区。 （2）选中动画终止帧，击右键—“插入关 键帧”。 （3）分别选中起始帧和终止帧，设置 动画的起始和终止状态。 （4）选中起始关键帧，击右键——“创建 补间动画”。 或“属性”面板中“补间”框中的“动作” 项。
注意： ①若对象不是沿直线运动，可增加多个关 键帧。 ②对象必须是元件，且起始和终止 位置都为同一元件。 构成动作补间动画的元素是元件， 包括影片剪辑、图形元件、按钮、文字、 位图、组合等，但不能是形状，只有把 形状组合或者转换成元件后才可以制作 动作补间动画。
三、引导层动画
将一个或多个层链接到一个运动引导 层，使一个或多个对象沿同一条路径运动 的动画形式被称为引导路径动画。这种动 画可以使一个或多个元件完成曲线或不规 则的运动。 在引导层中绘制的路径，在动画播放 的时候是看不见的，所以它可以起到引导 被引导层中的元件沿指定路径运动，而路 径又不显示的效果。
(2) “引导层”中的对象在被引导运动时 还可作更细致的设置，比如运动方向，在“ 属性”面板上选中“路径调整”复选框，对象 基线就会调整到运动路径。而如果选中“对 齐”复选框，元件的注册点就会与运动路径 对齐。
一个最基本的“引导路径动画”由两个图 层组成：上面一层是“引导层”，下面一层是 “被引导层”。
注意： (1) “引导动画”最基本特别注意，在动画开始和结束的关键帧上， 被引导对象的起始、终点的两个注册点一定 要对准“引导线”的两个端点，否则无法引导