《清华大学 网页设计培训教程 Dreamweaver7章-》由会员分享，可在线阅读，更多相关《清华大学 网页设计培训教程 Dreamweaver7章-（66页珍藏版）》请在金锄头文库上搜索。
1、第7章 创建和使用行为,第7章 创建和使用行为,教学提示：通过学习这些内容，用户将掌握在制作网页中运用行为这个不可或缺的网页元素的方法。 教学目标：行为允许浏览者与Web页面交互并在很多方面改变页面。行为是事件和该事件所触发的动作的结合。本章将首先详细讲述如何利用Dreamweaver 8中的【行为】面板在页面中添加行为动作，并设置触发动作的事件，然后讲述如何编辑和更新行为，以及介绍在页面中如何使用Dreamweaver 8中内置的几种常用的行为。,第7章 创建和使用行为,7.1 创 建 行 为 7.2 使用内置行为 7.3 上 机 实 战,7.1 创 建 行 为,7.1.1 附加行为 7.1
2、.2 编辑行为 7.1.3 更新行为,7.1 创 建 行 为,行为就是在网页中进行的一系列动作。通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。 一般来说，一个行为应该由一个事件(event)和一个动作(action)组成。例如，当将鼠标移动到一幅图像上时，就产生了一个事件，如果这时图像变化，就产生了一个动作。 动作通常由一段JavaScript代码组成，利用这段代码可以完成相应的任务，如打开浏览器、播放声音或视频等。在Dreamweaver中，可以使用Dreamweaver内置的行为往页面中添加JavaScript代码，也可以对现有代码进行修改，使之更符合自己的需要。
3、 事件则通常由浏览器定义，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。通常一个事件总是针对页面元素或标记而言的。例如，在大多数浏览器中的超链接上都会发生on MouseOver、on MouseOut和on Click这3种事件。当鼠标移动到链接上，就发生链接的on MouseOver事件；而鼠标移动到链接之外，就发生链接的on MouseOut事件；而单击链接，就发生链接的on Click事件。,7.1 创 建 行 为,另一个常见的事件是on Load，它同图像或文档正文相关联。当载入文档时，就发生文档的on Load事件；而载入图像时，就发生图像的on Load事件。 将事
4、件和动作组合起来，就构成了行为。例如，将on Click事件同一段JavaScript代码相关联，在单击时就可以执行相应的JavaScript代码。 通常，我们将事件产生的这个过程称为触发。不是所有动作都需要用户的干涉才会发生。例如，我们可以指定某个动作每隔10秒运行一次，这实际上还是由事件触发的，只是这种事件不是通过用户本身的行为而产生的。 有时会有多个动作同一个事件相关联，换句话说，当事件发生时，会导致多个动作被执行。在Dreamweaver中，可以指定这些动作发生的顺序，从而实现需要的结果。,7.1.1 附加行为,用户可以对整个文档(也就是对body标记)附加行为，也可以对链接、图像、表
5、单元素或其他任何HTML元素附加行为。用户选择的目标浏览器决定了对于给定元素可以支持哪些事件。例如，Internet Explorer 6.0支持的事件范围就比Navigator 6.0或其他任何5.0版本浏览器都要大得多。 需要注意的是，不能为纯文本附加行为。因为标记p和span不在浏览器中产生任何事件，所以没有办法为这些标记触发动作，但用户可以为链接附加行为。要为文本附加行为，最简单的办法就是为文本添加一个空链接(不指向任何对象)，然后将行为附加到链接上。如果用户这样做，文本将以链接的形式出现。(要使文本看起来不像链接，可以修改链接颜色，删除下划线)。 可以为每个事件关联多个动作。动作的执
6、行会按照在【行为】面板的动作列中所示的顺序进行。可以单击【行为】面板上的箭头按钮，改变动作的执行顺序。 要往页面中附加行为，其具体操作如下。 (1)在文档窗口中，选中要附加行为的对象。 (2)如图7.1所示，选择【窗口】|【行为】命令，打开如图7.2所示的【行为】面板。这时，选定对象的HTML标记出现在【行为】面板的标题栏中。,7.1.1 附加行为,图7.1 利用菜单打开【行为】面板,图 7.2 【行为】面板,7.1.1 附加行为,(3)单击【行为】面板上的“+”按钮，打开如图7.3所示的动作菜单，然后选择需要附加的动作。不能选择的动作在菜单中是灰色的，之所以不能选择可能是因为所要求的对象在当
7、前文档中不存在。 一般来说，选择了某个菜单项之后，会出现一个对话框。选项不同，对话框也不同。在对话框中输入相应的设置，单击【确定】按钮，确定操作，即在对象上附加了一个行为。 (4)这时在行为列表中会显示添加事件已经对应的动作，如果该事件不是用户希望的事件，可以单击该事件右边的箭头，打开事件菜单，选择其他事件，如图7.4所示。 要为文本附加属性，可以在文档中选中需要添加行为的文本，然后在文本的【属性】面板上的【链接】文本框中输入“javascript:;”。 为文本添加了附加的属性以后，就可以对这个选定的文本附加行为了。 要改变链接文本的外观，其具体操作如下。 (1)在文档中选中需要添加行为的文
8、本。 (2)选择文档编辑窗口上方的【代码】命令，打开如图7.5所示的代码检查器。 (3)在链接的a href标记中，插入以下属性：style=“text-decoration:none;color:black”。该属性设置的作用是：不使用下划线，并将文本颜色设置为黑色。 (4)要改变页面或整个站点中附加链接的文本外观，可使用【CSS样式】面板或者为链接创建新样式。,7.1.1 附加行为,图7.3 动作菜单,图7.4 事件菜单,7.1.1 附加行为,图7.5 代码检查器,7.1.2 编辑行为,除了附加行为外，用户还可以在【行为】面板中添加新行为、删除现有行为和重设行为的触发事件，也可以修改现有行
9、为动作。 如果用户已经为一个对象附加了行为，那么该行为将出现在【行为】面板中，并按事件的字母顺序排列。如果同一事件有多个动作，那么动作将按执行顺序排列。 1. 修改行为动作 要修改现有行为，其具体操作如下。 (1)选中包含要修改行为的对象，然后双击【行为】面板中要修改的行为项，或选中行为项，并按Enter键，这时会打开一个对话框，提示用户对行为进行修改。行为不同，打开的对话框也不同。如图7.6所示为在【行为】面板中对链接文本“more”附加【打开浏览器窗口】行为动作打开的对话框。 (2)在对话框中重新设置行为动作参数，设置完成后单击【确定】按钮确定操作，行为动作就被修改了。,7.1.2 编辑行
10、为,图7.6 【打开浏览器窗口】对话框,7.1.2 编辑行为,2. 重设事件 要重新为动作指定触发事件，其具体操作如下。 (1)选中包含要重设事件的对象，并在【行为】面板中选中要重设事件的行为项。 (2)单击事件右边的箭头，打开事件菜单。在弹出的菜单中选择其他事件。如果所期望的事件没有出现，用户需要确认是否选取了正确的对象，或者在如图7.7所示的【显示事件】子菜单中改变目标浏览器。 3. 修改行为的执行顺序 要修改行为的执行顺序，其具体操作如下。 (1)选中包含要修改行为执行顺序的对象，并在【行为】面板中选中行为项。 (2)单击【行为】面板上的箭头按钮来改变顺序。 4. 删除行为 要删除行为，
11、其具体操作如下。 (1)选中包含要删除行为的对象，并在【行为】面板中选中行为项。 (2)单击行为面板上的“-”按钮，行为便被删除了。,7.1.2 编辑行为,图7.7 改变目标浏览器,7.1.3 更新行为,如果页面中包含有使用低于Dreamweaver 8版本的软件创建的行为，当使用Dreamweaver 8打开页面时，这些行为不会自动更新。当在一个页面中更新行为的一个实例时，此页面中该行为的其他所有实例都将得到更新。 要更新页面中的行为，可以选中附加有行为的对象，然后双击【行为】面板中要更新的行为项。或选中行为项后按Enter键，这时会打开一个行为对话框，用户可以不作任何修改单击OK按钮确定更
12、新行为。 行为不同，打开的对话框也不同。如图7.8所示为在【行为】面板中对一个对象附加【调用JavaScript】行为动作进行更新的对话框。这个行为原本是利用Dreamweaver 5.0制作的。,7.1.3 更新行为,图7.8 更新【调用JavaScript】行为动作,7.2 使用内置行为,7.2.1 调用JavaScript代码 7.2.2 改变网页对象的属性 7.2.3 检查浏览器 7.2.4 检查插件 7.2.5 跳转到指定的网页 7.2.6 打开浏览器窗口 7.2.7 设置状态条文本 7.2.8 弹出信息对话框,7.2 使用内置行为,Dreamweaver 8内置了很多行为，基本上可
13、以满足普通网页的创作需求。本节将对这些内置行为分别进行介绍。 Dreamweaver 8提供的行为动作已经确认可以在Netscape Navigator 6和Internet Explorer 6.0及其以后的版本中使用。 虽然Dreamweaver动作实现最大可能地跨浏览器兼容，其中一些动作还是不能在旧版本的浏览器中使用。而且有些浏览器根本不支持JavaScript，很多浏览Web的用户都将其浏览器的JavaScript功能关闭。如果想获得最好的跨平台结果，用户应该在noscript标记中提供可替换的界面，这样没有JavaScript的用户也可以使用用户的站点。,7.2.1 调用JavaSc
14、ript代码,【调用JavaScript】动作让用户可以使用【行为】面板指定当事件发生时要执行的自定义函数或者JavaScript代码(可以自己书写JavaScript，也可以使用Web页面上免费发布的各种JavaScript库)。 可以利用【调用JavaScript】动作在网页中制作一个【后退】按钮。调用JavaScript动作制作这个按钮的具体操作如下。 (1)在文档窗口中，选中要附加行为的对象【后退】按钮。如图7.1所示，单击【窗口】|【行为】命令，打开如图7.2所示的【行为】面板。 (2)单击【行为】面板上的“+”按钮，并从如图7.3所示的动作菜单中选择【调用JavaScript】选项
15、。这时会出现如图7.9所示的对话框。 (3)在该对话框中可以直接输入“if (history.length 0)history.back()”。 (4)单击【确定】按钮确定操作。查看默认事件是否是用户需要的事件。如果该事件不是用户所需的，可以从弹出的事件菜单中选择另一个事件。如果用户需要的事件没有列出，请在【显示事件】子菜单中改变目标浏览器。 为【后退】按钮附加了【调用JavaScript】动作行为，保存文档后在浏览器中预览效果，如果单击如图7.10所示的网页中的【后退】按钮，则页面将后退到刚才浏览的页面，这个按钮的作用和浏览器上的【后退】按钮的作用一样。,7.2.1 调用JavaScript
16、代码,图7.9 【调用JavaScript】对话框,7.2.1 调用JavaScript代码,图7.10 单击页面中的【后退】按钮,7.2.1 调用JavaScript代码,用户在【调用JavaScript】对话框中可以直接输入“if (history.length 0)history. back()”，也可以按照如下操作先将代码封装为函数，然后再调用函数。 (1)编写如下所示的JavaScript程序，用于进行数据处理。 function goBack() if (history.length 0) history.back() (2)如图7.11所示，选择【查看】|【文件头内容】命令，显示文档窗口的头部，并将插入点放置于文档窗口的头部窗格中。 (3)如图7.12所示，选择【插入】| HTML |【脚本对象】|【脚本】命令，或是选择【插入】面板上的HTML选项，然后单击【脚本】按钮。这时会出现如图7.13所示的对话框。 (4)从【语言】下拉列表中选择JavaScript选项，然后将上面的程序输入到【内容】文本编辑区中。,7.2.1 调用JavaScript代码,图7.11 显示头部内
