网页设计与制作_第08章_使用行为和表单.ppt

第8章 使用行为和表单 8.1 学习任务：认识行为 8.2 案例1添加弹出提示信息的行为 8.3 案例2 制作网页加载时弹出公告页 8.4 案例3 使用行为设置图像特效——交换图像 8.5 案例4 通过行为设置文本 8.6 学习任务：表单和表单对象 8.7 案例5 制作“用户注册”页面 8.8 案例6 插入Spry表单元素 8.9 实训 8.1 学习任务：认识行为 8.1.1 行为的基本知识 8.1.2 行为面板与行为菜单 8.1.3行为的基本操作 8.1.1 行为的基本知识 行为事实上是由预先编写好的Javascript代码构成，它运行在客户端浏览器中。通过行为，网页制作不需要编写Javascript代码，就可以实现复杂的网页特效。 JavaScript代码是一种典型的网页脚本程序。网页中常见的脚本程序主要有两种，一种是微软推出的VBScript，另一种是Javascript，相对而言Javascript脚本程序应用更为广泛一些。行为就是在Javascript的基础上衍生出来的Dreamweaver功能。 行为是由事件和动作相结合而构成的，事件是触发动作的原因，而动作是事件的直接后果，两者缺一不可，它们组合起来就构成了一个行为。 事件可以被附加到各种页面元素上，也可以被附加到HTML标签中。一个事件总是针对页面元素或标签而言的。例如，将鼠标指针移到图片上、把鼠标指针放在图片之外和单击鼠标左键是与鼠标有关的3个最常见的事件(onMouseOver、onMouseOut、onClick)。不同浏览器支持的事件类型和数量是不一样的，通常高版本的浏览器支持更多的事件。 动作是指最终需完成的动态效果，如交换图像、弹出信息、打开浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。在Dreamweaver中使用内置行为时，系统会自动向页面中添加JavaScript代码，用户不必自己编写。 8.1.2 行为面板与行为菜单 在Dreamweaver中，对行为的添加和管理主要通过“行为”面板来完成。在菜单栏中选择“窗口→行为”命令或按〈Shift+F4〉组合键，可以展开“行为”面板，如图8-1所示。 在“行为”面板中，右侧显示动作，左侧显示行为对应的事件类型。面板中各选项作用如下： 显示设置事件：显示添加到当前文档的事件。 显示所有事件：显示所有事件。 添加行为：单击该按钮，从弹出菜单中选择需要添加的行为类别。 删除事件：从行为列表中删除选中的行为。 增加事件值：将当前选定的行为向前移动。 降低事件值：将当前选定的行为向后移动。 Dreamweaver内置了一些标准行为以满足用户需求，它们主要是针对Internet Explorer4.0或更高版本浏览器。在“行为”面板中，单击“添加行为”按钮，可以展开行为菜单，如图8-2所示，菜单项对应了Dreamweaver内置的各种行为。 各菜单项功能如下： 交换图像：当发生所设置的事件后，用其他图像替代当前图像。 弹出信息：当发生所设置的事件后，弹出一个消息框。 恢复交换图像：恢复设置“交换图像”行为又因为某种原因失去效果的图像。 打开浏览器窗口：打开一个新的浏览器窗口。 拖动AP元素：可以让浏览者拖动AP元素。 改变属性：可以改变相应对象的属性值。 效果：可将各种效果应用于页面上的相应元素。 时间轴：可以控制时间轴的动作。 显示-隐藏元素：可以显示、隐藏或恢复一个或多个页面元素的可见性。 检查插件：检查是否装有运行网页的插件。 检查表单：检测用户填写的表单内容是否符合预先设定的规范。 设置导航栏图像：制作图像导航条。 设置文本：可以在不同位置显示相应内容。 调用Javascript：当事件发生时，调用指定的Javascript函数。 跳转菜单：制作一次可建立若干个链接的跳转菜单。 跳转菜单开始：在跳转菜单中选定要移动的站点后，只有单击“开始”按钮才可移动到链接的站点上。 转到URL：选定事件发生后，可以跳转到指定站点或网页文档上。 预先载入图像：在下载图像之前预先载入一幅图像。 8.1.3 行为的基本操作 对行为的基本操作包括：添加行为、删除行为和编辑行为等。 1．添加行为 在编辑行为之前，先要为页面中的对象添加行为。可以将行为添加到整个文档、链接、图像、表单对象或者任何其他的HTML元素中。单击“行为”面板中的“添加行为”按钮，在弹出的行为列表中选中一种行为，将打开对应的设置对话框，然后进行详细的设置并确认。在“行为”面板中，单击添加的行为事件设置列，可为该行为选择一个合适的事件类型，如图3所示。 2．删除行为 选中文档窗口中的目标对象，“行为”面板中将罗列出该对象上被定义的所有行为，选中需要删除的行为，单击“删除事件”按钮，即可将其删除。 3．编辑行为 若要编