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