DreamweaverCS3行为.docx
- 文档编号:6606148
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:28
- 大小:511.68KB
DreamweaverCS3行为.docx
《DreamweaverCS3行为.docx》由会员分享,可在线阅读,更多相关《DreamweaverCS3行为.docx(28页珍藏版)》请在冰豆网上搜索。
DreamweaverCS3行为
DreamweaverCS3行为
行为概述
DreamweaverCS3提供了丰硕的行为,这些行为的设置为网页对象添加一些动态成效和简单的交互功能,为使那些不熟悉JavaScript或VBScript的网页设计师能够方便的设计出通过复杂的JavaScript或VBScript语言才能实现的功能。
若是熟悉JavaScript或VBScript还能够编写一些特定的行为来利用。
行为是用来动态响应用户操作、改变当前页面成效或是执行特定任务的一种方式。
行为是由对象、事件和动作组成。
例如,当用户把鼠标移动至对象上(称:
事件),那个对象会发生预概念的转变(称:
动作)。
对象是产生行为的主体。
网页中的很多元素都能够成为对象,例如:
整个HTML文档、插入的一个图片、一段文字、一个媒体文件等。
对象也是基于成对显现的标签的,在创建时第一选中对象的标签。
事件是触发动态成效的条件。
网页事件分为不同的种类。
有的与鼠标有关,有的与键盘有关,如鼠标单击、键盘某个键按下。
有的事件还和网页相关,如网页下载完毕,网页切换等。
关于同一个对象,不同版本的阅读器支持的事件种类和多少也是不一样的。
动作是最终产生的动态成效。
动态成效可能是图片的翻转、连接的改变、声音播放等。
行为能够附加到整个文档,还能够附加到连接、图象、表单元素或其他HTML元素中的任何一种,用户能够为每一个事件指定多个动作。
动作依照它们在行为面板的动作列表中列出的顺序发生。
注意:
不同的显示器支持的行为事件是不一样的。
DreamweaverCS3内置的大体行为如下图:
DreamweaverCS3行为面板
利用“行为”面板将行为附加到页元素(更具体地说是附加到标签)并修改以前所附加行为的参数。
假设要打开“行为”面板,请选择“窗口”>“行为”(SHIFT+F3)。
“行为”面板如以下图所示:
已附加到当前所选页元素的行为显示在行为列表中(面板的主区域),按事件以字母顺序排列。
若是同一个事件有多个动作,那么将以在列表上显现的顺序执行这些动作。
若是行为列表中没有显示任何行为,那么没有行为附加到当前所选的页元素。
设置“行为”面板选项:
“行为”面板具有以下选项:
显示设置事件仅显示附加到当前文档的那些事件。
事件被别离划归到客户端或效劳器端类别中。
每一个类别的事件都包括在一个可折叠的列表中,您能够单击类别名称隔壁的加号/减号按钮展开或折叠该列表。
“显示设置事件”是默许的视图。
显示所有事件按字母降序显示给定类别的所有事件。
添加行为(+):
是一个弹出菜单,其中包括能够附加到当前所选元素的动作。
当从该列表当选择一个动作时,将显现一个对话框,您能够在该对话框中指定该动作的参数。
若是所有动作都灰显,那么没有所选元素能够生成的事件。
删除(-):
从行为列表中删除所选的事件。
上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。
给定事件的动作以特定的顺序执行。
选中一个事件或动作能够更改执行的顺序。
事件是一个弹出菜单,依照所选对象的不同,显示的事件也有所不同。
若是未显示预期的事件,请检查是不是选择了正确的页元素或标签。
熟悉行为事件
行为是为响应某一具体事件而采取的一个或多个动作。
当指定的事件被触发时,将运行相应的JavaScript程序,执行相应的动作。
因此在创建行为时,必需先指定一个动作,然后再指定触发动作的事件。
行为是针对网页中的所有对象,要结合一个对象添加行为。
每一个阅读器都提供一组事件,这些事件能够与“行为”面板的“动作”(+)弹出菜单中列出的动作相关联。
当Web页的访问者与页进行交互时(例如,单击某个图像),阅读器生成事件;这些事件可用于挪用引发动作发生的JavaScript函数。
(没有效户交互也能够生成事件,例如设置页每10秒钟自动从头载入。
)DWCS3提供许多能够利用这些事件触发的经常使用动作。
依照所选对象和在“显示事件”子菜单中指定的阅读器的不同,显示在“事件”弹出菜单中的事件将有所不同。
假设要查明关于给定的页元素给定的阅读器支持哪些事件,请在您的文档中插入该页元素并向其附加一个行为,然后查看“行为”面板中的“事件”弹出菜单。
若是页上尚不存在相关的对象或所选的对象不能接收事件,那么这些事件将禁用(灰显)。
若是未显示预期的事件,那么检查是不是选择了正确的对象,或在“显示事件”弹出菜单中更改目标阅读器。
若是要将行为附加到某个图像,那么一些事件(例如onMouseOver)显示在括号中。
这些事件仅用于链接。
被选择其中之一时,DWCS3在图像周围利用a标签来概念一个空链接。
在属性检查器的“链接”文本框中,该空链接表示为javascript:
;。
若是要将其变成一个指向另一页的真正链接,您能够更改链接值,可是若是删除JavaScript链接却未用另一个链接来代替它,那么将删除该行为。
在动作选单中,越是高版本的阅读器支持的动作越多,咱们先熟悉一下它们:
行为的利用
您能够将行为附加到整个文档(即附加到body标签),还能够附加到链接、图像、表单元素或多种其它HTML元素中的任何一种。
您选择的目标阅读器确信给定的元素支持哪些事件。
不能将行为附加到纯文本。
诸如p和span等标签不在阅读器中生成事件,因此无法从这些标签触发动作。
可是,您能够将行为附加到链接。
将行为附加到纯文本,请执行以下操作:
在属性检查器的“链接”文本框中输入javascript:
;。
必然要包括冒号和分号。
提示:
您也能够在“链接”文本框中改用数字符号#。
利用数字符号的问题在于当访问者单击该链接时,某些阅读器可能跳到页的顶部。
单击“JavaScript:
;”空链接可不能在页上产生任何成效。
在文本仍处于选中状态时打开“行为”面板(“窗口”>“行为”)。
从“动作”弹出菜单当选择一个动作,输入该动作的参数,然后选择一个触发该动作的事件。
假设要更改链接文本的外观使它看上去不是一个链接,请执行以下操作:
选择“查看”-->>“代码”打开“文档”窗口的“代码”视图。
查找该链接。
在该链接的ahref标签中,插入以下属性:
style="text-decoration:
none;color:
red"。
此属性设置将禁用下划线并将文本的颜色设置为红色。
请注意,此属性是一个内联CSS样式。
应用于单个链接的内联样式覆盖应用于该链接的其它CSS样式,但不对该链接外的部份产生任何阻碍。
假设要更改页上遍地或整个站点中链接文本的外观,请利用CSS样式为链接创建一个新的样式。
您能够为每一个事件指定多个动作。
假设要附加其它行为,请执行以下操作:
在页上选择一个元素,例如一个图像或一个链接。
假设要将行为附加到整个页,请在“文档”窗口底部左侧的标签选择器中单击
标签。选择“窗口”-->>“行为”,打开“行为”面板。
单击加号(+)按钮并从“动作”弹出菜单当选择一个动作。
菜单中灰显的动作不可选择。
它们灰显的缘故可能是当前文档中缺少某个所需的对象。
例如,若是文档不包括Shockwave或MacromediaFlashSWF文件,那么“操纵Shockwave或Flash”动作为灰显。
若是所选的对象无可用事件,那么所有动作都灰显。
当您选择某个动作时,将显现一个对话框,显示该动作的参数和说明。
为该动作输入参数,然后单击“确信”。
触发该动作的默许事件显示在“事件”栏中。
若是这不是需要的触发事件,请从“事件”弹出菜单当选择另一个事件。
挪用JavaScript
“挪用JavaScript”动作许诺您利用“行为”面板指定当发生某个事件时应该执行的自概念函数或JavaScript代码行。
假设要利用“挪用JavaScript”动作,请执行以下操作:
第一在当前的页面内插入一个按钮,然后选中该按钮。
打开“行为”面板。
单击加号(+)按钮并从“动作”弹出菜单当选择“挪用JavaScript”。
如以下图:
在打开的挪用JavaScript窗口中键入:
()如以下图:
点击确信退出对话框。
并确认其缺省事件值为“OnClick”。
保留页面,点F12预览。
在那个地址为了让大伙儿对代码加倍熟悉,这时咱们能够打开代码视图。
咱们适才的操作使文件新添节了一部份代码。
如图:
转到URL
转到URL”动作在当前窗口或指定的框架中打开一个新页。
此操作尤其适用于通过一次单击更改两个或多个框架的内容。
具体制作“转到URL”动作的操作步骤:
在文档中插入一个按钮把名字改成“转到首页”,选择该按钮对象并打开“行为”面板。
单击加号(+)按钮并从“动作”弹出菜单当选择“转到URL”。
弹出转到URL对话框如下设置:
从“打开在”列表当选择URL的目标。
“打开在”列表自动列出当前框架集中所有框架的名称和主窗口。
若是没有任何框架,那么主窗口是唯一的选项。
注意:
若是任何框架命名为top、blank、self或parent,那么此动作可能产生意想不到的结果。
阅读器有时将这些名称误以为保留的目标名称。
单击“阅读”选择要打开的文档,或在“URL”文本框中输入该文档的途径和文件名。
单击“确信”,F12预览。
相应的在代码视图中增加的代码,咱们能够熟悉一下:
互换图像
“互换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行互换。
利用此动作创建按钮鼠标通过图像和其它图像成效。
插入鼠标通过图像会自动将一个“互换图像”行为添加到您的页中。
注意:
因为只有src属性受此动作的阻碍,因此您应该换入一个与原图像具有相同尺寸(高度和宽度)的图像。
不然....自己试试吧!
具体制作步骤:
1.选择“插入”-->>“图像”插入一个图像。
选择图像,在属性检查器中,在最左侧的文本框中为该图像输入一个名称。
本例命名为:
img1。
如以下图:
若是您未为图像命名,“互换图像”动作仍将起作用;建议大伙儿学习时将所有插入的图像都预先命名,那么在“互换图像”对话框中就更易区分它们。
2.选择一个对象(一般是您将互换的图像)并打开“行为”面板。
3.单击加号(+)按钮并从弹出菜单当选择“互换图像”。
弹出互换图像对话框如以下图:
4.从“图像”列表中,选择要更改的源图像。
5.单击“阅读”选择新图像文件,或在“设定源文件为”文本框中输入新图像的途径和文件名。
6.选择“预先载入图像”选项在载入页时将新图像载入到阅读器的缓存中。
单击“确信”。
点击F12预览。
相应的在代码视图中增加的代码,咱们能够熟悉一下:
打开阅读器窗口
利用“打开阅读器窗口”动作在一个在新的窗口中打开指定的URL。
您能够指定新窗口的属性(包括其大小)、特性(它是不是能够调整大小、是不是具有菜单栏等)和名称。
若是不指定该窗口的任何属性,在打开时它的大小和属性与打开它的窗口相同。
指定窗口的任何属性都将自动关闭所有其它未显式打开的属性。
例如,若是您不为窗口设置任何属性,它将以800x600像素的大小打开并具有导航条、地址工具栏、状态栏和菜单栏。
若是您将宽度显式设置为400、将高度设置为300并非设置其它属性,那么该窗口将以400x300像素的大小打开,而且不具有任何导航条、地址工具栏、状态栏、菜单栏、调整大小手柄和转动条。
具体制作进程:
创建一个按钮对象,选择对象并打开“行为”面板:
单击“阅读”选择一个文件,或输入要显示的URL。
设置以下任一选项:
窗口宽度指定窗口的宽度(以像素为单位)。
窗口高度指定窗口的高度(以像素为单位)。
导航工具栏是一行阅读器按钮(包括“后退”、“前进”、“主页”和“从头载入”)。
地址工具栏是一行阅读器选项(包括地址文本框)。
状态栏是位于阅读器窗口底部的区域,在该区域中显示消息。
菜单栏是阅读器窗口上显示菜单(例如“文件”、“编辑”、“查看”、“转到”和“帮忙”)的区域。
若是您不设置此选项,那么在新窗口顶用户只能关闭或最小化窗口。
需要时显示转动条指定若是内容超出可视区域应该显示转动条。
若是不显式设置此选项,那么不显示转动条。
若是“调整大小手柄”选项也关闭,那么访问者将不容易看到超出窗口原始大小之外的内容。
调整大小手柄指定用户应该能够调整窗口的大小,方式是拖动窗口的右下角或单击右上角的最大化按钮。
若是未显式设置此选项,那么调整大小控件将不可用,右下角也不能拖动。
窗口名称是新窗口的名称。
若是您要通过JavaScript利用链接指向新窗口或操纵新窗口,那么应该对新窗口进行命名。
此名称不能包括空格或特殊字符。
单击“确信”,点击F12预览。
相应的在代码视图中增加的代码,咱们能够熟悉一下:
显示-隐藏层
“显示-隐藏层”动作显示、隐藏或恢复一个或多个层的默许可见性。
此动作用于在用户与页进行交互时显示信息。
“显示-隐藏层”还可用于创建预先载入层,即一个最初挡住页的内容的较大的层,在所有页组件都完成载入后该层即消失(可做一个广告成效,记得在新浪见过如此的广告)。
“显示-隐藏层”动作,具体操作:
选择“插入”-->>“布局对象”-->>“层”然后在“文档”窗口中绘制一个层。
重复此步骤能够创建其它的层。
在“文档”窗口中单击取消对层的选择,然后打开“行为”面板。
单击加号(+)按钮并从“动作”弹出菜单当选择“显示-隐藏层”。
在“命名的层”列表当选择要更改其可见性的层。
单击“显示”以显示该层、单击“隐藏”以隐藏该层、或单击“默许”以恢复层的默许可见性。
如图:
对所有剩下的现在要更改其可见性的层重复以上步骤。
单击“确信”。
这时的行为面板如下图:
具体应用,当指向一个图片时显示隐藏的层,具体制作步骤:
1.插入一个事前预备好的图片;
2.选择“插入”-->>“布局对象”-->>“层”,在层内图片的说明文本。
在“文档”窗口中单击取消对层的选择,然后打开“行为”面板。
从“动作”弹出菜单当选择“显示-隐藏层”。
在“命名的层”列表中,单击“隐藏”隐藏该层。
3.选择图片,打开行为面板。
单击加号(+)按钮并从“动作”弹出菜单当选择“显示-隐藏层”。
单击“隐藏”按钮如以下图,单击确信。
4.重复上述步骤,单击加号(+)按钮并从“动作”弹出菜单当选择“显示-隐藏层”。
单击“显示”按钮如以下图,单击确信。
5.设置行为面板如以下图:
保留按F12能够预览到成效:
当鼠标移入图片时,显示相关说明文本。
假设要创建预先载入层,请执行以下操作:
在“插入”栏的“经常使用”类别中单击“绘制层”按钮,然后在“文档”窗口的“设计”视图中绘制一个较大的层。
该层必然要覆盖页上的所有内容。
在“层”面板中,将该层名称拖到层列表的顶部以指定该层应该在堆叠顺序的最前面。
若是未选择,那么选择该层,并利用层属性检查器中最左侧的文本框将其命名为“load”。
在层仍处于选中状态时,在属性检查器中将层的背景颜色设置为与页背景相同的颜色。
若是需要,在层中(该层此刻应该挡住其余的页内容)单击并键入消息。
例如“请稍候,正在载入页”或“正在载入...”,这些消息提示访问者正在发生的操作,以便他们明白该页包括有内容。
单击“文档”窗口左下角标签选择器中的
标签。在“行为”面板中,从“动作”弹出菜单当选择“显示-隐藏层”。
从“命名的层”列表当选择名为“load”的层。
单击“隐藏”。
单击“确信”。
确保行为列表中“显示-隐藏层”动作隔壁列出的事件是onLoad。
(一样情形下都是默许onload,若是不是咱们能够更改。
)
这时保留文档,按F12预览成效吧。
别忘了咱们是在学习啊!
打开相应的在代码视图看看文件中新增加的代码,如此咱们能够熟悉代码了啊!
改变属性
利用“改变属性”动作更改对象某个属性(例如层的背景颜色或表单的动作)的值。
您能够更改的属性是由阅读器决定的。
例如,您能够动态设置层的背景颜色。
只有在您比较熟悉HTML和JavaScript的情形下才利用此动作。
假设要利用“改变属性”动作,请执行以下操作:
选择一个对象并打开“行为”面板,从“动作”弹出菜单当选择“更改属性”。
从“对象类型”弹出菜单当选择您要更改其属性的对象的类型。
“命名对象”弹出菜单马上列出所有所选类型的命名对象。
从“命名对象”弹出菜单当选择一个对象。
从“属性”弹出菜单当选择一个属性,或在文本框中输入该属性的名称。
举例:
在网页中插入一个图片,而且设置图片的名字为image1,最终要求:
阅读者用鼠标单击图片时,图片变成另一幅(你要事前预备好哦!
)。
如以下图:
按上图的参数修改其属性,点击确信。
然后在行为面板中把动作改成onclick。
保留页面,F12预览。
相应的在代码视图中增加的代码,咱们能够熟悉一下:
播放声音
利用“播放声音”动作来播放声音。
例如,您可能要在每次鼠标指针滑过某个链接时播放一段声音成效,或在页载入时播放音乐剪辑,或点击某个按钮播放声音等等。
注意:
阅读器可能需要用某种附加的音频支持(例如音频插件)来播放声音。
因此,具有不同插件的不同阅读器所播放声音的成效通常会有所不同。
很难准确地预测出站点的访问者对您提供的声音感受如何。
具体操作:
插入一个按钮,选择该对象,打开“行为”面板。
如选择如下按钮打开“行为”面板,从动作当选择“播放声音”。
如图:
单击“阅读”选择一个声音文件,或在“播放声音”文本框中输入途径和文件名。
然后在行为面板中能够更改咱们的动作,在那个地址我选择的是onclick,也确实是单击按钮开始播放声音。
保留页面,F12预览。
单击按钮就会有声音播放了。
别忘了咱们是在学习啊!
打开相应的在代码视图看看文件中新增加的代码,如此咱们能够熟悉代码了啊!
弹出消息
“弹出消息”动作显示一个带有您指定的消息的JavaScript提示。
因为JavaScript提示只有一个按钮(“确信”),因此利用此动作能够提供信息,而不能为用户提供选择。
注意:
您无法操纵JavaScript提示的外观,它取决于访问者的阅读器。
若是您希望对消息的外观进行更多的操纵,可考虑利用“打开阅读器窗口”行为。
具体制作进程:
插入一个按钮,选择按钮,打开“行为”面板,从动作当选择“弹出消息”。
而且输入咱们要在消息窗口中显示的内容。
如图:
在“消息”文本框中输入您要告知阅读者的信息。
别忘了看看行为面板中设置的动作是onclick,单击“确信”,保留文档,按F12预览。
别忘了咱们是在学习啊!
打开相应的在代码视图看看文件中新增加的代码,如此咱们能够熟悉代码了啊!
跳转菜单
跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。
能够创建到整个Web站点内文档的链接、到其它Web站点上文档的链接、电子邮件链接、到图形的链接,也能够创建到可在阅读器中打开的任何文件类型的链接。
(能够当友谊连接用啊,如此站一个空间可是能够连接多个地址啊,能够增加你的网站的PR值啊)
跳转菜单可包括三个大体部份:
(可选)菜单项选择择提示,如菜单项的类别说明,或一些提示信息等。
(必需)所链接菜单项的列表:
用户选择某个选项,那么链接的文档或文件被打开。
(可选)“前去”按钮。
插入跳转菜单
跳转菜单可成立URL与弹出菜单列表中的选项之间的关联。
通过从列表当选择一项,用户将被重定向(或“跳转”)到指定的URL。
成立跳转菜单的具体工程:
新建一个文档,然后将插入点放在“文档”窗口中。
选择“插入”-->>“表单”-->>“跳转菜单”,显现“插入跳转菜单”对话框。
如图:
保留按F12预览,选择跳转菜单列表中的链接,即可打开相应的目标。
编辑更改跳转菜单项:
可更改列表顺序或项所链接到的文件,也可添加、删除或重命名项;假设要更改链接文件的打开位置,或添加或更改菜单项选择择提示,必需利用“行为”面板;假设要利用属性检查器编辑跳转菜单项,如图:
通过上面的图的内容咱们能够编辑咱们的跳转菜单。
别忘了咱们是在学习啊!
打开相应的在代码视图看看文件中新增加的代码,如此咱们能够熟悉代码了啊!
拖动层
拖动层动作许诺访问者拖动层。
利用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。
您能够指定访问者能够向哪个方向拖动层(水平、垂直或任意方向),访问者应该将层拖动到的目标、若是层在目标必然数量的像素范围内是不是将层靠齐到目标,当层接触到目标时应该执行的操作和其它更多的选项。
因为在访问者能够拖动层之前必需先挪用“拖动层”动作,因此请确保触发该动作的事件发生在访问者试图拖动层之前。
最正确的方式是(利用onLoad事件)将“拖动层”附加到body对象上,只是您也能够利用onMouseOver事件将它附加到填满整个层的链接上。
具体制作的进程如下:
选择“插入”-->>“布局对象”-->>“层”,在文档窗口中插入了一个层。
该层为:
Layer1。
咱们能够在层中插入一个图片。
通过单击“文档”窗口底部标签选择器中的
选择body标签。打开“行为”面板,从“动作”当选择“拖动层”。
如以下图:
在“层”弹出菜单中,选择要使其可拖动的层,如图:
选“层Layer1”。
从“移动”弹出菜单当选择“限制”或“不限制”。
如图:
选“不限制”。
在“左”和“上”文本框中为拖放目标输入值(以像素为单位)。
拖放目标是一个点,您想要访问者将层拖动到该点上。
当层的左坐标和上坐标与在“左”和“上”文本框中输入的值匹配时便以为层已经抵达拖放目标。
这些值是与阅读器窗口的左上角相对的。
在“靠齐距离”文本框中输入一个值(像素)确信访问者必需放目标多近,才能将层靠齐到目标。
较大的值能够使访问者较容易找到拖放目标。
注意行为面板中的动作为onload。
保留页面,F12预览。
别忘了咱们是在学习啊!
打开相应的在代码视图看看文件中新增加的代码,如此咱们能够熟悉代码了啊!
预先载入图像
“预先载入图像”动作将可不能当即出此刻网页上的图像(例如那些将通过行为或JavaScript换入的图像)载入阅读器缓存中。
如此可避免当图像应该显现时由于下载而致使延迟。
注意:
“互换图像”动作自动预先载入当您在“互换图像”对话框当选择“预先载入图像”选项时所有高亮显示的图像,因此当利用“互换图像”时您不需要手动添加预先载入图像。
具体利用预先载入图像的步骤:
插入一个对象,选择该对象,打开“行为”面板,从“动作”当选择“预先载入图像”。
单击“阅读”选择要预先载入的图像文件,或在“图像源文件”文本框中输入图像的途径和文件名。
单击对话框顶部的加号(+)按钮将图像添加到“预先载入图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DreamweaverCS3 行为