中职《网页设计与制作（项目式教材）》（机工版·2018）同步课件：项目十 运用网页行为(共33张PPT)

(课件网) 项目十 运用网页行为 > 任务一 设置浏览器行为 了解行为 “行为”能为网页添加许多功能，比如弹出消息框、显示-隐藏一个对象等，可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分———对象、事件和动作。 了解行为 对象(Object) 对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。 事件(Event) 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。 动作(Action) 行为通过动作来完成动态效果 。 将事件和动作组合起来就构成了行为 应用行为 行为面板 创建行为 一般创建行为有三个步骤：选择对象、添加动作、调整事件。 。 弹出信息 你的开网页时经常遇到这种情况：打开网站页面时，同时弹出写有通知事项或特殊信息的小窗口，这就是弹出信息。 有关说明 不同的浏览器，同一个浏览的不同版本对事件支持不尽一致，通常来说高版本的浏览器比低版本的支持的事件要多，而IE比Netscape支持的事件要多。 打开浏览器窗口 使用“打开浏览器窗口”动作可在网页载入后打开一个新窗口。用户可以指定新窗口的属性。例如窗口大小、属性以及名称。如果你指定的新窗口无属性，则新窗口将按启动它的窗口的大小及属性打开。 状态栏文本 设置状态栏文本动作后能在浏览器窗口底部左侧的状态栏中显示信息。我们经常在网站中看到这个效果，制作简单比较实用。 改变上面活动中的事件为“onclick”，保存网页，预览效果。 【练习1】 打开index.html，在行为面板中找到“打开浏览器窗口”， 修改“窗口宽度”和“窗口高度”分别为250和200，再看看效果。再把“窗口宽度”和“窗口高度”分别修改回原来的参数。再在 “打开浏览器窗口”中，勾选导航工具栏、位置工具栏、状态栏及菜单栏等试看下效果。 【练习2】 任务二 AP元素行为 AP 元素 Dreamweaver中，AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档正文中的内容。 AP Div概述 AP Div是HTML中的重要组成元素之一，网页可以通过AP Div实现对页面的规划和布局。 div元素是一个块元素，在其中间可以包含文本、段落、表格、图像等内容，它可以灵活地定位页面的任何位置，可以通过嵌套、属性设置、JaveScript实现多种动态效果。 AP Div插入菜单 显示-隐藏元素功能 显示-隐藏元素行为的功能是控制某页面元素的显示、隐藏或恢复的默认可见性。此行为主要用于在用户与页面进行交互时显示信息，例如，当用户将鼠标指针移到一个图像上时，可以显示此图像的说明性信息，当指针离开后，此说明性信息将变成隐藏不可见状态。 显示-隐藏元素的实现 显示-隐藏元素动作在Dreamweaver cs6中可通过改变一个或多个AP元素的可见性状态来实现，显示-隐藏元素动作显示、隐藏或、恢复一个或多个AP元素的默认可见性。AP元素通常是绝对定位的Div标签，可以将任何HTML元素作为AP元素进行分类，方法是分配一个绝对位置。 拖动AP元素 “拖动AP元素”行为的功能是在页面中按照指定的方式拖动某层元素移动。因为用户可以拖动层之前必须先调用“拖动AP元素”动作，所以应该确保触发该动作的时间是发生在试图拖动层之前。为此实现拖动AP元素最佳的方法是使用onload事件将“AP元素”附加到body对象上。 拖动AP元素的应用 “拖动AP元素”动作可以使用户进行拖动AP元素的操作，使用这个动作可以创建动脑筋 ... ...