Dreamweaver4解读.ppt

第十章 Dreamweaver的高级应用 第一节 行为与行为面板 一、行为的工作原理 行为是由事件和由该事件触发的动作构成的。 1. 事件：是用户的操作或者网页的状态。在Dreamweaver中，事件是浏览器生成的信息，指示访问者执行了某种操作。 2. 动作：是对用户的操作产生响应的Javascript程序片断。Dreamweaver提供的动作是预先精心编写的。行为代码是客户端JavaScript代码，它运行于浏览器中，而不是服务器上。 3. 行为： 由事件和由该事件触发的动作构成的。将行为附加到页元素之后，只要对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript代码）。 在“行为”面板中，通过指定一个动作然后指定触发该动作的事件，可将行为添加到页面中。 第十章 Dreamweaver的高级应用 二、行为面板的应用 1. 行为面板 通过“行为”面板可以将行为附加到页面元素，或修改以前所附加行为的参数。选择“窗口/行为”菜单，显示行为面板。 “行为”面板具有以下选项： 动作(+)是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。删除(-)从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动（改变行为动作的执行顺序）。 第十章 Dreamweaver的高级应用 2．应用行为 给元素附加行为操作步骤如下： （1）在页上选择一个元素，例如一个图像或一个链接。若要将行为附加到整个页面，在文档窗口底部左侧的标签选择器中单击body标签。 （2）选择“窗口/行为”打开“行为”面板。 （3）在动作(+)的弹出式菜单中选择附加到当前所选元素的动作。 （4）在行为面板的事件菜单中选择可以触发该动作的事件。 第十章 Dreamweaver的高级应用 第二节 应用行为制作动态网页 一、与层有关的行为 在Dreamweaver中，可以设置拖动层、显示－隐藏层、改变层的背景色等与层有关的行为。由于低版本的浏览器器不支持层事件，因此在应用与层有关的行为前应将默认浏览器设为IE5.0以上。 1.改变层的背景色 在Dreamweaver中，“改变属性”行为可以动态的改变对象的某些属性，这些属性包括背景颜色，尺寸和背景图片等。在制作网页时，可以利用这种行为设置一些特殊的区域，当光标进入该区域时，将改变区域的背景颜色；光标离开后恢复为原来的背景色。 2.制作可拖动的层 “拖动层”动作允许访问者在浏览器中改变层的位置。使用此动作可以创建拼板游戏、滑块控件和其他可移动的页面元素。 第十章 Dreamweaver的高级应用 因为在访问者可以拖动层之前必须先调用“拖动层”动作，所以要确保触发该动作的事件发生在访问者试图拖动层之前。最佳的方法是（使用onLoad事件）将“拖动层”附加到body对象上，不过也可以使用onMouseOver事件将它附加到填满整个层的链接上。 3. 显示－隐藏层 Dreamweaver中的“显示－隐藏层”行为，具有显示、隐藏或恢复一个或多个层的默认可见性的功能。此动作用于在用户与网页进行交互时显示信息。例如，当用户将鼠标指针滑过一个人物图像时，可以显示一个层，给出有关该人物的介绍信息。利用“显示－隐藏层”行为还可以创建弹出式菜单。 “显示－隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失。 第十章 Dreamweaver的高级应用 第十章 Dreamweaver的高级应用 二、打开浏览器窗口 在Dreamweaver MX中，使用“打开浏览器窗口”动作，可在一个新的窗口中打开要显示的页面。其特点是可以设定新窗口的各种属性，如：大小、是否可以调整大小、是否具有菜单条和名称等。例如，使用此行为可使访问者单击缩略图时，在一个单独的窗口中打开一个较大的图像并使新窗口与该图像恰好一样大。 设置“打开浏览器窗口”属性的操作步骤如下： （1）选择一个事件对象（图像、超链接或body 等）并打开“行为”面板。 注意：给文本添加行为时，要注意将其设置为超级链接#，否则很多行为都无法添加。 （2）单击加号 (+) 按钮并从“动作”弹出式菜单中选择“打开浏览器窗口”，弹出设置对话框。 第十章 Dreamweaver的高级应用 （3）在对话框中设置如下各选项： 在“要显示的URL”域中输入要显示网页的 URL或通过“浏览”按钮选择一个要显示的网页文件。 窗口宽度：指定窗口的宽度（以像素为单位）。 窗口高度：指定窗口的高度（以像素为单位）。 属性：选择是否在新的浏览器窗口中包含：导航工具栏、地址工具栏、状态栏、菜单条、滚动条、调整大小手柄等内容。 窗口名称是新窗