网页设计 第10章 Dreamweaver的表单和行为

10.2 Dreamweaver的行为
10.2.1“行为”、“事件”和“动作”的概念 这里首先就“行为”、“事件”和“动作”这几个概念给予 说明。 “行为”、“事件”和“动作”的概念在人们的自然语言中 似乎意义非常相似，但在这里有严格的区分。举个例子来说 明：网页上有一行文字，浏览网页时，鼠标一旦放在这行文 字上，就会显示一幅图片；鼠标一旦离开这行文字，那个图 片就会隐藏起来。这个效果就使用了“行为”。 事件：鼠标的移入和鼠标的移出； 动作：图片的显示和隐藏； 行为：鼠标的移入+图片的显示，鼠标的移出+图片的隐藏 由此可见，行为是事件和由该事件触发的动作的组合。
10.2 Dreamweaver的行为
10.2.2 行为中动作的种类： 表10-1列举了Deaamweaver 8 中可用的22种动作。 交换图像 弹出信息 恢复交换图像 打开浏览器窗口 拖动层 控制Shockwave或 Flash 播放声音 改变属性 时间轴 显示-隐藏层 显示弹出式菜单 检查插件 检查浏览器 检查表单 设置导航栏图像 设置文本 调用JavaScript 跳转菜单 跳转菜单开始 转到URL 隐藏弹出式菜单 预先载入图像
在设计视图中，表单轮廓会以红色虚线表示。这一红色的 虚线框将成为所有表单控件的容器。
10.1 Dreamweaver的表单页面制作
10.1.2 创建表单对象 10.1.2.1 创建文本域 选择“插入”→“表单”→“文本字段”命令。打 开“输入标签辅助功能属性”对话框，如图所示。 其中的“标签文字”用于设置该文本域的说明文字。
10.3 Dreamweaver行为的应用实例
（6）做好弹出菜单后，保存文档。在浏览器中 的效果如图。
10.3 Dreamweaver行为的应用实例
10.3.2 图层的隐藏和显示 这一行为的作用是通过鼠标对页面中的某个元素（如图像、 文字、表格、单元格等）的操作，来控制图层的显示和隐藏。 例如，现有“花”、“鸟”、“鱼”、“虫”四幅图像，自 然状态下它们是不显示的，只有当浏览者的鼠标滑过对应的 文字时，相应的图像才会显示。而且，这些图像是可以层叠 在其它页面内容之上的，这种效果可以更加充分地利用浏览 器屏幕的有限空间。 制作的步骤如下： （1）文档窗口先制作一如图10-25所示的表格，向其中的单元 格分别写入“花”、“鸟”、“鱼”、“虫”字样。然后再 添加四个图层，向每个图层内置入相应的图片，在属性面板 上将每个层和每个图像的大小均设置为200200。在层面板 上更改层的名称，分别为“hua”、“niao”、“yu”、 “chong”。如图。
10.1 Dreamweaver的表单页面制作
10.1.2.6 创建列表和菜单 选择“插入”→“表单”→“列表/菜单”命令。显 示“列表/菜单”的属性检查器。在“类型”里有两 个选项：选择“菜单”，则显示下拉菜单；选择 “列表”，则可以确定列表的高度以及是否允许多 选。如图
10.1 Dreamweaver的表单页面制作
10.3 Dreamweaver行为的应用实例
10.3.1 弹出式菜单的制作 浏览网页时经常会见到这样的情况：在自然状态下，菜单是 折叠着的，也就是仅仅显示菜单的标题，当鼠标滑过菜单的 标题时，菜单立即展开，但鼠标离开时菜单又会折叠起来这 就是弹出式菜单。 制作的步骤如下： （1）可以直接给图片加上弹出菜单。但是不能给文本直接 加上弹出菜单。如果需要给文本加上弹出菜单，首先需要把 文本变成链接。选中文本，在属性面板的链接项输入 “javascript:;”，就给文本加上链接了。如图，将页面上的文 本均加上链接“javascript:;”。
10.3 Dreamweaver行为的应用实例
（5）选择“命名的层”中的层“hua”，点击“显示”按钮， 点击“确定”后，在行为面板上出现了一行已设置的行为， 如图。表示为当鼠标滑过“花”字单元格时，显示层“hua”。
10.3 Dreamweaver行为的应用实例
（6）重复步骤（4），在“显示—隐藏层”对话框中选择“命 名的层”中的层“hua”，点击“隐藏”按钮，点击“确定” 后，在行为面板上出现了第二个设置的行为。表示为当鼠标 滑过“花”字单元格时，隐藏层“hua”。 （7）点击新的行为中的事件列表，选择“onMouseOut”，将 其修改为“当鼠标离开”时隐藏层“hua”。如图（a），设 置完成之后的行为面板如图（b）。
第 10 章
Dreamweaver的表单和行为
本章知识技能要点：
表单页面的基本作用 表单对象和表单控件对象的创建及其各个属 性的设置 行为、动作和事件的概念 Dreamweaver中自带的行为及其使用
10.1 Dreamweaver的表单页面制作
在本教材的第三章里，已经介绍过表单在WEB网页中的作用。 它是专门用于接受访问者填写的信息，从而能采集客户端信 息，使网页具有交互的功能。在这里介绍使用Deamweaver 8 制作表单页面的方法。 10.1.1创建表单 将光标置于要插入wk.baidu.com单的位置，然后单击“插入”工具栏上 的“表单”类中的“表单”按钮。如图所示。
选中所有的层
10.3 Dreamweaver行为的应用实例
（3）由于这四个层在页面浏览的自然状态是不可见 的，因而要把它们的可见性的初始状态均设置为不 可见（隐藏）状态。方法就是单击层面板右侧的眼 睛，使其均呈现为闭眼的状态。如下图。
10.3 Dreamweaver行为的应用实例
（4）选中右侧表格中“花”字所在的单元格，单击行 为面板的“添加行为”按钮，在展开的动作列表中选 择“显示—隐藏层”，打开“显示—隐藏层”对话框， 如图
10.1 Dreamweaver的表单页面制作
点击“确定”后，文档窗口就会出现一个带有标签文字的文 本框。如图10-3所示。此时的属性检查器显示该文本字段的 属性。如图10-4所示。 其中“文本域”：定义本控件的名字；“字符宽度”：设置 该文本框的宽度；“最多字符数”：设置该文本框最多能够 记录的字符数；“类型”里：有三个选项，如果选择了“密 码”，则这个文本框便成为用户输入口令或者密码的控件。
此时单击属性面板中的“列表值…”按钮，打开“列 表值对话框”，可以编辑“列表/菜单”的列表。如 图
10.1 Dreamweaver的表单页面制作
10.1.2.7 创建跳转菜单 选择“插入”→“表单”→“跳转菜单”命令。打 开“插入跳转菜单”对话框。在此，除了和编辑菜 单的列表值一样的编辑列表项之外，还可以为每一 个列表项指定一个超级链接。
10.2 Dreamweaver的行为
10.2.5 应用行为 选择网页中要附加行为的对象（如图像或链接），然后在 “行为”面板中单击“添加行为”按钮，从弹出菜单中选择 要附加的行为。当选择某个动作时，将会弹出一个相应的对 话框，显示该动作的参数和说明。在对话框中进行参数设置 后，单击“确定”按钮，即可完成附加行为的操作。 10.2.6 修改事件 添加了行为后，用于触发该动作的默认事件会显示在“行为” 面板“事件”栏中。在“事件”栏中单击要应用的事件，然 后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中 选择另一个事件,即可修改触发事件。
10.2 Dreamweaver的行为
Dreamweaver中的行为是JavaSrcipt的程序库，是 动作和事件的组合。行为代码是客户端JavaScript 代码，即它运行于浏览器中，而不是在服务器上。 在将行为附加到页面元素之后，只要对该元素发生 了所指定的事件，浏览器就会调用与该事件关联的 动作，即JavaScript代码。 从另一方面来说，行为是实现网页上交互的一种捷 径，Dreamweaver的行为是将 javascript 代码嵌入 在文档中，以便允许访问者与 Web 页进行交互， 从而以多种方式更改页面动作或执行某些任务。
10.1 Dreamweaver的表单页面制作
10.1.2.2 创建文本区域 选择“插入”→“表单”→“文本区域”命令。此 时的属性检查器显示该文本区域的属性。其中的 “字符宽度”和“行数”用于设置该文本域的宽度 和高度。如图。
10.1 Dreamweaver的表单页面制作
10.1.2.3 创建复选框 选择“插入”→“表单”→“复选框”命令。此时 的属性检查器显示该复选框的属性。其中的“初始 状态”可以设置为默认的“已勾选”或“未选中”。 如图示。
10.2 Dreamweaver的行为
10.2.3 行为中常用的事件种类： 表10-2列举了Deaamweaver 8 中常用的14种事件。 表10-2 Deaamweaver 8 中事件的种类
OnBlur onClick onError onFocus
onKeyDown onKeyPress onKeyUp onLoad
10.3 Dreamweaver行为的应用实例
（5）在“显示弹出式菜单”对话框里有四张选项卡。在“内 容”选项卡中，设置弹出菜单上的文本和所链接的文档以及 打开的目标窗口。在“外观” 和“高级”选项卡中，设置弹 出菜单的显示效果，在“位置”选项卡中，设置菜单弹出时 与菜单标题对象的相对位置。 弹出式菜单的行为面板如图示。
10.3 Dreamweaver行为的应用实例
（2）在添加弹出式菜单之前需要保存网页文件。保存网页之 后，打开行为面板，点击“添加行为”按钮。 （3）在弹出的菜单中点击“显示事件”，在“显示事件”的 级联菜单里，选择“4.0 and Later Browsers”。 （4）点击“添加行为”按钮，在展开的菜单中选择“显示弹 出式菜单”，打开“显示弹出式菜单”对话框。如图。
10.1 Dreamweaver的表单页面制作
10.1.2.8 创建文件域 选择“插入”→“表单”→“文件域”命令。显示 文件域的属性面板。如图所示。其中的“字符宽度” 与“最多字符数”与文本域的意义相同。
10.1 Dreamweaver的表单页面制作
10.1.2.9 创建表单按钮 选择“插入”→“表单”→“按钮”命令。属性面 板显示按钮的属性，如图10-18所示。其中的 “值”：用于设置显示在按钮上的文字；“动作” 选择了“提交表单”，则为提交按钮，选择了“重 设表单”，则为重置按钮。
10.3 Dreamweaver行为的应用实例
层面板
10.3 Dreamweaver行为的应用实例
（2）如果在浏览时希望这四个图像分别在同一个位置显示， （因为它们是不会同时显示的），可以重新排列这些层，比 如将他们完全重叠在一起。方法是将这四个图层全部选中 （按住Shift键鼠标单击层面板的层名称），如下图。由“修 改”菜单“排列顺序”“左对齐”；再由“修改”菜单 “排列顺序”“对齐上缘”，便将这四个层完全重叠在 一起。
10.1 Dreamweaver的表单页面制作
10.1.2.4 创建单选按钮 选择“插入”→“表单”→“单选按钮”命 令。如图
10.1 Dreamweaver的表单页面制作
10.1.2.5 创建单选按钮组 选择“插入”→“表单”→“单选按钮组”命令。 打开“单选按钮组”对话框。在“单选按钮”列表 中，可以编辑各个单选按钮的标签。如图
onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp
10.2 Dreamweaver的行为
10.2.4 行为面板 右图示的是Deaamweaver 8 中 的行为面板。点击其中的“添加行 为”按钮，即可展开一个可用的动 作列表，列表中呈现出黑色的项目 是当前可以添加的动作。点击“显 示设置事件”按钮，在面板中就会 列出当前页面所有已经设置的行为， 右侧列出的是动作，左侧列出的是 对应的事件。右键单击动作项目时， 从弹出的快捷菜单选择“编辑行 为”，可以重新设置行为的属性； 点击“事件”列表旁边的下拉按钮， 从展开的事件列表可以选择一个合 适的事件。