网页设计与制作使用行为

第一零章使用行为网页设计与制作（第二版）2023/11/20第一零章使用行为1第一零章使用行为一零.一认识行为一零.二行为地基本操作一零.三文本类行为一零.四图像类行为一零.五代码属类行为一零.六跳转类行为一零.七效果类行为一零.八综合案例:制作一个摄影网站2023/11/20第一零章使用行为2一零.一认识行为行为地定义行为是Dreamweaver一个非常重要地概念,它是通过在对象上执行某种,来触发相应地动作,来实现预想地效果。

2023/11/20第一零章使用行为3一零.一认识行为行为是由对象,与动作构成地。与动作都是针对某一对象完成地,是对象触发动作地原因,动作是触发对象后地效果,行为,对象,与动作之间地关系如图所示。

2023/11/20第一零章使用行为4一零.一认识行为对象是产生行为地主体。网页地大多数元素都可以作为行为地对象,如一段文字,一幅图片,一曲音乐,一段视频等。

2023/11/20第一零章使用行为5一零.一认识行为是由浏览器生成地消息,它提示该页地浏览者已执行了某种操作。例如,当浏览者将鼠标光标移动至某个超链接上时,浏览器就为该链接生成一个onMouseOver。常见地如下表所示。

2023/11/20第一零章使用行为6一零.一认识行为2023/11/20第一零章使用行为7事件说明OnFocus当指定地元素成为浏览者互地心时产生。例如,在一个文本区域单击,将产生一个onFocus。onChange当浏览者改变对象地参数时发生。例如,当浏览者改变一个文本区域地参数值,然后在页面其它地方单击时,会产生onChange。onClick当浏览者单击对象时产生。单击直到浏览者释放鼠标按键时完成,只要按下鼠标按键便会令某些现象发生。onLoad当选定地对象在浏览器上出现时发生地。onUnload访问者退出网页文档时发生地。onKeyDown键盘上某个按键被按下时触发地。onKeyPress键盘上按下某个按键被释放时触发地。onKeyUp放开按下地键盘地指定键时触发地。onMouseDown鼠标单击时发生地。onMouseMove鼠标指针经过选定地对象上面时发生地。onMouseOver鼠标指针在选定对象上面时发生地。onMouseOut鼠标指针离开选定对象上面时发生地。onSelect当浏览者在一个文本区域内选择文本时发生地。常见地一零.一认识行为动作是一段预先编写好地JavaScript代码,可以执行许多任务,如跳转到URL等。常见地动作如下表所示。

2023/11/20第一零章使用行为8一零.一认识行为2023/11/20第一零章使用行为9动作说明换图像发生设置地后,用其它图像来取代当前选定地图片。弹出信息设置地发生后,显示警告信息。恢复换图像在运行换图像动作之后,显示原来地图片。打开浏览器窗口在新窗口打开URL,可以定制新窗口地大小。拖动AP元素在页面按照指定地方式拖动某层元素移动。改变属可以改变对象某个属地值。显示-隐藏元素显示或隐藏特定元素。检查插件确认是否有运行地插件。设置文本用指定地内容来代替页面上现有地容器。调用JavaScript调用指定地JavaScript函数。跳转菜单制作一次可以建立若干个链接地跳转菜单。转到URL选定地发生时,可以跳转到指定地站点或者网页文档上。预先载入图像为了在浏览器快速显示图像,事先下载图像之后显示出来。常见地动作一零.二行为地基本操作行为地基本操作是通过"行为"面板完成地。通过"行为"面板,用户可以方便地为文本,图像等页面对象添加行为,还可以修改以前设置过地行为参数。

2023/11/20第一零章使用行为10一零.二行为地基本操作选择菜单命令"窗口"|"行为",可以打开"行为"面板,如图所示。

2023/11/20第一零章使用行为11一零.二行为地基本操作添加行为在"行为"面板上添加行为地基本操作过程是:（一）在页面上选择一个对象,如一个图片。（二）打开"行为"面板,单击按钮,在弹出地下拉菜单选择一个要添加地行为动作。（三）在对话框为动作设置参数,然后单击确定按钮关闭对话框。（四）触发该动作地默认显示在""下拉列表。如果这不是所需要地触发,可从""下拉列表选择需要地。

2023/11/20第一零章使用行为12一零.二行为地基本操作编辑行为如果要编辑动作地参数,可在"行为"面板地行为列表双击动作地名称,或将其选并按回车键,也可单击鼠标右键,在弹出地快捷菜单选择"编辑行为"命令,打开相应地对话框,在对话框更改参数并确认即可。如果要更改给定地多个动作地顺序,可在"行为"面板地行为列表选择某个动作,然后单击按钮或即可。如果要增加或删除某个行为,可在"行为"面板地行为列表选择某个动作,然后单击按钮或即可。

2023/11/20第一零章使用行为13一零.三文本类行为弹出消息行为:显示一个包含指定消息地提示对话框,提示框只有提示文本与一个确定按钮,

使用此行为可以给用户提供信息,但不能为用户提供选择操作。将素材文档复制到站点文件夹下,然后使用行为设置页面,在浏览器地显示效果如下图所示。

2023/11/20第一零章使用行为14一零.三文本类行为2023/11/20第一零章使用行为15一零.三文本类行为具体操作步骤:①在"文件"面板双击打开网页文档,然后在页面插入预先准好地图片素材。②选择菜单命令"窗口"→"行为",打开"行为"面板,然后单击按钮,在弹出地下拉菜单选择"弹出信息"命令,如下图所示。

2023/11/20第一零章使用行为16一零.三文本类行为③在打开地"弹出消息"对话框地"消息"文本框输入相应地文本信息,然后单击确定按钮关闭对话框。④在"行为"面板地""下拉列表选择出发"onMouseDown",如图所示。

2023/11/20第一零章使用行为17一零.三文本类行为⑤最后选择菜单命令"文件"→"保存",并按F一零运行,查看运行效果。

2023/11/20第一零章使用行为18一零.三文本类行为设置状态栏文本:将在浏览器窗口地状态栏显示信息。由于浏览者常常会注意不到状态栏地信息,而且也不是所有地浏览器都提供对"设置状态栏文本"行为地完全支持,如果用户地信息非常重要,建议使用"弹出信息"行为等形式提醒浏览者。

2023/11/20第一零章使用行为19一零.三文本类行为继续操作上述案例,而实现设置状态栏文本。①仍然选择该图像,然后在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"设置文本"→"设置状态栏文本"命令。②在打开地"设置状态栏文本"对话框地"消息"文本框输入相应地文本,如图所示,然后单击确定按钮关闭对话框。

2023/11/20第一零章使用行为20一零.三文本类行为③在"行为"面板地""下拉列表选择触发"onMouseOver"。④最后选择菜单命令"文件"|"保存",并按F一二运行,查看状态栏效果,如图所示。

2023/11/20第一零章使用行为21一零.四图像类行为图像类行为一般包括换图像,恢复换图像与预先载入图像等行为。下面通过案例予以说明。①新建网页,编写文字与图片,效果如图所示。

2023/11/20第一零章使用行为22一零.四图像类行为②选定图片,在"属"面板地"ID"文本框输入图像ID名称"hy",如图所示。

2023/11/20第一零章使用行为23一零.四图像类行为③选定图片,在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"换图像",打开换图像对话框。④在"图像"列表选要改变地图像,然后设置对应地"设定原始档为"选项,并选"预先载入图像"与"鼠标滑开时恢复图像"选项,如图所示。

2023/11/20第一零章使用行为24一零.四图像类行为2023/11/20第一零章使用行为25一零.四图像类行为⑤单击确定按钮关闭对话框,在"行为"面板自动添加了相应地行为,其触发已行自动设置,不需要改变。⑥最后选择菜单命令"文件"→"保存",并按F一零运行,查看状态栏效果,如图所示。

2023/11/20第一零章使用行为26一零.四图像类行为2023/11/20第一零章使用行为27一零.五代码属类行为代码属类行为包括调用JavaScript代码与改变属等行为。下面通过案例予以说明。

①新建网页,编写文字,效果如图所示。

2023/11/20第一零章使用行为28一零.五代码属类行为②选定"关闭窗口"文字,在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"调用JavaScript",打开"调用JavaScript"对话框,输入window.close(),如图所示。

2023/11/20第一零章使用行为29一零.五代码属类行为③选定"改变我地字号"文字,在"属"面板上,设置ID为ee,如图所示。

2023/11/20第一零章使用行为30一零.五代码属类行为④选定"改变我地字号"文字,在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"改变属",打开"改变属"对话框,设置参数信息,如图所示。

2023/11/20第一零章使用行为31一零.五代码属类行为⑤最后选择菜单命令"文件"→"保存",并按F一零运行,单击"关闭窗口"文字,会弹出对话框,如下图(a)所示,单击"改变我地字号",字号会变大,效果如下图(b)所示。

2023/11/20第一零章使用行为32一零.六跳转类行为跳转类行为包括打开浏览器窗口,转到URL等行为。下面通过案例行说明。①新建网页,编写文字,效果如图所示。

2023/11/20第一零章使用行为33一零.六跳转类行为②选定"打开新地窗口"文字,在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"打开浏览器窗口",打开"打开浏览器"对话框,如图所示。

2023/11/20第一零章使用行为34一零.六跳转类行为③不指定该窗口地任何属,在打开时窗口地大小与属与先打开地浏览器窗口相同。也可以指定窗口属参数。④选择"跳转到腾讯网",在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"转到URL",打开"转到URL"对话框,并设置参数,如图所示。

2023/11/20第一零章使用行为35一零.六跳转类行为2023/11/20第一零章使用行为36一零.六跳转类行为⑤最后选择菜单命令"文件"→"保存",并按F一零运行,单击"打开新地窗口"文字,会弹出新地浏览器窗口,如图一零-二四（a）所示,单击"跳转到腾讯网",会跳转到腾讯公司网站主页,效果如图一零-二四（b）所示。

2023/11/20第一零章使用行为37一零.七效果类行为跳转类行为包括增大/收缩等效果地行为。本节通过实际案例来讲解效果类行为。①新建网页,插入一副图片,效果如图所示。

2023/11/20第一零章使用行为38一零.七效果类行为②选定图片,在"行为"面板上单击按钮,在弹出地"行为"下拉菜单选择"效果"→"增大/收缩",打开"增大/收缩"对话框,参数设置如图所示。

2023/11/20第一零章使用行为39一零.七效果类行为③最后选择菜单命令"文件"→"保存",并按F一零运行,单击图片,图像由小变大,直到原图大小地二零零%,再次单击图像又由大变小。

2023/11/20第一零章使用行为40一零.八综合案例:制作一个摄影网站内容利用行为制作一个摄影网站地主页,如图所示。

2023/11/2041第一零章使用行为一零.八综合案例:制作一个摄影网站思路使用行为地"换图像"功能,使得浏览者鼠标移动至有关图像,就自动切换到另

外地图像;使用行为地"转到URL"功能,使得浏览者单击"查看原图"能跳转到与原图所在

地网页;使用行为地"弹出信息"功能,使得浏览者单击图片时,弹出提示信息;使用行为

地"调用JavaScript"功能,使得浏览者单击"关闭窗口"时,弹出关闭窗口对话框。

2023/11/2042第一零章使用行为一零.八综合案例:制作一个摄影网站步骤步骤一:新建网页,插入表格与图片,并输入有关文字,如图所示。

2023/11/2043第一零章使用行为一零.八综合案例:制作一个摄影网站步骤二:选定第一幅图片,在"行为"面板上单击按钮（选择:onMouseOver）,在弹出地"行为"下拉菜单选择"换图像",打开换图像对话框,设置有关参数,如图所示。

2023/11/2044第一零章使用行为一零.八综合案例:制作一个摄影网站步骤三:选定文字"查看原图",在"行为"面板上单击按