《网页设计与制作》教案-第21讲 网页特效-运用行为二_第1页
《网页设计与制作》教案-第21讲 网页特效-运用行为二_第2页
《网页设计与制作》教案-第21讲 网页特效-运用行为二_第3页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

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

文档简介

1、第 21 讲 网页特效-运用行为二1.1 教学目标：u 学问目标1. 娴熟把握dreamweaver cs6 新增加的spry 炫目效果。2. 把握各自带行为制作页面动态效果。u 技能目标能运用各自带行为制作页面动态效果u 品质目标培育同学认真细致、勇于创新的精神1.2 教学重点：把握各自带行为制作页面动态效果131.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 所示。图图 4-28 选择“播放声音”动作3选择声音文件，如图 4-29 所示，一个页面的背景音乐就添加好了。4-27 选择声音文件4假如要修改背景音乐属性，在文档中选择背景音乐的图标。如图4-28 所示。图 4-28 在文档中选择背景音乐的图标5在属性检查器中，点击“参数”按钮。如图4-29 所示。图 4-2

4、9 点击“参数”按钮6修改参数，如图 4-30 所示。图 4-30 修改参数三、设置导航条图像 (set navigator bar image)使用设置导航条图像动作可以将图像转化为导航图像或者转变导航条中图像的显示及动作，或者对图像状态进行更多的把握。1首先预备 3 张长宽相同的图像文件：a.jpg, b.jpg, c.jpg(90*32)，然后在页面中插入一个导航条，在状态图像这栏里通过扫瞄添加入 a.jpg 文件，作为打开页面时候导航条显示的图像，如图 4-31 所示。这个时候行为面板如图4-32 所示。图 4-31 添加导航条图 4-32 添加导航栏后的行为面板2在页面中选中导航图像

5、，双击行为面板上的动作，打开“设置导航栏图像”对话框，分别在“鼠标经过图像”和“按下图像”后面加入b.jpg 和 c.jpg，如图 4-33 所示。图 4-33 设置导航条属性对话框1. 最终预览时候可以看到不同的导航图象变化，如图4-34 所示。图 4-34鼠标不同动作时候导航图象的状态四、预先载入图像(preload images)使用预先载入图像动作载入那些不会马上消灭在页面上面的图像到扫瞄器缓存中，例如 那些将通过行为或 javascript 换入的图像。这样可以防止图像显示时由于下载导致的延迟， 同时也便于脱机扫瞄。“交换图像”动作自动预先载入当在“交换图像”对话框中选择“预先载入图

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

7、作可以在当前窗口或指定框架中，打开一个新的页面。此操作尤其适用于通过一次单击更改两个或多个框架的内容。若要使用“转到 url”动作，请执行以下操作：1. 首先新建一个页面，在页面上插入一个按钮，可以用图片代替。选中图片打开行为面板，按“+”选择“转到url”动作，如图 4-37 所示。图 4-37 选择“转到url”动作2. 打开“转到 url”对话框，如图 4-38 所示。“打开在”选择页面打开的窗口。默认的是主窗口，假如正在编辑的页面有多个框架，那么在列表中将显示出来，就可以选择在哪个 框架中打开页面。在url 处选择要在窗口中转到的页面文件。图 4-38 “转到url”对话框“打开在”列

8、表自动列出当前框架集中全部框架的名称以及主窗口。假如没有任何框架，则主窗口是唯一的选项。留意：假如任何框架命名为 top、blank、self 或 parent，则此动作可能产生意想不到的结果。扫瞄器有时将这些名称误认为保留的目标名称。3. 设置好以后可以看到行为面板中就增加了一个行为动作，表示单击该图片就打开index.htm 页面文件。如图 4-39 所示。图 4-39 增加了该动作的行为面板4假如有多个需要替换文档内容的窗口，则重复上面的操作，直到每个需要替换文档内容的窗口都设置好跳转的url。六、拖动层(drag layer)使用该动作可以允许访问者使用拖动层的操作，比照实现某些特别的

9、效果，创建拼图玩耍，slider controls(滑动控件)以及其他的可移动的界面元素。指定访问者可以向哪个方向拖动层（水平、垂直或任意方向），访问者应当将层拖动到的目标、假如层在目标肯定数目的像素范围内是否将层靠齐到目标，当层接触到目标时应当执 行的操作和其它更多的选项。由于在访问者可以拖动层之前必需先调用“拖动层”动作，所以请确保触发该动作的大事发生在访问者试图拖动层之前。最佳的方法是使用 onload 大事，将“拖动层”附加到 body 对象上，不过也可以使用 onmouseover 大事将它附加到填满整个层的链接上（例如图像四周的链接）。需要留意的是：不能为一个已经添加了 onmou

10、sedown 或者onclick 大事的对象添加拖动层行为, 建议将此动作与 body 对象相连(使用 onload 大事)。使用“拖动层”动作，请执行以下操作：1. 插入一个图层，单击窗口状态栏左下角的<body>标记，打开行为面板，打开动作菜单， 从中选择“拖动层”命令，如图4-40 所示。弹出拖动层对话框，默认的“基本”选项卡，如图 4-41 所示。图 4-40 选择“拖动层”动作2. 在该选项卡中，从“层”下拉列表中选择可以被拖动的图层。在“移动”下拉列表中选择“受限制的”或“不受限制的选项”。选择“受限制的”选项后，可在该对话框中的上、下、左和右文本框中输入以象素为单位的

11、值，这些值是相对于图层的起始位置的值。3. 在“放下目标”的“左”和“上”文本框中输入以象素为单位的放置目标的值。放置目标指用户所拖动的层需放置的地方。当层的左上角坐标和在“左”和“上”文本框中输入 的值相匹配时，即达到了放置目标，该值是相对于扫瞄器窗口的左上角而言。单击“取得目 前位置”按钮则自动将当前图层的所在位置填入这两个文本框中。图 4-41 拖动层对话框4. 在靠齐距离文本框中输入一个以象素为单位的值，指定图层与放置目标的靠近距离， 即当拖动图层进入距放置目标指定距离的范围内时，图层将自动与放置目标对齐。假如还要 定义图层的拖动柄等动作，可以单击“高级”标签，弹出高级选项卡，如图4-

12、42 所示。5. 指定图层中用于拖动图层的区域，可在“拖拽把握点”下拉列表中选择“层内区域”选项，然后在左和上文本框中输入水平和垂直的坐标值；在宽度和高度文本框中输入拖动柄的 宽度和高度值。设置“拖拽时”选项组。假如要在拖动层时将其移动到叠放挨次的上端，可 选中“将层移至最前”复选框，选择放置层时是默认将其 “留在最上方”还是恢复z 轴。在“呼叫javascript”文本框输入javascript 代码或函数名。在“当放下时调用javascript” 文本框输入javascript 代码或函数名。图 4-42 设置高级选项七、调用 javascript (call javascript)使用该

13、动作可以很便利地加入javascript命令。可以自己编写 javascript 或使用 web 上多个免费的 javascript 库中供应的代码。1首先在页面上选择要增加行为的对象，在行为面板中按“”按钮，从弹出的动作菜单中选择“调用javascript”命令，弹出“调用 javascript”对话框，如图 4-43 所示。图 4-43 调用 javascript 对话框2在对话框的文本框中输入需执行的精确的javascript代码或函数名，例如，若要创建一个“后退”按钮，可以键入if(history.length>0)history.back()。假如已将代码封装在一个函数中，则只

14、需键入该函数的名称（例如 hogback()）。3然后查看默认大事是否是所需要的，假如该大事不是想要的，可以单击behaviors 面板中该行为的下三角按钮，从弹出的大事菜单中重新选择一个大事。八、转变属性（change property）使用该动作可以通过设定的动作触发行为，动态转变连接行为的对象属性，包括对象的颜色、尺寸和背景等。只有在格外生疏 html 和 javascript 的状况下才使用此动作。1首先在页面上选择要增加行为的对象，在行为面板中按“”按钮，从弹出的动作菜单中选择“转变属性”命令，弹出“转变属性”对话框，如图4-44 所示。图 4-44 转变属性对话框2从该对话框的“对

15、象类型”下拉列表中，选择一种需要转变属性的对象类型，在“命名对象”下拉列表中选择要转变属性的对象。在“属性”选项组中，选中“选择”单选按钮， 并从其右侧的第一个下拉列表中选择一种属性；或选中 enter(输入)单选按钮，并在其右侧的文本框中输入属性名称。在“新的值”文本框中输入新的属性值。3. 若要查看每个扫瞄器中可以更改的属性，请从扫瞄器弹出菜单中选择不同的扫瞄器或扫瞄器版本。假如正在键入属性名称，则肯定要使用该属性的精确 javascript 名称（请记住 javascript 属性是区分大小写的）。4. 最终可以依据自己需要转变大事。九、把握 shockwave 或 flash(cont

16、rol shockwave or flash)使用“把握 shockwave 或 flash”动作来播放、停止、倒带或转到 macromedia shockwave 或 macromedia flash swf 文件中的帧。 若要使用“把握 shockwave 或 flash”动作，请执行以下操作：1. 选择“插入/媒体/shockwave”或“插入/媒体/flash”分别插入 shockwave或 flash swf 文件。2. 选择“窗口/属性”并在上面左边的文本框（在 shockwave 或 flash 图标旁边）中输入影片的名称。若要用“把握 shockwave 或 flash”动作对

17、影片进行把握，必需对该影片进行命名。如图4-45所示。图4-45 输入影片的名称3. 选择要用于把握 shockwave 或 flash swf 文件的项。例如，假如具有用于播放影片的“播放”按钮的图像，则选择该图像。4. 打开“行为”面板（“窗口/行为”）。单击加号 (+) 按钮并从“动作”弹出菜单中选择“把握 shockwave 或 flash”。如图4-46所示。5. 消灭一个参数对话框。如图4-47所示。从“影片”弹出菜单中选择一个影片。 dreamweaver自动列出当前文档中全部 shockwave 和 flash swf 文件的名称。选择是否播放、停止、倒带或转到影片中的帧。“播

18、放”选项从动作发生的帧开头播放影片。图4-46 选择“把握 shockwave 或 flash”动作6. 确定后检查默认大事是否是所需的大事。假如不是，请从弹出菜单中选择另一个大事 。假如未列出所需的大事，则在“大事”弹出菜单的“显示大事”子菜单中更改目标扫瞄器 。图4-47 “把握 shockwave 或 flash” 对话框十、检查扫瞄器(check browser)使用“检查扫瞄器”动作可依据访问者不同类型和版本的扫瞄器将他们转到不同的页面， 例如，可能想要将使用 netscape navigator 4.0 或更高版本扫瞄器的访问者转到某一页面， 而将使用internet explor

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

20、器”对话框，如图4-49所示。指定一个 netscape navigator 版本。在相邻的弹出菜单中，选择选项以指定假如扫瞄器是指定的 netscape navigator 版本或更高版本时应当进行何种操作，假如是其它状况时又应当进行何种操作。选项包括“转到 url”、 “转到替代 url”和“留在此页”。指定一个 internet explorer 版本。在相邻的弹出菜单中，选择选项以指定假如扫瞄器是指定的 internet explorer 版本或更高版本时应当进行何种操作，假如是其它状况时又应当进行何种操作。选项包括“转到 url”、“转到替代 url” 和“留在此页”。 从“其它扫瞄

21、器”弹出菜单中选择一个选项，以指定假如扫瞄器既不是netscape navigator也不是 internet explorer 时应当进行何种操作。例如，该访问者可能正在使用一个诸如lynx 的基于文本的扫瞄器。“留在此页”是用于 netscape navigator 和internet explorer 之外扫瞄器的最佳选项，由于假如它们不能读取此行为，它们大多数不支持javascript，它们无论如何都会留在此页上。在对话框底部的文本框中输入 url 和替代url 的路径和文件名。假如输入一个远程url，除了输入 www 地址之外还必需输入 http:/ 前缀。4单击“确定”。检查默认大

22、事是否是所需的大事。假如不是，请从弹出菜单中选择另 一个大事。假如未列出所需的大事，则在“显示大事”弹出菜单中更改目标扫瞄器。请记住， 此行为的目的是检查是否存在不同的扫瞄器版本，因此最好选择一个在 3.0 和更高版本的扫瞄器上都起作用的大事。图4-49“检查扫瞄器”对话框十一、检查插件（check plugin）使用“检查插件”动作依据访问者是否安装了指定的插件这一状况将他们转到不同的页 面。例如，可能想让安装有 shockwave 的访问者转到一页面，让未安装该软件的访问者转到另一页面。若要使用“检查插件”动作，请执行以下操作：1 选择一个对象并打开“行为”面板。单击加号 (+) 按钮并从

23、“动作”弹出菜单中选择“检查插件”。如图4-50所示。图4-50选择“检查插件” 2从“插件”弹出菜单中选择一个插件，或单击“输入”并在相邻的文本框中键入插件的精确名称。在“假如有，转到 url”文本框中，为具有该插件的访问者指定一个 url。假如指定一个远程 url，则必需在地址中包括 http:/ 前缀。若要让具有该插件的访问者留在同一页上， 请将此域留空。在“否则，转到 url”文本框中，为不具有该插件的访问者指定一个替代 url。若要让不具有该插件的访问者留在同一页上，请将此域留空。如图4-51所示。检查默认大事 是否是所需的大事。假如不是，请从弹出菜单中选择另一个大事。图4-51 “

24、检查插件”对话框十二、跳转菜单（jump menu）当使用“插入/表单对象/跳转菜单”创建跳转菜单时，dreamweaver 创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。通常不需要手动将“跳转菜单”动作附加到对象。若要使用“行为”面板编辑跳转菜单，请执行以下操作：1. 假如文档中尚无跳转菜单对象，则创建一个跳转菜单对象。2. 选择该跳转菜单对象并打开“行为”面板。在“动作”列中选择“跳转菜单”。如图4-52所示。图 4-52 选择“跳转菜单” 3在“跳转菜单”对话框中进行所需的更改，然后单击“确定”。如图4-53所示。图 4-53 “跳转菜单”对话框加入跳转菜单，实际

25、上是在表单中加入了一个列表框，同时也为该列表框附加了一个onchange-jump menu 的行为，该行为表示用鼠标选择列表框中的某一项时，产生onchange 大事，扫瞄器转到指定的页面。十三、跳转菜单开头（jump menu go）调用 dreamweaver 的跳转菜单开头动作可给插入的跳转菜单加上一个 go 按钮，单击 go 按钮就会打开下拉列表中选择的选项所链接的页面。假如下拉列表框消灭在某个框架中，而 其选项链接的页面内容消灭在其他的框架中，此时就必需添加 go 按钮。调用 jump menu go 动作的方法如下：1. 在页面中插入一个对象，通常是一个按钮。在该按钮的属性面板的

26、标签 (label)文本框中输入文本“go“或其他文本，在动作 (action)选项组中选无 (none)单选按钮。2. 选中插入的按钮，打开行为面板，在弹出的动作菜单中选择“跳转菜单开头”命令， 如图4-54所示。图4-54选择“跳转菜单开头” 3弹出“跳转菜单开头”对话框，在“选择跳转菜单”下拉列表中选择一个相应的跳转菜单即可。如图4-55所示。图4-55 “跳转菜单开头”对话框十四、设置文本(set text)1. 设置框架文本设置框架文本动作允许动态建立框架文本，用特定的内容替换一个框架的格式和内容， 此操作可动态显示信息。在调用该动作前，先要创建框架集。方法如下：l 选定要连接行为的对象，然后打开行为面板，在菜单中选择“设置文本/设置框架文本”命令，如图4-56所示。图4-56 设置框架文本l 弹出“设置框架文本”对话框图4-57 所示。在框架下拉列表中选择目标框架。单击“get current html(获得当前 html)”按钮，复制当前框架的

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

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

最新文档

评论

0/150

提交评论