《网页设计与制作教程与实训》全套电子课件教案-第六章 行为的操作

《《网页设计与制作教程与实训》全套电子课件教案-第六章 行为的操作》由会员分享，可在线阅读，更多相关《《网页设计与制作教程与实训》全套电子课件教案-第六章 行为的操作（43页珍藏版）》请在装配图网上搜索。

1、网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作第六章第六章 行为的操作行为的操作6.1 行为的基础行为的基础6.2 行为的具体应用行为的具体应用网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作本章要点本章要点l行为的基础知识 (行为的添加与行为的编辑)l行为的具体应用 (不同的行为在网页中的具体动用)网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.16.1行为的基础行为的基础 行为（behavior）指的是用户运用Dreamweaver MX2004提供给我们的JavaScript

2、功能，并将其放置在网页文档中，为响应某一个事件而执行的动作，当触发该事件时，就会执行相应动作所对应的JavaScript功能。BACKBACK网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.1.1行为的基础 行为是由事件和由该事件触发的动作构成的。设置行为的时候，在【行为】面板中，首先为对象指定行为动作，然后指定触发该动作的事件，便可以将行为添加到网页中。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作1.行为面板在Dreamweaver MX2004中，单击【窗口】|【行为】选项，打开行为控制面板 2.动作动作是内置

3、于Dreamweaver中的预先编写的JavaScript代码，在网页中运用这些动作可以发挥特定的作用，例如播放音乐、检查表单、弹出窗口等等。Dreamweaver MX 2004里提供的动作是由软件工程师精心编写的，在使用时我们可以直接通过Dreamweaver MX 2004中的【行为】面板轻松地将动作加入到网页中。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作3.认识事件事件是指网页的浏览者所执行的某种操作。例如，当浏览者单击某一个对象时，浏览器为该对象生成一个Onclick事件（鼠标单击），如果存在针对这种事件的动作，浏览器就会调用相应的JavaS

4、cript代码。不同的对象各有自己适合的触发事件。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.1.2行为的编辑1.附加行为附加行为在Dreamweaver MX 2004中，给对象附加行为时，浏览器会自动识别该对象能够接受哪些行为，不能接受哪些行为。附加行为时，可以针对一个对象设置多个行为动作。动作的执行顺序通常是按照我们设置的先后顺序来执行，也可以根据需要进行前后调整。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作2.为附加行为选择触发事件给对象附加行为时，会自动生成一个触发事件，如果想更改触发事件，可以在行为

5、面板更改。3.删除行为4.调整行为顺序5.修改行为6.设置浏览器版本网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.2 行为的具体应用6.2.1调用JavaScript“调用JavaScript”动作可以设置当触发某个事件时，调用相应的JavaScript代码，以实现某个特定的功能。BACKBACK网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.2.2 弹出消息弹出消息可以制作在载入网页时显示的弹出信息或针对某一对象设置弹出消息。此动作通常可以用来做一些警示信息或提示信息。网页设计与制作教程与实训网页设计与制作教程

6、与实训 第六章第六章 行为的操作行为的操作6.2.3转到URL使用“转到URL”动作可以在载入网页的过程中自动跳转到一个新的页面，也可以针对某一个对象设置触发事件时，跳转到另一个网页。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6.2.4弹出广告窗口使用“打开浏览器窗口”动作可以制作弹出式的广告窗口或欢迎窗口，用户还可以根据需要设置弹出窗口的某些属性。提示提示使用此行为还可以针对整个文档，让用户在打开网页的时候能随之打开另外一个小窗口，可以为本网站做一个内容简介或主要导航，增加网页的美观和实用性。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第

7、六章 行为的操作行为的操作6.2.5播放背景音乐使用“播放声音”行为可以针对当前网页设置背景音乐，还可以针对某一对象设置音乐，并可以对音乐播放进行控制，使用此行为可以给网页带来更加精彩的多媒体效果。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作1.关于音频文件的格式关于音频文件的格式在网页中设置音乐，一般所支持的音频文件类型包括*.wav、*.mid、*.au、*.aiff等文件。2.背景音乐的制作背景音乐的制作通过行为可以在网页中添加声音,也可以给整个网页设置背景音乐.网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作6

8、.2.6 时间轴行为在网页中时间轴的运用可以令网页更加富有活力。在Dreamweaver MX 2004中使用的时间轴和Flash中的时间轴非常的类似，在时间轴上通过每一帧的连续播放形成动画，在Dreamweaver MX 2004中，我们只能通过层创建时间轴动画，因此，在为某个对象创建动画的时候，必须把要创建动画的对象放到层中，层动画包括有直线动画、曲线动画和任意路径的动画。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作1.创建时间轴动画创建时间轴动画1）建立时间轴直线动画2）创建时间轴曲线动画3）创建任意路径的动画如果需要创建比较复杂的动画，可以通过“

9、录制层路径”来创建时间轴动画。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作4）修改时间轴时间轴定义好之后，可以根据需要随时进行调整。例如对关键帧进行添加和删除，对动画的路径和移动的速度进行更改等等，下面分别加以说明。（1）改变动画的起始时间（2）改变动画条长度（3）改变关键帧的位置（4）添加和删除关键帧（5）改变运动路径（6）添加和删除时间轴动画网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作2.播放时间轴播放时间轴在时间轴面板中除了使用“自动播放”来控制时间轴的播放外，还可以通过“行为”来控制时间轴的播放和停止。网页

10、设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作3.停止时间轴停止时间轴在行为面板中既可以控制时间轴的播放，还可以控制时间轴的停止。4 转到时间轴转到时间轴使用“转到时间轴帧”动作在播放过程中可以将播放指针移动到指定帧，在时间轴面板的行为通道中使用此动作，可以设置时间轴的某部分循环若干次。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作本章小节：本章小节：通过本章学习，可以对行为和时间轴的运用有了基本的掌握，行为的运用在网页设计过程中能够产生动态的特殊效果，时间轴可以为网页添加精彩的动画效果。行为和时间轴的运用如何在网页设计过

11、程中起到画龙点睛之笔，还需要进一步的练习和熟练。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作本章习题：本章习题：一判断1.在网页中，不能对纯文本附加行为。2.针对对象设置的行为会根据设置的前后顺序进行执行，不能更改它们的顺序。3.在DREAMWEAVER中创建的时间轴动画包括有直线动画、曲线动画和任意路径的动画。4.时间轴动画只能针对于层中的图像来进行。5.在网页中创建的时间轴动画在预览时会始终循环播放。6.时间轴的播放速度可以根据需要进行调整。7.为了让行为在网页中的运用更加锦上添花，浏览器的版本设置得越高越好。8.运用“弹出信息”行为可以制作在载入网

12、页时显示的弹出信息。9.如果想为网页添加背景声音，可以将“播放声音”行为的鼠标事件设置为“ONLOAD”。10.在时间轴面板上添加的关键帧显示为一个实心黑点。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作二填空1.在行为的设置中，如果想在鼠标单击对象的时候产生行为，应该将鼠标事件设置为_；想在鼠标滑过对象的时候产生行为，应该将鼠标事件设置为_。2.在浏览网页的时候如果想随之打开另外一个窗口，可以使用_-行为来实现；如果想弹出页面提示，可以通过_行为来实现3.在编辑状态下，将层拖动时间轴，创建的动画条长度默认为_帧。4.在网页中除了可以使用时间轴面板设置“自

13、动播放”外，还可以通过_控制时间轴的播放和停止。5.在时间轴上，如果想更改层的位置，需要在_进行修改。6.在时间轴上，如果想创建复杂动画，需要通过_进行设置。7.在DREAMWEAVER中，通过_菜单可以打开行为面板。8.在动画条上如果想添加关键帧，可以按下_+鼠标单击。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作三、操作题打开素材页面“htmf61.htm”,为该网页添加背景音乐；为表头图片设置弹出信息，当鼠标滑过该图片时会弹出消息。打开素材文件“htm62.htm”，在该页面中插入层，输入相应的文字，为该层创建任意路径的运动，让该层在浏览网页的时候能

14、自动循环播放。网页设计与制作教程与实训网页设计与制作教程与实训 第六章第六章 行为的操作行为的操作三、操作题打开素材页面“htmf61.htm”,为该网页添加背景音乐；为表头图片设置弹出信息，当鼠标滑过该图片时会弹出消息。打开素材文件“htm62.htm”，在该页面中插入层，输入相应的文字，为该层创建任意路径的运动，让该层在浏览网页的时候能自动循环播放。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作 6.3.1动态文本1、特色说明特色说明在网页制作中，用JavaScript可以制作许多网页特效，但要编程序总免不了要跟语句打交道。想用JavaScript的强大功能但不想

15、编程，怎么办？Dreamweaver mx 2004网页制作与设计教程第六章行为的操作Dreamweaver MX 2004的行为功能可以给我们解决这个问题。行为的主要功能就是在网页中插入JavaScript程序而无需编写代码，用它我们可以轻松地做出许许多多的网页特效。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作2、具体步骤、具体步骤(1)新建一个空白页面，在页面中输入所需要的文字，并绘制一个图层，在图层中输入文本“这是会变颜色的文字”。效果图如下：Dreamweaver mx 2004网页制作与设计教程第六章行为的操作 Dreamweaver mx 2004网页制

16、作与设计教程第六章行为的操作(2)选中页面中的文字“改变为红色”，在“属性”面板中的“链接”下拉列表框中输入“”，就将此文本设置成了可以响应鼠标事件的空链接。对“改变为蓝色”、“改变为黑色”、“改变文字。恢复文字”、“隐藏文字。显示文字”都作如此设置。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(3)选择“改变为红色”，打开行为面板，选择“改变属性”，在对话框中的“对象类型”下拉列表框中选择DIV选项，在“命名对象”下拉列表框中选择div“Layer1”选项；在“属性”选项区选择style.color选项，在“新的值”文本框中输入“red”，单击“确定”按钮，Dre

17、amweaver mx 2004网页制作与设计教程第六章行为的操作(4)触发事件选择onMouseOver选项，这样也就说当我们把鼠标悬停于“改变为红色”文本上，层内文本“这是会变颜色的文字”会变为红色。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(5)参考以上步骤，为“改变为蓝色”、“改变为黑色”分别添加相应的行为。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(6)将光标定位在“改变文字”上，选择行为“设置文本”下的“设置层文本”选项，在“设置层文本”的对话框中的“层”下接列表框中选择“层Layer1”选项，在“新建HTML”列表框中输

18、入“这是改变后的文字”，将鼠标事件更改为悬停事件。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(7)参考以上步骤，设置“恢复文字”的鼠标悬停事件为恢复Layer1，在“新建HTML”列表框中输入“这是会变颜色的文字。”Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(8)选择“隐藏文字”，选择“显示-隐藏层”行为，在“显示-隐藏层”对话框的“命名的层”列表中选择“层Layer1”选项，单击“隐藏”按钮，则Layer1就被设置了隐藏属性，将鼠标事件更改为悬停事件。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(9)参考

19、以上步骤，设置“显示文字”空链接的悬停事件为显示Layer1。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作2)改变文字的背景(1)插入一个层，并在此层写上文字“这是可以改变背景颜色的文字”。(2)在页面上写上这样的文字“点击这里可以改变下面的背景色”，选取这段文字，并将它做成空链接。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(3)选择“改变属性”动作，在对话框中的“对象类型”下拉列表框中选择DIV选项，在“命名对象”下拉列表框中选择div“Layer1”选项；在“新的值”右边的输入窗口中输入背景颜色或代码(如ffffff），行为的触发事

20、件是onClick(单击鼠标）Dreamweaver mx 2004网页制作与设计教程第六章行为的操作3)改变文字的大小(1)在页面上插入一个层，在层内输入文本“鼠标移到这段文字上，文字将被放大，鼠标移开，文字恢复原大小”。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(2)选取文本做一个空链接，选择文本，选择“改变属性”，在对话框中“对象类型”中选择“div”，在“命名对象”中选择“divlayer1”“属性”项选择“style.fontSize”；在“新的值”项中输入“36pt”，把触发事件改为鼠标移到对象上”onMouseOver“。Dreamweaver mx

21、 2004网页制作与设计教程第六章行为的操作4)变色按钮(1)插入一个一行一列的表格，若要制作多个按钮则可以插入一个多行多列的表格。(2)把表格的背景色设置为CCFFCC，单击表格的背景色设置为CCCCFF；边框设置为1，这样做的目的是使按钮产生立体感。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(3)在表格中输入按钮的名称，并把它设置居中(这时将产生一个“div”标记），为网页源代码中的“div”加个名字：button。Dreamweaver mx 2004网页制作与设计教程第六章行为的操作(4)把按钮的名称作成超链接，并在超链接上加载两个改变背景色的行为，一个触发事件为onMouseOver，新的值为#ffffcc；另一个触发事件为 onMouseOut，新的值为#ccccff；动作施加对象“div”的“button”。