《网页设计与制作》教案第21讲 网页特效运用行为二.docx

《网页设计与制作》教案第21讲 网页特效运用行为二.docx

《《网页设计与制作》教案第21讲 网页特效运用行为二.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》教案第21讲 网页特效运用行为二.docx（15页珍藏版）》请在冰豆网上搜索。

《网页设计与制作》教案第21讲网页特效运用行为二

第21讲网页特效-运用行为二

1.1教学目标：

◆知识目标

1.熟练掌握DreamweaverCS6新增加的Spry炫目效果。

2.掌握各自带行为制作页面动态效果。

◆技能目标

能运用各自带行为制作页面动态效果

◆品质目标

培养学生认真细致、勇于创新的精神

1.2教学重点：

掌握各自带行为制作页面动态效果

1.3教学难点

掌握各自带行为制作页面动态效果

1.4教学方法：

讲练结合，任务驱动、分子任务操练

1.5课时安排：

2课时

1.6教学对象分析：

这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：

一、激趣导入，揭示课题

前面我们学习的都是如何制作一个静态的网页，但是我们从网上看到的很多网页都有各种各样的动态效果，那么是不是我们也能制作出像他们一样的漂亮的网页来呢，没错，不用怀疑，你也可以，接下来我们就来学习如何自己利用dreamweaver自带的行为来实现多种动态页面效果。

二、播放声音（PlaySound）

使用行为中的播放声音动作可以在页面上播放声音。

比如打开页面的时候就可以播放声音，或者是鼠标经过图像或者是链接上面时播放声音。

浏览器可能需要用某种附加的音频支持（例如音频插件）来播放声音。

因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同。

如果给页面添加背景音乐的设置如下。

1．首先打开一个页面文档，在文档左下角的“标签选择器”中选择“body”标签，如图4-27所示。

图4-27选择“body”标签

2．打开行为面板，点击“＋”按钮添加行为，选择“播放声音”，如图4-28所示。

图4-28选择“播放声音”动作

3．选择声音文件，如图4-29所示，一个页面的背景音乐就添加好了。

图4-27选择声音文件

4．如果要修改背景音乐属性，在文档中选择背景音乐的图标。

如图4-28所示。

图4-28在文档中选择背景音乐的图标

5．在属性检查器中，点击“参数”按钮。

如图4-29所示。

图4-29点击“参数”按钮

6．修改参数，如图4-30所示。

图4-30修改参数

三、设置导航条图像（SetNavigatorBarImage）

使用设置导航条图像动作可以将图像转化为导航图像或者改变导航条中图像的显示及动作，或者对图像状态进行更多的控制。

1．首先准备3张长宽相同的图像文件：

a.jpg,b.jpg,c.jpg（90*32），然后在页面中插入一个导航条，在状态图像这栏里通过浏览添加入a.jpg文件，作为打开页面时候导航条显示的图像，如图4-31所示。

这个时候行为面板如图4-32所示。

　　　　　　　　　　　　　　　　　　　　　　　　图4-31添加导航条

图4-32添加导航栏后的行为面板

2．在页面中选中导航图像，双击行为面板上的动作，打开“设置导航栏图像”对话框，分别在“鼠标经过图像”和“按下图像”后面加入b.jpg和c.jpg，如图4-33所示。

图4-33设置导航条属性对话框

1．最后预览时候可以看到不同的导航图象变化，如图4-34所示。

图4-34鼠标不同动作时候导航图象的状态

四、预先载入图像（PreloadImages）

使用预先载入图像动作载入那些不会立即出现在页面上面的图像到浏览器缓存中，例如那些将通过行为或JavaScript换入的图像。

这样可以防止图像显示时由于下载导致的延迟，同时也便于脱机浏览。

“交换图像”动作自动预先载入当在“交换图像”对话框中选择“预先载入图像”选项时所有高亮显示的图像，因此当使用“交换图像”时不需要手动添加预先载入图像。

若要使用“预先载入图像”动作，请执行以下操作：

1．首先打开行为面板，在页面上选择“BODY”标签，按“+”选择“预先载入图像”动作，如图4-35所示。

单击“浏览”选择要预先载入的图像文件，或在“图像源文件”文本框中输入图像的路径和文件名。

按“+”可以增加一个空项，按“—”可删除一个项目。

图4-35选择要预先载入的图像

2．完成后这个时候可以看到行为面板如图4-35所示。

也就是说明浏览器打开页面的同时开始预先载入该图像。

图4-36添加了预先载入图像行为

五、转到URL（GoToURL）

使用该动作可以在当前窗口或指定框架中，打开一个新的页面。

此操作尤其适用于通过一次单击更改两个或多个框架的内容。

若要使用“转到URL”动作，请执行以下操作：

1．首先新建一个页面，在页面上插入一个按钮，可以用图片代替。

选中图片打开行为面板，按“+”选择“转到URL”动作，如图4-37所示。

图4-37选择“转到URL”动作

2．打开“转到URL”对话框，如图4-38所示。

“打开在”选择页面打开的窗口。

默认的是主窗口，如果正在编辑的页面有多个框架，那么在列表中将显示出来，就可以选择在哪个框架中打开页面。

在URL处选择要在窗口中转到的页面文件。

图4-38“转到URL”对话框

“打开在”列表自动列出当前框架集中所有框架的名称以及主窗口。

如果没有任何框架，则主窗口是唯一的选项。

注意：

如果任何框架命名为top、blank、self或parent，则此动作可能产生意想不到的结果。

浏览器有时将这些名称误认为保留的目标名称。

3．设置好以后可以看到行为面板中就增加了一个行为动作，表示单击该图片就打开index.htm页面文件。

如图4-39所示。

图4-39增加了该动作的行为面板

4．如果有多个需要替换文档内容的窗口，则重复上面的操作，直到每个需要替换文档内容的窗口都设置好跳转的URL。

六、拖动层（DragLayer）

使用该动作可以允许访问者使用拖动层的操作，比如实现某些特殊的效果，创建拼图游戏，SliderControls（滑动控件）以及其他的可移动的界面元素。

指定访问者可以向哪个方向拖动层（水平、垂直或任意方向），访问者应该将层拖动到的目标、如果层在目标一定数目的像素范围内是否将层靠齐到目标，当层接触到目标时应该执行的操作和其它更多的选项。

因为在访问者可以拖动层之前必须先调用“拖动层”动作，所以请确保触发该动作的事件发生在访问者试图拖动层之前。

最佳的方法是使用onLoad事件，将“拖动层”附加到body对象上，不过也可以使用onMouseOver事件将它附加到填满整个层的链接上（例如图像周围的链接）。

需要注意的是：

不能为一个已经添加了onMousedown或者onClick事件的对象添加拖动层行为,建议将此动作与BODY对象相连（使用onLoad事件）。

使用“拖动层”动作，请执行以下操作：

1．插入一个图层，单击窗口状态栏左下角的标记，打开行为面板，打开动作菜单，从中选择“拖动层”命令，如图4-40所示。

弹出拖动层对话框，默认的“基本”选项卡，如图4-41所示。

图4-40选择“拖动层”动作

2．在该选项卡中，从“层”下拉列表中选择可以被拖动的图层。

在“移动”下拉列表中选择“受限制的”或“不受限制的选项”。

选择“受限制的”选项后，可在该对话框中的上、下、左和右文本框中输入以象素为单位的值，这些值是相对于图层的起始位置的值。

3．在“放下目标”的“左”和“上”文本框中输入以象素为单位的放置目标的值。

放置目标指用户所拖动的层需放置的地方。

当层的左上角坐标和在“左”和“上”文本框中输入的值相匹配时，即达到了放置目标，该值是相对于浏览器窗口的左上角而言。

单击“取得目前位置”按钮则自动将当前图层的所在位置填入这两个文本框中。

图4-41拖动层对话框

4.在靠齐距离文本框中输入一个以象素为单位的值，指定图层与放置目标的靠近距离，即当拖动图层进入距放置目标指定距离的范围内时，图层将自动与放置目标对齐。

如果还要定义图层的拖动柄等动作，可以单击“高级”标签，弹出高级选项卡，如图4-42所示。

5.指定图层中用于拖动图层的区域，可在“拖拽控制点”下拉列表中选择“层内区域”选项，然后在左和上文本框中输入水平和垂直的坐标值；在宽度和高度文本框中输入拖动柄的宽度和高度值。

设置“拖拽时”选项组。

如果要在拖动层时将其移动到叠放顺序的上端，可选中“将层移至最前”复选框，选择放置层时是默认将其“留在最上方”还是恢复Z轴。

在“呼叫JavaScript”文本框输入JavaScript代码或函数名。

在“当放下时调用JavaScript”文本框输入JavaScript代码或函数名。

图4-42设置高级选项

七、调用JavaScript（CallJavaScript）

使用该动作可以很方便地加入JavaScript命令。

可以自己编写JavaScript或使用Web上多个免费的JavaScript库中提供的代码。

1．首先在页面上选择要增加行为的对象，在行为面板中按“＋”按钮，从弹出的动作菜单中选择“调用JavaScript”命令，弹出“调用JavaScript”对话框，如图4-43所示。

图4-43调用JavaScript对话框

2．在对话框的文本框中输入需执行的准确的JavaScript代码或函数名，例如，若要创建一个“后退”按钮，可以键入if（history.length>0）{history.back（）}。

如果已将代码封装在一个函数中，则只需键入该函数的名称（例如hogback（））。

3．然后查看默认事件是否是所需要的，如果该事件不是想要的，可以单击Behaviors面板中该行为的下三角按钮，从弹出的事件菜单中重新选择一个事件。

八、改变属性（ChangeProperty）

使用该动作可以通过设定的动作触发行为，动态改变连接行为的对象属性，包括对象的颜色、尺寸和背景等。

只有在非常熟悉HTML和JavaScript的情况下才使用此动作。

1．首先在页面上选择要增加行为的对象，在行为面板中按“＋”按钮，从弹出的动作菜单中选择“改变属性”命令，弹出“改变属性”对话框，如图4-44所示。

图4-44改变属性对话框

2．从该对话框的“对象类型”下拉列表中，选择一种需要改变属性的对象类型，在“命名对象”下拉列表中选择要改变属性的对象。

在“属性”选项组中，选中“选择”单选按钮，并从其右侧的第一个下拉列表中选择一种属性；或选中Enter（输入）单选按钮，并在其右侧的文本框中输入属性名称。

在“新的值”文本框中输入新的属性值。

3．若要查看每个浏览器中可以更改的属性，请从浏览器弹出菜单中选择不同的浏览器或浏览器版本。

如果正在键入属性名称，则一定要使用该属性的准确JavaScript名称（请记住JavaScript属性是区分大小写的）。

4．最后可以根据自己需要改变事件。

九、控制Shockwave或Flash（ControlShockwaveorFlash）

使用“控制Shockwave或Flash”动作来播放、停止、倒带或转到MacromediaShockwave或MacromediaFlashSWF文件中的帧。

若要使用“控制Shockwave或Flash”动作，请执行以下操作：

1．选择“插入/媒体/Shockwave”或“插入/媒体/Flash”分别插入Shockwave或FlashSWF文件。

2．选择“窗口/属性”并在上面左边的文本框（在Shockwave或Flash图标旁边）中输入影片的名称。

若要用“控制Shockwave或Flash”动作对影片进行控制，必须对该影片进行命名。

如图4-45所示。

图4-45输入影片的名称

3．选择要用于控制Shockwave或FlashSWF文件的项。

例如，如果具有用于播放影片的“播放”按钮的图像，则选择该图像。

4．打开“行为”面板（“窗口/行为”）。

单击加号（+）按钮并从“动作”弹出菜单中选择“控制Shockwave或Flash”。

如图4-46所示。

5．出现一个参数对话框。

如图4-47所示。

从“影片”弹出菜单中选择一个影片。

Dreamweaver自动列出当前文档中所有Shockwave和FlashSWF文件的名称。

选择是否播放、停止、倒带或转到影片中的帧。

“播放”选项从动作发生的帧开始播放影片。

图4-46选择“控制Shockwave或Flash”动作

6．确定后检查默认事件是否是所需的事件。

如果不是，请从弹出菜单中选择另一个事件。

如果未列出所需的事件，则在“事件”弹出菜单的“显示事件”子菜单中更改目标浏览器。

图4-47“控制Shockwave或Flash”对话框

十、检查浏览器（CheckBrowser）

使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页面，例如，可能想要将使用NetscapeNavigator4.0或更高版本浏览器的访问者转到某一页面，而将使用InternetExplorer4.0或更高版本的访问者转到另一页面，并让使用任何其它类型浏览器的访问者留在当前页上。

若要使用“检查浏览器”动作，请执行以下操作：

1．选择一个对象并打开“行为”面板。

单击“+”按钮并从“动作”弹出菜单中选择“检查浏览器”。

如图4-48所示。

2．确定要如何区分访问者：

根据浏览器类型、浏览器版本，还是既根据类型又根据版本。

例如，是否要让所有具有4.0版浏览器的访问者看到某一页面，而让所有其他人看到另外一页面？

或者让NetscapeNavigator用户看到一页面，而让InternetExplorer用户看到另外一页面。

图4-48选择“检查浏览器”

3．跳出“检查浏览器”对话框，如图4-49所示。

指定一个NetscapeNavigator版本。

在相邻的弹出菜单中，选择选项以指定如果浏览器是指定的NetscapeNavigator版本或更高版本时应该进行何种操作，如果是其它情况时又应该进行何种操作。

选项包括“转到URL”、“转到替代URL”和“留在此页”。

指定一个InternetExplorer版本。

在相邻的弹出菜单中，选择选项以指定如果浏览器是指定的InternetExplorer版本或更高版本时应该进行何种操作，如果是其它情况时又应该进行何种操作。

选项包括“转到URL”、“转到替代URL”和“留在此页”。

从“其它浏览器”弹出菜单中选择一个选项，以指定如果浏览器既不是NetscapeNavigator也不是InternetExplorer时应该进行何种操作。

例如，该访问者可能正在使用一个诸如Lynx的基于文本的浏览器。

“留在此页”是用于NetscapeNavigator和InternetExplorer之外浏览器的最佳选项，因为如果它们不能读取此行为，它们大多数不支持JavaScript，它们无论如何都会留在此页上。

在对话框底部的文本框中输入URL和替代URL的路径和文件名。

如果输入一个远程URL，除了输入WWW地址之外还必须输入http:

//前缀。

4．单击“确定”。

检查默认事件是否是所需的事件。

如果不是，请从弹出菜单中选择另一个事件。

如果未列出所需的事件，则在“显示事件”弹出菜单中更改目标浏览器。

请记住，此行为的目的是检查是否存在不同的浏览器版本，因此最好选择一个在3.0和更高版本的浏览器上都起作用的事件。

图4-49“检查浏览器”对话框

十一、检查插件（CheckPlugin）

使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页面。

例如，可能想让安装有Shockwave的访问者转到一页面，让未安装该软件的访问者转到另一页面。

若要使用“检查插件”动作，请执行以下操作：

1．选择一个对象并打开“行为”面板。

单击加号（+）按钮并从“动作”弹出菜单中选择“检查插件”。

如图4-50所示。

图4-50选择“检查插件”

2．从“插件”弹出菜单中选择一个插件，或单击“输入”并在相邻的文本框中键入插件的确切名称。

在“如果有，转到URL”文本框中，为具有该插件的访问者指定一个URL。

如果指定一个远程URL，则必须在地址中包括http:

//前缀。

若要让具有该插件的访问者留在同一页上，请将此域留空。

在“否则，转到URL”文本框中，为不具有该插件的访问者指定一个替代URL。

若要让不具有该插件的访问者留在同一页上，请将此域留空。

如图4-51所示。

检查默认事件是否是所需的事件。

如果不是，请从弹出菜单中选择另一个事件。

图4-51“检查插件”对话框

十二、跳转菜单（JumpMenu）

当使用“插入/表单对象/跳转菜单”创建跳转菜单时，Dreamweaver创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。

通常不需要手动将“跳转菜单”动作附加到对象。

若要使用“行为”面板编辑跳转菜单，请执行以下操作：

1．如果文档中尚无跳转菜单对象，则创建一个跳转菜单对象。

2．选择该跳转菜单对象并打开“行为”面板。

在“动作”列中选择“跳转菜单”。

如图4-52所示。

图4-52选择“跳转菜单”

3．在“跳转菜单”对话框中进行所需的更改，然后单击“确定”。

如图4-53所示。

图4-53“跳转菜单”对话框

加入跳转菜单，实际上是在表单中加入了一个列表框，同时也为该列表框附加了一个onChange-JumpMenu的行为，该行为表示用鼠标选择列表框中的某一项时，产生onChange事件，浏览器转到指定的页面。

十三、跳转菜单开始（JumpMenuGo）

调用Dreamweaver的跳转菜单开始动作可给插入的跳转菜单加上一个Go按钮，单击Go按钮就会打开下拉列表中选择的选项所链接的页面。

如果下拉列表框出现在某个框架中，而其选项链接的页面内容出现在其他的框架中，此时就必须添加Go按钮。

调用JumpMenuGo动作的方法如下：

1．在页面中插入一个对象，通常是一个按钮。

在该按钮的属性面板的标签（Label）文本框中输入文本"Go"或其他文本，在动作（Action）选项组中选无（None）单选按钮。

2．选中插入的按钮，打开行为面板，在弹出的动作菜单中选择“跳转菜单开始”命令，如图4-54所示。

图4-54选择“跳转菜单开始”

3．弹出“跳转菜单开始”对话框，在“选择跳转菜单”下拉列表中选择一个相应的跳转菜单即可。

如图4-55所示。

图4-55“跳转菜单开始”对话框

十四、设置文本（SetText）

1．设置框架文本

设置框架文本动作允许动态建立框架文本，用特定的内容替换一个框架的格式和内容，此操作可动态显示信息。

在调用该动作前，先要创建框架集。

方法如下：

●选定要连接行为的对象，然后打开行为面板，在菜单中选择“设置文本/设置框架文本”命令，如图4-56所示。

图4-56设置框架文本

●弹出“设置框架文本”对话框图4-57所示。

在框架下拉列表中选择目标框架。

单击“GetCurrentHTML（获得当前HTML）”按钮，复制当前框架的HTML的内容和形式。

在新建HTML文本框中输入用于替换框架集内容和格式的文本内容。

2．设置层文本

设置层文本动作可以用指定的内容来替换位于某一个页面上层的内容和格式。

在调用该动作前，先要在页面中插入一个层。

方法如下：

●选定要连接行为的对象，然后打开行为面板，在菜单中选择“设置文本/设置层文本”命令。

图4-57“设置框架文本”对话框

●弹出“设置层文本”对话框，根据需要进行设置。

如图4-58所示。

图4-58“设置层文本”对话框

3．设置状态栏文本

设置状态栏文本动作可以在浏览器窗口的左下方的状态栏中显示文本信息。

调用该动作的方法如下：

●选定要连接行为的对象，然后打开行为面板，在菜单中选择“设置文本/设置状态栏文本”命令。

●弹出“设置状态栏文本”对话框，如图4-59所示。

●在“消息”栏中输入你需要的消息文本。

●最后预览的时候就可以看到状态栏中显示的是你刚刚设置的消息文本。

图4-59“设置状态栏文本”对话框

4．设置文本域文字

设置文本域文字动作可以用指定的内容替换文本域的内容。

调用该动作的方法如下：

●首先选择“插入/表单对象/文本域”。

●在属性检查器中，为该文本域键入一个名称。

确保该名称在页面上是唯一的（不要对同一页面上的多个元素使用相同的名称，即使它们在不同的表单上也应如此）。

●选择一个文本域并打开“行为”面板。

单击“+”按钮并从“动作”弹出菜单中选择“设置文本/设置文本域文本”。

●在“设置文本域文本”对话框中，从“文本域”弹出菜单中选择目标文本域。

在“新建文本”文本框中输入文本，然后单击“确定”，如图4-60所示。

图4-60“设置文本域文本”对话框

1.8归纳总结：

本讲介绍了运用各行为制作页面动态效果，包括：

鼠标经过图像、显示隐藏层、跳转菜单、调用JavaScript、检查插件、检查浏览器等。

1.9课后作业题：

1.行为和事件的关系？

2.鼠标点击、鼠标悬停、鼠标离开的触发事件分别是？

3.鼠标经过图像、显示隐藏层、跳转菜单、调用JavaScript、检查插件、检查浏览器等效果如何制作？