Dreamweaver网页设计第7章_表单与行为.ppt

《Dreamweaver网页设计第7章_表单与行为.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计第7章_表单与行为.ppt（41页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Dreamweaver网页设计第7章_表单与行为 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望7.1 表单7.1.1表单概述表单概述表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。表单被广泛应用于信息的搜集与反馈，是网站管理者与浏览者之间沟通的桥梁。表单通常应用于调查表、订单和搜索界面中。表单的两个重要组成部分：描述表单的HTML源代码“刊登”表单的网页；用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如CGI、ASP等。7.1.2表

2、单的创建与管理表单的创建与管理1创建表单选择以下方法之一：把光标置于要插入表单的位置，然后选择菜单“插入/表单”。把光标置于要插入表单的位置，然后单击插入栏“表单”类别中的“表单”按钮。拖动“表单”按钮到页面上要插入表单的位置。插入表单后，在网页的光标处会出现一个红色的虚线框。页面中虚线框表示表单，此框的作用仅仅是方便编辑，它不会出现在浏览器中。7.1.2表单的创建与管理表单的创建与管理2设置表单属性表单名称：设置表单的名称。动作：设置表单处理程序的URL。目标：设置显示表单数据处理结果网页的打开方式。方法：设置处理表单数据的类型。有默认、GET和POST三种。MIME类型：选择发送数据的MI

3、ME编码类型。7.1.2表单的创建与管理表单的创建与管理3设置表单对象属性 表单对象包括：文本域、文本区域、按钮、复选框、单选按钮、列表/菜单、文件域、图形域、隐藏域、单选按钮组、跳转菜单。表单对象是允许用户输入数据的机制。当浏览者将信息输入表单并单击提交按钮时，信息将被发送到服务器，服务器端脚本或应用程序对这些数据进行处理。服务器通过将请求信息发送回浏览者或基于该表单执行一些操作来进行响应。7.1.2表单的创建与管理表单的创建与管理 表单对象的插入选择以下方法之一：把光标置于表单内，然后从菜单“插入/表单”中选择一个对象。把光标置于表单内，然后单击插入面板上的表单对象按钮。拖动表单对象按钮到

4、表单内想放置的位置。7.1.2表单的创建与管理表单的创建与管理表单对象的属性 文本域的属性文本域：设置文本域的名称。字符宽度：设置文本域可显示的最大字符数。最多字符数：指定文本域可以输入的最大字符数。类型：指定文本域为单行、多行或密码。单行：单行文本域。用于输入单行信息。密码：密码域，用于输入密码。多行：多行文本域。用于输入内容较多的信息。行数：设置多行文本域的高度。初始值：指定表单首次被载入时显示在文本域中的值。7.1.2表单的创建与管理表单的创建与管理 按钮的属性按钮名称：设置按钮的名称。标签：设置显示在按钮上的文本。动作：确定按钮被单击时发生的动作。有三种选择：u提交表单：用于提交表单数

5、据给处理程序或脚本。u重置表单：将表单内所有对象恢复为各自的初值。u无：不发生任何动作，即当单击按钮时，提交和重置动作都不发生 7.1.2表单的创建与管理表单的创建与管理 单选按钮的属性单选按钮：设置单选按钮的名称。同一组的单选钮的名称必须相同。选定值：设置单选钮被选时的取值。当用户提交表单时，该值被传送给处理程序（如CGI脚本）。应赋给同组的每个单选钮不同的值。初始状态：指定首次载入表单时单选钮是已选还是未选。一组单选钮中，只能有一个按钮的初始状态被设为选中。7.1.2表单的创建与管理表单的创建与管理 复选框的属性复选框名称：设置复选框的名称。选定值：设置复选框被选择时的取值。当用户提交表单

6、时，该值被传送给服务器端应用程序（如CGI脚本）。初始状态：设置首次载入表单时复选框是已选还是未选。7.1.2表单的创建与管理表单的创建与管理 列表/菜单属性列表/菜单：设置列表或菜单名称。类型：指定此对象是菜单还是列表。对于列表，还可以设置以下属性：高度：在不滚动情况下显示出来的选项数。选定范围：通过勾选“允许多选”复选框来设置是否允许用户从列表中选择多项。列表值：添加选项到列表或菜单中。7.1.2表单的创建与管理表单的创建与管理 文件域的属性文件域名称：设置文件域的名称。字符宽度：设置文件域可显示的最大字符数。这个数字可以比最多字符数小。最多字符数：设置文件域可以输入的最大字符数。使用此项

7、属性限制文件名长度。7.1.2表单的创建与管理表单的创建与管理 图像域属性图像区域：设置图像域的名称。源文件：设置图像域的源文件。单击文件夹图标，可在磁盘上浏览到一个图像文件。替代文本：指定替换文本，在文本浏览器或者关闭了图像下载的浏览器上使用。在某些浏览器上，这段文本也在鼠标滑过时显示。7.1.2表单的创建与管理表单的创建与管理 隐藏域属性隐藏区域：设置隐藏区域的名称。值：设置隐藏区域的取值。7.1.3表单示例表单示例示例：制作添加通讯录表单，如图7-12。操作步骤：创建名为add.htm的文件。在页面中插入表单。在表单中插入表格，表格的标题设置为“添加通讯录”，其余属性设置如图7-13。将

8、第一列的背景色设置为#ffcc99，第二列的背景色设置为#ffffcc。合并单元格。将第八行合并单元格，并将背景色设置为#ffcccc。在第一列中输入相应的文字。在第一行第二列中插入文本字段，并按图7-14所示设置属性。7.1.3表单示例表单示例 分别在第三到第六行的第二列中插入文本字段，并将“文本域”属性设置为unit、phone、email、website。在第二行第二列中插入两个单选按钮，它们的属性设置如图7-15所示。在第七行第二列中插入文本区域，其属性设置如图7-16所示。在第八行中插入按钮，属性设置如图7-17。至此，就完成了添加通讯录表单的制作过程。7.2 行为行为7.2.1行为

9、概述行为概述行为，就是在网页中进行的一系列动作，通过这些动作实现用户与页面的交互。行为由事件和动作组成，它通过对事件的响应执行相应的动作。事件是浏览器生成的消息，指示该页的浏览者执行了某种操作。网页事件分为不同的种类。有的与鼠标有关，有的与键盘有关，如鼠标单击、键盘某个键按下等。有的事件还和网页相关，如网页下载完毕，网页切换等。而动作是用于完成特定任务预先编好的JavaScript代码，诸如打开一个浏览器窗口，播放声音等。行为是事件和由该事件触发的动作的组合。行为允许浏览者改变网页的内容以及执行特定的动作。7.2.2行为的基本操作行为的基本操作1行为面板选择菜单“窗口/行为”(SHIFT+F4

10、)，可以打开“行为”面板。面板主要功能：显示设置事件：仅显示附加到当前文档的那些事件。显示所有事件：显示给定类别的所有事件。添加行为：是一个弹出菜单，其中包含可以附加到当前所选元素的行为。当从该列表中选择一个行为时，将出现一个对话框，可以在该对话框中指定该动作的参数。删除：从行为列表中删除所选的事件。7.2.2行为的基本操作行为的基本操作2添加行为为对象添加行为的步骤：打开行为面板。在文档中选定一个对象。单击行为面板上的加号按钮，从弹出的行为列表选项中选择合适的行为。根据所选定的行为，在参数对话框中设置该行为的参数及指令。设置行为的参数，然后单击“确定”按钮。7.2.3 Dreamweaver

11、 8.0 的内置行为的内置行为交换图像：使图形交替显示。弹出信息：显示一个信息对话框，或者给用户一个提示信息。恢复交换图像：重复前面的交换图像功能。打开浏览器窗口：在打开网页时同时打开另一个网页。拖动层：实现在页面上层的移动。播放声音：为网页加入声音。改变属性：更改对象某个属性。显示隐藏层：显示或隐藏图层。设置文本：在特定的地方设置文本。调用JavaScript：调用相应的JavaScript脚本。转到URL：自动转到指定的页面。显示弹出式菜单：制作显示弹出式菜单。时间轴：制作更多的动态效果。7.2.3 Dreamweaver 8.0 的内置行为的内置行为内置行为的使用方法1交换图像 选择菜单

12、“插入/图像”，插入一幅图像。选择一个对象（通常是将交换的图像）并打开行为面板。单击加号按钮并从弹出菜单中选择“交换图像”，打开“交换图像”对话框。从“图像”列表中，选择要更改的源图像。单击“浏览”选择新图像文件，或在“设定源文件为”文本框中输入新图像的路径和文件名。选择“预先载入图像”选项在载入页时将新图像载入到浏览器的缓存中。7.2.3 Dreamweaver 8.0 的内置行为的内置行为2弹出信息“弹出信息”动作的作用是在特定的事件被触发时弹出信息框，给浏览者提供动态的导航功能。具体操作过程：打开行为面板，从行为中选择“弹出信息”，打开“弹出信息”对话框。输入要在消息窗口中显示的内容。7

13、.2.3 Dreamweaver 8.0 的内置行为的内置行为3恢复交换图像“恢复交换图像”动作只有在使用了“交换图像”动作后才起作用，其功能是当鼠标离开变换图像后，重新显示原来的图像。“恢复交换图像”对话框如图7-24所示。7.2.3 Dreamweaver 8.0 的内置行为的内置行为4打开浏览器窗口使用“打开浏览器窗口”动作在打开当前网页的同时，再打开一个新的窗口。具体操作过程：选择一个对象并打开行为面板。单击加号按钮并从弹出菜单中选择“打开浏览器窗口”，打开“打开浏览器窗口”对话框。单击“浏览”选择一个文件，或输入要显示的 URL。设置“打开浏览器窗口”的其他选项。单击“确定”。7.2

14、.3 Dreamweaver 8.0 的内置行为的内置行为5拖动层“拖动层”动作只对网页上的层起作用。此动作允许用户拖动层。使用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。具体操作过程：选择菜单“插入/层”或单击插入栏上的“描绘层”按钮，绘制一个层。通过单击文档窗口底部标签选择器中的 选择 body 标签。打开“行为”面板。单击加号按钮从弹出菜单中选择“拖动层”，打开“拖动层”对话框。进行参数设置 7.2.3 Dreamweaver 8.0 的内置行为的内置行为6播放声音使用“播放声音”动作来播放声音。例如，在每次鼠标指针滑过某个链接时播放一段声音，或在页载入时播放音乐剪辑，或者点击某

15、个按钮播放声音等。具体操作过程：选中一个对象，打开行为面板。单击加号按钮并从弹出菜单中选择“播放声音”，打开“播放声音”对话框。单击“浏览”选择一个声音文件，或在“播放声音”文本框中输入路径和文件名。保存页面，按F12预览。7.2.3 Dreamweaver 8.0 的内置行为的内置行为7改变属性使用“改变属性”动作更改对象某个属性的值。具体操作过程：选中一个对象，打开“行为”面板。单击加号按钮并从弹出菜单中选择“改变属性”，打开“改变属性”对话框。从“对象类型”中选择要更改属性的对象的类型，并设置参数。保存页面。7.2.3 Dreamweaver 8.0 的内置行为的内置行为8显示隐藏层 插

16、入一张图片。然后在文档窗口中绘制一个层，在层中添加所需内容，并将层的可见性设置为hidden。选中插入的图片对象。打开行为面板，单击加号按钮并从弹出菜单中选择“显示隐藏层”，打开显示隐藏层”对话框。在“命名的层”列表中选择要更改其可见性的层。再重复第、步，当弹出“显示隐藏层”窗口时，选择“隐藏”。单击“确定”。如果在事件中没有onMouseOver、onMouseOut事件，可将图片的“链接”属性设置为“#”。保存页面。7.2.3 Dreamweaver 8.0 的内置行为的内置行为9设置文本 设置层文本。“设置层文本”动作用指定的内容替换网页上现有层的内容。具体操作过程：插入一张图片。在文档

17、窗口中绘制一个层，在层中输入需要的文字。选中插入的图片对象。打开行为面板，单击加号按钮并从弹出菜单中选择“设置文本/设置层文本”，打开“设置层文本”对话框。在“新建HTML”中输入新的内容。单击“确定”。7.2.3 Dreamweaver 8.0 的内置行为的内置行为9设置文本 设置状态栏文本“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示信息。具体操作过程：插入一张图片。选中插入的图片对象。打开行为面板，单击加号按钮并从弹出菜单中选择“设置文本/设置状态栏文本”，打开“设置状态栏文本”对话框。在“消息”中输入新的内容。单击“确定”。7.2.3 Dreamweaver 8.0 的内置行

18、为的内置行为9设置文本 设置框架文本“设置框架文本”动作用指定的内容代替给定框架的内容和格式。具体操作过程：选中一个链接 打开行为面板，单击加号按钮并从弹出菜单中选择“设置文本/设置框架文本”，打开“设置框架文本”对话框。在“新建HTML”中输入任何有效的HTML。单击“确定”。7.2.3 Dreamweaver 8.0 的内置行为的内置行为10调用JavaScript“调用JavaScript”动作的作用是执行预先编写好的自定义函数或JavaScript代码行。在当前的页中插入一个按钮，然后选中该按钮。打开行为面板，单击加号按钮并从弹出菜单中选择“调用JavaScript”，打开“调用Jav

19、aScript”对话框。在打开的调用JavaScript 窗口中键入：window.close()。点击“确定”退出对话框。并确认其缺省事件值为“onClick”。保存页面。7.2.3 Dreamweaver 8.0 的内置行为的内置行为11转到URL“转到URL”动作在当前窗口或指定的框架中打开一个新页。选中一个链接。打开行为面板，单击加号按钮并从弹出菜单中选择“转到URL”，打开“转到URL”对话框。从“打开在”列表中选择URL的目标窗口。“打开在”列表自动列出当前框架集中所有的框架和主窗口。单击“浏览”选择要打开的文档，或直接在“URL”文本框中输入文档的路径和文件名。单击“确定”。7.

20、2.3 Dreamweaver 8.0 的内置行为的内置行为12显示弹出式菜单 选中一个链接或一幅图片。打开行为面板，单击加号按钮并从弹出菜单中选择“显示弹出式菜单”，打开“显示弹出式菜单”对话框。在“文本”中输入菜单的名称，通过单击“+”按钮来增加所需菜单的数目。在创建了菜单项之后，使用“显示弹出式菜单”的“外观”选项卡设置菜单的外观。可以设置弹出式菜单的方向、字体属性和菜单的一般状态等属性。使用“高级”选项卡设置菜单单元格的边框、颜色等属性。使用“位置”选项卡设置弹出菜单相对于触发图像或链接的显示位置。还可以设置当用户将鼠标指针移开触发器之后该菜单是否隐藏。保存该文档，按F12浏览效果。7

21、.2.3 Dreamweaver 8.0 的内置行为的内置行为13时间轴 绘制一个层，在层中插入一幅图片，并在层上单击鼠标右键，弹出如图7-42所示的弹出式菜单。选择“添加到时间轴”选项，打开“时间轴”面板。将层添加到时间轴以后，会自动在层中显示动画栏。单击动画栏最后关键帧标记，把页面上该层移到动画结束处。要使层按曲线移动，选择它的动画栏，然后按住Control键单击，在插入点位置添加一个关键帧；或在动画栏中间单击一帧，并从右键快捷菜单上选择“添加关键帧”。移动层，使运动轨迹呈曲线状。保存该文档，按F12浏览效果。7.2.4 在表单中使用行为在表单中使用行为设置文本域文本和检查表单是两个表单专

22、用的行为。1设置文本域文本“设置文本域文本”动作用指定的内容替换表单文本域的内容。插入一张图片。然后在文档窗口插入一个文本域，在文本域中键入内容。选中插入的图片对象。打开行为面板，单击加号按钮并从弹出菜单中选择“设置文本/设置文本域文本”，打开“设置文本域文本”对话框。在“新建文本”中输入新的内容。单击“确定”。7.2.4 在表单中使用行为在表单中使用行为2检查表单 插入表单和必要的文本域。打开行为面板，单击加号按钮并从弹出菜单中选择“检查表单”，打开图“检查表单”对话框。从“命名的栏位”列表中选择一个文本域，设置以下属性：必需的：文本域中必须包含数据。数字：检查文本域中是否只包含数字字符。电

23、子邮件地址：检查文本域中内容是否符合邮件地址形式。数字从到：检查文本域中是否包含指定范围内的数字。如果验证多个文本域，重复执行第3步。单击“确定”。7.3 表单和行为综合应用表单和行为综合应用综合示例：建立图7-47所示的用户注册表单。操作步骤：创建名为register.htm的文件。选择菜单“文件/新建”，在“新建文档”对话框中选择“基本页/HTML”，新建一个文件，命名为register.htm。在页面中插入表单。选择菜单“插入/表单”，在页面中插入一个表单。在表单中插入表格，属性设置如图7-48。将第一列单元格的背景色设置为#f6f6f6，并设置水平对齐为右对齐。7.3 表单和行为综合应

24、用表单和行为综合应用 将第一行合并单元格，将背景色设置为#deeff7，并设置水平对齐为居中对齐，然后输入文字：用户注册。在第一列中输入相应的文字。在第二行第二列中插入文本字段，并按图7-49所示设置属性。分别在第三、第四行第二列中插入文本字段，将“文本域”属性设置为password、repasswd，类型设置为：密码。在第五行第二列中插入两个单选按钮，它们的属性设置如图7-50所示。在第六行第二列中插入文本字段和两个列表/菜单，其属性设置如图7-51所示。7.3 表单和行为综合应用表单和行为综合应用 在第七行第二列中插入列表/菜单，其属性设置如图7-52(a)，列表值设置如图7-52(b)。

25、在第八行第二列中插入文本字段，并按图7-53所示设置属性。在第九行第二列中插入按钮，属性设置如图7-54。单击行为面板上的加号按钮，在弹出的菜单中选择“检查表单”，将name、password、repasswd这三个文本字段的值设置为不得为空，如图7-55所示。将year文本字段的值设置为19902006之间的数字，“检查表单”对话框设置如图7-56所示。将email文本字段的值设置为电子邮件地址，“检查表单”对话框设置如图7-57所示。本章小结本章小结1表单及其表单对象，增加网页的交互性，并有数据采集功能。每一个表单对象，都有各自的属性。必须熟悉表单对象的属性，才能在使用的时候运用自如。2行为允许浏览者网页互动，使网页产生各种变化，或者使某些任务得以执行。可以自己编写行为，也可以下载和安装第三方的行为。Dreamweaver 8.0本身也自带了一些行为，如能充分运用这些行为，也能使网页变得更加丰富多彩。3在表单中应用行为，不但增强了表单的功能，并且能检查出浏览者数据输入中包含的错误。