- 网页设计与网站建设完全实战手册
- 刘贵国
- 4588字
- 2021-03-19 18:34:53
8.2 使用Dreamweaver内置行为
使用行为提高了网站的交互性。在Dreamweaver中插入行为，实际上是给网页添加了一些JavaScript代码，这些代码能实现动态的网页效果。
8.2.1 交换图像
“交换图像”动作是将一幅图像替换成另外一幅图像，一个交换图像其实是由两幅图像组成的。下面通过实例讲述创建交换图像的方法，鼠标未经过图像时的效果如图8-1所示，当鼠标经过图像时的效果如图8-2所示，具体操作步骤如下：
图8-1 鼠标未经过图像时的效果
图8-2 鼠标经过图像时的效果
01 打开网页文档，选中要添加行为的图像，如图8-3所示。
图8-3 打开网页
02 执行“窗口”|“行为”命令，打开“行为”面板，在面板中单击“添加行为”按钮
，在弹出的菜单中选择“交换图像”命令，如图8-4所示。
图8-4 选择“交换图像”
03 弹出“交换图像”对话框，在“图像”列表框中选择交换的图像，在对话框中单击“设定原始档为”文本框右边的“浏览”按钮，如图8-5所示。
图8-5 “交换图像”对话框
★知识要点★
在“交换图像”对话框中可以进行如下设置：
●图像：在列表框中选择要更改其源的图像。
●设定原始档为：单击“浏览”按钮选择新图像文件，文本框中显示新图像的路径和文件名。
●预先载入图像：勾选该复选框，这样在载入网页时，新图像将载入到浏览器的缓冲中，防止当图像该出现时由于下载而导致的延迟。
●鼠标滑开时恢复图像：勾选此复选框表示当鼠标离开图片时，图片会自动恢复为原始图像。
04 在弹出的“选择图像源文件”对话框中选择预载入的图像images/4.jpg，如图8-6所示。
图8-6 “选择图像源文件”对话框
05 单击“确定”按钮，添加到文本框中，如图8-7所示。
图8-7 “交换图像”对话框
06 单击“确定”按钮，添加行为到“行为”面板中，如图8-8所示。
图8-8 添加行为到面板
★提示★
“交换图像”动作自动预先载入在“交换图像”对话框中勾选“预先载入图像”复选框时所有高亮显示的图像，因此当使用“交换图像”时不需要手动添加预先载入图像。
07 保存文档，按F12键在浏览器中预览，鼠标指针未接近图像时的效果参见图8-1所示，鼠标指针接近图像时的效果参见图8-2所示。
★指点迷津★
如果没有为图像命名，“交换图像”动作仍将起作用；当将该行为附加到某个对象时，它将为未命名的图像自动命名。但是，如果所有图像都预先命名，则在“交换图像”对话框中更容易区分它们。
8.2.2 弹出提示信息
弹出信息显示一个带有指定信息的警告窗口，因为该警告窗口只有一个“确定”按钮，所以使用此动作可以提供信息，而不能为用户提供选择。创建的弹出提示信息网页的效果如图8-9所示，具体操作步骤如下：
图8-9 弹出提示信息效果
01 打开网页文档，单击文档窗口中左下角的<body>标签，如图8-10所示。
图8-10 打开网页文档
★提示★
按Shift+F4组合键也可以打开“行为”面板。
02 执行“窗口”|“行为”命令，打开“行为”面板，在“行为”面板中单击“添加行为”按钮
，在弹出的菜单中选择“弹出信息”命令，如图8-11所示。
图8-11 选择“弹出信息”命令
03 弹出“弹出信息”对话框，在对话框中输入文本“您好，欢迎光临我们的网站！”，如图8-12所示。
图8-12 “弹出信息”对话框
04 单击“确定”按钮，添加行为，如图8-13所示。
图8-13 添加行为
05 保存文档，按F12键即可在浏览器中看到弹出的提示信息，网页效果参见图8-9所示。
★提示★
信息一定要简短，如果超出状态栏的大小，浏览器将自动截断该信息。
8.2.3 打开浏览器窗口
使用“打开浏览器窗口”动作，在打开当前网页的同时，还可以再打开一个新的窗口。应用打开浏览器窗口行为的网页效果如图8-14所示，具体操作步骤如下：
图8-14 打开浏览器窗口网页的效果
01 打开网页文档，如图8-15所示。
图8-15 打开网页文档
02 执行“窗口”|“行为”命令，打开“行为”面板，在“行为”面板中单击“添加行为”按钮
，在弹出的菜单中选择“打开浏览器窗口”命令，如图8-16所示。
图8-16 选择“打开浏览器窗口”命令
03 选择命令后，弹出“打开浏览器窗口”对话框，如图8-17所示。
图8-17 “打开浏览器窗口”对话框
★指点迷津★
“打开浏览器窗口”对话框中可以进行如下设置：
●要显示的URL：输入浏览器窗口中要打开的链接路径，可以单击“浏览”按钮找到要在浏览器窗口打开的文件。
●窗口宽度：设置窗口的宽度。
●窗口高度：设置窗口的高度。
●属性：设置打开浏览器窗口的一些参数。选中“导航工具栏”为包含导航条；选中“菜单条”复选框，表示包含菜单条；选中“地址工具栏”复选框后，在打开浏览器窗口中显示地址栏；选中“需要时使用滚动条”复选框，如果窗口中内容超出窗口大小，则显示滚动条；选中“状态栏”复选框后，可以在弹出窗口中显示滚动条；选中“调整大小手柄”复选框，浏览者可以调整窗口大小。
●窗口名称：给当前窗口命名。
04 在对话框中单击“要显示的URL”文本框右边的“浏览”按钮，弹出“选择文件”对话框，在对话框中选择chuangkou.html，如图8-18所示。
图8-18 “选择文件”对话框
05 单击“确定”按钮，将文件添加到文本框，将“宽”设置为500、“高”设置为250，在“窗口名称”文本框中输入名称，“属性”选择“调整大小手柄”、“菜单条”、“需要时使用滚动条”，如图8-19所示。
图8-19 “打开浏览器窗口”对话框
06 单击“确定”按钮，将行为添加到“行为”面板中，如图8-20所示。
图8-20 添加行为
07 保存文档，按F12键在浏览器中可以预览效果，如图8-14所示。
8.2.4 转到URL
“转到URL”动作是设置超链接时使用的动作。通常的超链接是在单击后跳转到相应的网页文档中，但是“转到URL”动作在把鼠标放上后或者双击时，都可以设置不同的事件来加以链接。跳转前后的效果分别如图8-21所示和8-22所示，具体操作步骤如下：
图8-21 跳转前的效果
图8-22 跳转后的效果
01 打开网页文档，如图8-23所示。
图8-23 打开网页文档
02 单击文档窗口中的<body>标签，执行“窗口”|“行为”命令，打开“行为”面板，在面板中单击“添加行为”按钮
，在弹出的菜单中选择“转到URL”命令，如图8-24所示。
图8-24 选择“转到URL”命令
03 弹出“转到URL”对话框，在对话框中单击“URL”文本框右边的“浏览”按钮，如图8-25所示。
图8-25 “转到URL”对话框
★知识要点★
“转到URL” 对话框中可以进行如下设置：
●打开在：选择打开链接的窗口。如果是框架网页，选择打开链接的框架。
●URL：输入链接的地址，也可以单击“浏览”按钮在本地硬盘中查找链接的文件。
04 弹出“选择文件”对话框，在对话框中选择index1.htm，如图8-26所示。
图8-26 “选择文件”对话框
05 单击“确定”按钮，将文件添加到文本框中，如图8-27所示。
图8-27 设置“转到URL”对话框
06 单击“确定”按钮，将行为添加到“行为”面板中，如图8-28所示。
图8-28 添加到“行为”面板
07 保存文档，按F12键在浏览器中预览，跳转前后的效果分别参见图8-21和图8-22所示。
8.2.5 预先载入图像
“预先载入图像”动作将不会使网页中选中的图像（如那些通过行为或JavaScript调入的图像）立即出现，而是先将它们载入到浏览器的缓存中。这样做可以防止当图像应该出现时由于下载而导致延迟。预先载入图片的效果如图8-29所示，具体操作步骤如下：
图8-29 预先载入图片的效果
01 打开网页文档，选中图像，如图8-30所示。
图8-30 打开网页文档
02 执行“窗口”|“行为”命令，打开“行为”面板，在面板中单击“添加行为”按钮
，在弹出的菜单中选择“预先载入图像”动作命令，如图8-31所示。
图8-31 选择“预先载入图像”命令
03 弹出“预先载入图像”对话框，在对话框中单击“图像源文件”文本框右边的“浏览”按钮，如图8-32所示。
图8-32 “预先载入图像”对话框
★提示★
如果在输入下一个图像之前用户没有单击“添加”按钮，则列表中用户刚选择的图像将被所选择的下一个图像替换。
04 在弹出的“选择图像源文件”对话框中选择预载入的图像，如图8-33所示。
图8-33 “选择图像源文件”对话框
05 单击“确定”按钮，添加到文本框中，如图8-34所示。
图8-34 “预先载入图像”对话框
06 单击“确定”按钮，添加行为到“行为”面板中，如图8-35所示。
图8-35 添加行为到“行为”面板
07 保存文档，按F12键在浏览器中预览，效果参见图8-29所示。
8.2.6 调用JavaScript
下面创建一个调用JavaScript自动关闭网页的效果，如图8-36所示，具体操作步骤如下：
图8-36 利用JavaScript自动关闭网页的效果
01 打开网页文档，如图8-37所示。
图8-37 打开网页文档
02 单击文档窗口中左下角的<body>标签，执行“窗口”|“行为”命令，打开“行为”面板，在“行为”面板中单击“添加行为”按钮
，在弹出的菜单中选择“调用JavaScript”命令，如图8-38所示。
图8-38 选择“调用JavaScript”选项
03 选择命令后，弹出“调用JavaScript”对话框，在对话框中的JavaScript文本框中输入window.close()，如图8-39所示。
图8-39 输入代码
04 单击“确定”按钮，添加到“行为”面板中，将事件设置为onload，如图8-40所示。
图8-40 添加到“行为”面板
05 保存文档，按F12键在浏览器中预览，效果参见图8-36所示。
8.2.7 检查表单
“检查表单”动作检查指定文本域的内容以确保用户输入了正确的数据类型。使用onBlur事件将此动作分别附加到各文本域，在用户填写表单时对文本域进行检查；或使用onSubmit事件将其附加到表单，在用户单击“提交”按钮时同时对多个文本域进行检查。将此动作附加到表单，防止表单提交到服务器后文本域包含无效的数据。“检查表单”动作的效果如图8-41所示，具体操作步骤如下：
图8-41 检查表单效果
01 打开网页文档，如图8-42所示。
图8-42 打开网页文档
02 选中表单域，执行“窗口”|“行为”命令，打开“行为”面板，在面板中单击“添加行为”按钮
，在弹出的菜单中选择“检查表单”命令，如图8-43所示。
图8-43 选择“检查表单”命令
03 选择命令后，弹出“检查表单”对话框，在对话框中进行相应的设置，如图8-44所示。
图8-44 “检查表单”对话框
★知识要点★
在该对话框默认状态中的“可接受”选项组中可以进行如下设置：
●任何东西：如果该文本域是必需的，但不需要包含任何特定类型的数据，则选择“任何东西”单选按钮。
●电子邮件地址：使用“电子邮件地址”选项检查该域是否包含一个@符号。
●数字：使用“数字”选项检查该文本域是否只包含数字。
●数字从：使用“数字从”选项检查该文本域是否包含特定范围内的数字。
04 单击“确定”按钮，添加到“行为”面板中，将事件设置为onSubmit，如图8-45所示。
图8-45 添加到“行为”面板
05 保存文档，按F12键在浏览器中预览效果。当在文本域中输入不规则的电子邮件地址和姓名时，表单将无法正常提交到后台服务器，这时会出现提示信息框，并要求重新输入，如图8-41所示。
8.2.8 设置状态栏文本
“设置状态栏文本”用于设置状态栏中显示的信息，在适当的触发事件触发后，在状态栏中显示信息。下面通过实例讲述状态栏文本的设置，效果如图8-46所示，具体操作步骤如下：
图8-46 设置状态栏文本的效果
★提示★
“设置状态栏文本”行为的作用与弹出信息行为很相似，不同的是如果使用消息框来显示文本，访问者必须单击“确定”按钮才可以继续浏览网页中的内容。而在状态栏中显示的文本信息不会影响访问者的浏览速度。浏览者会常常忽略状态栏中的消息，如果消息非常重要，则考虑将其显示为弹出式消息或层文本。
01 打开网页文档，单击文档窗口中左下角的<body>标签，执行“窗口”|“行为”命令，如图8-47所示。
图8-47 打开网页文档
02 打开“行为”面板，单击“添加行为”按钮
，在弹出的菜单中选择“设置文本”|“设置状态栏文本”命令，如图8-48所示。
图8-48 选择“设置状态栏文本”命令
03 弹出“设置状态栏文本”对话框，在“消息”文本框中输入文本“本公司10周年庆典优惠活动正在进行中……”，如图8-49所示。
图8-49 “设置状态栏文本”对话框
★提示★
在“设置状态栏文本”对话框中的“消息”文本框中输入消息。保持该消息简明扼要，如果消息不能完全放在状态栏中，浏览器将截断消息。
04 单击“确定”按钮，将行为添加到“行为”面板中，如图8-50所示。
图8-50 添加行为
05 保存文档，按F12键在浏览器中预览，效果参见图8-46所示。