第8章在网页中使用行为javascript-YS..ppt

网页设计和制作第1章网页设计概述第2章网页语言基础第3章Dreamweaver基础第4章网页中的基本元素第5章网页布局第6章网页中的层和时间线第7章表单的应用第8章网页中的行为第9章CSS样式在网页中使用多媒体应用第10章模板和库第12章网站测试和发布第13章Flash简介第14章Firewor Ks简介， $知识目标了解Dreamweaver行为掌握Dreamweaver内置行为添加方法掌握行为设置过程和应用方法8能力目标使用熟练的内置行为添加和应用操作掌握行为面板，第8章在网页中使用行为。 8.1理解行为8.2使用Dreamwerver的内置行为8.3插入行为脚本本章摘要，第8章在网页中使用行为，8.1理解行为，8.1.1理解行为8.1.2使用行为面板8.1.3向行为添加基本步骤8.1.4修改行为，教程：行为是一种用于动态响应用户操作、更改当前页面效果或执行特定任务的方法。行为是由对象、事件和行为组成的。1.客体：是产生行为的主体。网页中的许多元素可以成为对象，例如网页中的图片、文本段落和其他元素，或者整个网页文档。2.事件：由用户或浏览器触发的事件。事件通常针对页面元素，如鼠标经过、鼠标点击、键盘按压等。3.动作：通常是一段JavaScript代码来完成一些特殊的任务。如打开窗口时自动播放声音，弹出信息窗口等。4.行为：事件和行为的结合构成行为。事件是行为的条件，行动是行为的具体结果。8.1.1知道行为，8.1知道行为，点击菜单栏中的窗口 | 行为命令或使用组合键Shift F4，可以打开如图所示的行为面板。(1)行为面板中按钮的功能(2)设置浏览器版本在行为面板中，点击按钮，在“显示事件”的级联菜单中选择浏览器版本，如图所示。8.1.2使用行为面板，8.1知道行为，8.1知道行为，使用行为脚本文件有几种方法：1、内部引用，直接在网页中编写Javascript脚本，然后在网页中的某个地方调用，这种脚本只能用于这个网页；2.外部调用：在文件中编写Javascript脚本，将其保存为js文件，然后在其他地方引用它；3、内联使用，直接在页面的某个地方添加Javascript代码。(3)将行为添加到普通事件后，应该为行为选择触发事件。选择某个行为，单击左侧事件名称右侧的下拉箭头，弹出下拉菜单。该菜单列出了可用于所选行为的触发事件，如图所示。8.1.2使用行为面板，8.1识别行为，1。选择要在文档窗口中添加行为的对象，如图像、链接或文本段落。要将行为附加到整个页面，请在文档窗口底部左侧的标签选择器中单击标签。2.单击行为面板中的加号“”按钮，从弹出式菜单中选择一种行为。3.打开用于设置特定行为的对话框，并根据需要进行设置以完成该对话框。4.在行为面板中选择一个行为，并添加一个触发事件。6.保存网页并在浏览器中检查行为。8.1.3添加行为的基本步骤，8.1理解行为，修改和编辑设置的行为，执行下列操作之一：1。在行为面板中双击要修改的行为。2.选择要修改的行，单击行为面板上的“选项”按钮，然后选择“编辑行为”命令。8.1.4修改行为，8.2使用Dreamwerver的内置行为，8.2.1播放声音，8.2.2打开浏览器窗口，8.2.3弹出消息，8.2.4转到网址，8.2.5设置状态栏文本，8.2.6拖动层，8.2.7显示-隐藏层，8.2.8检查浏览器，8.2.9更改对象属性，8.2.10控制冲击波或闪光，1。打开网页，选择行为对象，如图像，或单击窗口2下方的标签。在行为面板上，单击“”按钮，并从下拉菜单中选择“播放声音”。3.打开“播放声音”对话框。4.在文本框中输入声音文件的路径和名称，或单击“浏览”按钮选择要播放的声音文件。5.单击“确定”按钮。占位符出现在网页中。6.在行为面板中设置事件，如“OnLoad”。7.选择插件图标，并在属性参数8中设置autostart=true8。在浏览器中保存并预览网页以查看效果。8.2.1播放声音，8.2使用Dreamwerver的内置行为，1。打开网页，选择行为的对象，如图像，如选择图像。2.在行为面板上，单击“”按钮，并从下拉菜单中选择“打开浏览器窗口”。3.打开“打开浏览器窗口”对话框，如图所示。4.设置对话框并点击“确定”按钮。5.在行为面板中设置事件，如“onmouseover”6。在浏览器中保存并测试行为。8.2.2打开浏览器窗口，8.2使用Dreamwerver的内置行为，1。打开网页并选择行为对象，如选择图像。2.在行为面板上，单击“”按钮打开下拉菜单并选择“弹出消息”。3.打开“弹出消息”对话框，如图所示。4.输入要显示的信息，然后单击“确定”按钮。5.在行为面板中设置事件，如“on mousedown”6。在浏览器中保存并测试行为。8.2.3弹出消息，8.2使用Dreamwerver的内置行为，1。打开一个网页，插入一个按钮(不是FORM表单)，并在“属性检查器”中将“操作”设置为“无”。2.选择按钮。在行为面板上，单击“”按钮打开下拉菜单并选择“转到网址”。3.打开“转到网址”对话框，如图所示。4.在“网址”框中输入要打开的文件的路径和名称，或单击“浏览”按钮选择文件。5.单击“确定”按钮。6.在行为面板中设置事件，如“on mousedown”7。在浏览器中保存并测试行为，8.2.4转到网址，8.2使用在Dreamwerver 1中构建的行为。打开网页并选择窗口底部的标签。2.在行为面板上，单击“”按钮打开下拉菜单，并从子菜单“设置文本”中选择“设置状态栏文本”。3.打开“设置状态栏文本”对话框，如图所示。4.输入要显示的信息，然后单击“确定”按钮。5.在行为面板中设置事件，如设置为“OnLoad”。6.在浏览器中保存并测试行为。8.2.5设置状态栏文本，8.2使用Dreamwerver的内置行为，1。打开一个网页，插入一个图层(在布局表之外)，命名为layer1，然后在图层中插入一个图像。2.选择窗口底部的标签。3.在行为面板上，单击“”按钮，打开下拉菜单并选择“拖动层”。4.打开“拖动层”对话框，如图所示。5.在“基本”选项中，选择要拖动的图层，并为其他图层使用默认设置。6.单击“确定”退出“拖动层”对话框。7.在行为面板中将事件设置为“OnLoad”。8.在浏览器中保存并测试行为。8.2.6拖动图层，8.2使用Dreamwerver的内置行为，1。打开网页，输入“长影世纪城市景观”，并设置一个空链接。2.插入一个图层，并将其命名为“图层1”。将图像插入图层，如图所示。3.选择“长影世纪城市景观”。在行为面板上，单击“”按钮打开下拉菜单并选择“显示-隐藏层”。4.打开“显示-隐藏层”对话框，如图所示。8.2.7显示-隐藏层，8.2使用Dreamwerver的内置行为，5。显示命名图层中的所有图层，并选择图层1。6.单击“隐藏”按钮，然后单击“确定”退出“显示-隐藏层”对话框。7.在行为面板中将事件设置为“OnMouseOut”。8.重新选择“长影世纪城市景观”文本，打开“显示-隐藏图层”对话框，选择“图层1”，点击“显示”按钮，确认退出对话框，将行为事件设置为“OnMouseOver”。行为面板显示如图所示。10.选择网页的图层，并在属性检查器中将“可见性”设置为“隐藏”，以隐藏图层的初始状态。11.在浏览器中保存并测试行为。当鼠标指向“常颖世纪城景观”时，会显示图层，离开时会隐藏图层。8.2.7显示-隐藏层，8.2使用Dreamwerver的内置行为，1。打开网页并选择窗口底部的选项卡。2.在行为面板上，单击“”按钮打开下拉菜单并选择“检查浏览器”。3.打开“检查浏览器”对话框，如图所示。8.2.8检查浏览器，8.2使用Dreamwerver的内置行为，4。对话框设置如下：“NetscapeNavigator”:用于设置NetscapeNavigator浏览器的版本和打开的网页。“网络浏览器”:用于设置网络浏览器的版本和打开网页。“其他浏览器”:为其他浏览器设置选项设置。“网址”:用于设置地址跳转。单击“浏览”按钮选择要跳转的文件。“替代网址”:用于设置替代网址，或点击“浏览”按钮选择一个文件。5.设置完成后，单击“确定”退出对话框。6.在行为面板中将事件设置为“OnLoad”。7.在浏览器中保存并测试行为。8.2.8检查浏览器，8.2使用Dreamwerver内置行为，1。打开一个网页，插入两个按钮，按钮动作为无，绘制一个图层，命名为图层1，设置图层的背景颜色为浅紫色，如图所示。2.选择“粉色”按钮。在行为面板上，单击“”按钮打开下拉菜单并选择“更改属性”。3.打开“更改属性”对话框，如图所示。8.2.9更改对象属性，8.2使用Dreamwerver的内置行为，4。对话框设置如下：对象类型:选择要更改的类型。选择“图层”命名对象：从下拉菜单中选择要更改其属性的对象的名称，然后选择图层“图层1”。“属性”:设置要更改的属性名称和浏览器版本。更改背景并为浏览器版本选择“style.backgroundColor”和“IE4”。“新值”:设置新属性的值。输入“PINK”5。单击“确定”退出对话框。6.在行为面板中将事件设置为“OnMouseDown”。7.选择“绿色”按钮，添加“更改属性”，将“新值”设置为“绿色”，将事件设置为“OnMouseDown”。8.在浏览器中保存并测试行为。8.2.9更改对象属性，8.2使用Dreamwerver的内置行为，1。打开一个网页，插入两个按钮，按钮动作为“无”，插入一个Flash，在属性检查器中命名为“flash1”并取消“自动播放”和“循环”选项，如图所示。2.选择“播放”按钮。在行为面板上，单击“”按钮打开下拉菜单，并选择“控制冲击波或闪光”。3.打开“控制冲击波或闪光”对话框，如图所示。8.2.10控制冲击波或闪光，8.2使用梦想成真的内置行为，4。在“电影”下拉列表中选择“flash1”，在“操作”选项中选择“播放”。5.单击确定退出对话框。6.在行为面板中将事件设置为“OnClick”。7.选择“停止”按钮，添加“控制冲击波或闪光”，并在“操作”选项中选择“停止”。8.在浏览器中保存并测试行为。8.2.10控制冲击波或闪光、8.2使用Dreamwerver的内置行为和8.3插入行为脚本。只要您将特殊效果代码复制并粘贴到您的网页源代码中，保存它，并在浏览器中打开它，您就会看到效果。例如，将主页设置为主页参考：JavaScript实用程序手册。CHM特效软件：光宇超级网页特效。如何将代码插入到网页中，使用DreamWeaver:编辑时按F10，弹出源代码窗口并将特效代码粘贴到其中。或者：插入HTML脚本对象一般来说，您可以在网页的源代码之间或之中的任何位置插入代码(除非另有说明，例如，需要在和之间)。提示：您可以在和(表格中的单元格)之间插入代码，不会出错。如何修改代码？插入代码后，用您自己的内容替换代码中的文本。注意：为避免出错，请不要随意改动除中文文字之外的代码，否则程序可能会不能运行！动态显示日期代码瓦周如果（新日期().getDay()=0)周=星期日如果（新日期().getDay()=1)week=星期一如果（新日期().getDay()=2)week=星期二如果（新日期().getDay()=3)week=星期三如果（新日期().getDay()=4)week=星期四如果（新日期().getDay()=5)周=星期五如果（新日期().getDay()=6)周=星期六document.writeln(今天是： 新日期(). getYear()年（新日期(). getMonth() 1)月新日期(). getDate()日一周)；图片鼠标滚轮缩放，在页面头部加代码：functionimg_zoom(e，o) varzoom=ParSeint(o . style。缩放，10)| | 100；缩放=event.wheelDelta/12；如果(缩放0)o . style。缩放=缩放%；returnfalse在图片位置加代码：双击页面自动滚屏效果，/考到之后varcurrentpos，定时器；functioninitialize() timer=SetInterval( scroll window()，1)；/时间间隔函数sc()清除间隔(计时器)； functionscrollwindow() window。滚动(0，2)；/步长文档。on mousedown=sc文档。在blclick=初始化时，在鼠标后面跟着一串飘动的字符嘿spanstyleCOLOR:#00cccc .FONT-FAMILY:宋体；FONT-size :10 pt。位置：绝对；TOP:-50px .VISIBILITY:visib