WEO啦

首页 » 正文内容 » 第9章Dreamweaver行为应用

第9章Dreamweaver行为应用

时间:2023-01-26 03:30:25  热度:1°C

1、第9章 Dreamweaver 行为应用/本章学习目标/熟悉层、事件、动作的概念和相互关系 了解JavaScript脚本语言运行的环境 掌握Dreamweaver 行为面板的使用方法 掌握通过行为面板创建网页动态效果的操作过程/9/1 Dreamweaver 行为的基本概念/行为(Behaviors)是响应某一事件(Event)而采取的一个动作(Action)。行为是Dreamweaver MX 2004中最有特色的功能,它实质上是网页中调用Javascript代码,以实现网页的动态效果,但使用了Dreamweaver MX 2004的行为功能,就不需要掌握复杂的Javascript代码而轻松

2、完成一个需要几十行甚至几百行代码才能完成的功能。/9/1/1 行为面板 网页中的事件(Event)是指鼠标、键盘的响应方法,Dreamweaver MX 2004提供了许多常用的事件。 启动Dreamweaver MX 2004,单击“【窗口】【行为】”菜单命令或按Shift+F3键,系统打开“行为”面板,如图6-1-1所示。/“行为”面板主要项目功能如下: 加(+)减()按钮:用于添加或删除动作(Actions)。 动作:是网页产生的具体行为,如上图设置将产生网页时弹出一个信息窗口的网页效果。 事件:当选定某个动作时,事件右侧出现一个箭头,按此箭头产生一个事件处理的下拉菜单,通过下拉菜单可选

3、择触发动作发生的条件,以下是常见事件及描述。 OnClick:当访问者在指定的元素上单击时产生。 onDblClick:当访问者在指定的元素上双击时产生。 onKeyDown:当按下任意键的同时产生。 onKeyPress:当按下和松开任意键时产生。此事件相当于把onKeyDown和onKeyUp这两事件合在一起。/onKeyUp:当按下的键松开时产生。 onLoad:当一图像或网页载入完成时产生。 onMouseDown:当访问者按下鼠标时产生。 onMouseMove:当访问者将鼠标在指定元素上移动时产生。 onMouseOut:当鼠标从指定元素上移开时产生。 onMouseOver:当鼠

4、标第一次移动到指定元素时产生。 onMouseUp:当鼠标弹起时产生。 onSubmit:当访问者提交表格时产生。 onUnload:当访问者离开网页时产生。/9/1/2行为与浏览器的关系 虽然在网页中使用行为可以产生互动的效果,增强网页的交互性,但是,并不是所有的浏览器都支持Dreamweaver MX 2004中的行为,目前网络上使用最多的是Netscape Navigator和Internet Explorer两种浏览器,我国普遍使用Internet Explorer浏览网页,而只有IE4/0及以上版本的浏览器才可以对大多数的行为正常使用。同一个行为在不同的浏览器中显示也是不一样的,某个

5、行为可以在这个版本的浏览器里正常显示,而在另一个版本的浏览器就不能显示。/9/2 设定行为命令/9/2/1 在对象中加入行为命令 Dreamweaver MX 2004中使用行为,应使用以下一般操作步骤: (1)选择一个想要添加行为的网页元素(可以借助状态栏中的标记符选择器,例如选择可为整个网页设置行为)。 (2)选择“【窗口】【行为】”菜单命令,打开“行为”面板。 (3)单击添加行为按钮/并弹出一个菜单。/(4)在菜单中选择一个动作,系统弹出该动作的设置对话框,显示动作的参数和说明。输入动作的相关参数后单击“确定”按钮。 (5)回到行为面板,此时行为面板中增加了一个行为行,如图6-1-1所示

6、。/9/2/2 编辑行为 为对象添加行为后,有时需要改变触发行为的事件,增加、删除动作或改变动作参数等,这些都属于编辑行为的操作。 1更改事件 Dreamweaver MX 2004中设置动作时会自动创建一个事件,默认的事件有时并不是用户需要的,比如弹出消息窗口,默认事件是Onload事件,即网页加载时弹出消息窗口,但用户如果希望单击网页后弹出消息窗口,就必须更改事件为Onclick事件。/操作方法为单击“事件”栏,再单击事件旁边的 按钮,在事件下拉列表菜单中选择Onclick事件,如图6-2-1所示。事件和当前选择的网页对象是相关联的,因此事件下拉列表菜单中的内容随所选网页对象不同而变化。/

7、如果在选择了正确的网页对象后,发现所期望的事件并没有出现在事件列表菜单中,这时应尝试改变浏览器。方法是单击“+”按钮,在图6-2-2所示的弹出菜单中选择“显示事件”命令,在子菜单中选择浏览器的版本,浏览器的版本越高,支持的事件越多。默认情况下,事件列表菜单中显示的都是IE4/0能够产生的事件。当找到所期望的事件后,选择该事件,对应行为面板的相应事件将会改变。/2修改行为的动作参数 已经设置的行为,可以改变动作参数。只要双击该行为对应的“动作”栏,如图6-2-3所示,即可打开该动作的参数设置对话框,在对话框中修改各项参数。/添加行为按钮/删除行为按钮/事件列表/多动作时,可用来调整先后次序/双击

8、可设置参数/3删除行为 在行为面板上选取欲删除的行为,单击行为面板左上方的“-”按钮,或按Delete键。 4调整行为的执行顺序 一个事件可以触发多个动作,比如Onload这一事件可以触发如播放声音,打开浏览器窗口等动作。在这种情况下就存在一个动作发生的先后问题,可以通过单击行为面板中“”,“”按钮来解决这个问题,如图6-2-3所示。/9/3 创建行为实例/9/3/1实例:弹出信息框 1实例创意 网页加载时弹出信息框,如图6-3-1所示,或点击一个对象弹出信息框,比如点击图片,按钮,链接等等,都可以弹出信息框。如果某些页面的内容在别人复制之前想给一点提示,还可以选择OnCopy事件来触发弹出信

9、息框动作。/2制作步骤 方法一:调用JavaScript 使用这一行为,必须对JavaScript非常熟悉。本例中调用JavaScript的操作主要用于对整个页面的作用,即网页加载时弹出信息框,因此在插入这个行为时,按以下步骤操作: (1)打开素材库“6-3-1”文件夹中的“1/htm”网页文件,选择状态栏上的“”,单击“行为”面板中的“+”按钮,然后在行为选择菜单中选择“调用JavaScript”命令,如图6-3-2所示。/(2)弹出如图6-3-3所示的“调用Javascript”对话框,在文本框中输入需要执行的准确的JavaScript代码或函数名,例如本例键入的一行代码为: alert(

10、欢迎来到本站!)/(3)按“确定”按钮,打开“行为”面板,确定当前动作使用的事件为“onload”,如果不是,选择右边“”按钮重新选择,如图6-3-4所示。/(4)保存网页,按F12键预览,效果如图6-3-1所示,其运行的结果是当打开网页时会自动弹出图中所示的对话框。/方法二:弹出信息 对于不熟悉JavaScript代码来制作弹出信息框的用户,也可以采用这一方法。Dreamweaver MX 2004自带了弹出信息的功能菜单,以下是实现方法: (1)创建一空白网页,选择状态栏上的“”,单击“行为”面板中“+”按钮,然后在行为选择菜单中选择“弹出信息”菜单命令。 (2)系统弹出如图6-3-5所示

11、的“弹出信息”对话框,在文本框中输入需要显示的信息,如“欢迎来到本站!”,按“确定”按钮,完成设置。/(3)保存网页,按F12键预览,效果如图6-3-1所示,其运行的结果与方法一的效果一样。/9/3/2实例:打开浏览器窗口 1实例创意 打开浏览器窗口即在打开当前网页的同时,另外打开一个新的窗口,而这个新打开的窗口,可以根据自己的喜好对它的菜单、页面尺寸、滚动条等进行设置,如图6-3-6左图所示为263网站打开时弹出的“***”广告窗口,右图为本例完成后的效果图。/2制作步骤 (1)设计一个页面,作为新窗口,为了选择适当的窗口,在文档窗口显示标尺,然后从标尺上查看最合适的窗口大小,如图6-3-

12、7所示窗口采用了385250像素表格进行布局。将这个网页保存为“popwindow/htm”。/(2)创建另一个网页“index/htm”,由于是对整个页的行为,即广告窗口是在该网页加载时自动弹出,所以选择状态栏上的“”后单击行为面板的“”按钮,选择“打开浏览器窗口”菜单命令,如图6-3-8所示。/(3)系统弹出6-3-9所示“打开浏览器窗口”对话框,在“要显示的URL”文本框中输入新窗口文件的路径和文件名,也可以通过单击“浏览”按钮查找相应的路径及文件名。“窗口宽度”和“窗口高度”文本框中定义新窗口的长宽值,这里设置385250与popwindow/htm页面相对应,在“属性”中未勾选相应选

13、项,在“窗口名称”中定义窗口名称为“网页设计与制作”,最后单击“确定”按钮完成设置。/(4)如果事件窗口显示的不是Onload,则通过下拉菜单选择Onload,如图6-3-10所示。如果打算再次编辑该事件,则双击周动作栏中的“打开浏览器窗口”对这个行为进行再修改。/(5)按F12键预览,当前网页被下载的同时,也打开了一个宽度和高度分别是385250像素,定义为“网页设计与制作”的窗口,如图6-3-6右图所示。/9/3/3实例:用显示-隐藏层制作下拉菜单 1实例创意 显示-隐藏层可以对页面中所有的层进行设置,使其可显示或隐藏。本例将通过显示-隐藏层的功能制作一个网页中常见的导航用下拉菜单。下拉菜

14、单的实质是网页***有4个菜单,即菜单1、菜单2、菜单3和菜单4,相对应有4个层,即menu1、menu2、menu3和menu4,每一层即一个下拉菜单,网页加载时,这4个层全部隐藏,当鼠标移动到“菜单1”时,层menu1显示,其它层隐藏,并且鼠标继续移动到层menu1时,层menu1继续显示,其它层仍然隐藏。重复刚才的操作,完成整个下拉菜单的制作,完成后如图6-3-11所示。/2制作步骤 (1)打开素材库“6-3-3”文件夹中的“1/htm”页面,按CTRL+F2组合键打开“插入面板”,在“布局”视图下点击层按钮后在页面中按住鼠标不放拖出一个层,然后在层的“属性面板”中设置各参数,层编号框填入

15、title,左、上、宽、高框分别填入5、200、480、15,背景色填入#006699,如图6-3-12所示。/(2)将光标移至title层内,点击插入面板“常用”视图下的表格按钮,插入一个1行4列的表格,设置如图6-3-13所示,按“确定”按钮插入表格。/(3)按住CTRL键不放点击表格的四个单元格,然后设置它们的宽度均为120像素,如图6-3-14所示,并在前两个单元格中输入文字,就是主菜单名,可按自己想要的名字输入,如“平面设计”和“建站资源”为例,并加上链接,空链接可在链接文本框中输入“#”。 (4)再次使用插入面板插入一个层到刚完成的导航条的下方,各项参数填为:层编号框填入menu1

16、,左、上、宽、高框分别填入5、220、120、80,背景色填入#999966,如图6-3-15所示,其中左和高两个参数是设置这个层距离窗口左边框和上边框的距离。/(5)在menu1层中输入菜单内容。为了排版方便,使用表格制作菜单项。这个层将作为“平面设计”的下拉选单出现,填入你所需要的菜单链接。使用同样的方法,再为“建站资源”也做一个下拉选单(层menu2),层menu2及其属性如图6-3-16所示。/注意:下拉选单所在的层(menu1、menu2)的位置非常重要(由左和高两个参数决定)。它们的上边线应该紧贴导航条的下边线,这样才能保证在后面我们完成第三个步骤后,菜单能正常使用。因为如果远离导

17、航条的话,鼠标一离开导航条,菜单就消失了。 (6)按F2键打开“层面板”,其中列出了网页中的三个层,点menu1和menu2的前面一格,出现闭着的眼睛图标,这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。/(7)按住CTRL键不放点击导航条中的第一个单元格,即“平面设计”单元格,再按Shift+F3打开行为窗口,单击“+”按钮,在下拉选项中选中“显示-隐藏层”菜单命令,如图6-3-17所示。 注意:如果选项中没有这一项,则选择“显示事件”下的IE 5/0或以上,重新操作,此时“显示-隐藏层”将出现。/(8)系统弹出如图6-3-18所示“显示-隐藏层”对话框。在“命名的层”框

18、中会列出当前网页中所有的层,选中层 menu1,因为我们想要menu1这个层对“平面设计”响应。然后点下面的“显示”按钮,按“确定”完成设置。/(9)回到“行为”面板,如图6-3-19所示,点击事件下的一个向下的小箭头“”,单击后在下拉选项中选中“onMouseOver”事件。这一步的作用是实现当鼠标移至第一个单元格时,下拉选单menu1的状态变为“显示(Show)”。/(10)接下一步是让下拉选单menu1在鼠标移开第一个单元格时再变为隐藏状态。选择“平面设计”所在单元格,单击“ ”按钮,在下拉选项中选中“显示-隐藏层”菜单命令,在弹出如图6-3-20所示“显示-隐藏层”窗口中选中层 “me

19、nu1”,因为我们想要menu1这个层对“平面设计”响应。然后单击“隐藏”按钮,按“确定”按钮完成设置。/(11)回到行为面板,点击事件下的向下的小箭头 ,在下拉选项中更改为“onMouseOut”,即鼠标离开“平面设计”单元格时,层menu1隐藏。 (12)选中层menu1,方法是点击层的边缘或在层面板中点击menu1,用与导航条“平面设计”单元格部分同样的方法在层窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标在menu1层内(onmouseover)时显示,移出(onmouseout)层menu1时,层menu1就自动隐藏。最后层menu1的状态如图6-3-21所示。/(13)重

20、复以上操作,为导航条的第二个主菜单“建站资源”和层menu2添加显示-隐藏层命令。 (14)保存网页,按F12预览。/9/3/4实例:使用改变属性制作图片***影效果 1实例创意 改变属性可以动态改变某一对象的属性值。大多数行为的属性都可以修改,而且这些行为的显示效果取决于所使用的浏览器,下面制作的实例将实现图片***影效果的功能,当鼠标移至图片上时,***影效果显示,当鼠标离开图片时,***影效果消失,两种状态效果如图6-3-22所示。/2制作步骤 (1)定义素材中“source/6/6-3-4”目录为本地站点,新建网页,保存为1/htm页面,在该页面中插入一个层,将图片flower/jpg插入到该层中,调

21、整图层大小,使图层比图像略大一点,如图6-3-23所示。/(2)选择图像后,在行为选择菜单中选择“改变属性”命令,如图6-3-24所示。/(3)在弹出的对话框中作如图6-3-25所示的选择,从中可以看出,图层属性的操作选择很多,虽然只有精通HTML语言才可选择,但比直接编写HTML代码方便得多,因为这里我们可以不关心语法格式。本例效果是改变“Layer1”的背景色彩。/(4)为了得到***影效果,在“新的值”框中输入“black”(如图6-3-25所示),当然你也可以输入其他色彩名称或代码。/(5)默认的事件是“onload”,在这里用鼠标单击其右方的黑三角,在弹出的下拉选项中选择“onMouse

22、Over”(鼠标经过),如图6-3-26所示。/(6)保存网页后,按F12预览,如图6-3-22所示:当鼠标经过图片时,图片显示***影效果。/注意:鼠标离开图片,***影效果消失的效果请读者用同样的方法实现。/9/3/5实例:播放声音 1实例创意 有时浏览一些网页时,会发现当把鼠标移到链接或图像等元素上时,会听到一些声音;或者在打开一个页面时,伴随有声音效果等。在Dreamweaver中,可以通过使用控制声音行为来实现这一功能。 本例要设置的是当鼠标单击如图6-3-27所示的喇叭图标时播放音乐。/2制作步骤 (1)定义素材中“source/6/6-3-5”目录为本地站点,新建网页,保存为1/htm页

23、面,在网页中插入图片sound/gif。 (2)选择喇叭图片,单击行为面板中“+”按钮,选择行为菜单的“播放声音”命令。 (3)弹出如图6-3-28所示的对话框,在“播放声音”文本框中输入音乐文件的路径或单击“浏览”按钮浏览并选择音乐文件“sound/mid”(这是一个压缩格式的音乐文件),检查行为面板,调整该事件为“OnMouseDown”。/(4)单击行为面板“+”按钮,选择“调用JavaScript”菜单命令,弹出如图6-3-29所示对话框,在对话框中输入代码“alert(别忘记打开音箱)”,按“确定”完成设置,检查行为面板,调整该事件为“OnMouseDown”。/9/3/6实例:设置

24、图层中的文本 1实例创意 设置图层中的文本行为,可以用指定的内容来定义图层中文本的内容和格式,这些内容包括所有可用的HTML源代码。也可以重设图层中的内容和格式,但它将会保持图层的属性,包括图层背景颜色在内。/2操作步骤 (1)定义素材中“source/6/6-3-6”目录为本地站点,新建网页,保存为1/htm页面,插入一个图层,在图层中插入一个2行1列的表格,表格中分别插入两个图片(插入表格是为了更好地给图片定位)。然后插入第二个图层,这个图层用来显示提交文本,如图6-3-30所示。/(2)选择上方第一个图片,点击行为菜单“+”按钮,选择“【设置文本】【设置层文本】”菜单命令,弹出如图6-3-33所示的对话框。在“层”文本框中选择层“Layer2”,在“新建HTML”文本框中设置包括HTML标签的内容来对图层中的文本进行定义。同样,可以像设置框架中的文本一样,在其中加入一些JavaScript之类的函数,这里我们输入一句话:这里显示雕塑内容,单击“确定”完成设置。/(3)选择下面的第二个图片,设置同样的行为,只是文

温馨提示:
1. WEO啦仅展示《第9章Dreamweaver行为应用》的部分公开内容,版权归原著者或相关公司所有。
2. 文档内容来源于互联网免费公开的渠道,若文档所含内容侵犯了您的版权或隐私,请通知我们立即删除。
3. 当前页面地址:https://www.weo.la/doc/bd213f2fb58c9654.html 复制内容请保留相关链接。