项目十 运用网页行为（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

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