《网页制作之行为》PPT课件

第10章行为,第10章行为,10.1行为的使用10.2行为的具体应用,10.1行为的使用,10.1.1打开行为面板10.1.2行为的编辑,10.1.1打开行为面板,在使用行为前要先了解行为的具体操作场所“行为”面板，在Dreamweaver8右侧的浮动面板组中打开“标签”面板，在其中单击“行为”选项卡打开“行为”面板。,1.主要动作“交换图像”行为可将一个图像替换为另一个图像，这是通过更改“scr”属性来实现的，此动作一般用来创建翻转按钮以及同时替换多个图片。“弹出信息”行为将用于显示一个指定的JavaScript提示信息框。该提示信息是提供给浏览者信息的，浏览者不能做出选择，也不能控制信息框的外观，只有一个“确定”按钮，其外观取决于浏览器属性。“恢复交换图像”行为用于将替换的图像恢复为原始的图像文件。“打开浏览器窗口”行为，在其中显示所指定的内容，网页设计者可指定该新窗口尺寸、是否可调节大小、是否有菜单等属性。“拖动层”行为使网页中层的位置不再是固定不变的，而是可以随着浏览者的鼠标运动而运动，层在拖动过程中还可调用JavaScript代码或函数，从而实现一些特殊效果。“播放声音”行为用来播放声音和音乐文件，页面背景音乐和鼠标单击时的声音都可以用此行为设置。,“显示-隐藏层”行为用于改变一个或多个层的可见性。此行为可以用于交互时显示信息。如当鼠标光标滑过一个图像时，则显示该图像的相关信息，当鼠标光标离开这个图像时，提示信息则消失。“弹出式菜单”行为用于在网页中实现类似于Windows系统中菜单效果，在设计网页时可以把一个类别的页面都放在菜单中，这样就能从主页直接访问到需要的子页，以方便浏览者。“检查表单”行为用于检查指定文本域的内容，以确保用户输入了正确的数据类型。使用“onBlur”事件添加到文本域，可以在用户填写表单时对域进行检查，若使用“onSubmit”事件将其添加到表单，在用户提交表单时可同时对多个文本域进行检查。使用该行为可以防止表单提交到服务器后指定的文本域包含无效的数据。“设置层文本”行为可以用指定的内容替换现有层的内容和格式设置，但将保留层的属性，包括颜色。该内容可以包括任何有效的HTML源代码。,2.事件事件就是在浏览器工作过程中的某种状态的变化。onClick：单击网页上特定元素后所引发的事件。onDblClick：双击特定元素后所引发的事件。onError：载入一个页面或者图像过程中，浏览器有错误产生时，引发这个事件。onLoad：当一幅图像或页面完成载入时引发的事件。onMouseDown：当用户按下鼠标键的时候引发这个事件。onMouseMove：移动鼠标就引发这个事件。onMouseOut：当光标离开特定元素时引发这个事件。onMouseOver：当光标移动到特定元素上面时引发这个事件。onMouseUp：按下的鼠标键被释放时引发的事件。onUnload：离开当前页面时引发的事件。,10.1.2行为的编辑,1.添加行为方法是：选择要添加行为的对象，然后在“行为”面板中添加一种行为，最后确定该行为的事件即可。2.修改行为首先选择修改行为的对象，然后按“Shift+F4”键打开“行为”面板，在其“动作”列表中双击要修改的行为动作或将其选择并按“Enter”键，也可单击鼠标右键，在弹出的快捷菜单中选择“编辑行为”命令，在打开的对话框中进行修改，然后单击“确定”按钮。3.删除行为在“行为”面板中选择要删除的行为，然后，按行为面板上的“”按钮,或在行为上单击鼠标右键，在弹出的快捷菜单中选择“删除行为”命令，还可以直接按“Delete”键即可。,10.2行为的具体应用,10.2.1层设置10.2.2添加背景音乐10.2.3弹出消息10.2.4制作自动弹出的网页窗口,10.2.1层设置,“显示-隐藏层”行为用于改变一个或多个层的可见性。此行为常用于交互时显示信息。如当鼠标光标滑过一个图像时，则显示该图像的相关信息，当鼠标光标离开这个图像时，提示信息则消失。我们用“显示-隐藏层”行为，制作一个实例，当我们单击图中小图时，就会在窗口中间显示一个大图，完成效果如图所示。,10.2.2添加背景音乐,音乐是我们日常生活中不可缺少的部分，同样，现在很多网站或个人主页中添加了背景音乐，当我们浏览网页时，听着优美动听的音乐，是不是很惬意呢。Dreamweaver8提供了非常方便的插入背景音乐的方法。本例中，学习如何在网页中添加背景音乐。,10.2.3弹出消息,“弹出信息”行为将用于显示一个指定的JavaScript提示信息框。该提示信息是提供给浏览者信息的，浏览者不能做出选择，也不能控制信息框的外观，只有一个“确定”按钮，其外观取决于浏览器属性。,10.2.4制作自动弹出的网页窗口,我们在浏览新浪、网易等网站时，打开主页的同时有时会自动弹出一些小窗口，例如有动画广告也有通知等内容，样式丰富、色艳艳丽。其实这种窗口就是一个小的网页。利用Drea