《图像处理及网页制作》课件第16章.ppt

1、1 1第16章 动态网页技术16.1 行为的使用行为的使用16.2 创建图像交换效果创建图像交换效果本章小结本章小结2 2Dreamweaver为网页中常见的行为和动作编写了现成的代码，用户只需要简单地设置一些参数变量，就可以方便地在网页中实现一些复杂的交互和动态功能。行为的使用主要包括添加行为、编辑行为及创建图像交换效果。3 3Dreamweaver的行为是指通过放置在文档中的JavaScript代码，使访问者可以与Web网页进行交互，从而以多种方式更改页面内容或引起某些特定任务的执行。例如在鼠标移到某幅图像上时使其出现凸起的立体感，按下鼠标时产生凹陷的立体感；又如当单击鼠标时，引起在页面上

2、滚动的字幕内容的切换等。16.1 行行为为的的使使用用4 416.1.1 行为概述行为是事件和动作的组合。网页中的每个元素都可以看成是一个对象，在Dreamweaver中可以给任何对象附加一个行为，从而实现网页与浏览者进行交互，增加动态效果。事件就是浏览器产生的信息，用于指示网页执行某种操作。例如，当浏览者的鼠标从链接上经过时，浏览器为该链接产生一个onMouseOver(鼠标移上)事件；该事件发生后，浏览器将检查是否有需要调用的JavaScript代码，以便执行相应的操作。5 5不同的页面元素给出的事件定义也会不同，例如，在绝大部分浏览器中onMouseOver/onMouseOut(鼠标移

3、出)和onClick(鼠标点击)事件是与链接相关的，而onLoad(载入以后)事件多用于载入页面时打开新窗口或弹出对话框。动作是由预先编写的JavaScript代码定义的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或者停止播放Shockwave影片等。Dreamweaver所提供的动作是由Dreamweaver的工程师精心编写的，可以提供最大的跨浏览器兼容性。当然，如果用户掌握了JavaScript语言，也可以自己动手编写动作代码，然后在行为中调用。6 6在将行为附到页面元素后，无论为该元素指定什么事件，浏览器都会调用与该事件相关的动作(JavaScript动作代码)。

4、例如，如果将“弹出信息”动作附加到一个链接上，并指定由onMouseOver事件触发，那么只要当鼠标经过时，都会弹出一个包含信息的对话框。7 716.1.2 “行为”面板“行为”面板用于为页面元素附加行为，并且可以修改以前所附加行为的参数。执行“窗口行为”命令，即可打开如图16-1所示的“行为”面板。已经附加在当前选定元素上的行为出现在面板的“行为”列表中(面板的主区域)。如果同一事件对应几个动作，动作将按其被执行的顺序出现。8 8图16-1 “行为”面板9 9在该面板中，加号和减号按钮用于添加和删除行为；右边的上下箭头按钮用于调整针对同一对象的动作的执行顺序。“事件”菜单是包含所选对象中所有

5、能触发动作的事件的弹出式菜单，当用户单击在“行为”列表中选定的事件名称旁的箭头按钮时，可显示该菜单。该菜单仅在行为列表中某个事件被选定时才可见。根据所选定对象的不同，将显示不同的事件。如果所需的事件没有显示，检查是否选定了正确的页面元素或标签(若要选定特定的标签，请使用文档窗口左下方的标签选择器)。10 1016.1.3 附加行为用户可以对整个页面(也就是对body标签)附加行为，也可以对链接、图像、表单中的元素或其他任何HTML元素附加行为。其中可添加的动作(如图16-2所示)主要有：“交换图像”：交换显示的图像。“弹出信息”：弹出一条警告或提示信息。“恢复交换图像”：是指把已经交换的图像恢

6、复过来。“打开浏览窗口”：打开一个小浏览窗口(和网上的弹出窗口一样)。11 11图16-2 添加动作菜单12 12“拖动层”：指定设定的图层是否允许拖动。“控制Shockwave或Flash”：控制网页中包含的Shockwave或Flash。“播放声音”：在页面中插入声音文件进行播放。“改变属性”：改变已经插入的层的属性。“显示-隐藏层”：设置图层的显示或隐藏。“检查插件”：检查访问者的浏览器是否已安装浏览网页所必需的插件。13 13“检查浏览器”：检查访问者使用什么类型的浏览器。“检查表单”：检查网页中的表单是否合法。“设定导航栏图像”：给导航栏设定图像。“设置文字”：在特定的地方设置并显示

7、文字。“调用JavaScript”：调用网页中包含的JavaScript程序。“跳转菜单”：插入跳转导航菜单。“跳转菜单开始”：控制导航菜单跳转到哪个页面。“转到URL”：指定跳转到的目标页面的URL。14 14“预先载入图像：在网页装载前预先载入图像。“显示事件”：设定显示IE或NS各个版本的事件。“获取更多行为”：打开网页下载更多的事件。下面以具体的例子介绍如何进行添加“行为”。例16-1 在浏览者进入某个页面时出现一个对话框。具体操作步骤如下：(1)打开“行为”面板，并选定需要加入行为的对象。如果要将整个页面作为行为的对象，可以单击文档窗口下方状态栏中的标签。15 15(2)单击“行为”

8、面板中的“添加”按钮，弹出如图16-3所示的动作菜单，其中的各选项表示动作的不同类型(有些选项呈灰色显示，表示当前窗口中没有所要求的对象)。(3)从动作菜单中选择“弹出信息”选项，打开如图16-4所示的对话框，在“消息”文本框中输入一些文字。(4)单击“确定”按钮，并在事件列表中设置该事件为“onClick”，如图16-5所示。(5)执行“文件在浏览器中预览iexplore”命令或按F12键，此时会弹出一个对话框，提醒用户将改动进行及时保存，按“确认”后，就可在IE上进行预览，如图16-6所示。16 16 图16-3 添加动作类型17 17图16-4 在“消息”文本框中添加内容18 18图16

9、-5 在事件列表中设置“事件”19 19图16-6 添加行为后效果图2020提示：动作菜单所列事件中有一些与浏览器有关，低版本的浏览器能使用的动作范围较窄，高版本的浏览器可使用更多的动作。表16-1给出了行为的常用事件说明。21 21表16-1 行为的常用事件222216.1.4 编辑行为在附加行为后，既可以编辑触发动作的事件，也可以添加或删除动作等。编辑行为的操作步骤如下：(1)选定一个附加了行为的对象。(2)打开“行为”面板，该对象附加的行为就出现在行为列表中。(3)如果要改变给定事件的动作顺序，则选定某行为后，单击上箭头按钮或下箭头按钮，调整前后顺序。2323(4)如果要编辑动作的参数，

10、则双击行为或选定某行为后按下Enter键，在出现的对话框中改变其参数(例如，可以编辑在消息框中显示的文字)，然后单击“确定”按钮。(5)如果要删除某个行为，则选定行为后，单击按钮。242416.1.5 使用Dreamweaver MX自带行为在Dreamweaver中为常见的行为动作编写了现成的代码，用户只需简单地设置一些参数变量，就可以方便地为网页生成一些复杂的交互和动态功能。单击“行为”面板上的“添加行为”按钮，在弹出的菜单中就包含了Dreamweaver自带的各种行为。除了上面介绍的弹出对话框的示例外，本节再介绍几个常用行为示例，使创建的页面能够获得更加丰富的效果。25251.播放声音用

11、户可以在页面中插入并播放声音文件，例如，在页面加载时播放一段音乐，使浏览者得到享受和放松。由于不是所有的浏览者都喜欢听音乐，因此提供一个按钮，让浏览者自己决定是否听音乐。用户还可以设置当浏览者的鼠标经过某个重要的链接时发出提示声音。例16-2 利用“播放声音”行为控制音乐的播放。具体操作步骤如下：(1)在页面中选定控制声音事件的对象，如图16-7所示。2626图16-7 选定控制声音事件的对象2727(2)在“行为”面板中，单击 按钮，从弹出的动作类型菜单中选择“播放声音”选项，出现如图16-8所示的“播放声音”对话框。(3)在“播放声音”文本框中输入声音文件的路径和文件名，或者单击“浏览”按

12、钮选择声音文件。(4)单击“确定”按钮，将该行为添加到“行为”面板中。(5)在“行为”面板中，更改希望引起动作的事件，例如：设置为onClick事件。2828图16-8 “播放声音”对话框29292.拖动层用户可以在页面中按住鼠标左键拖动图片或文字信息。拼图游戏的制作就利用了“拖动层”行为，用户通过按住鼠标左键拖动小图片，完成拼图游戏。例16-3 本例是一个有趣的拼图游戏，用户可以通过鼠标将四幅被打乱了顺序的图像拼凑成一幅完整的图像(如图16-9所示)。3030图16-9 “拼图游戏”示意图31 31具体操作步骤如下：(1)新建一个空白网页，在该页面中输入文字“拼图游戏”作为提示文字，然后在“

13、拼图游戏”的下方输入文字“请将以上4幅图像拼凑成一幅完整的图像”作为游戏说明。(2)单击“插入”栏“布局”标签中的“描绘层”按钮；在页面中按下鼠标左键并拖动，待虚线框的大小满足要求后，释放鼠标左键，在页面中添加一个名为Layer1的层。(3)重复步骤(2)，再绘制3个大小相同的层，分别命名为Layer2、Layer3和Layer4。3232(4)将插入点移到页面的中间位置，单击“插入”栏“布局”标签中的“插入表格”按钮，在打开的对话框中，分别将“行”设置为2、“列”设置为2、“表格宽度”为200像素、“边框”为1像素，其他为默认值(如图16-10所示)，插入一个2行2列的表格。3333图16-

14、10 插入表格3434(5)将插入点置于各个层的内部，执行“插入图像”命令，给每个层选择合适的图像。为了增加拼凑的难度，可以将各幅图像错开摆放，如图16-11所示。(6)选定Layer1层的图像，执行“窗口层”命令，打开“层”面板；单击“行为”面板上方的“添加行为”按钮，从弹出的“行为”菜单中选择“拖动层”命令，出现如图16-12所示的“拖动层”对话框。(7)在“基本”标签中，“层”下拉式文本框中列出了页面中所有的层，从中选择要拖动的层，例如层“Layer 1”。3535图16-11 将各幅图像错开摆放示意图3636图16-12 “拖动层”对话框之“基本”标签3737(8)在“移动”下拉文本框

15、中有“限制”或“不限制”选项，选择“不限制”。“移动”中的“不限制”适用于拼图游戏和其他拖放游戏；对于滑块控件和可移动的布景(如窗帘和小百叶窗)，请选择“限制”移动。(9)在“放下目标”框中设置层放置的终点坐标。(注：可以不作任何选择。)(10)在“靠齐距离”文本框中输入一个值(以像素为单位)，确定图像靠近目标时能够实现自动吸附。较大的值，可以使浏览者较容易将拼图移到指定的目标。(注：可以不作任何选择。)3838(11)在“高级”标签中，在“拖曳控制点”下拉文本框中选择“整个层”，在“然后”下拉式文本框中选择“恢复z-index”(如图16-13所示)。(12)单击“确定”按钮，返回到“行为”

16、面板，选定刚添加事件，然后单击事件名称和动作名称之间的向下箭头按钮，从下拉菜单中选择onMouseOver，如图16-14所示。(注：如果在文本框中没有onMouseOver，可直接输入它。)(13)重复步骤(6)步骤(12)，依次为余下的3幅图像添加“拖动层”行为。(14)按F12键，打开IE浏览器窗口，然后将图像拖到表格的相应位置，完成调试拼图操作。3939图16-13 “拖动层”对话框之“高级”标签4040图16-14 “行为”面板41 41 图16-15 初始图像和更换图像4242图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时，原图像会变成另一幅图像；当鼠标移出图像范围时，其又换

17、回原来的图像。创建图像交换效果之前必须准备两张图像，一张是初始图像，另一张是鼠标移到图片上时更换的图像(如图16-15所示)。因为图像要互相替换，所以替换前后的图像最好具有相同的尺寸，否则在替换时会打乱页面上其他内容的编排。具体操作步骤如下：16.2 创建图像交换效果创建图像交换效果4343(1)将插入点置于要添加图像的位置。(2)执行“插入交互式图像鼠标经过图像”命令，出现如图16-16所示的“插入鼠标经过图像”对话框。4444图16-16 “插入鼠标经过图像”对话框4545(3)在“插入鼠标经过图像”对话框中，可以设置如下选项：“图像名称”：一般采用默认的图像文件夹即可，如Image1。“

18、原始图像”：指定原始图像，即网页打开时显示的图像。“鼠标经过图像”：指定交换的图像。“Preload rollover image”：选中此项表示可以使浏览器在装载页面时就下载交换的图像，而不必等到鼠标移到图像上再下载，避免产生不连贯的现象。4646“替换文本”：可不做文本设置。“按下时，前往的URL”：可不做设置。(4)设置完毕后，单击“确定”按钮。(5)按F12键，在浏览器中预览，鼠标在图像外时的原始图像如图16-17所示；鼠标指向图像上时，图像就变为如图16-18所示的效果。4747 图16-17 鼠标在图像外时的效果图4848 图16-18 鼠标指向原图像时的效果图4949本章主要介绍了Dreamweaver MX的动态网页技术，其中包括使用行为和制作图像交换效果等。通过本章的学习，学习者应能利用“行为”制作出具有动态效果的网页，使得网页更加丰富多彩、引人入胜。本本 章章 小小 结结