第16章Spry.ppt

第16章 Spry 在如今Web2.0盛行、Ajax流行的时代背景下，Adobe公司推出了其Ajax框架Spry，并集成到Dreamweaver CS4中。Adobe Spry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。 本章将从什么是Ajax和Spry、在Dreamweaver CS4中如何使用Spry组件、如何使用Spry显示数据、添加Spry效果等几个方面进行详细介绍，使读者对Spry有一个全面认识，并且能够应用Spry设计简单的交互网页。 13.1 什么是Ajax和Spry Ajax是Web2.0的核心之一。使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序可以更为迅速地响应用户交互。 13.1.1 什么是Ajax Ajax是Asynchronous JavaScript and XML的缩写。它并不是一门新的语言或技术，实际上是几项技术按一定的方式组合在一起中发挥各自的作用，它包括：使用XHTML和CSS标准化呈现；使用文档对象模型DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；最后用JavaScript绑定和处理所有数据。 目前Ajax已经成为当前的热门技术。Google作为Ajax技术的领跑者，早已经走在其它同类网站的前列。基于Ajax的广为大家熟悉的产品有Google Maps，Google Gmail，Google IG等。 13.1.2 什么是Spry Spry是实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验具有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，可以实现在HTML网页中展现XML数据、建立诸如炫酷菜单的一些界面，还有其他的一些页面特效。在减少页面刷新的同时，增加交互性、速度和可用性。 13.2 Spry组件 Dreamweaver CS4提供的Spry组件包括验证文本域组件、验证文本区域组件、验证选择组件、验证复选框组件、验证密码、验证确认、验证单选按钮组、Spry菜单栏、Spry选项卡式面板、Spry折叠式面板、Spry可折叠面板等多种类型。本节将对上述组件进行一一介绍。 13.2.1 验证文本域组件 验证文本域组件可以对文本框中输入的多种类型的信息进行实时验证，如：电话号码、邮政编码、IP地址、日期、时间、货币等，若输入的信息格式与指定信息不符或输入的字符数与规定字符数不符，则会出现提示信息。具体操作步骤如下： 验证时间属性： onBlur：焦点离开当前表单项时。 onChange：选中项或所填写的内容发生改变时。 onSubmit：提交表单内容时。 13.2.2 验证文本区域组件 除了13.2.1小节中提到的对文本框进行验证，还可以对文本区域中输入的信息进行验证。具体操作步骤如下： 13.2.3 验证密码/确认组件 验证密码组件：对用户在密码框中输入的值进行验证，如是否必填、是否达到最大字符数和最小字符数要求等。 验证确认组件：参照位于同一表单中的密码框，验证确认的密码与密码框中的密码是否匹配。 实训1 spry验证组件的使用(1) 实训1 spry验证组件的使用(1) 13.2.4 验证选择组件 验证选择组件可以对下拉列表中的选项进行验证，具体操作步骤如下： 13.2.5 验证复选框组件 验证复选框组件可以对一组复选框中的选项进行验证，具体操作步骤如下： 13.2.7 验证单选按钮组组件 验证单选按钮组组件可以对一组单选按钮中的选项进行验证，具体操作步骤如下： 实训2 spry验证组件的使用(2) 实训2 spry验证组件的使用(2) 13.2.8 Spry菜单栏 Spry框架中预设了一些网页中常用的组件，菜单栏就是其中之一。Spry提供了两种菜单栏布局样式：水平与垂直。具体操作步骤如下： 实训3 spry菜单+iframe综合应用 实训3 spry菜单+iframe综合应用 区域1：创建spry菜单，如下图所示 各个菜单项的级联关系可参考下图： 实训3 spry菜单+iframe综合应用 区域2：创建iframe 方法：“插入”面板-“常用”选项组-标签选择器 （右图） 选择若干个菜单项，制作成超链接，使单击链接时，在该iframe中打开相应的网页 (可选用素材中的frame1.html和frame2.html) 13.2.9 Spry选项卡式面板 Spry还提供了选项卡式面板，使用此组件可以轻松创建适合自己网页的选项卡面板。具体操作步骤如下： 实训4 Spry选项