第15章-使用行为丰富网页效果.pptVIP

行为是Dreamweaver中强大的功能，它提高了网站的可交互性。行为是事件与动作的结合，一般的行为都要由事件来激活动作。 15.1.1　什么是行为 Dreamweaver行为是一种运行在浏览器中的JavaScript代码，设计者可以将其放置在网页文档中，以允许浏览者与网页本身进行交互，从而以多种方式更改页面或引起某次任务的执行。行为由事件和该事件触发的动作组成。在“行为”面板中，用户可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。 事件实际上是浏览器生成的消息，指示该页面中在浏览时执行某种操作。例如，当浏览者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个onMouseOver事件（鼠标经过），然后浏览器查看是否存在为链接在该事件时浏览器应该调用的JavaScript代码。而每个页面元素所能发生的事件不尽相同，例如页面文档本身能发生的onLoad（页面被打开时的事件）和onUnload（页面被关闭时的事件）。 15.1.2　“行为”面板 在Dreamweaver CC中，进行附加行为和编辑行为的操作都将使用到“行为”面板。执行“窗口行为”命令，打开“行为”面板，如果需要进行附加行为的操作，可以单击“行为”面板上的“添加行为”按钮 ，在弹出菜单中选择需要添加的行为。 16.2.2　表单域 表单域是表单中必不可少的元素之一，所有的表单元素只有在表单域中才会生效，因此，制作表单页面的第1步就是插入表单域。 在Dreamweaver CC中，可以将行为附加给整个文档、链接、图像、表单或其他任何HTML对象，并由浏览器决定哪些对象可以接受行为，哪些对象不能接受行为。为对象附加动作时，可以一次为每个事件关联多个动作，动作的执行按照在“行为”面板列表中的顺序执行。 15.2.1　交换图像 “交换图像”行为的效果与鼠标经过图像的效果一样的，该行为通过更改img标签中的src属性将一个图像与另一个图像进行交换。 15.2.2　弹出信息 该动作的发生会在某处事件发生时，弹出一个对话框，给用户一些信息，这个对话框只有一个按钮，即“确定”按钮。 课堂案例——实现图像翻转效果 课堂案例：实现图像翻转效果 最终文件：光盘\最终文件\第15章\15-2-1.html 视频：光盘\视频\第15章\15-2-1.swf 课堂案例——添加弹出欢迎信息 课堂案例：添加弹出欢迎信息 最终文件：光盘\最终文件\第15章\15-2-2.html 视频：光盘\视频\第15章\15-2-2.swf 15.2.3　恢复交换图像 在前面介绍了“交换图像”行为，当在页面中添加“交换图像”行为时，会自动的添加“恢复交换图像”的行为，这两个行为效果通常都是一起出现的。 “恢复交换图像”行为是将最后一组交换的图像恢复为它们以前的源文件。该行为只有在网页中应用“交换图像”行为后才可以使用。 15.2.4　打开浏览器窗口 使用“打开浏览器窗口”行为可以在打开一个页面时，同时在一个新的窗口中打开指定的URL。可以指定新窗口的属性（包括其大小）、特性（它是否可以调整大小、是否具有菜单条等）和名称。例如可以使用此行为在访问者单击缩略图时，在一个单独的窗口中打一个较大的图像；使用此行为，可以使新窗口与该图像恰好一样大。 15.2.5　拖动AP元素 在某些电子商务网站上，经常会看到把商品用鼠标直接拖动到购物车中的情形。在某些在线游戏网站上，还会玩一些拼图游戏等。这些使用鼠标拖动对象的行为就称为“拖动AP元素”。 使用这个行为的时候，可以规定浏览者用鼠标拖动对象的方向，浏览者要将对象拖到的那个目标。 ① AP元素 在该选项的下拉列表中可以选择允许用户拖动的Div。 ② 移动 在该选项的下拉列表中包括“限制”或“不限制”两个选项。“不限制”选项适用于拼板游戏和其他拖放游戏；“限制”选项则适用于滑块控制和可移动的布景。 ③ 放下目标 在该选项后的“上”和“下”文本框中可以设置一个绝对位置，当用户将Div拖动到该位置时，自动放下Div。 课堂案例——实现弹出网页窗口 课堂案例：实现弹出网页窗口 最终文件：光盘\最终文件\第15章\15-2-4.html 视频：光盘\视频\第15章\15-2-4.swf 课堂案例——实现网页中可拖动元素 课堂案例：实现网页中可拖动元素 最终文件：光盘\最终文件\第15章\15-2-5.html 视频：光盘\视频\第15章\15-2-5.swf 15.2.6　改变属性 使用“改变属性”行为可以改变对象的属性值。例如当某个鼠标事件发生之后，对于这个动作的影响，动态地改变表格背景、Div的背景等属性，以求获得相对动态的页面。 15.2.7　显示-隐藏元素 “显示-隐藏元素”行为可以根据鼠标事件显示或隐藏页面中指定的对象，很好地改善了与用户