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

•第1章网页设计概述•第2章HTML语言基础•第3章Dreamweaver基础•第4章网页中的基础元素•第5章网页页面布局•第6章网页中的层和时间轴•第7章表单的应用•第8章在网页中使用行为•第9章CSS样式使用•第10章网页中的多媒体应用•第11章模板和库•第12章站点测试和发布•第13章Flash简介•第14章Fireworks简介$[知识目标]了解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，可以打开行为面板如图所示。（一）行为面板各按钮功能（二）设置浏览器版本在行为面板中，单击按钮，在“显示事件”的级联菜单中选择浏览器版本，如图所示。8.1.2使用行为面板8.1认识行为8.1认识行为•行为脚本文件有几种使用方法：•1、内部引用，直接在网页中写Javascript脚本，然后在页面中某处调用，这类脚本只能针对本网页起作用；•2、外部调用，将Javascript脚本写在一个文件中，保存为js文件，然后在其它地方引用；•3、内联使用，直接在页面中某处添加Javascript代码。（三）常见事件添加行为后，要为行为选择触发事件。选择某个行为，单击左侧的事件名称右侧的下拉箭头弹出下拉菜单，菜单列出了所选行为可以使用的触发事件，如图所示。8.1.2使用行为面板8.1认识行为1．在文档窗口中选择要增加行为的对象，例如一个图像或一个链接或一段文字。要将行为附加到整个页，请在“文档”窗口底部左侧的标签选择器中单击body标签。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转到URL8.2.5设置状态栏文本8.2.6拖动层8.2.7显示—隐藏层8.2.8检查浏览器8.2.9改变对象属性8.2.10控制Shockwave或Flash1．打开一个网页，选择行为的对象如某一图像，也可单击窗口下方的body标签，为整个页面增加行为。2．在行为面板上，单击“+”按钮，从下拉菜单中选择“播放声音”。3．打开“播放声音”对话框。4．在文本框中输入声音文件的路径和名称，也可单击“浏览”按钮，选择要播放的声音文件。5．单击“确定”按钮。在网页中出现占位符。6．在行为面板设置事件，如设为“OnLoad”。7．选中插件图标，设置属性参数中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．在行为面板设置事件，如设为“OnMouseDown”6．保存并在浏览器中测试行为。8.2.3弹出消息8.2使用Dreamwerver内置的行为1．打开一个网页，插入一个按钮（不要FORM表单），在“属性检查器”中设置“动作”为“无”。2．选中按钮。在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“转到URL”。3．打开“转到URL”对话框，如图所示。4．在“URL”框中输入要打开的文件的路径和名称，也可单击“浏览”按钮选择文件。5．单击“确定”按钮。6．在行为面板设置事件，如设为“OnMouseDown”7．保存并在浏览器中测试行为8.2.4转到URL8.2使用Dreamwerver内置的行为1．打开一个网页，选择窗口下方的body标签。2．在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“设置文本”子菜单中的“设置状态栏文本”。3．打开“设置状态栏文本”对话框，如图所示。4．输入要显示的信息，单击“确定”按钮。5．在行为面板设置事件，如设为“OnLoad”。6．保存并在浏览器中测试行为。8.2.5设置状态栏文本8.2使用Dreamwerver内置的行为1．打开一个网页，插入一个层（在布局表格外），命名为layer1，在层插入图像。2．选择窗口下方的body标签。3．在行为面板上，单击“+”按钮，打开下拉菜单选择“拖动层”。4．打开“拖动层”对话框，如图所示。5．在“基本”选项中，选择要拖动的层，其他使用默认设置。6．单击“确定”按钮，退出“拖动层”对话框。7．在行为面板设置事件为“OnLoad”。8．保存并在浏览器中测试行为。8.2.6拖动层8.2使用Dreamwerver内置的行为1．打开一个网页，输入“长影世纪城景观”，并设置空链接。2．插入一个层，命名为“Layer1”，在层中插入图像，如图所示3．选中“长影世纪城景观”，在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“显示—隐藏层”。４．打开“显示—隐藏层”对话框，如图所示。8.2.7显示—隐藏层8.2使用Dreamwerver内置的行为5．在“命名的层”中显示了所有的层，选择“Layer1”。6．单击“隐藏”按钮，然后单击“确定”，退出“显示—隐藏层”对话框。7．在行为面板设置事件为“OnMouseOut”。8．重新选择“长影世纪城景观”文本，打开“显示—隐藏层”对话框，选择“Layer1”，单击“显示”按钮，确定退出对话框将行为事件设为“OnMouseOver”。行为面板显示如图所示。10．选中网页的层，在属性检查器中设置“可见性”为“hidden”，使层初始状态为隐藏。11．保存并在浏览器中测试行为，当鼠标指向“长影世纪城景观”时，层显示，离开时层隐藏。8.2.7显示—隐藏层8.2使用Dreamwerver内置的行为1．打开一个网页，选择窗口下方的body标签。2．在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“检查浏览器”。3．打开“检查浏览器”对话框，如图所示。8.2.8检查浏览器8.2使用Dreamwerver内置的行为4．对话框各项设置如下：“NetscapeNavigator”：用于设置NetscapeNavigator浏览器的版本及打开的网页。“InternetExplorer“：用于设置InternetExplorer浏览器的版本及打开的网页。“其他浏览器”：设置对于其他浏览器的选项设置，。“URL”：用于设置要跳转的地址，单击“浏览”按钮可以选择跳转的文件。“替代URL”：用于设置替代的URL，也可以单击“浏览”按钮选择文件。5．设置完成后，单击“确定”退出对话框。6．在行为面板设置事件为“OnLoad”。7．保存并在浏览器中测试行为。8.2.8检查浏览器8.2使用Dreamwerver内置的行为1．打开一个网页，插入两个按钮，按钮动作为“无”，绘制一个层，命名为Layer1，设置层的背景颜色为浅紫色，如图所示。2．选中“粉色”按钮。在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“改变属性”。3．打开“改变属性”对话框，如图所示。8.2.9改变对象属性8.2使用Dreamwerver内置的行为4．对话框各项设置如下：“对象类型”：选择要改变的类型。选择“LAYER”“命名对象”：从下拉菜单中选择要更改属性的对象名称，选择layer“Layer1”。“属性”：设置要改变的属性名称及浏览器版本。改变背景选择“style.backgroundColor”，浏览器版本选择“IE4”。“新的值”：设置新属性的值。输入“pink”5．单击“确定”，退出对话框。6．在行为面板设置事件为“OnMouseDown”。7．选中“绿色”按钮，添加“改变属性”，设置“新的值”为“green”，事件为“OnMouseDown”。8．保存并在浏览器中测试行为。8.2.9改变对象属性8.2使用Dreamwerver内置的行为1．打开一个网页，插入两个按钮，按钮动作为“无”，插入一个Flash，在属性检查器中命名为“flash1”并将“自动播放”和“循环”选项取消，如图所示。2．选中“play”按钮。在行为面板上，单击“+”按钮，打开下拉菜单，从中选择“控制Shockwave或Flash”。3．打开“控制Shockwave或Flash”对话框，如图所示。8.2.10控制Shockwave或Flash8.2使用Dreamwerver内置的行为4．在“影片”下拉列表中选择“flash1”，“操作”选项中选择“播放”。5．单击“确定”，退出对话框。6．在行为面板设置事件为“OnClick”。7．选中“stop”按钮，添加“控制Shockwave或Flash”，“操作”选项中选择“停止”。8．保存并在浏览器中测试行为。8.2.10控制Shockwave或Flash8.2使用Dreamwerver内置的行为8.3插入行为脚本•只要把特效代码复制、粘贴到你的网页源代码中，保存，再在浏览器中打开就会看到效果了•如：设为首页spanonclick=varstrHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage(');style=CURSOR:hand设为首页/span•参考：JavaScript实用手册.CHM•特效软件：广宇超级网页特效。。。怎样在网页中插入代码•使用DreamWeaver：在编辑状态下按F10即弹出源代码窗口，将特效代码粘贴进去即可。或：[插入]→[HTML]→[脚本对象]•一般来说在网页源代码的body与/body之间的任何地方插入代码都可以（除非特别指明，例如要求插入到head与/head之间）•提示：在td与/td之间（表格中的单元格）插入代码，一般不会出错。•该怎样修改代码？插入代码之后，把代码中的文字替换成你自己的内容即可。注意：为避免出错，请不要随意改动除中文文字之外的代码，否则程序可能会不能运行！动态显示日期代码•SCRIPTla