《Dreamweaver CC网页设计与制作教程》课件——第13章 行为.pptVIP

第13章行为

13.1案例1：创建自动关闭网页★【案例目的】利用行为实现创建自动关闭网页，效果如图13-1所示。★【核心知识】打开行为面板，进行行为设置。13.1.1什么是行为★行为（Behaviors）是为响应某一具体事件而采取的一个或多个动作，它由对象、事件和动作构成。★行为是事件和动作的组合。13.1.2DreamweaverCC的内置行为★DWCC内置了很多行为:交换图像弹出信息恢复交换信息\打开浏览器窗口拖动AP元素改变属性效果显示-隐藏元素13.1.3事件

★事件是触发动作的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。★DWCC中的常用事件:onBlur、onClick、onDblClick、onFocus、onKeyDown、onKeyPress、onKeyUp、onLoad、onMouseDown、onMouseMove、onMouseOut、onMouseOver、onMouseUp。13.1.4行为面板★在“窗口”菜单中选择“行为”选项，或者命令【Shift+F4】组合键，可以打开行为面板。★单击“＋”按钮，可以打开一个菜单，该菜单常被称为动作菜单，可以进行添加行为。单击“—”按钮，可以从当前选中元素的现有行为列表中删除选中的行为和动作。13.2案例2：制作网页加载时弹出公告页和关闭时弹出信息★【案例目的】利用行为制作网页加载时弹出一个公告页，如图13-5所示。当关闭该网页时弹出一个告别信息如图13-6所示。★【核心知识】绑定行为，选择事件，应用“打开浏览器窗口”和“弹出信息”行为。13.2.1绑定行为★通常在打开网站页面时，同时会弹出写有通知事项或特殊信息的小窗口，这时可以将行为绑定到整个文档（body部分），也可以绑定到链接、图像、表单等对象或任何其他HTML元素，如果浏览器支持该行为，它会显示在菜单栏中。13.2.2修改行为★行为绑定之后，还可以改变触发动作的事件、添加或删除动作以及改变动作的参数等。★删除行为：选中并单击“→”按钮或按Delete键可以删除行为。★改变参数：双击动作或选中背景变蓝色后按【Enter】键，在出现的对话框中改变其参数。如果背景变灰色，按【Enter】键不弹出对话框。13.3案例3:交换图像和恢复交换图像并在状态栏显示信息★【案例目的】利用行为的“交换图像”动作通过改变img标签的src属性将一幅“翠竹”图像变换为另外一幅图像“雕塑”，并能在浏览器窗口底部左侧的状态栏中显示消息“图像已经转换成功！”；当鼠标离开此图像时，恢复显示原始图像，如图13-14所示。★【核心知识】在行为面板中设置事件。13.4上机实训★项目一：改变属性□内容要求：使用“改变属性”行为更改对象某个属性的值，比如Div的背景颜色，表单的动作属性等。★项目二：检查插件□内容要求：使用“检查插件”，检查用户浏览器中是否安装有指定插件，分别为安装插件和未安装插件的用户显示不同的网页。如果能播放所设置的插件，则进行播放。如果浏览器不能播放，则被转到另一个页面。★项目三：拖动AP元素□内容要求：使用“拖动AP元素”行为允许访问者拖动绝对定位的AP元素。此行为可创建拼板游戏、滑块控件和其它可移动的界面元素，从而实现某些特殊的页面效果。★项目四：跳转到URL□内容要求：利用“转到URL”行为，在当前窗口或指定框架中打开这个新的页面。这样当网址改变后，以前的客户还能继续访问新网址。★项目五：跳转菜单□内容要求：制作一个下拉菜单，当选择下拉菜单中的“菜单项目”时，可以跳转到相应的链接上。★项目六：预先载入图像□内容要求：使用“预先载入图像”动作，可以使浏览器下载尚未在网页中显示，但是可能显示的图像，比如用行为或JavaScript变换的图像，并将其存储在本地缓存中，以便脱机浏览。★项目七：显示/隐藏元素□内容要求：当用户单击文本实例时，显示其信息，当鼠标离开此文本实例时，再将此信息层隐藏。这样使得用户和页面产生交互时，可以显示一些非常有用的信息及动态效果。★项目八：检查表单□内容要求：利用“检查表单”可以为文本域设置有效性规则，比如有些文本框中只能填写数字；而有些可以填写字母、数字等任意字符。用来检查文本域中的内容是否有效，以确保用户输入了正确的数据。当对表单中姓名和电子邮件地址进行验证时，如果各项都填写正确，单击“提交”按钮，则表单进行提交。否则拒绝提交表单。★项目九