《网页设计与制作》教案-第21讲网页特效-运用行为二_第1页
《网页设计与制作》教案-第21讲网页特效-运用行为二_第2页
《网页设计与制作》教案-第21讲网页特效-运用行为二_第3页
《网页设计与制作》教案-第21讲网页特效-运用行为二_第4页
《网页设计与制作》教案-第21讲网页特效-运用行为二_第5页
免费预览已结束，剩余7页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、第21讲网页特效-运用行为二1.1教学目标:知识目标1. 熟练掌握 Dreamweaver CS6新增加的Spry炫目效果。2.掌握各自带行为制作页面动态效果。技能目标能运用各自带行为制作页面动态效果品质目标培养学生认真细致、勇于创新的精神1.2 教学重点：掌握各自带行为制作页面动态效果1.3 教学难点掌握各自带行为制作页面动态效果1.4 教学方法：讲练结合，任务驱动、分子任务操练1.5 课时安排：2课时1.6 教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的 规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情 况上，培养学生较好

2、的专业基础与创新创作意识。1.7 教学过程：一、激趣导入，揭示课题前面我们学习的都是如何制作一个静态的网页，但是我们从网上看到的很多网页都有各种各样的动态效果，那么是不是我们也能制作出像他们一样的漂亮的网页来呢，没错，不用怀疑， 你也可以，接下来我们就来学习如何自己利用dreamweaver自带的行为来实现多种动态页面效果。二、播放声音(Play Sound)使用行为中的播放声音动作可以在页面上播放声音。比如打开页面的时候就可以播放声音，或者是鼠标经过图像或者是链接上面时播放声音。浏览器可能需要用某种附加的音频支 持(例如音频插件)来播放声音。因此，具有不同插件的不同浏览器所播放声音的效果通常

3、 会有所不同。如果给页面添加背景音乐的设置如下。1 .首先打开一个页面文档，在文档左下角的“标签选择器”中选择“body ”标签，如图4-27所示。图4-27 选择"body "标签2 .打开行为面板，点击“ 十 ”按钮添加行为，选择“播放声音”，如图4-28所示。及姆检弹出信息慎殳交换芟像打开浏览期窗口拖动层控制5办dwwc或Flesh播放雪营一变居住皇系隐祸层皇亲睥川嫁也检查插件检查浏览党梭球始迳叁耳坑拦图象H岩tf犬图4-28选择“播放声音”动作3 .选择声音文件，如图 4-29所示，一个页面的背景音乐就添加好了。4-27选择声音文件4 .如果要修改背景音乐属性，在文

4、档中选择背景音乐的图标。如图4-28所示。12图4-28在文档中选择背景音乐的图标5 .在属性检查器中，点击“参数”按钮。如图 4-29所示。fffe三777 抽怅 9LK 宜口丁C3对弄审 跳语一三雏七】|无 三3 |CS 106004141 liODlD-血电近正】一口 |下右门垂直辿距已水平吓qp图4-29点击“参数”按钮6 .修改参数，如图 4-30所示。_lzJ等数uor AUTCSTABT MftSTEhSOUBD HlIWEf£&Ls« £«ls< MASTZKOW tr'ie确定取消图4-30修改参数、设置导航条图像

5、(Set Navigator Bar Image)使用设置导航条图像动作可以将图像转化为导航图像或者改变导航条中图像的显示及动 作，或者对图像状态进行更多的控制。1 .首先准备3张长宽相同的图像文件：a.jpg, b.jpg, c.jpg(90*32),然后在页面中插入一个导航条，在状态图像这栏里通过浏览添加入a.jpg文件，作为打开页面时候导航条显示的图像，如图4-31所示。这个时候彳T为面板如图4-32所示。图4-31添加导航条限国行为Z3cJ|的Click|<k>onllo-uikO-u-t卧设普导航程园象图4-32添加导航栏后的行为面板2 .在页面中选中导航图像，双击行为面

6、板上的动作，打开“设置导航栏图像”对话框,分别在“鼠标经过图像”和“按下图像”后面加入b.jpg 和 c.jpg ,如图 4-33 所示。图4-33设置导航条属性对话框1.最后预览时候可以看到不同的导航图象变化，如图 4-34所示。人拿号工丰富乡心地理回忆图4-34鼠标不同动作时候导航图象的状态四、预先载入图像 (Preload Images)使用预先载入图像动作载入那些不会立即出现在页面上面的图像到浏览器缓存中，例如 那些将通过行为或 JavaScript 换入的图像。这样可以防止图像显示时由于下载导致的延迟， 同时也便于脱机浏览。“交换图像”动作自动预先载入当在“交换图像”对话框中选择“预

7、先载入图像”选项 时所有高亮显示的图像，因此当使用“交换图像”时不需要手动添加预先载入图像。若要使用“预先载入图像”动作，请执行以下操作：1 .首先打开行为面板，在页面上选择“ BODY标签，按“ +”选择“预先载入图像”动 作，如图4-35所示。单击“浏览”选择要预先载入的图像文件，或在“图像源文件”文本框 中输入图像的路径和文件名。按“+”可以增加一个空项，按“一”可删除一个项目。图4-35选择要预先载入的图像2 .完成后这个时候可以看到行为面板如图4-35所示。也就是说明浏览器打开页面的同时开始预先载入该图像。图4-36添加了预先载入图像行为五、转至U URL (Go To URL)使用

8、该动作可以在当前窗口或指定框架中，打开一个新的页面。 此操作尤其适用于通过一次单击更改两个或多个框架的内容。若要使用“转到URL动作，请执行以下操作：1 .首先新建一个页面，在页面上插入一个按钮，可以用图片代替。选中图片打开行为面板，按“ +”选择“转到URL'动作，如图4-37所示。设置导航栏圉聚嫉亘交本跳转睁跌转31t单产培转到URL迪先栽入团俯显示聿叶图4-37选择“转到URL'动作2 .打开“转到 URL'对话框，如图4-38所示。“打开在”选择页面打开的窗口。默认的 是主窗口，如果正在编辑的页面有多个框架，那么在列表中将显示出来，就可以选择在哪个 框架中打开页

9、面。在 URL处选择要在窗口中转到的页面文件。图4-38 “转到URL'对话框“打开在”列表自动列出当前框架集中所有框架的名称以及主窗口。如果没有任何框架， 则主窗口是唯一的选项。注意：如果任何框架命名为 top、blank、self或parent ,则此动作可能产生意想不到 的结果。浏览器有时将这些名称误认为保留的目标名称。3 .设置好以后可以看到行为面板中就增加了一个行为动作，表示单击该图片就打开index.htm 页面文件。如图 4-39所示。图4-39增加了该动作的行为面板4 .如果有多个需要替换文档内容的窗口，则重复上面的操作，直到每个需要替换文档内容的窗口都设置好跳转的UR

10、L六、拖动层（Drag Layer）使用该动作可以允许访问者使用拖动层的操作，比如实现某些特殊的效果，创建拼图游戏，Slider Controls（滑动控件）以及其他的可移动的界面元素。指定访问者可以向哪个方向拖动层（水平、垂直或任意方向），访问者应该将层拖动到的目标、如果层在目标一定数目的像素范围内是否将层靠齐到目标，当层接触到目标时应该执 行的操作和其它更多的选项。因为在访问者可以拖动层之前必须先调用“拖动层”动作，所以请确保触发该动作的事件发生在访问者试图拖动层之前。最佳的方法是使用onLoad事件，将“拖动层”附加到 body对象上，不过也可以使用onMouseOver事件将它附加到填

11、满整个层的链接上（例如图像周围的链接）。需要注意的是：不能为一个已经添加了onMousedown或者onClick事件的对象添加拖动层行为，建议将此动作与 BODY寸象相连（使用onLoad事件）。使用“拖动层”动作，请执行以 下操作：1 .插入一个图层，单击窗口状态栏左下角的<body>标记，打开行为面板，打开动作菜单，从中选择“拖动层”命令，如图 4-40所示。弹出拖动层对话框，默认的“基本”选项卡，如 图4-41所示。静婵GE 加M"开林仁优 打开倒二览镯窗口百E 口匚崎嚅族=看翼支屉I生 显不-睛赦W隹盘擂件也浊览福图4-40选择“拖动层”动作2 .在该选项卡中，

12、从“层”下拉列表中选择可以被拖动的图层。在“移动”下拉列表中 选择“受限制的”或“不受限制的选项” 。选择“受限制的”选项后，可在该对话框中的上、 下、左和右文本框中输入以象素为单位的值，这些值是相对于图层的起始位置的值。3 .在“放下目标”的“左”和“上”文本框中输入以象素为单位的放置目标的值。放置 目标指用户所拖动的层需放置的地方。当层的左上角坐标和在“左”和“上”文本框中输入 的值相匹配时，即达到了放置目标，该值是相对于浏览器窗口的左上角而言。单击“取得目 前位置”按钮则自动将当前图层的所在位置填入这两个文本框中。图4-41拖动层对话框4 .在靠齐距离文本框中输入一个以象素为单位的值，指

13、定图层与放置目标的靠近距离， 即当拖动图层进入距放置目标指定距离的范围内时，图层将自动与放置目标对齐。如果还要 定义图层的拖动柄等动作，可以单击“高级”标签，弹出高级选项卡，如图4-42所示。5 .指定图层中用于拖动图层的区域，可在“拖拽控制点”下拉列表中选择“层内区域”选 项，然后在左和上文本框中输入水平和垂直的坐标值；在宽度和高度文本框中输入拖动柄的 宽度和高度值。设置“拖拽时”选项组。如果要在拖动层时将其移动到叠放顺序的上端，可 选中“将层移至最前”复选框，选择放置层时是默认将其“留在最上方”还是恢复 Z轴。在“呼叫JavaScript ”文本框输入 JavaScript代码或函数名。在

14、“当放下时调用JavaScript '文本框输入JavaScript代码或函数名。标呵百钏工博"不3申 q J W 5 ir .1般下IFJL那ij J诋/勺口小：| P只胃鼻量界BJ图4-42设置高级选项七、调用 JavaScript (Call JavaScript)使用该动作可以很方便地加入JavaScript命令。可以自己编写 JavaScript 或使用Web上多个免费的JavaScript 库中提供的代码。1 .首先在页面上选择要增加行为的对象，在行为面板中按“ + ”按钮，从弹出的动作菜单中选择"调用 JavaScript "命令，弹出&qu

15、ot;调用 JavaScript "对话框，如图 4-43所示。图4-43 调用JavaScript 对话框2 .在对话框的文本框中输入需执行的准确的JavaScript代码或函数名，例如，若要创建一个"后退"按钮，可以键入 if(history.length>0)history.back()。如果已将代码封装在一个函数中，则只需键入该函数的名称(例如 hogback()。3 .然后查看默认事件是否是所需要的，如果该事件不是想要的，可以单击Behaviors面 板中该行为的下三角按钮，从弹出的事件菜单中重新选择一个事件。八、改变属性（Change Prope

16、rty ）使用该动作可以通过设定的动作触发行为，动态改变连接行为的对象属性，包括对象的 颜色、尺寸和背景等。只有在非常熟悉HTML和JavaScript的情况下才使用此动作。1 .首先在页面上选择要增加行为的对象，在行为面板中按“ + ”按钮，从弹出的动作菜 单中选择“改变属性”命令，弹出“改变属性”对话框，如图 4-44所示。图4-44 改变属性对话框2 .从该对话框的“对象类型”下拉列表中，选择一种需要改变属性的对象类型，在“命 名对象”下拉列表中选择要改变属性的对象。在“属性”选项组中，选中“选择”单选按钮， 并从其右侧的第一个下拉列表中选择一种属性；或选中Enter（输入）单选按钮，并

17、在其右侧的文本框中输入属性名称。在“新的值”文本框中输入新的属性值。3 .若要查看每个浏览器中可以更改的属性，请从浏览器弹出菜单中选择不同的浏览器或 浏览器版本。如果正在键入属性名称，则一定要使用该属性的准确JavaScript 名称（请记住JavaScript 属性是区分大小写的）。4 .最后可以根据自己需要改变事件。九、控制 Shockwave 或 Flash（Control Shockwave or Flash）使用“控制Shockwave 或Flash ”动作来播放、停止、倒带或转到 Macromedia Shockwave 或Macromedia Flash SWF 文件中的帧。若要

18、使用“控制 Shockwave 或Flash ”动作，请执行以下操作：1 .选择“插入/媒体/Shockwave "或"插入/媒体/Flash "分别插入Shockwave或Flash SWF文件。2 .选择“窗口 /属性”并在上面左边的文本框（在 Shockwave或Flash 图标旁边）中 输入影片的名称。若要用“控制 Shockwave或Flash ”动作对影片进行控制，必须对该影片 进行命名。如图4-45所示。H柳h吧并卜扁性Flash, 78S5K IphotoP"循环 垂F自动播煎® 旅图4-45输入影片的名称3 .选择要用于控制

19、Shockwave或Flash SWF文件的项。例如，如果具有用于播放影片 的“播放”按钮的图像，则选择该图像。4 .打开“行为”面板（“窗口 /行为”）。单击加号（+）按钮并从“动作”弹出菜单中选 择“控制 Shockwave 或Flash "。如图4-46所示。5 .出现一个参数对话框。如图4-47所示。从“影片"弹出菜单中选择一个影片。Dreamweaver 自动列出当前文档中所有Shockwave和Flash SWF文件的名称。选择是否播放、停止、倒带或转到影片中的帧。“播放”选项从动作发生的帧开始播放影片。生BF僚 弹出信a 依与匚取出你 打超帝抬盲口控司弓ha

20、cfs证Flaih钟时产皆 时即正击图府正 显东贵出三柒果 卷旺伴 也西由够第图4-46 选择“控制 Shockwave或Flash ”动作6 .确定后检查默认事件是否是所需的事件。如果不是，请从弹出菜单中选择另一个事件。如果未列出所需的事件，则在“事件”弹出菜单的“显示事件”子菜单中更改目标浏览器。图4-47 "控制Shockwave或Flash ” 对话框十、检查浏览器(Check Browser)使用“检查浏览器”动作可根据访问者不同类型和版本的浏览器将他们转到不同的页面，例如，可能想要将使用Netscape Navigator 4.0或更高版本浏览器的访问者转到某一页面，而将

21、使用Internet Explorer 4.0或更高版本的访问者转到另一页面，并让使用任何其它类型浏览器的访问者留在当前页上。若要使用“检查浏览器”动作，请执行以下操作：1 .选择一个对象并打开“行为”面板。单击“+”按钮并从“动作”弹出菜单中选择“检查浏览器”。如图4-48所示。2 .确定要如何区分访问者：根据浏览器类型、浏览器版本，还是既根据类型又根据版本。 例如，是否要让所有具有4.0版浏览器的访问者看到某一页面，而让所有其他人看到另外一页面？或者让 Netscape Navigator用户看到一页面，而让 Internet Explorer 用户看到另外一页面。5uul/Havt：或

22、Adfh 属也立音 的至庖悝 品壬RS施层 昱茁群出式女的 橙科件图4-48选择“检查浏览器”3 .跳出“检查浏览器”对话框，如图 4-49所示。指定一个 Netscape Navigator 版本。 在相邻的弹出菜单中，选择选项以指定如果浏览器是指定的Netscape Navigator 版本或更高版本时应该进行何种操作，如果是其它情况时又应该进行何种操作。选项包括“转到URL”、“转到替代URL”和“留在此页”。指定一个Internet Explorer版本。在相邻的弹出菜单中，选择选项以指定如果浏览器是指定的Internet Explorer版本或更高版本时应该进行何种操作，如果是其它情

23、况时又应该进行何种操作。选项包括“转到URL”、“转到替代URL”和“留在此页”。从“其它浏览器”弹出菜单中选择一个选项，以指定如果浏览器既不是Netscape Navigator 也不是Internet Explorer时应该进行何种操作。例如，该访问者可能正在使用一个诸如Lynx的基于文本的浏览器。“留在此页”是用于 Netscape Navigator 和 Internet Explorer之外浏览器的最佳选项，因为如果它们不能读取此行为，它们大多数不支持JavaScript，它们无论如何都会留在此页上。在对话框底部的文本框中输入URL和替代URL的路径和文件名。如果输入一个远程URL除

24、了输入WWW址之外还必须输入 http:/前缀。4 .单击“确定”。检查默认事件是否是所需的事件。如果不是，请从弹出菜单中选择另 一个事件。如果未列出所需的事件，则在“显示事件”弹出菜单中更改目标浏览器。请记住， 此行为的目的是检查是否存在不同的浏览器版本，因此最好选择一个在3.0和更高版本的浏览器上都起作用的事件。图4-49 “检查浏览器”对话框十一、检查插件(Check Plugin )使用“检查插件”动作根据访问者是否安装了指定的插件这一情况将他们转到不同的页面。例如，可能想让安装有Shockwave的访问者转到一页面，让未安装该软件的访问者转到另一页面。若要使用“检查插件”动作，请执行

25、以下操作：1 .选择一个对象并打开“行为”面板。单击加号(+)按钮并从“动作”弹出菜单中选择“检查插件”。如图4-50所示。措快声鼻早在玄讥靠耳 情古声单 出肖言露产性武dSfflWScrpt *的用正 和耀屈隼升拄图4-50选择“检查插件”2 .从“插件”弹出菜单中选择一个插件，或单击“输入”并在相邻的文本框中键入插件 的确切名称。在“如果有，转到 URL”文本框中，为具有该插件的访问者指定一个URL。如果指定一个远程URL,则必须在地址中包括 http:/ 前缀。若要让具有该插件的访问者留在同一页上， 请将此域留空。在“否则，转到URL”文本框中，为不具有该插件的访问者指定一个替代URL。

26、若要让不具有该插件的访问者留在同一页上，请将此域留空。如图4-51所示。检查默认事件是否是所需的事件。如果不是，请从弹出菜单中选择另一个事件。图4-51 “检查插件”对话框十二、跳转菜单(Jump Menu)当使用“插入/表单对象/跳转菜单”创建跳转菜单时，Dreamweaver创建一个菜单对象并向其附加一个“跳转菜单”(或“跳转菜单转到”)行为。通常不需要手动将“跳转菜单”动作附加到对象。若要使用“行为”面板编辑跳转菜单，请执行以下操作：1 .如果文档中尚无跳转菜单对象，则创建一个跳转菜单对象。2 .选择该跳转菜单对象并打开“行为”面板。在“动作”列中选择“跳转菜单”。如图4-52所示。检面

27、对筑莪检靛早这式与玩它图章这百立不调用以传单甲树转第里开用waiiA好需入斑显示事件垂眼更多币为.图4-52选择“跳转菜单”3 .在“跳转菜单”对话框中进行所需的更改，然后单击“确定”。如图4-53所示。图4-53 “跳转菜单”对话框加入跳转菜单，实际上是在表单中加入了一个列表框，同时也为该列表框附加了一个 onChange-Jump Menu的行为，该行为表示用鼠标选择列表框中的某一项时，产生onChange事件，浏览器转到指定的页面。十三、跳转菜单开始(Jump Menu Go)调用Dreamweaver的跳转菜单开始动作可给插入的跳转菜单加上一个Go按钮，单击Go按钮就会打开下拉列表中选

28、择的选项所链接的页面。如果下拉列表框出现在某个框架中，而 其选项链接的页面内容出现在其他的框架中，此时就必须添加Go按钮。调用 Jump Menu Go动作的方法如下：1 .在页面中插入一个对象，通常是一个按钮。在该按钮的属性面板的标签（Label）文本框中输入文本"Go"或其他文本，在动作 （Action）选项组中选无（None）单选按钮。2 .选中插入的按钮，打开行为面板，在弹出的动作菜单中选择“跳转菜单开始”命令， 如图4-54所示。苟安走单港整胃，诉用茁ROC 跣畀柒单图4-54选择“跳转菜单开始”3 .弹出“跳转菜单开始”对话框，在“选择跳转菜单”下拉列表中选择一个相应的跳转 菜单即可。如图4-55所示。图4-55 “跳转菜单开始”对话框十四、设置文本（Set Text）1 .设置框架文本设置框架文本动作允许动态建立框架文本，用特定的内容替换一个框架的格式和内容，此操作可动态显示信息。在调用该动作前，先要创建框架集。方法如下：选定要连接行为的对象，然后打开行为面板，在菜单中选择“设置文本/设置框架文本”命令，如图4-56所示。一置层本看置篁东就交手设置伏-文本 |图4-56设置框架

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论