《《网页设计与制作实用教程》-雷运发-电子教案 第6章Dreamweaver 行为应用》由会员分享，可在线阅读，更多相关《《网页设计与制作实用教程》-雷运发-电子教案 第6章Dreamweaver 行为应用（71页珍藏版）》请在金锄头文库上搜索。
1、第6章 Dreamweaver 行为应用,本章学习目标,熟悉层、事件、动作的概念和相互关系 了解JavaScript脚本语言运行的环境 掌握Dreamweaver MX 2004行为面板的使用方法 掌握通过行为面板创建网页动态效果的操作过程,6.1 Dreamweaver 行为的基本概念,行为（Behaviors）是响应某一事件（Event）而采取的一个动作（Action）。行为是Dreamweaver MX 2004中最有特色的功能，它实质上是网页中调用Javascript代码，以实现网页的动态效果，但使用了Dreamweaver MX 2004的行为功能，就不需要掌握复杂的Javascri
2、pt代码而轻松完成一个需要几十行甚至几百行代码才能完成的功能。,6.1.1 行为面板 网页中的事件（Event）是指鼠标、键盘的响应方法，Dreamweaver MX 2004提供了许多常用的事件。 启动Dreamweaver MX 2004，单击“【窗口】【行为】”菜单命令或按Shift+F3键，系统打开“行为”面板，如图6-1-1所示。,“行为”面板主要项目功能如下： 加（+）减（）按钮：用于添加或删除动作（Actions）。 动作：是网页产生的具体行为，如上图设置将产生网页时弹出一个信息窗口的网页效果。 事件：当选定某个动作时，事件右侧出现一个箭头，按此箭头产生一个事件处理的下拉菜单，通
3、过下拉菜单可选择触发动作发生的条件，以下是常见事件及描述。 OnClick：当访问者在指定的元素上单击时产生。 onDblClick：当访问者在指定的元素上双击时产生。 onKeyDown：当按下任意键的同时产生。 onKeyPress：当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。,onKeyUp：当按下的键松开时产生。 onLoad：当一图像或网页载入完成时产生。 onMouseDown：当访问者按下鼠标时产生。 onMouseMove：当访问者将鼠标在指定元素上移动时产生。 onMouseOut：当鼠标从指定元素上移开时产生。 onMouse
4、Over：当鼠标第一次移动到指定元素时产生。 onMouseUp：当鼠标弹起时产生。 onSubmit：当访问者提交表格时产生。 onUnload：当访问者离开网页时产生。,6.1.2行为与浏览器的关系 虽然在网页中使用行为可以产生互动的效果，增强网页的交互性，但是，并不是所有的浏览器都支持Dreamweaver MX 2004中的行为，目前网络上使用最多的是Netscape Navigator和Internet Explorer两种浏览器，我国普遍使用Internet Explorer浏览网页，而只有IE4.0及以上版本的浏览器才可以对大多数的行为正常使用。同一个行为在不同的浏览器中显示也是
5、不一样的，某个行为可以在这个版本的浏览器里正常显示，而在另一个版本的浏览器就不能显示。,6.2 设定行为命令,6.2.1 在对象中加入行为命令 Dreamweaver MX 2004中使用行为，应使用以下一般操作步骤： （1）选择一个想要添加行为的网页元素（可以借助状态栏中的标记符选择器，例如选择可为整个网页设置行为）。 （2）选择“【窗口】【行为】”菜单命令，打开“行为”面板。 （3）单击添加行为按钮,并弹出一个菜单。,（4）在菜单中选择一个动作，系统弹出该动作的设置对话框，显示动作的参数和说明。输入动作的相关参数后单击“确定”按钮。 （5）回到行为面板，此时行为面板中增加了一个行为行，如图
6、6-1-1所示。,6.2.2 编辑行为 为对象添加行为后，有时需要改变触发行为的事件，增加、删除动作或改变动作参数等，这些都属于编辑行为的操作。 1更改事件 Dreamweaver MX 2004中设置动作时会自动创建一个事件，默认的事件有时并不是用户需要的，比如弹出消息窗口，默认事件是Onload事件，即网页加载时弹出消息窗口，但用户如果希望单击网页后弹出消息窗口，就必须更改事件为Onclick事件。,操作方法为单击“事件”栏，再单击事件旁边的 按钮，在事件下拉列表菜单中选择Onclick事件，如图6-2-1所示。事件和当前选择的网页对象是相关联的，因此事件下拉列表菜单中的内容随所选网页对象
7、不同而变化。,如果在选择了正确的网页对象后，发现所期望的事件并没有出现在事件列表菜单中，这时应尝试改变浏览器。方法是单击“+”按钮，在图6-2-2所示的弹出菜单中选择“显示事件”命令，在子菜单中选择浏览器的版本，浏览器的版本越高，支持的事件越多。默认情况下，事件列表菜单中显示的都是IE4.0能够产生的事件。当找到所期望的事件后，选择该事件，对应行为面板的相应事件将会改变。,2修改行为的动作参数 已经设置的行为，可以改变动作参数。只要双击该行为对应的“动作”栏，如图6-2-3所示，即可打开该动作的参数设置对话框，在对话框中修改各项参数。,添加行为按钮,删除行为按钮,事件列表,多动作时，可用来调整
8、先后次序,双击可设置参数,3删除行为 在行为面板上选取欲删除的行为，单击行为面板左上方的“-”按钮，或按Delete键。 4调整行为的执行顺序 一个事件可以触发多个动作，比如Onload这一事件可以触发如播放声音，打开浏览器窗口等动作。在这种情况下就存在一个动作发生的先后问题，可以通过单击行为面板中“”，“”按钮来解决这个问题，如图6-2-3所示。,6.3 创建行为实例,6.3.1实例：弹出信息框 1实例创意 网页加载时弹出信息框，如图6-3-1所示，或点击一个对象弹出信息框，比如点击图片，按钮，链接等等，都可以弹出信息框。如果某些页面的内容在别人复制之前想给一点提示，还可以选择OnCopy事
9、件来触发弹出信息框动作。,2制作步骤 方法一：调用JavaScript 使用这一行为，必须对JavaScript非常熟悉。本例中调用JavaScript的操作主要用于对整个页面的作用，即网页加载时弹出信息框，因此在插入这个行为时，按以下步骤操作： （1）打开素材库“6-3-1”文件夹中的“1.htm”网页文件，选择状态栏上的“”，单击“行为”面板中的“+”按钮，然后在行为选择菜单中选择“调用JavaScript”命令，如图6-3-2所示。,（2）弹出如图6-3-3所示的“调用Javascript”对话框，在文本框中输入需要执行的准确的JavaScript代码或函数名，例如本例键入的一行代码为：
10、 alert(欢迎来到本站！),（3）按“确定”按钮，打开“行为”面板，确定当前动作使用的事件为“onload”，如果不是，选择右边“”按钮重新选择，如图6-3-4所示。,（4）保存网页，按F12键预览，效果如图6-3-1所示，其运行的结果是当打开网页时会自动弹出图中所示的对话框。,方法二：弹出信息 对于不熟悉JavaScript代码来制作弹出信息框的用户，也可以采用这一方法。Dreamweaver MX 2004自带了弹出信息的功能菜单，以下是实现方法： （1）创建一空白网页，选择状态栏上的“”，单击“行为”面板中“+”按钮，然后在行为选择菜单中选择“弹出信息”菜单命令。 （2）系统弹出如图
11、6-3-5所示的“弹出信息”对话框，在文本框中输入需要显示的信息，如“欢迎来到本站！”，按“确定”按钮，完成设置。,（3）保存网页，按F12键预览，效果如图6-3-1所示，其运行的结果与方法一的效果一样。,6.3.2实例：打开浏览器窗口 1实例创意 打开浏览器窗口即在打开当前网页的同时，另外打开一个新的窗口，而这个新打开的窗口，可以根据自己的喜好对它的菜单、页面尺寸、滚动条等进行设置，如图6-3-6左图所示为263网站打开时弹出的“免费试用”广告窗口，右图为本例完成后的效果图。,2制作步骤 （1）设计一个页面，作为新窗口，为了选择适当的窗口，在文档窗口显示标尺，然后从标尺上查看最合适的窗口大小
12、，如图6-3-7所示窗口采用了385250像素表格进行布局。将这个网页保存为“popwindow.htm”。,（2）创建另一个网页“index.htm”，由于是对整个页的行为，即广告窗口是在该网页加载时自动弹出，所以选择状态栏上的“”后单击行为面板的“”按钮，选择“打开浏览器窗口”菜单命令，如图6-3-8所示。,（3）系统弹出6-3-9所示“打开浏览器窗口”对话框，在“要显示的URL”文本框中输入新窗口文件的路径和文件名，也可以通过单击“浏览”按钮查找相应的路径及文件名。“窗口宽度”和“窗口高度”文本框中定义新窗口的长宽值，这里设置385250与popwindow.htm页面相对应，在“属性”
13、中未勾选相应选项，在“窗口名称”中定义窗口名称为“网页设计与制作”，最后单击“确定”按钮完成设置。,（4）如果事件窗口显示的不是Onload，则通过下拉菜单选择Onload，如图6-3-10所示。如果打算再次编辑该事件，则双击周动作栏中的“打开浏览器窗口”对这个行为进行再修改。,（5）按F12键预览，当前网页被下载的同时，也打开了一个宽度和高度分别是385250像素，定义为“网页设计与制作”的窗口，如图6-3-6右图所示。,6.3.3实例：用显示-隐藏层制作下拉菜单 1实例创意 显示-隐藏层可以对页面中所有的层进行设置，使其可显示或隐藏。本例将通过显示-隐藏层的功能制作一个网页中常见的导航用下
14、拉菜单。下拉菜单的实质是网页中共有4个菜单，即菜单1、菜单2、菜单3和菜单4，相对应有4个层，即menu1、menu2、menu3和menu4，每一层即一个下拉菜单，网页加载时，这4个层全部隐藏，当鼠标移动到“菜单1”时，层menu1显示，其它层隐藏，并且鼠标继续移动到层menu1时，层menu1继续显示，其它层仍然隐藏。重复刚才的操作，完成整个下拉菜单的制作，完成后如图6-3-11所示。,2制作步骤 （1）打开素材库“6-3-3”文件夹中的“1.htm”页面，按CTRL+F2组合键打开“插入面板”，在“布局”视图下点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的“属性面板”中设置各参数
15、，层编号框填入title，左、上、宽、高框分别填入5、200、480、15，背景色填入#006699，如图6-3-12所示。,（2）将光标移至title层内，点击插入面板“常用”视图下的表格按钮，插入一个1行4列的表格，设置如图6-3-13所示，按“确定”按钮插入表格。,（3）按住CTRL键不放点击表格的四个单元格，然后设置它们的宽度均为120像素，如图6-3-14所示，并在前两个单元格中输入文字，就是主菜单名，可按自己想要的名字输入，如“平面设计”和“建站资源”为例，并加上链接，空链接可在链接文本框中输入“#”。 （4）再次使用插入面板插入一个层到刚完成的导航条的下方，各项参数填为：层编号框
16、填入menu1，左、上、宽、高框分别填入5、220、120、80，背景色填入#999966，如图6-3-15所示，其中左和高两个参数是设置这个层距离窗口左边框和上边框的距离。,（5）在menu1层中输入菜单内容。为了排版方便，使用表格制作菜单项。这个层将作为“平面设计”的下拉选单出现，填入你所需要的菜单链接。使用同样的方法，再为“建站资源”也做一个下拉选单（层menu2），层menu2及其属性如图6-3-16所示。,注意：下拉选单所在的层（menu1、menu2）的位置非常重要（由左和高两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。 （6）按F2键打开“层面板”，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。,（7）按住CTRL键不放点击导航条中的第一个单元格，即“平
