DreamweaverCS4完全自学教程6

第16章Spry•在如今Web2.0盛行、Ajax流行的时代背景下，Adobe公司推出了其Ajax框架Spry，并集成到DreamweaverCS4中。AdobeSpry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。•本章将从什么是Ajax和Spry、在DreamweaverCS4中如何使用Spry组件、如何使用Spry显示数据、添加Spry效果等几个方面进行详细介绍，使读者对Spry有一个全面认识，并且能够应用Spry设计简单的交互网页。16.1什么是Ajax和Spry•Ajax是Web2.0的核心之一。使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序可以更为迅速地响应用户交互。16.1.1什么是Ajax•Ajax是AsynchronousJavaScriptandXML的缩写。它并不是一门新的语言或技术，实际上是几项技术按一定的方式组合在一起中发挥各自的作用，它包括：使用XHTML和CSS标准化呈现；使用文档对象模型DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；最后用JavaScript绑定和处理所有数据。•目前Ajax已经成为当前的热门技术。Google作为Ajax技术的领跑者，早已经走在其它同类网站的前列。基于Ajax的广为大家熟悉的产品有GoogleMaps，GoogleGmail，GoogleIG等。16.1.2什么是Spry•Spry是实现Ajax的一种简单方式，对HTML、CSS和JavaScript体验据有入门级水平的设计人员应该能够发现Spry是一种整合内容的简单方法。使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，可以实现在HTML网页中展现XML数据、建立诸如炫酷菜单的一些界面，还有其他的一些页面特效。在减少页面刷新的同时，增加交互性、速度和可用性。16.2Spry组件•DreamweaverCS4提供的Spry组件包括验证文本域组件、验证文本区域组件、验证选择组件、验证复选框组件、Spry菜单栏、Spry选项卡式面板、Spry折叠式面板、Spry可折叠面板等八种类型。本节将对上述组件进行一一介绍。16.2.1验证文本域组件•验证文本域组件可以对文本框中输入的多种类型的信息进行实时验证，如：电话号码、邮政编码、IP地址、日期、时间、货币等，若输入的信息格式与指定信息不符或输入的字符数与规定字符数不符，则会出现提示信息。具体操作步骤如下：16.2.2验证文本区域组件•除了17.2.1小节中提到的对文本框进行验证，还可以对文本区域中输入的信息进行验证。具体操作步骤如下：16.2.3验证选择组件•验证选择组件可以对下拉列表中的选项进行验证，具体操作步骤如下：16.2.4验证复选框组件•验证复选框组件可以对一组复选框中的选项进行验证，具体操作步骤如下：16.2.5Spry菜单栏•Spry框架中预设了一些网页中常用的组件，菜单栏就是其中之一。Spry提供了两种菜单栏布局样式：水平与垂直。具体操作步骤如下：16.2.6Spry选项卡式面板•Spry还提供了选项卡式面板，使用此组件可以轻松创建适合自己网页的选项卡面板。具体操作步骤如下：16.2.7Spry折叠式面板•Spry还提供了折叠式面板，使用此组件可以轻松创建适合自己网页的折叠式面板。具体操作步骤如下：16.2.8Spry可折叠面板•Spry还提供了可折叠面板，使用此组件可以轻松创建适合自己网页的可折叠面板。具体操作步骤如下：16.3使用Spry显示数据•本节将结合实例来学习如何使用Spry在网页中显示XML数据。主要内容包括定义XML数据集，创建Spry区域，创建Spry重复区域，创建Spry重复列表，创建Spry表格。16.3.1定义XML数据集•要使用Spry显示XML数据，第一步需要定义XML数据集。具体操作步骤如下：16.3.2创建Spry区域•定义了XML数据集后，需要创建Spry区域来显示数据。具体操作步骤如下：16.3.3创建Spry重复区域•16.3.2介绍了Spry区域，本小节来学习创建Spry重复区域，注意比较两者的区别。具体操作步骤如下：16.3.4创建Spry重复列表•除了上两小节介绍的Spry区域以及Spry重复区域，还可以创建Spry重复列表来显示数据集中的数据，具体操作步骤如下：16.3.5创建Spry表格•还可以通过创建Spry表格，在表格中显示数据集中的数据，具体操作步骤如下：16.4Spry效果•除了上述的组件和数据集以外，DreamweaverCS4还提供了Spry效果库，可以轻松地向页面中添加多种视觉效果，无需刷新即可显示。Spry效果库包括增大/收缩、挤压、显示/渐隐、晃动、滑动、遮帘、高亮颜色等七种效果。下面来一一介绍。16.4.1增大/收缩•增大/收缩效果适用于以下标签：address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、img、menu或pre。下面以图像标签img为例。16.4.2挤压•挤压效果适用于以下标签：address、dd、div、dl、dt、form、img、p、ol、ul、applet、center、dir、menu或pre。下面以标签p为例。具体操作步骤如下：16.4.3显示/渐隐•显示/渐隐效果适用于除applet、body、iframe、object、tr、tbody或th以外的所有标签。下面以图像标签img为例。具体操作步骤如下：16.4.4晃动•晃动效果适用于以下标签：address、blockquote、dd、div、dl、dt、fieldset、form、h1、h2、h3、h4、h5、h6、iframe、img、object、p、ol、ul、li、applet、dir、hr、menu、pre或table。下面以图像标签img为例。具体操作步骤如下：