表单和spry构件ppt课件.ppt

《表单和spry构件ppt课件.ppt》由会员分享，可在线阅读，更多相关《表单和spry构件ppt课件.ppt（39页珍藏版）》请在三一办公上搜索。

1、表单是制作ASP应用程序网页的基础，用户可以通过它向服务器提交数据，服务器通过它收集用户数据。制作这种能够传递数据的表单网页通常需要两个步骤：一是创建表单页面，二是编写应用程序。本次课主要介绍创建表单页面的基本方法。,创建表单页面,学习目标,了解表单的基本概念。掌握插入和设置表单对象的方法。掌握使用行为验证表单的方法。,关于表单,表单在网页中最多的用途就是填写用户信息，例如在申请某个网站的电子邮箱时，就要求填写一些个人信息，而添加这些个人信息的功能，就是由表单来实现的，如图14-1所示。填写个人信息的页面上包括很多表单元素。如果希望用户输入数据，通常使用文本域、密码域、文本区域等；如果希望用户

2、进行选择，通常使用单选按钮、复选框、列表/菜单等；如果希望能够传递一些用户看不到的信息，通常使用隐藏域等。所有这些元素的组合，称之为表单。,关于表单,在制作表单页面时，需要插入表单对象，或称表单元素。插入表单对象通常有两种方法，一种是选择【插入记录】/【表单】中的相应命令，另一种是使用【插入】/【表单】工具栏中的相应工具按钮。,表单对象,表单文本域和文本区域单选按钮和单选按钮组复选框列表/菜单跳转菜单图像域文件域隐藏域字段集标签按钮,表单,在制作表单网页时，应该首先插入一个表单域，然后在表单域中插入各个表单对象，因为服务器只接受表单域内的内容。也可以直接插入表单对象，在首次插入表单对象时，Dr

3、eamweaver CS3将自动插入表单域。在使用表格布局且有多个表单元素的情况下，建议先插入表单域，然后在表单域中插入一个多行2列的表格，在表格单元格中再插入表单对象。选择【插入记录】/【表单】/【表单】命令，或者在【插入】/【表单】工具栏中单击 （表单）按钮插入一个表单域。,文本域和文本区域,文本域是可以输入文本内容的表单对象。在Dreamweaver中可以创建一个单行文本域或多行的文本区域，也可以创建一个隐藏用户输入文本的密码文本域。在插入表单对象时，如果在【首选参数】对话框的【辅助功能】分类中选择了【表单对象】复选框，此时将显示【输入标签辅助功能属性】对话框。该对话框将方便进一步设置表

4、单对象的属性。如果在【输入标签辅助功能属性】对话框中单击 按钮，表单对象也可以插入到文档中。如果在【首选参数】对话框的【辅助功能】分类中取消选择【表单对象】复选框，在插入表单对象时，将不会出现【输入标签辅助功能属性】对话框。,文本域和文本区域,文本域是可以输入文本内容的表单对象。选择【插入记录】/【表单】/【文本域】命令，将在文档中插入文本域。单击并选中文本域，将显示其【属性】面板。,文本域和文本区域,选择【插入记录】/【表单】/【文本区域】命令，将在文档中插入文本域。单击并选中文本区域，将显示其【属性】面板。,单选按钮和单选按钮组,单选按钮主要用于标记一个选项是否被选中，单选按钮只允许用户从

5、选项中选择唯一答案。单选按钮通常成组使用，同组中的单选按钮必须具有相同的名称，但它们的域值是不同的。选择【插入记录】/【表单】/【单选按钮】命令，将在文档中插入单选按钮。,单选按钮和单选按钮组,选择【插入记录】/【表单】/【单选按钮组】命令，可以一次性在表单中插入多个单选按钮。,复选框,复选框常被用于有多个选项可以同时被选择的情况。每个复选框都是独立的，必须有一个唯一的名称。选择【插入记录】/【表单】/【复选框】命令，将在文档中插入复选框，反复执行该操作将插入多个复选框。,列表/菜单,列表/菜单可以显示一个包含有多个选项的可滚动列表，在列表中可以选择需要的项目。选择【插入记录】/【表单】/【列

6、表/菜单】命令，将在文档中插入列表/菜单。,跳转菜单,跳转菜单利用表单元素形成各种选项的列表。当选择列表中的某个选项时，浏览器会立即跳转到一个新网页。选择【插入记录】/【表单】/【跳转菜单】命令，将打开【插入跳转菜单】对话框，然后进行参数设置即可。,图像域,图像域用于在表单中插入一幅图像从而生成图形化按钮，在网页中使用图像域要比单纯使用按钮丰富得多。选择【插入记录】/【表单】/【图像域】命令，可以插入图像域。,文件域,文件域的作用是使用户可以浏览并选择本地计算机上的某个文件，以便将该文件作为表单数据进行上传。当然，真正上传文件还需要相应的上传组件才能进行，文件域仅仅是起供用户浏览并选择计算机上

7、文件的作用，并不起上传的作用。选择【插入记录】/【表单】/【文件域】命令，将插入一个文件域。,隐藏域,隐藏域主要用来储存并提交非用户输入信息，如注册时间、认证号等，这些都需要使用JavaScript、ASP等源代码来编写，隐藏域在网页中一般不显现。选择【插入记录】/【表单】/【隐藏域】命令，将插入一个隐藏域。,字段集,插入字段集后，在页面中将出现一个圆角矩形框，用来将一些内容相关的表单对象放在一组。可以先插入字段集，然后再在其中插入表单对象。也可以先插入表单对象，然后将它们选择再插入字段集。选择【插入记录】/【表单】/【字段集】命令，插入一个字段集。,标签,使用标签可以向源代码中插入一对HTM

8、L标签“”。其作用与在【输入标签辅助功能属性】对话框的【样式】选项中选择【用标签标记环绕】单选按钮的用途是一样的。选择【插入记录】/【表单】/【标签】命令，即可插入一个标签。,按钮,按钮对于表单来说是必不可少的，它可以控制表单的操作。使用按钮可以将表单数据提交到服务器，或者重置该表单。选择【插入记录】/【表单】/【按钮】命令，即可插入一个按钮。,使用行为验证表单,表单在提交到服务器端以前，必须进行验证，以确保输入数据的合法性。所谓合法性是指，应该输入数据的文本域是否输入了数据，应该输入数字的文本域是否输入了文本，应该输入电子邮件的文本域电子邮件格式是否正确，等等。总之，在将表单提交到服务器端以

9、前，应该对这些需要用户输入的数据进行检查。使用【检查表单】行为可以对文本框中的数据进行简单的检查。表单验证又分两种方式：一种是用户在填写表单时，每输入完一个文本框的内容立即进行验证，不合法需要重新输入；另一种是等到用户填写完表单中的所有文本域后，在进行数据提交时对所有的数据进行验证，如果含有不合法的数据无法提交表单。对于前一种情况，需要使用【检查表单】行为分别检查各个表单对象。对于后一种情况，需要选中整个表单，然后使用【检查表单】行为对各个表单对象进行统一设置。,使用行为验证表单,【检查表单】行为主要是指检查指定文本域的内容以确保用户输入了正确的数据类型。,Spry构件,在如今Web2.0盛行

10、、Ajax流行的时代背景下，Adobe公司推出了其Ajax框架Spry，并集成到Dreamweaver CS4中。Adobe Spry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。本章将从什么是Ajax和Spry、在Dreamweaver CS4中如何使用Spry组件、如何使用Spry显示数据、添加Spry效果等几个方面进行详细介绍，使读者对Spry有一个全面认识，并且能够应用Spry设计简单的交互网页。,什么是Ajax和Spry,Ajax是Web2.0的核心之一。使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序可

11、以更为迅速地响应用户交互。,什么是Ajax,Ajax是Asynchronous JavaScript and XML的缩写。它并不是一门新的语言或技术，实际上是几项技术按一定的方式组合在一起中发挥各自的作用，它包括：使用XHTML和CSS标准化呈现；使用文档对象模型DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；最后用JavaScript绑定和处理所有数据。目前Ajax已经成为当前的热门技术。Google作为Ajax技术的领跑者，早已经走在其它同类网站的前列。基于Ajax的广为大家熟悉的产品有Google Maps，Googl

12、e Gmail，Google IG等。,什么是Spry,Spry是实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，可以实现在HTML网页中展现XML数据、建立诸如炫酷菜单的一些界面，还有其他的一些页面特效。在减少页面刷新的同时，增加交互性、速度和可用性。,Spry验证表单构件,Spry验证文本域Spry验证文本区域Spry验证复选框Spry验证选择,Spry验证文本域,Spry验证文本域构件是一个文本域，该域用于在站点浏览者输入

13、文本时显示文本的状态（有效或无效）。例如，可以向浏览者键入电子邮件地址的表单中添加验证文本域构件。如果访问者没有在电子邮件地址中键入“”符号和句点，验证文本域构件会返回一条消息，声明用户输入的信息无效。选择【插入记录】/【Spry】/【Spry验证文本域】命令，将在文档中插入Spry 验证文本域。,Spry验证文本区域,Spry验证文本区域构件是一个文本区域，该区域在用户输入几个文本句子时显示文本的状态（有效或无效）。如果文本区域是必填域，而用户没有输入任何文本，该构件将返回一条消息，声明必须输入值。选择【插入记录】/【Spry】/【Spry验证文本区域】命令，将在文档中插入Spry验证文本区

14、域。,Spry验证复选框,Spry验证复选框构件是HTML表单中的一个或一组复选框，该复选框在用户选择（或没有选择）复选框时会显示构件的状态（有效或无效）。例如，可以向表单中添加验证复选框构件，该表单可能会要求用户进行3项选择。如果用户没有进行所有这3项选择，该构件会返回一条消息，声明不符合最小选择数要求。选择【插入记录】/【Spry】/【Spry验证复选框】命令，将在文档中插入Spry验证复选框。,Spry验证选择,Spry验证选择构件是一个下拉菜单，该菜单在用户进行选择时会显示构件的状态（有效或无效）。例如，可以插入一个包含状态列表的验证选择构件，这些状态按不同的部分组合并用水平线分隔。如

15、果用户意外选择了某条分界线（而不是某个状态），验证选择构件会向用户返回一条消息，声明他们的选择无效。选择【插入记录】/【Spry】/【Spry验证选择】命令，将在文档中插入Spry验证选择域。,Spry布局构件,Spry菜单栏Spry选项卡式面板Spry折叠式构件Spry可折叠面板,Spry菜单栏,Spry菜单栏是一组可导航的菜单按钮，当将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。选择【插入记录】/【Spry】/【Spry菜单栏】命令，打开【Spry菜单栏】对话框进行参数设置。,Spry选项卡式面板,Spry选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。用户可以通过单击要访问

16、面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。选择【插入记录】/【Spry】/【Spry选项卡式面板】命令，在页面中添加一个Spry选项卡式面板构件。,Spry折叠式构件,折叠式构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠式构件中，每次只能有一个内容面板处于打开且可见的状态。选择【插入记录】/【Spry】/【Spry折

17、叠式】命令，在页面中添加一个Spry折叠式构件。,Spry折叠式构件,单击列表框上方的+按钮再添加一个面板项。展开第1个折叠条，更改折叠条的标题名称及内容。,Spry可折叠面板,可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。选择【插入记录】/【Spry】/【Spry可折叠面板】命令，在页面中添加一个Spry可折叠面板构件。更改标题名称并输入相应的内容。,Spry效果,“Spry效果”是视觉增强功能，几乎可以将它们应用于使用JavaScript的HTML页面上的所有元素。设置该效果通常可以在一段时间内高亮显示信息、创建动画过渡或

18、者以可视方式修改页面元素。可以将效果直接应用于HTML元素，而无需其他自定义标签。要使某个元素应用效果，该元素必须处于当前选定状态，或者必须具有一个Id。例如，如果要向当前未选定的Div标签应用高亮显示效果，该Div必须具有一个有效的Id值。如果该元素尚且没有有效的Id值，需要在HTML代码中添加一个。利用该效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），也可以组合两个或多个属性来创建有趣的视觉效果。 由于这些效果都基于Spry，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。,Spry效果,在【行为】面板的下拉菜单中选择【效果】命令，其子命令如图所示。,