添加行为特效

添加行为特效本章要求1．掌握层布局网页的方法，能创建层、设置层属性、操作层2．熟悉层与表格的互相转换3．了解行为的概念4．了解各种行为的功能和适用对象5．熟悉常见的事件和动作的含义重点：创建层、多个层的编排、使用行为。难点：层与表格转换时对页面布局的影响、多种行为相结合制作网页特效。一、 利用层对网页布局插入层在Dreamweaver插入层的方法有如下两种：1） 将光标插入点定位到所需位置，然后选择【插入】f【布局对象】f【层】命令即可。2） 将插入栏切换到“布局”插入栏，单击“描绘层”按钮園，此时光标插入点变为形状,在网页中按住鼠标左键拖动即可绘制一个层。插入嵌套层使用插入或拖动的方法可以创建嵌套层。被嵌套的层将继承父层的属性特征，如可见性和相对位置关系。（1）直接创建嵌套层首先创建一个层（选择“描绘层”按钮，直接拖动鼠标画出层）。单击层以激活该层，使插入点确定在层中，按住“Alt”键，再创建一个层，即可。先创建的为父层。（插入/布局对象/层）。窗口/层（F2）,打开层面板，可以看到层间的嵌套关系。（2）将已有的层转变为嵌套层执行窗口/层，打开层面板；选中一个层，按住“Ctrl”拖动，将所选层拖动到目标层上。编辑层创建的层通常还需对其进行大小调整、移动等操作才能满足网页制作的要求。1） 选中层选中层后才能对该层进行操作和设置，下面将介绍层的选中方法。单个层的选中选中单个层，可在窗口中单击该层边框或在“层”面板（按【F2】键可打开“层”面板）中单击要选中层的名称，也可按住【Ctrl+Shift】键在该层中单击。选中层后，在“层”面板中会以反白显示该层名称。多个层的选中需选中多个层时可按住【Shift】键依次在层中或层边框上单击，也可按住【Shift】键依次在“层”面板中单击层的名称。2） 拖动层选择需移动的层，将鼠标光标移到层边框上，当其变为申形状时按住鼠标左键将其拖动到需要的位置后释放鼠标即可。3） 对齐层对齐层的操作比较简单，选中需对齐的层，选择【修改】f【对齐】命令中的相应命令即可，其中包括“左对齐”、“右对齐”、“对齐上缘”、“对齐下缘”等命令。左对齐：在水平方向所有层与最后选中层的左边缘对齐。右对齐：在水平方向所有层与最后选中层的右边缘对齐。对齐上缘：在垂直方向所有层与最后选中层的上边缘对齐。对齐下缘：在垂直方向所有层与最后选中层的下边缘对齐。4）调整层的大小在网页制作过程中，通常创建的层的大小都不符合要求，需对其进行大小的调整。下面分别介绍调整单个层和多个层的方法。单个层的大小调整调整单个层的大小有两种常用方法，一是选中层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值；二是将鼠标光标移至层的边缘，当光标变为1、I、\或/形状时按住鼠标左键不放，将其拖动到所需大小后释放鼠标即可。多个层的大小调整选择需调整大小的多个层，然后选择【修改】f【对齐】命令中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度。设置层的属性（1）层的属性面板说明层编号：用于设置层的名字。层名只能包含英文和数字，不能以数字开头；左、上、宽、高：用来说明位置和大小；Z轴：指定层与层间的Z编号。Z轴值较大的层出现在编号较小的层的上面；（重叠时才有意义）。可见性：Default默认属性；Inherit继承父层的可见性属性；Visible显示层的内容，忽略父层是否可见；Hidden隐藏层的内容，忽略父层是否可见。背景图像和背景颜色：设置层的背景溢出：指定当层的内容超过层的指定大小时的处理方法。“可见”指定增加层的大小，使层的内容可见，（会向下和向右）；“隐藏”指定保持层的大小，不在浏览器中显示超出层范围的内容；“滚动”指定浏览器在层上添加滚动条；“自动”使浏览器仅在需要时，即层的内容超出其边界时自动显示滚动条。剪接：定义层的可见区域。指定左侧、顶部、右侧、底边坐标。（2）层的管理面板 窗口/层可以防止层重叠；通过层左侧的眼睛可以控制可见性。没有眼睛表示继承父层可见性，若该层无父层，则继承文档主体的可见性。可以改变Z值，改变层的堆叠。二、 认识行为的事件和动作与行为相关的有三个重要的部分：对象、事件和动作。对象：是产生行为的主体。行为是事件和动作的联合。行为被规定附属于页面上的某个特定的元素中。事件：是浏览器产生的信息，指示网页的访问者执行了某种操作。例如：当浏览者的鼠标从链接上经过时，浏览器就为该链接产生一个onmousemove事件，当该链接的事件发生后，浏览器就检查是否有调用的javascript脚本代码。动作：就是由预先编写的javascript脚本代码组成的，指定特定的任务。例如：弹出对话框、播放声音或停止播放shockwave影片等。三、 事件onClick：当用户单击了指定的页面元素，如链接、按钮或图像映像时触发，适用于IE6,IE5.5，IE5和IE4。onDblClick:当用户双击了指定的页面元素时触发，适用于IE6,IE5.5,IE5和IE4。onMouseDown：当用户按下鼠标左键并没有释放之前触发，适用于IE6，IE5.5，IE5，IE4和NS4。onMouseUp：当用户按下鼠标左键，然后释放时触发，适用于IE6，IE5.5，IE5，IE4和NS4。onMouseMove:当用户在页面上拖动鼠标时触发，适用于IE6，IE5.5，IE5，IE4和NS4。onMouseOut：当鼠标光标移出了页面指定元素的范围时触发，适用于IE6，IE5.5，IE5，IE4，NS3和NS4。onMousOver:当鼠标光标第一次移动到指定元素范围时触发，适用于IE6，IE5.5，IE5，IE4，NS3和NS4。onLoad:当页面、图像被完全载入后触发，适用于IE6，IE5.5，IE5，IE4，IE3，NS6,NS4和NS3。onUnload：当用户离开页面时触发，适用于IE6,IE5.5,IE5,IE4,IE3,NS6,NS4和NS3。onMove:当移动窗口或框架时将触发该事件。onFocus:当指定的元素变成用户交互的焦点时触发，适用于IE6,IE5.5,IE5,IE4,NS6，NS4和NS3。onSubmit：确认表单时触发该事件。OnReset:当表单被复位或其默认值时触发该事件。在网页文档中添加行为的三个基本步骤1） 选择网页要添加行为的网页元素，如果不选择，则默认为整个网页文档2） 添加动作3） 调整事件四、使用“行为”面板为某个页面元素添加行为主要是通过行为面板来实现。通过“行为”面板可以添加和控制行为。选择【窗口】一【行为】命令或按【Shift+F3】快捷键，打开“行为”面板，在面板中会显示已添加的行为。“行为”面板中各按钮的功能如下:单击三三按钮只显示已设置的事件列表。单击亘三按钮显示所有事件列表。单击忙按钮会弹出“行为”菜单。在该菜单中选择相应的行为后，会打开相应的对话框,设置完成后将为指定的对象添加行为。2．使用“行为”面板单击n按钮将删除在“行为”面板中选中的行为。单击按钮将向上移动所选择的动作。若该按钮为灰色，则表示不能移动。单击按钮将向下移动所选择的动作。3．添加和编辑行为1）添加行为将行为添加到整个网页、链接、图像和表单等任何网页对象中，可使其具有交互效果。添加行为的具体操作步骤如下:选中所需对象（若要将行为添加到整个页面，可单击页面左下角的＜body＞标签）。单击“行为”面板上的按钮，在弹出的“行为”菜单中选择需要添加的行为命令，如果该命令显示为灰色，表示当前所选中的对象不支持此行为。c.选择不同的行为弹出的对话框也不同。如选择“播放声音”命令，弹出“播放声音”对话框。D.单击“播放声音”文本框右侧的浏览…按钮，在弹出的对话框中选择声音文件，单击确定按钮完成行为的添加，在“行为”面板列表中可以看到多了一个“播放声音”行为。“事件”列表中显示的是系统默认的事件，如需选择事件，方法是单击该事件，“事件”列表则变为“事件”下拉列表框，单击其右侧的巒按钮，在弹出的下拉列表中选择所需的事件即可。2） 修改行为如果对添加的行为不满意可对其进行修改。在选中要修改行为的对象后，可以执行以下操作对行为进行修改：在“行为”面板中的“事件”下拉列表框中重新选择其他事件。双击要修改的动作，在打开的对话框中对动作的属性进行修改。单击基或审按钮修改行为的顺序。3） 删除行为如果不需要某种行为，可以将其删除。方法是选中要删除的行为，单击按钮或直接按【Delete】键即可。五、行为的使用案例1：网页提示问候语当访问者打开页面时弹出“欢迎你的到来！”的问候语，当访问者离开页面时弹出“谢谢你的到来，欢迎再次光临！”的问候语。弹出信息动作会显示一个带有指定消息的警告窗口，为浏览者提供信息。1） 选择一个对象并打开行为面板。2） 单击“+”按钮并从“动作”弹出菜单中选择“弹出信息”，出现弹出信息对话框。在消息文本框中输入所需的消息文本，然后单击“确定”按钮。例如：选择body标签，打开行为面板从“动作“中选择“弹出信息”，在对话框中输入“欢迎光临我的家园”，单击“确定”按钮，则在行为面板中的onload事件中显示弹出信息的标志。学生选做：当访问者离开页面时弹出“谢谢你的到来，欢迎再次光临！”的问候语。案例2：当鼠标指针移到链接对象上时，状态栏显示相应的信息，鼠标移开时状态栏显示为空。1） 选中“音乐之声”的FLASH按钮。2） 单击行为面板上的“+”按钮，在动作菜单中选择“设置文本”——“设置状态栏文本”。3） 在弹出的对话框中输入状态栏中要显示的文字信息“请倾听美妙的音乐！”。单击“确定”，然后在“行为”面板上确定事件为onMouseover。4） 为onMouseout事件添加该行为。要显示的文字信息为空。案例3：交换图像和回复交换图像1、交换图像交换图像动作通过更改img标签的src属性将一个图像和另外一个图像进行交换，并且可以设置不同的事件来显示多个图像文件。1）选择需要交换的图像（高度和宽度都必须相等，否则换入的图像显示时会进行压缩或放大）2）在“属性”面板中给选择的图像命名。3）单击“+”按钮并从“动作”弹出菜单中选择“交换图像”命令，出现如图所示的“交换图像对话框”。“图像”列表：出现所有插入的图像，选择图像名。设定原始档为：输入交换图像的路径及文件名或单击“浏览”按钮选择要交换的图像。预先载入图像：若选中，载入页面时将新图像载入到浏览器的缓存中，防止当图像出现时由于下载而导致延迟。鼠标滑开时恢复图像：若选中，则设置onMouseOut事件的动作为恢复交换图像。4）单击“确定“按钮，则在行为面板中显示onMouseOver事件的交换图像。思考：若事件不合适，如何更改事件？2、恢复交换图像应用“恢复交换图像“动作可以将最后一组交换图像恢复为他们以前的源文件。若在附加“交换图像“时选择“鼠标滑开时恢复图像”复选框后，每次将“交换图像”动作附加到某个对象时都会自动添加该动作。案例4：添加“显示弹出式菜单”的制作当鼠标指针移至导航条处将会弹出菜单。1）在导航条选择导航元件，单击“行为”面板上的“+”按钮，在“行为”菜单中选择“显示弹出式菜单”命令，打开“显示弹出式菜单”对话框。2）在“内容”选项卡的“文本”文本框中输入菜单名，并进行相应的链接设置。单击“+”按钮，添加下一个菜单项。3）单击“外观”选项卡，在“一般状态”栏中设置文本颜色等。4）在“高级“选项卡中设置单元格颜色。5）在“位置“选项卡中设置弹出式菜单的位置。拖动层使用“拖动层”动作，可以实现在网页上对层及其中内容进行移动，以实现某些特殊的效果。案例制作网页拼图游戏1）将图片添加到各个层中。并设置图片与层的宽和高一致。2） 单击文档窗口的＜body＞标签，执行“窗口”——“行为”3） 单击“+”添加行为按钮，在动作菜单选择“拖动层”，弹出拖动层对话框。4）选择相应的层。“移动”下拉列表框：用于选择层被拖动时的移动方式。限制：选择该项，则层的移动位置是受限制的，可以在右方显示的文本框中输入可移

动区域的上、下、左、右位置值。这些值是相对层的起始位置而言的。不限制：表示层在任意位置上移动。“放下目标”：用于设置层被移动到的位置。可在“左”和“上”文本框中输入层移动后的位置。单击“取得目前位置”，可获取当前层所在的位置。“靠齐距离”：用于输入层与目标位置靠齐的最小像素值。当层移动的位置同目标位置之间的像素值小于文本框中的设置时，层会自动靠齐到目标位置上。5）调整事件为OnmouseDown。设置层文本案例：制作“电脑的组成”网页，将鼠标光标移动到电脑的某一个部件上时，将显示该部件的名称和功能。1）在电脑图片上建立多个热点区域。2）在页面上添加一个层。3）为每一个热点区域添加一个“设置层文本”的行为。打开浏览器窗口可以在一个新的浏览器窗口中载入位于指定URL位置上的文档。案例：实现单击“湖光山色”文本时打开新页面。1） 为文字“湖光山色”添加“打开浏览器窗口”行为。2） 在“打开浏览器窗口”对话框中“要显示的URL“文本框：用于输入在新浏览器窗口中载入的URL地址，也可以单击“浏览”按钮，选择链接目标文档。“窗口宽度”和“窗口高度”：用于输入新浏览器窗口的宽度和高度。“属性”：用于设置新浏览器窗口中是否显示相应的元素。“窗口名称”：为新打开的浏览器窗口定义名称。控制Shockwave或Flash可以实现对Shockwave或Flash对象的控制。案例：制作控制Flash动画播放控制网页，单击“播放”按钮，将播放Flash动画；单击“停止”按钮，将停止播放Flash动画。1）向网页中添加FLASH动画，并必须对添加的FLASH动画进行命名。2）添加“播放”和“停止”两个按钮，但是不添加表单。3）选择“播放"按钮，添加“控制Shockwave或Flash”行为，并在打开的"控制Shockwave或Flash”对话框中选择“播放”。4）依次设置“停止”按钮。改变属性可以动态改变对象的属性值。案例：单击图片，更改图片的宽度为500像素