十.行为
十.行为 第8章 行为设置 1.掌握行为面板的使用方法 2.认识常用事件及其意义 3.掌握DW内置动作的使用方法 4.Spry框架的使用
十.行为 网上各种纷繁多样的动态交互式网页效果非常吸引, 可作为刚刚入门的网页制作者,对网页编程还不是很 熟悉,而这些交互效果很多都需要具有Javascript知 识。在DW中,内置了强大的行为面板。使用DW行为, 普通的网页设计者也可以做出复杂的动态网页。 行为是指在网页中进行的一系列动作,通过这些动 作,可以实现用户同网页的交互,也可以通过动作使某个任务被执行。
十.行为 行为由事件Event和动作Action两个基本元素组成。通 过事件的响应进而执行对应的动作。 ① 通常,动作是一段Javascript代码,利用这些代码可以完成相应的任务。例如打开浏览器、播放声音等。 ②事件则是由浏览器所定义,它可以被附加到各种页面元素上,也可以被附加到HTML标记中,并且一个事件总是针对页面元素或标记而言的。例如onMouseOver,onMouseOut等,它们在大多数浏览器中和链接相关联,而onLoad则是和图像以及文档正文相关联的事件。
十.行为 1.认识行为面板 “窗口”->“行为”把行为面板调出来 2.为对象附加行为 在DW中,可以将行为附加给整个文档、链接、图像、 表单元素或其他任何HTML元素,并由浏览器决定哪些 元素可以接受行为,哪些元素不能接受行为。在为对 象附加动作时,可以一次为每个事件关联多个动作, 并按照行为面板的动作列表中的顺序执行动作。
十.行为 通常在DW中创建一个行为的步骤: 1)选择一个特定的元素,如文本链接或一个图片等 等。行为将被附加到此特定的元素上。 2)点击行为面板上的添加按钮(+),打开可选动作 菜单列表。 3)在菜单选择“显示事件”,在里面选择希望兼容的浏 览器,如可以选择IE5.0、IE5.5等。
十.行为 4)选择好“显示事件”后,在刚才的动作列表菜单中选 择希望执行的动作。当选择动作后,将弹出一个参 数对话框,设置好参数。(这里简单任选一动作) 注意:不同版本的浏览器,支持的事件也是不同的。 在刚才下拉列表的“显示事件”中选择希望兼容的浏览 器,这样到时显示出来的事件也会不一样。 5)这时在行为面板中将显示添加的事件和对应的动作 6) 如果该事件不是希望的事件,可单击事件列表中的 箭头,选择其它事件。
十.行为 注意问题: 留意面板上面的“标签”的变化,特别注意文本的变化 为文本附加行为: 在DW中,不能为纯文本附加行为。但是可以为链接文本附加行为。因此,要给纯文本附加行为,可以先给文本添加一个空链接(#)。
十.行为 3.行为实例(书本基础是实例操作) 弹出提示信息 打开浏览器窗口 显示隐藏元素 拖到AP元素 设置文本 设置效果(增大/收缩、挤压、晃动、高亮颜色等)
十.行为 播放声音 插入音乐有多种方法,如:使用插件、控件、代码都可以实现 方法1: (1)“插入栏-媒体-插件”插入一声音文件 (2)选中声音文件,在属性面板选择“参数” (3)添加如书本P171的参数和值 -hidden true/false -loop n/true/false (n次数,-1=true) -autoplay true/false -controller true/false
十.行为 方法2:代码法 <embed src=“文件名.mid" autostart="false" loop="true"width="300"height="45" ></embed> src=“****.mid” 指定音乐文件的路径与文件名。最好用相对路径(目前就是相对路径)。 autostart=“****”设定当音乐文件载入后是否自动播放。有两个逻辑选项,true和 false。 Loop=“****” 表示音乐文件是否循环播放,也可以指定循环播放的次数。比如 loop=“3”表示重复播放3次,loop=“-1”表示无限循环,loop="true"也表示无限循环。 width=“***”height=“**”表示显示控制面板的宽和高,当两个参数均设为0时,表示隐藏控制面板。
十.行为 方法3:行为的方法为具体对象加载声音 (1)背景音乐:选定body标签 播放声音行为+onload的配合 (2)对其它对象添加声音的话就是要选定对象, 再添加播放声音行为
十.行为 方法4:插入背景音乐还可以通过下面方法 <body></body>标签之间插入 <bgsound src="music.mid" loop="-1"> src=“music.mid”是指定背景音乐文件的位置及文件名。 Loop=“-1”代表背景音乐循环 播放,你也可以指定播放次数。 这种插入背景音乐的方法简单,但是只适用于IE浏览器。也不 易控制,没法关闭。
十.行为 如果只是要提供东西下载呢? 供别人下载的文件设置方法: 除了ZIP、RAR、EXE类型文件以外,凡是不被浏览器识别的格式文件作为链接目标时, 浏览器默认的操作都是下载。所以,您只要把相关文件的链接路径写准确,告诉浏览者即可。
十.行为 Spry框架:Adobe公司出的一组Ajax(Javascript)效果框架 注意事项 1.书本有时乱用Spry这一概念,讲到Spry的时候其 实没用到Spry功能。 2.Spry的样式修改(对应的样式表CSS文件)及动作 修改(对应的JS文件):两个对应的文件
堂上练习 练习书本例子 P176-P180 8.4.5 进阶实例--利用行为使网页内容更加精彩
十.行为 1.Spry选项卡式面板 2.Spry菜单栏 即“弹出菜单”,CS3版本不推荐使用旧方法(指行为面板里面的弹出菜单) 第14章 制作弹出式导航菜单 3.Spry折叠式 第15章 制作滑动折叠 4.Spry可折叠面板 自己练习 看跟折叠式有什么区别
十.行为 Spry选项卡式面板 修改默认JS事件,默认是点击(onTabClick) 其它几个Spry找到相应的事件进行修改 Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab) { this.showPanel(tab); }; 其它几个Spry找到相应的事件进行修改