DreamweaverCS完全自学教程

第16章Spry在如今Web2.0盛行、Ajax流行的时代背景下，Adobe公司推出了其Ajax框架Spry，并集成到DreamweaverCS4中。AdobeSpry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。本章将从什么是Ajax和Spry、在DreamweaverCS4中如何使用Spry组件、如何使用Spry显示数据、添加Spry效果等几个方面进行详细介绍，使读者对Spry有一个全面认识，并且能够应用Spry设计简单的交互网页。16.1什么是Ajax和SpryAjax是Web2.0的核心之一。使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据。这使得Web应用程序可以更为迅速地响应用户交互。16.1.1什么是AjaxAjax是AsynchronousJavaScriptandXML的缩写。它并不是一门新的语言或技术，实际上是几项技术按一定的方式组合在一起中发挥各自的作用，它包括：使用XHTML和CSS标准化呈现；使用文档对象模型DOM实现动态显示和交互；使用XML和XSLT进行数据交换与处理；使用XMLHttpRequest进行异步数据读取；最后用JavaScript绑定和处理所有数据。目前Ajax已经成为当前的热门技术。Google作为Ajax技术的领跑者，早已经走在其它同类网站的前列。基于Ajax的广为大家熟悉的产品有GoogleMaps，GoogleGmail，GoogleIG等。16.1.2什么是SprySpry是实现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提供了两种菜单栏布局样式：水平与垂直。具体操作步骤如下：选选项卡式面面板Spry还还提供了选选项卡式面面板，使用用此组件可可以轻松创创建适合自自己网页的的选项卡面面板。具体体操作步骤骤如下：折折叠式面板板Spry还还提供了折折叠式面板板，使用此此组件可以以轻松创建建适合自己己网页的折折叠式面板板。具体操操作步骤如如下：可可折叠面板板Spry还还提供了可可折叠面板板，使用此此组件可以以轻松创建建适合自己己网页的可可折叠面板板。具体操操作步骤如如下：16.3使使用Spry显显示数据本节将结合合实例来学学习如何使使用Spry在网页页中显示XML数据据。主要内内容包括定定义XML数据集，，创建Spry区域域，创建Spry重重复区域，，创建Spry重复复列表，创创建Spry表格。。定定义XML数据集要使用Spry显示示XML数数据，第一一步需要定定义XML数据集。。具体操作作步骤如下下：创创建Spry区域定义了XML数据集集后，需要要创建Spry区域域来显示数数据。具体体操作步骤骤如下：创创建Spry重复区区域16.3.2介绍了了Spry区域，本本小节来学学习创建Spry重重复区域，，注意比较较两者的区区别。具体体操作步骤骤如下：创创建Spry重复列列表除了上两小小节介绍的的Spry区域以及及Spry重复区域域，还可以以创建Spry重复复列表来显显示数据集集中的数据据，具体操操作步骤如如下：创创建Spry表格还可以通过过创建Spry表格格，在表格格中显示数数据集中的的数据，具具体操作步步骤如下：：16.4Spry效果除了上述的的组件和数数据集以外外，DreamweaverCS4还提供了了Spry效果库，，可以轻松松地向页面面中添加多多种视觉效效果，无需需刷新即可可显示。Spry效效果库包括括增大/收收缩、挤压压、显示/渐隐、晃晃动、滑动动、遮帘、、高亮颜色色等七种效效果。下面面来一一介介绍。增增大/收缩缩增大/收缩缩效果适用用于以下标标签：address、dd、div、dl、、dt、form、、p、ol、ul、、applet、center、dir、img、menu或或pre。下面以以图像标签签<img>为例。。挤挤压挤压效果适适用于以下下标签：address、dd、div、dl、dt、、form、img、p、ol、ul、applet、、center、dir、menu或或pre。下面面以标签<p>为例例。具体操操作步骤如如下：显显示/渐隐隐显示/渐隐隐效果适用用于除applet、body、iframe、object、tr、、tbody或th以外的所所有标签。。下面以图图像标签<img>为例。具具体操作步步骤如下：：晃晃动晃动效果适适用于以下下标签：address、blockquote、dd、div、dl、、dt、fieldset、、f