收藏 分享(赏)

cha06--为网页添加行为.ppt

上传人:无敌 文档编号:8415 上传时间:2018-03-03 格式:PPT 页数:41 大小:8.33MB
下载 相关 举报
cha06--为网页添加行为.ppt_第1页
第1页 / 共41页
cha06--为网页添加行为.ppt_第2页
第2页 / 共41页
cha06--为网页添加行为.ppt_第3页
第3页 / 共41页
cha06--为网页添加行为.ppt_第4页
第4页 / 共41页
cha06--为网页添加行为.ppt_第5页
第5页 / 共41页
点击查看更多>>
资源描述

1、第6章 为网页添加行为,(时间:2次课,4学时),行为是网页制作中一个不可缺少的重要元素,通过为网页添加行为可以增加网页动态效果。在Dreamweaver软件中,网页制作过程中的一些基本行为,都集成到了【行为】面板上,通过单击鼠标添加相应的行为,就可以将行为应用到网页中。在本章内容中,将具体介绍行为的基本知识和使用方法。,第6章 为网页添加行为,第6章 为网页添加行为,6.1 行为6.2 事件6.3 添加、修改和删除行为6.4 打开浏览器窗口6.5 交换图像6.6 显示-隐藏元素6.7 设置状态栏文本6.8 弹出信息6.9 上机练习制作特效网站6.10 思考与练习,6.1 行为,行为是预置的J

2、avaScript程序库,使用行为可以使网页制作人员不在编程就可实现一些程序动作,如交换图像、打开浏览器窗口等。 行为是由对象、事件和动作构成,当指定的事件被触发时,将运行相应的JavaScript程序,执行相应的动作。所以在创建行为时,必须先指定一个动作,然后再指定触发动作的事件。行为是针对网页中的所有对象,要结合一个对象添加行为。 在将行为附加到网页元素之后,只要对该元素触发了所制定的事件,浏览器就会调用与该事件关联的动作,例如,如果将【交换图像】动作附加到某个图片并指定它将由onMouseOver事件触发,那么只要访问者在浏览器中用鼠标指针指向该图片,该图片将转换成另一张图片。 Drea

3、mweaver CC提供的行为可使用户迅速给页面中的内容添加行为、为行为设置事件、修改事件和删除事件等操作,通过简单的管理操作,即可完成各类网页的设计。,6.1 行为,在Dreamweaver CC中添加行为和对行为进行控制,主要是通过【行为】面板来实现的。选择【窗口】|【行为】命令或者按Shift+F4组合键,即可打开【行为】面板,如图6.1所示。该面板中包含以下4种按钮:【添加行为】 按钮:弹出一个菜单,在此菜单中选择其中的命令,会弹出一个对话框,在对话框中设置选定动作或事件的各个参数。如果弹出菜单中的所有选项都为灰色,则表示不能对所选的对象添加动作或事件。【删除事件】 按钮:单击此按钮可

4、以删除列表中所选的事件和动作。【增加事件值】 按钮:单击此按钮可以向上移动所选的事件和动作。【降低事件值】 按钮:单击此按钮可以向下移动所选的事,图6.1 行为面板,6.2 事件,事件是浏览器生成的消息,指示该页的访问者执行了某种操作。例如,当将鼠标指针移动到某个链接上时,浏览器将为该链接生成一个onMouseOver事件;然后浏览器查看是否存在行为,在触发事件时浏览器应该调用的JavaScript代码。不同的网页元素定义了不同的事件。 每个浏览器都提供一组事件,这些事件可以与【行为】面板的动作弹出式菜单中列出的动作相关联。在【行为】面板中,单击【显示所有事件】 按钮,将显示当前标签的所有事件

5、,如图6.2所示。下面将对主要的行为事件进行介绍。onBlur:当特定元素停止作为用户交互的焦点时触发该事件。onClick:单击选定元素(如超链接、图片、按钮等)将触发该事件。onDblClick:双击选定元素将触发该事件。,图6.2 当前标签的所有事件,6.2 事件,onError:在文档或图像加载过程中发生错误时触发该事件。onFocus:当指定元素成为焦点时,将触发该事件。onKeydown:键盘按下不放时,将触发该事件。onKeyPress:键盘按下并放开时,将触发该事件。onKeyUp:键盘松开时,将触发该事件。onLoad:当图片或页面完成装载后触发该事件。onMouseDown

6、:当用户按下鼠标按钮时触发该事件。onMouseMove:当鼠标指针停留在对象边界内时触发该事件。onMouseOut:当鼠标指针离开对象边界时触发该事件。onMouseOver:当鼠标首次移动指向特定对象时触发该事件。onMouseUp:当按下的鼠标按钮被释放时触发该事件。onUnload:离开页面时触发该事件。,6.3 添加、修改和删除行为,若要添加行为,在【行为】面板中,单击【添加行为】 按钮将弹出行为列表,列表中包含了常用的交换图像、弹出信息和打开浏览器窗口等动作,如图6.3所示。选择列表中的动作即可添加行为。 若要修改触发的事件方式,需要单击事件右侧的下三角按钮,在弹出的列表中对事件

7、进行更改即可,如图6.4所示。 若要对添加的动作进行修改,可以通过【行为】面板进行修改。双击要更改的行为动作,在弹出的对话框中对已有的设置进行修改,设置完成后,单击【确定】按钮即可完成对动作的修改。,图6.3 行为列表,图6.4 事件列表,6.3 添加、修改和删除行为,若要删除所添加的已有行为,在【行为】面板中的列表框中选中该行为,然后单击【行为】面板中的【删除事件】 按钮即可将行为删除。 添加和修改行为的具体操作步骤如下:(1)启动Dreamweaver CC软件,新建一个空白HTML文档,打开【行为】面板。单击【添加行为】 按钮,在弹出的列表中选择【弹出信息】命令,如图6.5所示。(2)在

8、弹出的【弹出信息】对话框中的【消息】文本框中,输入文本“对不起,您访问的网页出错!”,如图6.6所示。,图6.5 选择【弹出信息】命令,图6.6 【弹出信息】对话框,6.3 添加、修改和删除行为,(3)单击【确定】按钮。单击【onLoad】事件右侧的下三角按钮,在弹出的列表中选择【onError】事件,如图6.7所示。(4)选择添加的行为,【行为】面板中的单击【删除事件】 按钮,将添加的行为删除,如图6.8所示。,图6.7 选择【onError】命令,图6.8 将添加的行为删除,6.4 打开浏览器窗口,使用【打开浏览器窗口】动作可以在网页中实现不同浏览器窗口的切换。添加【打开浏览器窗口】动作的

9、具体步骤如下:(1)选择【文件】|【打开】命令,打开随书附带光盘中的CDROM素材Cha06 001.html文件,在网页第一行的表格中,选择要添加行为的图标,如图6.9所示。(2)选择【窗口】|【行为】命令,弹出【行为】面板,单击行为面板中的 按钮,选择【打开浏览器窗口】命令,如图6.10所示。,图6.9 选择要添加行为的图标,图6.10 选择【打开浏览器窗口】命令,6.4 打开浏览器窗口,(3)在弹出的【打开浏览器窗口】对话框中的【要显示的URL】右面单击【浏览】按钮,选择CDROM素材Cha06 imagetubiao.jpg文件,如图6.11所示。(4) 单击【确定】按钮,在【打开浏览

10、器窗口】对话框中,将【窗口名称】设置为显示图标,如图6.12所示。(5)单击【确定】按钮,返回【行为】面板,查看添加的行为,如图6.13所示。,图6.11 选择tubiao.jpg文件,图6.12 【打开浏览器窗口】对话框,图6.13 查看添加的行为,6.4 打开浏览器窗口,(6) 保存网页文档,按F12键在浏览器中打开网页,单击页面首行的图标时即可看到打开浏览器窗口的效果,如图6.14所示。 如果使用的默认浏览器为IE浏览器,按F12键在浏览器中打开添加行为的网页时,将弹出提示对话框,若要运行添加的行为,需要单击【允许阻止的内容】按钮即可,如图6.15所示。,图6.14 打开浏览器窗口的效果

11、,图6.15 单击【允许阻止的内容】按钮,6.5 交换图像,【交换图像】是指当鼠标指针经过图片时,原图像会变成另一张图像。 一个交换图像其实是由两种图像组合而成的:第一张图像(当页面显示时的图像)和交换图像(当鼠标经过第一图像时显示的图像)组成图像交换的两张图像必须有相同的尺寸,如果两张图像的尺寸不同Dreamweaver CC软件会自动将第二张图像的尺寸调整成与第一张同样大小。 创建【交换图像】的具体操作步骤如下。(1) 继续对上一章节中的网页进行操作,选择第二行表格中的图片,如图6.16所示。(2) 选择菜单中【窗口】|【行为】命令,打开【行为】面板,在面板中单击添加行为按钮 ,在弹出的菜

12、单中选择【交换图像】命令,如图6.17所示。,图6.16 选择图片,图6.17 选择【交换图像】命令,6.5 交换图像,(3) 在弹出的【交换图像】对话框中选择【图像“Image1”】,单击【设定原始档为】文本框右侧的【浏览】按钮,如图6.18所示。(4) 在弹出的【选择图像源文件】对话框中选择CDROM素材Cha06 imageolympus.jpg文件,如图6.19所示。(5) 单击【确定】按钮,将图像添加,如图6.20所示。,图6.18 【交换图像】对话框,图6.19 选择图片,图6.20 添加图像,6.5 交换图像,(6) 单击【确定】按钮之后,在【行为】面板中即可看到添加的行为,如图

13、6.21所示。(7) 保存网页文档,按F12键在浏览器中浏览网页效果,如图6.22所示。当鼠标移至添加了行为的图像上时,图像即发生改变,如图6.23所示。,图6.21 查看添加的行为,图6.22 网页效果,图6.23 交换图像效果,6.6 显示-隐藏元素,Dreamweaver CC中的【显示-隐藏元素】动作的作用是在特定事件被触发时将选定的对象隐藏或将隐藏的对象显示。 创建【显示-隐藏元素】的具体操作步骤如下。(1) 继续对上一章节中的网页进行操作,选择第三行表格中的图片,在【属性】面板中,将【ID】设置为a1,如图6.24所示。(2) 打开【行为】面板,在面板中单击添加行为按钮 ,在弹出的

14、菜单中选择【显示-隐藏元素】命令,如图6.25所示。,图6.24 设置【ID】,图6.25 选择【显示-隐藏元素】命令,6.6 显示-隐藏元素,(3)在弹出的【显示-隐藏元素】对话框中,选择【img “a1”】,然后单击【隐藏】按钮,如图6.26所示。单击【确定】按钮,返回【行为】面板查看添加的行为,如图6.27所示。(5) 在页面中选择第三行表格中的“显示图像”文本,打开【行为】面板,在面板中单击添加行为按钮 ,在弹出的菜单中选择【显示-隐藏元素】命令。在弹出的【显示-隐藏元素】对话框中,选择【img “a1”】,然后单击【显示】按钮,如图6.28所示。,图6.26 单击【隐藏】按钮,图6.

15、27 查看添加的行为,图6.28 单击【显示】按钮,6.6 显示-隐藏元素,单击【确定】按钮之后,返回【行为】面板查看添加的行为,如图6.29所示。(7)保存网页文档,按F12键在浏览器中打开网页,单击第三行图片后图片将隐藏,如图6.30所示。单击【显示图像】文字后,图片将显示,如图6.31所示。,图6.29 查看添加的行为,图6.30 隐藏图片,图6.31 显示图片,6.7 设置状态栏文本,若要设置网页浏览时状态栏提示的信息,可以添加【设置状态栏文本】行为。 在适当的触发事件触发后在状态栏中显示信息,设置状态栏文本动作的作用与弹出信息动作很相似,不同的是如果使用弹出信息来显示文本,访问者必须

16、的单击确定按钮才可以继续浏览网页中的内容,而在状态栏中显示的文本信息不会影响访问者的浏览速度。 添加【设置状态栏文本】的具体操作步骤如下:(1)继续对上一章节中的网页进行操作,选择【body】标签,打开【行为】面板,单击面板中的添加行为按钮 ,在弹出的菜单中选择【设置文本】|【设置状态栏文本】命令,如图6.32所示。 在弹出的【设置状态栏文本】对话框中,在【消息】文本框中输入文本【欢迎访问网页!】,如图6.33所示。,图6.32 选择【设置状态栏文本】命令,图6.33 输入文本,6.7 设置状态栏文本,(3) 单击【确定】按钮之后,将行为添加到【行为】面板中,将事件更改为【onLoad】,如图

17、6.34所示。(4) 保存网页文档,按F12键在浏览器中浏览效果,如图6.35所示。,图6.34 将事件更改为【onLoad】,图6.35 浏览效果,6.8 弹出信息,添加【弹出信息】行为后,网页将在触发特定的事件时弹出消息提示框,能给予访问者提示信息。 添加【弹出信息】的具体操作步骤如下:(1) 继续对上一章节中的网页进行操作,选择【body】标签,然后打开【行为】面板,单击面板中的添加行为按钮 ,在弹出的菜单中选择【弹出信息】命令,如图6.36示。(2) 在弹出的【弹出信息】对话框中,在【消息】文本框中输入文本【您现在访问的是首页。】,如图6.37所示。,图6.36 选择【弹出信息】命令,

18、图6.37 输入消息文本,6.8 弹出信息,(3)单击【确定】按钮,在【行为】面板中查看添加的行为,如图6.38所示。(4)保存网页文档,按F12键在浏览器中打开网页,网页弹出信息对话框,如图6.39所示。,图6.38 查看添加的行为,图6.39 网页弹出信息对话框,6.9 上机练习-制作特效网站,下面介绍制作特效网站的制作方法,效果如图6.40所示。具体的操作步骤如下:(1)启动Adobe Dreamweaver CC软件后,在打开的界面中单击新建选项组中的HTML按钮,新建空白网页文档,如图6.41所示。(2)单击【属性】面板中的【页面属性】按钮,弹出【页面属性】对话框,在【分类】列表框中

19、选择【外观HTML】,将【背景】设置为#4E251F,将【左边距】设置为85,如图6.42所示。,图6.40 特效网站的效果,图6.41 新建空白网页文档,图6.42 【页面属性】对话框,6.9 上机练习-制作特效网站,(3) 单击【确定】按钮,在菜单栏中选择【插入】|【表格】,弹出【表格】对话框,将【行数】设置为5,将【列】设置为1,将【表格宽度】设置为820像素,将【边框粗细】设置为0像素,如图6.43所示。(4) 单击【确定】按钮即可插入一个5行1列的表格,将光标置入第一行单元格中,在菜单栏中选择【插入】|【图像】|【图像】命令,弹出【选择图像源文件】对话框,选择随书附带光盘中的CDRO

20、M素材Cha06大图.jpg素材图片,如图6.44所示。(5) 单击【确定】按钮,将图像插入表格,效果如图6.45所示。,图6.43 【表格】对话框,图6.44 【选择源文件】对话框,图6.45 插入图片后的效果,6.9 上机练习-制作特效网站,将光标置入第二行单元格中,在【属性】面板中单击【拆分单元格为行或列】 按钮,弹出【拆分单元格】对话框,选择【列】单选按钮,将【列数】设置为5,如图6.46所示。(7)将光标放置在拆分后的最左侧的单元格内,按Ctrl+Alt+I组合键打开【选择图像源文件】对话框,在该对话框中选择随书附带光盘中的CDROM素材Cha06首页.png,如图6.47所示。(8

21、)使用同样的方法在剩余的单元格依次插入图像:产品简介.png、新闻.png、在线咨询.png、关于我们.png,设置完成后的效果如图6.48所示。,图6.46 【拆分单元格】对话框,图6.47 【选择图像源文件】对话框,图6.48 插入图像后的效果,6.9 上机练习-制作特效网站,(9)将光标置入第三行单元格内,在菜单栏中选择【插入】|【表格】命令,弹出【表格】对话框,将【行数】设置为1,将【列】设置为2,将【表格宽度】设置为820像素,如图6.49所示。(10)单击【确定】按钮,将光标放置在新插入表格的左侧单元格内,将其【宽】设置为220,将【水平】设置为居中对齐,将【垂直】设置为【顶端】。

22、将光标放置在新插入表格的右侧单元格内,在【属性】面板中将其【宽】设置为600,将【水平】设置为居中对齐,将【垂直】设置为居中,如图6.50所示。(11)继续将表格放置在右侧的单元格中,在菜单栏中选择【插入】|【表格】命令,弹出【表格】对话框,将【行数】设置为5,将【列】设置为3,将【表格宽度】设置为600像素,如图6.51所示。,图6.49 【表格】对话框,图6.50 设置表格属性,图6.51 【表格】对话框,6.9 上机练习-制作特效网站,(12) 单击【确定】按钮插入表格,选择第一行的单元格,单击鼠标右键,在弹出的快捷菜单中选择【合并单元格】命令,如图6.52所示。(13) 选择第一行单元

23、格,在【属性】面板中将【水平】设置为居中对齐,将【垂直】设置为居中,将【高】设置为40,如图6.53所示。(14) 选择第3行单元格和第5行单元格,在【属性】面板中将【水平】设置为居中对齐,将【垂直】设置为居中,将【高】设置为30,如图6.54所示。,图6.52 选择【合并单元格】命令,图6.53 设置单元格属性,图6.54 设置单元格属性,6.9 上机练习-制作特效网站,(15) 将光标置入第2行单元格中的最左侧的单元格中,按Ctrl+Alt+I组合键弹出【选择图像源文件】对话框,选择随书附带光盘中的CDROM素材Cha06黑巧克力.jpg素材图片,如图6.55所示。(16) 单击【确定】按

24、钮插入图像,将光标置入第2个单元格中,使用同样的方法插入图像白巧克力.jpg,效果如图6.56所示。(17) 使用同样的方法再其它单元格中插入图像,完成后的效果如图6.57所示。,图6.55 【选择图像源文件】对话框,图6.56 插入图像,图6.57 插入图像后的效果,6.9 上机练习-制作特效网站,(18) 然后在单元格中输入文字,效果如图6.58所示。(19) 选择第一行的文字,在【属性】面板中单击【字体】右侧的 按钮,在弹出的菜单中选择【管理字体】命令,弹出【管理字体】对话框,在该对话框中选择【自定义字体堆栈】选项卡,在【可用字体】列表框中选择【华文新魏】,然后单击 按钮,将其添加至【选

25、择的字体】列表框中,如图6.59所示。(20) 然后单击【完成】按钮,将【字体】设置为华文新魏,将【大小】设置为30,将字体颜色设置为#FF0,如图6.60所示。,图6.58 输入文字后的效果,图6.59 【管理字体】对话框,图6.60 设置字体,6.9 上机练习-制作特效网站,(21) 选择【黑巧克力】文字,在【属性】面板中将【字体】设置为华文新魏,将【大下】设置为24,将字体颜色设置为【#FFF】,如图6.61所示。 使用同样的方法设置其他的文字,设置完成后的效果如图6.62所示。(23) 将光标置入如图6.63所示的单元格中,在【属性】面板中将【背景颜色】设置为#540000。在菜单栏中

26、选择【插入】|【表格】命令,弹出【表格】对话框。,图6.61 设置字体,图6.62 设置完成后的效果,图6.63 将光标置入单元格中,6.9 上机练习-制作特效网站,在对话框中将【行数】设置为2,将【列】设置为1,将【表格宽度】设置为220像素,将【边框粗细】设置为0,如图6.64所示。单击【确定】按钮,将光标置入刚刚插入的表格的第一行,在属性面板中将【水平】设置为【居中对齐】,将【垂直】设置为居中,将【高】设置为55,如图6.65所示,(26) 将光标置入第二行单元格中,按Ctrl+Alt+T组合键打开【表格】对话框,将【行数】设置为7,将【列】设置为1,将【表格宽度】设置为220像素,将【

27、边框粗细】设置为0,如图6.66所示。,图6.66 【表格】对话框,图6.65 设置表格属性,图6.64 【表格】对话框,6.9 上机练习-制作特效网站,(27) 选择刚刚插入表格的所有单元格,将【水平】设置为【居中对齐】,将【垂直】设置为【居中】,将【高】设置为45,如图6.67所示。(28) 设置完成后在表格中输入文字,效果如图6.68所示。(29) 选择第一行的文字,在【属性】面板中将【字体】设置为华文新魏,将【大小】设置为30,将字体颜色设置为#FF0,如图6.69所示。,图6.67 设置表格样式,图6.68 输入文本后的效果,图6.69 设置字体,6.9 上机练习-制作特效网站,(3

28、0) 选择第二行的文字,在【属性】面板中将【字体】设置为华文新魏,将【大小】设置为24,将字体颜色设置为#FC6 ,如图6.70所示。(31) 使用同样的方法设置其他文字,设置完成后的效果如图6.71所示。(32) 将光标置入最外侧表格的第五行单元格中,在【属性】面板中将【水平】设置为居中对齐,将【垂直】设置为居中。在单元格中输入文本【版权所有|关于我们|联系我们】。单击【字体】右侧的 按钮,在弹出的菜单中选择【管理字体】命令,弹出【管理字体】对话框,如图6.72所示。,图6.70 设置字体,图6.71 设置完成后的效果,图6.72 【管理字体】对话框,6.9 上机练习-制作特效网站,(33)

29、 选择【自定义字体堆栈】选项卡,在【可用字体】列表框中选择【仿宋】,单击 按钮,将其添加至【选择的字体】列表框中,单击【完成】按钮。选择刚刚创建的文字,将其【字体】设置为仿宋,将【大小】设置为16,将字体颜色设置为#FFF,如图6.73所示。设置完字体后的效果如图6.74所示。(34) 选择【首页.png】,打开【行为】面板,单击【添加行为】 按钮,在弹出的下 拉列表中选择【交换图像】命令,弹出【交换图像】对话框,在该对话框中单击【 浏览】按钮,如图6.75所示。(35) 打开【选择图像源文件】对话框,在该对话框中选择随书附带光盘中的CDROM素材Cha06首页01.png,单击【确定】按钮,

30、如图6.76所示。,图6.74 设置完成后的效果,图6.75 【交换图像】对话框,图6.76 选择素材图片,6.9 上机练习-制作特效网站,(36) 返回到【交换图像】对话框中单击【确定】按钮即可在【行为】面板中。如图6.77所示。(37) 使用同样的方法为【产品简介.png】、【新闻. .png】、【在线咨询.png】、【关于我们.png】设置交换图像行为。在场景中选择【黑巧克力.jpg】图片,在【属性】面板中将【ID】设置为L1,如图6.78所示。(38) 使用同样的方法分别为【白巧克力.jpg】、【果仁巧克力.jpg】、【伴花巧克力.jpg】、【薄荷巧克力.jpg】、【卡通巧克力.jpg

31、】图片设置ID分别为L2、L3、L4、L5、L6。选择【黑巧克力.jpg】图片,在【行为】面板中单击【添加行为】 按钮,在弹出的下拉列表中选择【交换图像】命令,弹出【交换图像】对话框,如图6.79所示。,图6.77 添加行为,图6.78 设置ID,图6.79 【交换图像】对话框,6.9 上机练习-制作特效网站,(39) 单击【浏览】按钮,弹出【选择图像源文件】对话框,在该对话框中选择随书附带光盘中的CDROM素材Cha06黑巧克力01.jpg,如图6.80所示。(40) 单击【确定】按钮,返回到【交换图像】对话框中,再次单击【确定】按钮,【交换图像】行为即可显示在【行为】面板中,如图6.81所

32、示。(41) 使用同样的方法为【白巧克力.jpg】、【果仁巧克力.jpg】、【伴花巧克力.jpg】、【薄荷巧克力.jpg】、【卡通巧克力.jpg】设置交换图像为【白巧克力01.jpg】、【果仁巧克力01.jpg】、【伴花巧克力01.jpg】、【薄荷巧克力01.jpg】、【卡通巧克力01.jpg】。,图6.80 选择素材图片,图6.81 添加行为后的效果,图6.82 选择【弹出信息】命令,6.9 上机练习-制作特效网站,(43) 弹出【弹出信息】对话框,在该对话框中【消息】右侧的文本框汇中输入文本【Love you for life】,单击【确定】按钮,如图6.83所示。(44) 选择如图6.8

33、4所示的文本,单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【shake】命令。(45) 弹出【shake】对话框,将【目标元素】设置为【img”L1”】,将【方向】设置为left,单击【确定】按钮。如图6.85所示。,图6.85 【shake】对话框,图6.84 选择文本,图6.83 【弹出信息】对话框,6.9 上机练习-制作特效网站,(46) 选择【白巧克力】文本,单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【shake】命令。弹出【shake】对话框,将【目标元素】设置为【img”L2”】,将【方向】设置为【up】,单击【确定】按钮,

34、如图6.86所示。(47)选择【薄荷巧克力】文本单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【Clip】命令。弹出【Clip】对话框,将【目标元素】设置为【img”L5”】,将【可见性】设置为toggle,将【方向】设置为【vertrical】,单击【确定】按钮,如图6.87所示。(48) 选择【果仁巧克力】文本单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【Bounce】命令。弹出【Bounce】对话框,将【目标元素】设置为【img”L3”】,将【可见性】设置为toggle,将【方向】设置为【down】,单击【确定】按钮,如图6.88所示

35、。,图6.86 【shake】对话框,图6.87 【Clip】对话框,图6.88 【Bounce】对话框,6.9 上机练习-制作特效网站,(49) 选择【伴花巧克力】文本单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【Drop】命令。弹出【Drop】对话框,将【目标元素】设置为【img”L4”】,将【可见性】设置为toggle,将【方向】设置为【right】,单击【确定】按钮,如图6.89所示。(50) 选择【卡通巧克力】文本单击【行为】面板中的【添加行为】 按钮,在弹出的下拉列表中选择【效果】|【Fade】命令。弹出【Fade】对话框,将【目标元素】设置为【img”L6”】,将【可见性】设置为toggle,单击【确定】按钮,如图6.90所示。(51) 至此特效网站就制作完成了,在菜单栏中选择【文件】|【保存】命令,弹出【另存为】对话框,在该对话框中设置正确的存储路径并设置其名称,设置完成后单击【保存】按钮将其保存。,图6.89 【Drop】对话框,图6.90 【Fade】对话框,6.10 思考与练习,1.什么是【行为】?2.什么是【事件】?3.什么是【交换图像】?,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 中等教育 > 职业教育

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报