网页设计基础-13使用行为
合集下载
网页制作项目12使用行为完善网页功能--ppt.
网页设计与制作—— Dreamweaver 8
主 讲 ：
项目十二
网页设计与制作
使用行为完善网页功能
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一
任务一 任务二 实 小 训 结
设置页眉部分 设置主体部分
任务二
任务一
网页设计与制作
设置页眉部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务二
网页设计与制作
设置主体部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
本任务主要是设置网页主体部分的行为，包括 打开浏览器窗口、交换图像、弹出消息以及 Flash的播放控制等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
打开浏览器窗口
打开浏览器窗口操作动画
Dreamweaver 8
本任务主要介绍设置状态栏文本和弹出式 菜单的方法，同时认识行为的概念，并了 解【行为】面板的基本操作。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
设置状态栏文本操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 了解【行为】面板
在主菜单中选择【窗口】／【行为】命令可打开【行为】面板。
网页设计与制作
操作二
交换图像
交换图像操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
交换图像行为可以将一个图像替换为另一个图像，这 是通过改变图像的“src”属性实现的。可以使用交换图像 行为来创建翻转的按钮或其他图像效果。在行为菜单中选 择【交换图像】命令可打开【交换图像】对话框。
主 讲 ：
项目十二
网页设计与制作
使用行为完善网页功能
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一
任务一 任务二 实 小 训 结
设置页眉部分 设置主体部分
任务二
任务一
网页设计与制作
设置页眉部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务二
网页设计与制作
设置主体部分
Dreamweaver 8
项目十二：
使用行为完善网页功 能
本任务主要是设置网页主体部分的行为，包括 打开浏览器窗口、交换图像、弹出消息以及 Flash的播放控制等。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
打开浏览器窗口
打开浏览器窗口操作动画
Dreamweaver 8
本任务主要介绍设置状态栏文本和弹出式 菜单的方法，同时认识行为的概念，并了 解【行为】面板的基本操作。
任务一 任务二 实 小 训 结
网页设计与制作
操作一
设置状态栏文本
设置状态栏文本操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
1. 了解【行为】面板
在主菜单中选择【窗口】／【行为】命令可打开【行为】面板。
网页设计与制作
操作二
交换图像
交换图像操作动画
Dreamweaver 8
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
交换图像行为可以将一个图像替换为另一个图像，这 是通过改变图像的“src”属性实现的。可以使用交换图像 行为来创建翻转的按钮或其他图像效果。在行为菜单中选 择【交换图像】命令可打开【交换图像】对话框。
使用行为 网页设计
9.2.8 检查表单(续)
演示
�
9.1.2 行为的操作(续)
如果要添加或删除行为,在行为面板中单击"添 加行为" 或"删除行为" 按钮. 如果要修改动作参数,应双击右侧行为名称,在 弹出对话框中修改对应参数. 如果要修改事件的执行顺序,应单击"增加事件 值" 或"降低事件值" 按钮.
9.2.1 打开浏览器窗口
打开浏览器窗口动作就是当浏览者触发事件后, 可以在新窗口中打开一个网页.用户可以自定义 打开新窗口的属性,例如窗口大小,是否需要状 态栏,工具栏等. 演示
第9章 使用行为
本章要点
9.1 什么行为 9.2 使用 Dreamweaver 内置行为
9.1.1 行为的概念
行为将 JavaScript 代码放置到文档中,这样访问 者就可以通过多种方式更改网页,或者启动某些 任务.行为是某个事件和由该事件触发的动作的 组合. 事件是指浏览器事先为网页对象定义的某种状态. 例如,当鼠标移动到某个链接上时,就会产生 "onMouseOver"事件;当用户加载网页时,就 会发生"onLoad"事件;当访问者单击某个对象 时就会发生"onClick"事件;当访问者的鼠标离 开某个对象时会发生"onMouseOut"事件.
9.1.2 行为的操作(续)
添加行为的步骤: (1)选择一个要添加行为的网页对象. (2)选择"窗口">"行为"命令,打开行为面板. (3)单击"添加行为"按钮 ,在弹出菜单中选择一 个动作. (4)在弹出对话框中设置动作参数,单击"确定" 按钮. (5)返回"行为"面板,右侧列表显示了为对象添 加的行为,左侧事件列表框中显示了当前浏览器 默认的动作触发事件. (6)如果要重新指定事件,单击左侧默认触发事件, 在弹出的事件列表中选择一个事件即可.
在网页中使用行为
ABCD
数据交互
通过 AJAX，可以实现用户与服务器之间的实时 数据交互，提高用户体验。
动态内容
使用 AJAX，可以创建动态的网页内容，例如实 时搜索、聊天窗口等。
04 行为优化与注意事项
性能优化
减少HTTP请求
通过合并CSS、JavaScript文件，使用 CSS Sprite等方式减少HTTP请求，提
在网页中使用行为
目录
• 行为定义与分类 • 行为在网页设计中的作用 • 常见行为实现方式 • 行为优化与注意事项 • 行为在网页设计中的发展趋势
01 行为定义与分类
什么是行为
行为
指在特定环境或条件下，由某种刺激 所引发的个体反应或活动。在网页设 计中，行为通常指的是用户与网页元 素之间的交互行为，如点击、滑动、 长按等。
手势识别
通过手势识别技术，用户可以通过手势操作网页，实现更直观、自 然的交互方式。
虚拟现实与增强现实
VR和AR技术为网页提供了沉浸式的交互体验，使用户能够更加深 入地与网页内容互动。
更丰富的动态效果
动画效果
网页中的动态效果越来越丰富，包括交互动 画、转场动画等，提升了用户体验。
实时渲染
利用WebGL、Canvas等技术，网页可以实现更加 逼真的动态效果，提高视觉效果。
通过行为，可以创建各种交互式组件， 如轮播图、下拉菜单、表单验证等， 提高用户与网页的互动程度。
提升网页性能
1 2
优化资源加载
通过行为，可以智能地加载和卸载资源，减少不 必要的网络传输和计算，提高网页的加载速度和 响应速度。
缓存机制
通过行为，可以实现有效的缓存机制，减少重复 的网络请求和计算，提高网页的性能和稳定性。
网页设计基础教程与上机指导第版使用行为-PPT文档资料
11.1.3 事件
事件用于指定选定行为动作在何种情况下的发生。例如想应用单击图像时跳转到制定网站的行为，则需 要把事件指定为单击事件onClick。下面根据使用用途分类介绍Dreamweaver中提供的事件种类。
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – onAbort：在浏览器中停止加载网页文档的操作时发生的事件 onMOVE：移动窗口或框架时发生的事件 onLoad：选定的对象出现在浏览器上时发生的事件 onResize：访问者改变窗口或框架的大小时发生的事件 onUnLoad：访问者退出网页文档时发生的事件 onClick：用鼠标单击选定要素时发生的事件 onBlur：鼠标移动到窗口或框架外侧时等非激活状态时发生的事件 onDragDrop：拖动选定要素后放开时发生的事件 onDragStart：拖动选定要素时发生的事件 onFocus：鼠标到窗口或框架中处于激活状态时发生的事件 on MouseDown：单击鼠标左键时发生的事件 onMouseMove：鼠标经过选定要素上面时发生的事件 onMouseOut：鼠标离开选定要素上面时发生的事件 onMouseOver：鼠标在选定要素上面时发生的事件 onMouseUp：放开按住的鼠标左键时发生的事件 onScroll：访问者在浏览器中移动了滚动条时发生的事件 onKeyDown：键盘上某个按键被按下时触发事件 onKeyPress：键盘上的某个按键被按下又释放时触发事件 onKeyUp：放开按下的键盘中的指定键时发生的事件 onAfterUpdate：表单文档的内容被更新时发生的事件 onBeforeUpdate：表单文档的项目发生变化时发生的事件 onChange：访问者更改表单文档的初始设定值时发生的事件 onReset：把表单文档重新设定为初始值时发生的事件 onSubmit：访问者传送表单文档时发生的事件 onSelect：访问者选择文本区域中的内容时发生的事件 onError：加载网页文档的过程中发生错误时发生的事件 onFilterChange：应用到选定要素上的滤镜被更改时发生的事件 onFinish：结束移动文字 (Marquee)时发生的事件 onStart：开始移动文字(Marquee)时发生的事件
网页设计与制作(Dreamweaver)《行为：事件+动作》
事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或 标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有 关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和 数量是不一样的，通常高版本的浏览器支持更多的事件。
行为：事件+动作
认识行为
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自 己编写。
行为：事件+动作
行为面板与菜单
行为：事件+动作
行为的基本操作
对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框， 然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件” 按钮，即可将其删除。
行为：事件+动作
行为类型
弹出消息
方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整 个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框，在“消息”域中输入 要显示的信息，如“欢迎光临”等。单击“确定” 按钮，关闭设置对话框。
行为：事件+动作
认识行为
动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、 播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver 中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自 己编写。
行为：事件+动作
行为面板与菜单
行为：事件+动作
行为的基本操作
对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的 HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框， 然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件” 按钮，即可将其删除。
行为：事件+动作
行为类型
弹出消息
方法：应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整 个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜单 中选择“弹出消息”。
选择一弹出信息设置对话框，在“消息”域中输入 要显示的信息，如“欢迎光临”等。单击“确定” 按钮，关闭设置对话框。
网页设计与制作基础教程 第3版 第13章-制作ASP动态网页
“删除记录”行为 “登录用户”行为 “限制对页面的访问”行为 “注销用户”行为 “检查新用户名”行为
::::::::::
1.1.2 网页的布局结构
结构化布局是最基本的网页布局之一，其特点是将网页的各种结构模块 进行平面排列，以构成整个网页。在设计网页布局的过程中，应遵循对称平 衡、异常平衡、对比、凝视和空白等原则。一般情况下，网页的常见布局有 以下几种结构。
::::::::::
1.3.2 规划站点
用户在规划网站时，应明确网站的主题，并搜集所需要的相关信息。规 划站点指的是规划站点的结构，完成站点的规划后，在创建站点时用户既可 以创建一个网站，也可以创建一个本地网页文件的存储地址。
Dreamweaver CC工作界面 Dreamweaver CC基本操作
::::::::::
1.2.1 Dreamweaver CC工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到。
::::::::::
1.3.1 站点简介
互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中， 它通过存储和解析网页的内容，向各种客户端浏览器提供信息浏览服务。通 过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内 容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器。
Access数据库的基本操作 Access数据库的基础知识
::::::::::
13.1.1 Access数据库的基本操作
Access数据库是目前比较流行的数据库管理系统，它是一个运行在 Windows系统环境下的桌面关系型数据库，也是Office的组件之一。下面将 围绕几个与创建Access数据库相关的问题进行讲述，以便用户对该数据库的 应用有个概括的了解。
网页设计-任务十三 网页特效—行为
项目五 美化网页
任务十三 网页特效—行为-知识拓展
•
交换图像和恢复交换图像
“交换图像”行为通过更改<img>标签的src属性， 将一张图像替代当前的图像。新建一个文档并在页面中 插入一张图片。选定这张图片，在属性检查器中为该图 像输入一个名称。如果未为图像命名，“交换图像”仍 将起作用。单击行为面板中的按钮，从弹出菜单中选择 “交换图像”命令，弹出交换图像对话框，如图所示。
项目五 美化网页
任务十三 网页特效—行为-知识拓展
• 打开浏览器窗口
打开浏览器窗口行为可在一个新的窗口打开页面，并可以设置新 窗口的属性（包括其大小）、特性（是否允许调整窗口大小、是否显 示菜单栏等）和名称等参数。 首先准备一幅弹出页面：新建或打开一幅页面，设置其页面属性。 打开需要添加弹出小窗口的页面，在标签选择器中选择“body”标签， 在行为面板中单击按钮添加行为，从弹出菜单中选择“打开浏览器窗 口”命令，弹出打开浏览器窗口对话框。如图所示。
Dreamweaver CS3 项目教程
项目五 美化网页
任务十三 网页特效—行为
• 技能目标
在网页设计中能够灵活利用CSS样式对页面元素变换不 同的视觉效果。 能够利用行为创设与众不同的网页效果。
•
知识目标
理解行为、事件的含义。 熟练掌握行为的添加与删除操作。 掌握触发事件的更换方法。 理解JavaScript脚本的运用。 熟练掌握Dreamweaver CS3 新增加的Spry炫目效果。
项目五 美化网页
任务十三 网页特效—行为-知识拓展
•
弹出信息行为
“弹开或单击 页面都会弹出该消息框（“onLoad” 或 “onClick”事件），只有单击了弹出消息框中的 “确定”按钮后才能正常浏览网页。特别当此 行为针对主页实施时，每次返回主页都会弹出 该窗口会让人厌烦 。
在网页中使用行为
网页特效--行为
[知识目标]
什么是行为？
8 [操作目标]
怎么用行为？
一、 认识行为
行为=对象+事件+动作
什么是对象? 什么是事件? 什么是动作?
思考！！
1．对象：是产生行为的主体。网页中的很多元素都可以成为对象， 如网页中的一个图片、一段文字等元素，也可以整个网页文档。
2．事件：是触发动作的原因，是由用户或浏览器触发的事件。事 件经常是针对页面元素的，如鼠标经过、鼠标单击、键盘某个键按下等。 3．动作：通常是一段代码，用于完成某些特殊的任务。如打开一 个窗口时自动播放声音、弹出信息窗口等。
谢谢！！
3、主要掌握Dreamweaver8内置行为的添加方法、行为 的设置流程及应用方法。
思考？？
除行为设置网页特效操作，
有没其他也可设置网页特效？
作业
1、解释常用事件onload、onclick、onDblclick、 onmousemove、onmouseout。
2、下次上机课制作一个个人网页首页（Index..html） 使用5个以上行为，网页要美观，大方，简洁。
3、设置浏览器版本
方法：在行为面板中→单击“添加行为”按钮→选择“显示事件”
→IE6.0
三、 修改行为
要修改和编辑己设置行为的两种方法：
1．在行为面板中双击要修改的行为。
2．选择要修改的行→右击 →选择“编辑行为”命令。
四、常见事件
onload、onclick、onDblclick、onmousemove、onmouseout
修改事件方法： 在行为面板中→单击要修改的事件右边向下箭头。
实 例 演 示
实例：播放声音
1．打开一个网页，选择行为的对象如某一图像，也可单击 窗口下方的<body>标签，为整个页面增加行为。 2．在行为面板上，单击“+”按钮，从下拉菜单中选择“播 放声音”。 3．打开“播放声音”对话框。 4．在文本框中输入声音文件的路径和名称，也可单击“浏 览”按钮，选择要播放的声音文件。 5．单击“确定”按钮。在网页中出现占位符。 6．在行为面板设置事件，如设为“OnLoad”。 7．保存并在浏览器中预览网页，观看效果。
[知识目标]
什么是行为？
8 [操作目标]
怎么用行为？
一、 认识行为
行为=对象+事件+动作
什么是对象? 什么是事件? 什么是动作?
思考！！
1．对象：是产生行为的主体。网页中的很多元素都可以成为对象， 如网页中的一个图片、一段文字等元素，也可以整个网页文档。
2．事件：是触发动作的原因，是由用户或浏览器触发的事件。事 件经常是针对页面元素的，如鼠标经过、鼠标单击、键盘某个键按下等。 3．动作：通常是一段代码，用于完成某些特殊的任务。如打开一 个窗口时自动播放声音、弹出信息窗口等。
谢谢！！
3、主要掌握Dreamweaver8内置行为的添加方法、行为 的设置流程及应用方法。
思考？？
除行为设置网页特效操作，
有没其他也可设置网页特效？
作业
1、解释常用事件onload、onclick、onDblclick、 onmousemove、onmouseout。
2、下次上机课制作一个个人网页首页（Index..html） 使用5个以上行为，网页要美观，大方，简洁。
3、设置浏览器版本
方法：在行为面板中→单击“添加行为”按钮→选择“显示事件”
→IE6.0
三、 修改行为
要修改和编辑己设置行为的两种方法：
1．在行为面板中双击要修改的行为。
2．选择要修改的行→右击 →选择“编辑行为”命令。
四、常见事件
onload、onclick、onDblclick、onmousemove、onmouseout
修改事件方法： 在行为面板中→单击要修改的事件右边向下箭头。
实 例 演 示
实例：播放声音
1．打开一个网页，选择行为的对象如某一图像，也可单击 窗口下方的<body>标签，为整个页面增加行为。 2．在行为面板上，单击“+”按钮，从下拉菜单中选择“播 放声音”。 3．打开“播放声音”对话框。 4．在文本框中输入声音文件的路径和名称，也可单击“浏 览”按钮，选择要播放的声音文件。 5．单击“确定”按钮。在网页中出现占位符。 6．在行为面板设置事件，如设为“OnLoad”。 7．保存并在浏览器中预览网页，观看效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
28
改变属性
元素ID：下列列表中列出所有所选类型的命名对象，
从中选择要改变的对象的名称。
属性，从中选择一个属性。 新的值：输入一个新值。
单击确定。
29
检查表单
利用【检查表单】动作可以为表单中各元素设置
有效性规则，并检查指定文本域的内容以确保用
户输入正确的数据类型
使用【检查表单】动作的操作步骤如下：
18
浏览器状态栏
•
注意：不一定设置的状态
栏文本能被所有的浏览器 支持，有些浏览器必须通
过用户设置才能支持这个
功能。 • 此类浏览器不支持的情况
也可能发生在后续介绍的
其他行为上。
19
设置文字：文本域文字
在制作表单时，希望能够在文本字段上显示一些 提示，当用户要输入时这些提示会自动清除，就 可以使用“设置文本域文字”
– – – –
•
•
1、易用性 2、动态交互性 3、跨平台性
4、安全性
JavaScript是安全性高的语言，它只能 通过浏览器实现对网络的访问和动态交 互，可以有效地阻止通过访问本地硬盘 或者将数据存入到服务器
8
JavaScript语言
JavaScript程序的示例：
<script type="text/javascript">
使用【弹出信息】动作的操作步骤如下：
①
选择<body>标签并打开行为面板。并从“添加动作” 菜单中选择【弹出信息】。打开“弹出信息”对话框。
②
③
在【消息】域中输入在信息框中将要显示的信息文字。
选择【行为】面板中事件onLoad事件
15
打开浏览器窗口
2
打开浏览器窗口
应用：
在打开网站首页的同时，弹出一个小型的浏览 器窗口，用于广告或通知等。 使用的【打开浏览器窗口】动作在一个新的窗 口中打开URL。
方式1：在“文本域”的“属性”面板中 “初始值”中设置要显示的提示文本，对“设置文本域文 字”的“新建文本”留白，动作选为“onFocus”
方式2：在“设置文本域文字”的“新建文本”中输入提 示文本
方式3：对“文本域”使用“Spry验证文本域”功能中的 “提示”属性
20
交换图像
【交换图像】动作通过更改<img>标签的src属性 将一个图像和另一个图像进行交换。 使用【交换图像】行为的操作步骤如下：
【添加行为】 在出现的 动作菜单中, 选择一个动作， 并指定该动作的相关参数， 即可添加行为。
10
【行为】面板 介绍
【显示事件】 在此菜单中选择确定哪些事件将 显示在“事件”弹出式菜单中 【删除事件】 单击“删除事件”按钮，可以从 行为列表中删除所选的事件和动作。 【向上移动】和【向下移动】 将特定事件的所 选动作在行为列表中向上或向下移动。给定事件 的动作是以选定的顺序执行的。
若要只允许水平移动，则在“左”和“右”文本框中输入正值，在 “上”和“下”文本框中输入 0
24
拖动AP元素：设置
放下目标：希望访问者将 AP 元素拖动到的点
当 AP 元素的左坐标和上坐标与在“左”和“上”框中输入的值 匹配时，便认为 AP 元素已经到达拖放目标。
这些值是与浏览器窗口左上角的相对值。 单击“取得目前位置”可使用 AP 元素的当前位置自动填充这些 文本框。
③
④
从“打开在”列表中选择文档的位置。
在【行为】面板中选择onClick事件。
26
显示/隐藏元素
【显示-隐藏元素】动作显示、隐藏或恢复一个 或多个对象的默认可见性。 使用【显示-隐藏对象】动作操作步骤如下：
①
打开【行为】面板，单击“+”按钮并从【动作】下 拉列表中选择【显示-隐藏元素】，选择要显示或隐 藏的元素； 单击【确定】按钮。检查默认事件是否是所需的事件。
跨平台、兼容性高（JavaScript） 使用简单、修改容易（行为面板）
无限扩展的可能（Adobe Exchange网站: https:///）
3
行为的概述
行为
动态交互响应用户的操作、改变当前网页效果
或执行特定任务的一种方法。
行为是由事件和动作两部分组成，是动作和触
① 首先在文档中插入表单和文本域。
② 选择“提交按钮”。
③ 从【添加行为】下拉列表中选择【检查表单】动作。
30
检查表单
域：从列表中选择一个文本域
值：如果某个域的内容不能为空，则选中“必需的”
可接受：接受输入的形式。 ③
单击【确定】按钮，在【行为】面板中选择onClick事件。
31
Dreamweaver的扩展程序
第13章 使用行为
马宝君 北京邮电大学 2014-05-06
本章重点：
如何在网页中添加行为
如何为“事件”选择合适的“动作”。
2
行为的特征
行为的出现是让Dreamweaver流行的一大原因，它加入网 页中常用的特效或功能程序代码，简化成对话框的设置， 大大加速了网页的开发。 Dreamweaver将许多常用程序整合到“行为”面板中，让 网页设计者能够很方便地加入这些程序效果，而且它本身 的设计是开放性的，除了Adobe官网外，全世界有许多爱 好者为Dreamweaver开发了许多很好的扩展程序，让它的 功能更加强大。行为的使用具有以下三种特征
11
向页面中添加基本行为
•
添加行为：通过“行为”面板上的“添加行为” 按钮，可以将行为附加到整个文档，也可以附加 到链接、图像、表单元素或多种其他HTML元素 中的任何一种。 事件的选择：在添加行为后，当单击行为列表框 中所选事件名称旁边的箭头按钮时，会出现一个 下拉菜单，其中包含可以触发该动作的所有事件。 根据所选对象的不同，显示的事件也有所不同。 例：“弹出信息”动作加入
同时在行为面板中选择“事件类别”(onClick等)
②
③
27
改变属性
利用“改变属性”行为，可以动态改变对象的属 性值。
如可以改变层的背景颜色，或者改变图像的大小等。
ห้องสมุดไป่ตู้
这些改变实际上是改变对象对应标记的相应的属性值
是否允许改变属性值，取决于浏览器的类型。一般都
支持改变属性特性。
操作步骤：
打开行为面板，选择改变属性命令。 元素类型：从下列列表中选择要修改属性的对象类型
Dreamweaver中内置的网页编辑功能虽然已经非常 方便、实用，但仍然无法百分之百满足各式各样 的用户需求。 然而由于Dreamweaver程序在设计上本身属于开放 架构，所以网络上有很多爱好者帮忙开发相关的 扩展程序，以加强源程序所缺乏的功能，让更多 人能够在不需要编写程序的情况下，轻松完成许 多相对复杂的功能。
【拖动AP元素】动作允许访问者拖动AP层。使 用此动作创建拼图游戏、滑块控件和其他可移动 的界面元素。 使用【拖动AP元素】动作的操作步骤如下：
① ② ③
在空白页面上创建几个AP元素，分别插入图像。 单击<body>标签。注意这里不要选择层。 选取并打开【行为】面板，单击按钮并从【动作】下 拉列表中选择【拖动AP元素】，打开【拖动AP元素】 对话框，该对话框包括“基本”与“高级”两个标签， 默认状态为“基本”。
按钮时，执行“检查表单”行为，来检查用户输入的资 料是否正确。
13
事件的分类
事件类型 说明
onLoad onUnLoad onError onMouseOver
互动类 事件 onMouseDown onMouseOut onMouseUp onClick onFocus onDubClick onSubmit 表单类 事件 onReset onChange onBlur
12
•
•
事件的分类
1. 自动类
行为设置在<body>标签中，例如一进入网页就自动出现
“欢迎光临”的信息对话框。
2. 互动类
用户通过鼠标或键盘的事件产生操作，可将行为设置在
图像<img>、文本、超链接<a>等对象上，如当鼠标滑过 主菜单时，显示该功能的弹出式菜单。
3. 表单类
使用在表单组件与表单<form>标签上，如单击“提交”
16
打开浏览器窗口
使用【打开浏览器窗口】行为的操作步骤如下：
①
②
选择<body>标签并打开【行为】面板。
单击按钮并从“添加动作”菜单中选择【打开浏览器 窗口】命令，输入要显示的URL，并设置窗口一些重 要的属性（如宽度、高度等）
③
选择【行为】面板中事件onLoad事件
④
用IE浏览器预览。
17
设置文本：状态栏文本
除此之外，第三方厂商提供了更多的行为库，下 载并在Dreamweaver中安装行为库中的文件，可以 获得更多的可操作行为。
如果已经掌握了JaveScript语言的使用，也可以自 己编辑新动作，添加到Dreamweaver中。
7
JavaScript语言
•
JavaScript是一门脚本语言，也是一门面向对象的 编程语言。 采用的是小程序段的编程方式，与HTML标记结 合在一起，使用户对网页的操作更加的方便。 JavaScript的特点：
将“事件”和“动作”组合起来就构成了“行为”。
在将行为附加到页面元素之后，只要对该元素触发了 所指定的事件，浏览器就会调用与该事件关联的动作 （JavaScript）。