当前位置：文档之家 › 表单和spry构件

表单和spry构件

  • 格式：ppt
  • 大小：599.00 KB
  • 文档页数：39

下载文档原格式

  / 39

合集下载

中等职业学校《网页制作》的课程标准

中等职业学校《网页制作》的课程标准

XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。

本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。

（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。

2.掌握各种网页元素在DremweaverCS3中的使用。

例如，文本、表格、图像、超级链接、层、框架和表单等。

3.掌握HTML,理解各种标记的功能和用法。

4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。

5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。

6.能够解决一些网页设计中的常见问题。

（三）本课程的特点1.课程注重实际应用，即实践性强。

2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。

3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。

（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"Flash动画制作”等。

二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。

本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。

网页设计DreamweaverCS3教案(华东师范大学)

网页设计DreamweaverCS3教案(华东师范大学)

第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。

教学过程:一、导入新课网页布局技术还有一种，叫做框架。

然而框架本质上是一种浏览器窗口的分割技术。

而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。

利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。

按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。

二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。

不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。

每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。

（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。

1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。

Dreamweaver CS6使用Spry验证文本域

Dreamweaver CS6使用Spry验证文本域

了解Spry表单构件
5
2、通过“插入”浮动面板插入：“插入”浮动面板的“Spry”分类列表中包含 了各种 Spry表单元素和构件，单击任意按钮可在文档中插入一个Spry表单元素 或构件。
Dreamweaver CS6使用Spry验证文本域
Spry验证文本域
6
1、插入Spry验证文本域 （1） 通过菜单命令插入 ①在目标表单标签中定位插入点； ②选择【插入】/【Spry】命令； ③在弹出的子菜单中选择“Spry验证文本域”命令； ④打开“输入标签辅助功能属性”对话框； ⑤在该对话框中进行设置后，单击“确定”按钮即可插入Spry验证文本域。
Dreamweaver CS6使用Spry验证文本域
Spry验证文本域
9
Dreamweaver CS6使用Spry验证文本域
Spry验证文本域
10
2、设置Spry验证文本域 对于插入的Spry验证文本域，可通过选择Spry验证文本域，在其属性面板中进行 属性设置。
Dreamweaver CS6使用Spry验证文本域
Dreamweaver CS6使用Spry验证文本域
Spry验证文本域
7
Dreamweaver CS6使用Spry验证文本域
Spry验证文本域
8
（2）通过“插入”浮动面板插入 ①在目标表单标签中定位插入点； ②在“插入”浮动面板的 “Spry”分类列表中单击“Spry验证文本域”按钮； ③在打开的对话框中进行设置后； ④单击“确定” 按钮，完成插入Spry验证文本域的操作。
DreSpry表单构件
4
1、通过菜单命令插入：选择【插入】/【Spry】命令，在弹出的子菜单中包含了 Spry表单元 素或构件的插入命令，选择任意选项就可在文档中插入一个Spry表 单元素或构件。

【设计】中文版DreamweaverCS6网页设计教程IT168文库

【设计】中文版DreamweaverCS6网页设计教程IT168文库

【关键字】设计第1章Dreamweaver CS6简介Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。

利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。

Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。

用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。

本章主要内容●Dreamweaver CS6的新增功能。

●Dreamweaver CS6的安装、删除和启动。

●Dreamweaver CS6的工作界面。

●Dreamweaver CS6的一般操作。

本章重点●Dreamweaver CS6常用面板的使用方法。

●Dreamweaver CS6的文件操作。

1.1 Dreamweaver CS6概述Dreamweaver CS6 是世界顶级厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动的软件。

在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。

其成熟的代码编辑工具更适用于Web开发高级人员的创作。

CS6新版本使用了版面创建页面，在发布前可使用多预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。

“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。

1.2 Dreamweaver CS6的新增功能相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。

1. 可响应的自适应网格版面使用响应迅速的CSS 版面，可以创建跨平台和跨的兼容。

利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。

Dreamweaver CS5

Dreamweaver CS5

Adobe Dreamweaver CS5 单选
Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 多选
Adobe Dreamweaver CS5 单选
Adobe Dreamweaver CS5 单选
Adobe Dreamweaver CS5 单选
Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 多选 Adobe Dreamweaver CS5 单选 Adobe Dreamweaver CS5 单选
以下哪些方法不可以建立网页链接？ 要链接到名为OK的网页中okok锚记位置，链接文本框里显示为？
要怎样为网页中的图像添加局部链接？ 在为图像添加链接时，如果防止出现颜色边框？
更新库文件时，以下说法正确的是：
下面关于使用资源管理面板插入模板的说法错误的是： 以下哪些是资源面板可以整合的内容？ 下面对于Dreamweaver中的行为的描述正确的是： 设置导航栏图像时，当鼠标上滚到图像上方，图像发生变化，这是通过哪 个事件实现的？ 在Dreamweaver中，可以通过行为设置哪些文本？ 下面几个实例可以通过AP Div的应用来实现的是： 要实现如图所示内容沿网页边缘的显示方式，需要设置的页面属性为？ <br /><img src="../Upload/QuestionLibrary/cs5/DWCS4-004.jpg" alt="" /> 对图片的缩放仅限于Dreamweaver软件内，那么对图片的裁剪(如图所示) 是如何处理的？<br /><img src="../Upload/QuestionLibrary/cs5/DWCS4-008.jpg" alt=""/><img /> 要想得到如图所示的提示信息，可以设置链接的哪些属性？<br src="../Upload/QuestionLibrary/cs5/DWCS4-010.jpg" alt="" /> 图片是网页中不可或缺的元素，在Dreamweaver可以方便地插入图片，并 设置相应的属性，下列关于WEB图形文件的描述正确的是： 在Dreamweaver 文档中添加文本的方式包括： 插入一条水平线，以下哪些方法不能更改其颜色？ 要将文件简单的上传至站点服务器，需要设置？<br /><img src="../Upload/QuestionLibrary/cs5/DWCS4-003.jpg" alt="" /> 在Dreamweaver中,下面关于定义站点的说法错误的是： 下面哪些操作不能在Dreamweaver的文件面板中完成，而必须在站点窗口 完成？ 在创建站点，为站点命名时，下面说法正确的是： Dreamweaver CS5中提供了专门的站点建立向导，根据其功能可以分为： 在管理站点面板中能够实现的功能，包括有： 对于复制/删除站点操作，下面说法正确的是： 在管理站点的工作中，哪些功能是无法实现的？ 点击“修改”菜单中的“页面属性”可以为WEB文档设置相关的属性，其 中包括：

spry

spry

添加Spry菜单栏步骤
选定需要添加菜单栏的位置 选择菜单栏布局：水平、垂直 在网页的界面中选中菜单栏，在属性检查器 中修改相关的设置

添加Spry选项卡式步骤
选择要插入选项卡的位置 “插入”选择 “Spry选项卡” 选定选项卡，在属性检查器中修改相关的设 置

Spry效果
视觉增强功能，可以应用于使用JavaScript的 HTML页面上几乎所有的元素 效果有：增大/收缩、挤压、显示/渐隐、晃动、 滑动、遮帘、高亮颜色 添加方法：选定元素在行为面板中选“效 果”的选项

设置弹出信息框
选定页面对象 从“行为”面板的“添加行为”菜单中选 “弹出信息”命令 在弹出的对话框中输入要显示的消息

常用事件
浏览器事件：onLoad，onUnload等 鼠标事件：onClick， ondblClick ， onMouseOver，onMouseOut， onMouseup，onMouseDown等 键盘事件： onKeyup，onKeydown等

Spry插入栏

“插入”菜单 “Spry”命令
Spry表单构件

验证文本域构件：用于在站点用户输入文本 时显示文本的状态
Spry布局构件



Spry菜单栏：一组可导航的菜单按钮 Spry选项卡式面板：一组面板，用来将内容存储到 紧凑空间中。用户可通过单击要访问的面板上的选 项卡，构件的面板会相应地打开 Spry折叠式面板：当用户单击不同的选项卡时，折 叠构件的面板会相应地展开或收缩 Spry可折叠面板：
Spry构件
Spry框架：是一个JavaScript库，可以使用 HTML、CSS和少量的JavaScript将XML数据 合并到HTML文档中创建构件，向各种页面元 素添加不同种类的效果 Spry框架：每个构件都与唯一的CSS和 JavaScript文件相关联。CSS文件中包含设 置构件样式所需的全部信息，而JavaScript文 件则赋予构件功能

php练习题

mysql数据库中主键是能___________标识一行记录的字段。
php的多行注释是_________________。
php的两种复合数据类型是________________和对象型。
判断
在HTML语言中，可以使用<input>标记创建多行文本框。（ ）
“break n ”代表的意思是跳出一层循环。（ ）
（1）用单引号表示时，若要在单引号之前或字符串结尾需要出现一个反斜线，则需要用两个反斜线\\表示；在单引号字符串中出现的变量不会被变量值替代，转义序列也不会被解释。
（2）用单引号表示时，可以处理更多特殊字符的转义序列。在用双引号定义的字符串中， 变量名会被变量值替代。
8答：在PHP中读取文件有以下四种方式：
（1）读取单个字符；
（2）逐行读取数据；
（3）读取指定长度数据；
（4）读取整个文件。
9答：在Dreamweaver中提供的用于表单验证的Spry 构件有以下几种：
（1）Spry 验证文本域构件；
（2）Spry 验证文本区域构件；
（3）Spry 验证复选框构件；
php的转义字符“反斜杠”是_______________。
php使用_______________函数来定义一个自定义函数。
统计数组元素个数的函数为_______________。
使用___________标记可以在网页中插入一个按钮。
通过引用传递函数参数的时候需要在参数前面加上符号___________。
<?
$b=1;
for(;$b<100;$b++)
{$sum=$sum+$b;}

模块2 Dreamweaver初级应用


2.1 Dreamweaver的工作界面
DreamweaverCS6 工作界面
1．工作区切换器 设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修
改简单方便。 编码人员（高级）：用于那些主要用代码来制作网页的用户使用. 经典：便于习惯使用之前版本布局模式的设计者使用. 双重屏幕：适用于在计算机上有两个显示器的用户。
模块2 Dreamweaver初级应用
本章要点 本章导读 学习任务 上机实训
本章要点
2.1 Dreamweaver的工作界面检查浏览器的兼容
工作区切换器、菜单栏、文档工具栏和文档窗口、状态栏、
“属性”面板、面板组、“插入”面板、标尺、辅助线和网格
2.2 站点的创建与管理
➢ 创建本地站点 ➢ 编辑站点 ➢ 复制站点 ➢ 删除站点 ➢ 导出和导入站点
“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及 一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选 项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的 编辑制作。
2.1 Dreamweaver的工作界面
4．状态栏
5．“属性”面板 “属性”面板用于查看和设置当前选定对象（如文本、图像等）的
2.1 Dreamweaver的工作界面
7．“插入”面板
• “常用”：用于创建和插入最常用的对象。 • “布局”：用于插入表格、框架和 Spry构件等对象，可以定义页面布局。 • “表单”：用于创建表单和插入表单元素，可以实现网页的交互性。 • “数据”：主要用来添加与网站后台数据库相关的动态交互元素。 • “Spry”：主要包含Spry工具按钮，用来创建给站点访问者带来更多丰富体验
2.1 Dreamweaver的工作界面

Spry框架及验证构件

Spry框架及验证构件1．Spry框架的原理Spry框架是一套包含JavaScript、CSS和一些图片文件的客户端JavaScript库，支持XML数据集、动态区域、组件和动画效果。

Spry框架原理如图9-71所示。

图9-71 Spry框架原理虽然这些文件存放在服务器上，但实际上是被加载到浏览器中运行的。

框架的用户将所有需要的文件链接到HTML文档中，以使用不同的组件，来获得更丰富的用户体验。

Spry 框架是和设计人员紧密相关的，因此框架中的每个元素都要遵循以下原则：●保持轻便●保持简洁●使用标准的技术HTML、CSS和JavaScript●保持私有属性和语法最少化●尽可能减少教本编程2．Spry效果Spry效果是视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。

效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。

设计者可以将效果直接应用于HTML元素，而无需其它自定义标签。

要向某个元素应用效果时，该元素当前必须处于选定状态，或者它必须具有一个ID。

例如，如果要向当前未选定的div标签应用高亮显示效果，该div必须具有一个有效的ID 值。

如果该元素尚且没有有效的ID值，将需要向HTML代码中添加一个ID值。

效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），以及可以组合两个或多个属性来创建有趣的视觉效果。

由于这些效果都基于Spry ，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML 页面。

Spry 包括下列效果：● 显示/渐隐 使元素显示或渐隐。

● 高亮颜色 更改元素的背景颜色。

● 向上遮帘/向下遮帘 模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。

● 上滑/下滑 上下移动元素。

● 增大/收缩 使元素变大或变小。

● 晃动 模拟从左向右晃动元素。

● 挤压 使元素从页面的左上角消失。

1．Spry 验证文本域构件Spry 验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态（有效或无效）。

第16章 添加Spry构件和行为效果

Dreamweaver CS3中文版应用教程
第16章 添加Spry构件和行为效果
重点内容：
• 使用Spry显示数据 • 使用各种Spry验证表单元素 • 向网页中添加Spry菜单栏构件 • 向网页中添加Spry选项卡式面板构件 • 向网页中添加Spry折叠式构件 • 向网页中添加Spry可折叠式面板构件
aver CS3中文版应用教程
二、 添加Spry构件
2.使用Spry显示数据
• Spry表构件:选择“插入记录”|“Spry”|“Spry表” 命令，打开“插入Spry表”对话框，完成相关设置后单 击“确定”按钮，会打开一个提示对话框，提示用户需 要添加Spry区域。单击“是”按钮后，将在文档中插入 一个表格。
Dreamweaver CS3中文版应用教程
一、 关于Spry构件和行为效果
Spry构件是预置的一组用户界面组件，可以使用 CSS自定义这些组件，然后将其添加到网页中，通过启 用用户交互来提供更丰富的用户体验。Spry构件由以下 3部分组成: （1）构件结构：用来定义构件结构组成的HMTL代码块。 （2）构件行为：用来控制构件如何响应用户启动事件 的JavaScript。 （3）构件样式：用来指定构件外观的CSS。
• Spry XML数据集:选择“插 入记录”|“Spry”| “Spry XML数据集”命令， 打开“Spry XML数据集”对 话框。进行设置后，单击 “确定”按钮将数据集与页 面相关联。与此同时，“应 用程序”面板的“绑定”面 板中显示出该数据集的所有 数据。
Dreamweaver CS3中文版应用教程
Dreamweaver CS3中文版应用教程
二、 添加Spry构件
10.使用Spry可折叠面板构件
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Spry验证表单构件
Spry验证文本域 Spry验证文本区域 Spry验证复选框 Spry验证选择
Spry验证文本域
Spry验证文本域构件是一个文本域，该域用于在站点浏览者输入文 本时显示文本的状态（有效或无效）。例如，可以向浏览者键入电子邮 件地址的表单中添加验证文本域构件。如果访问者没有在电子邮件地址 中键入“@”符号和句点，验证文本域构件会返回一条消息，声明用户输 入的信息无效。选择【插入记录】/【Spry】/【Spry验证文本域】命令， 将在文档中插入Spry 验证文本域。
复选框
复选框常被用于有多个选项可以同时被选择的情况。每 个复选框都是独立的，必须有一个唯一的名称。选择【插 入记录】/【表单】/【复选框】命令，将在文档中插入复 选框，反复执行该操作将插入多个复选框。
列表/菜单
列表/菜单可以显示一个包含有多个选项的可滚动列表， 在列表中可以选择需要的项目。选择【插入记录】/【表单】 /【列表/菜单】命令，将在文档中插入列表/菜单。
文本域和文本区域
文本域是可以输入文本内容的表单对象。选择【插入记录】/ 【表单】/【文本域】命令，将在文档中插入文本域。单击并选中 文本域，将显示其【属性】面板。
文本域和文本区域
选择【插入记录】/【表单】/【文本区域】命令，将在 文档中插入文本域。单击并选中文本区域，将显示其【属 性】面板。
单选按钮和单选按钮组
创建表单页面
表单是制作ASP应用程序网页的基础，用 户可以通过它向服务器提交数据，服务器通 过它收集用户数据。制作这种能够传递数据 的表单网页通常需要两个步骤：一是创建表 单页面，二是编写应用程序。本次课主要介 绍创建表单页面的基本方法。
学习目标
了解表单的基本概念。 掌握插入和设置表单对象的方法。 掌握使用行为验证表单的方法。
关于表单
表单在网页中最多的用途就是填写用户信息，例如在申请某个网 站的电子邮箱时，就要求填写一些个人信息，而添加这些个人信息 的功能，就是由表单来实现的，如图14-1所示。填写个人信息的页 面上包括很多表单元素。如果希望用户输入数据，通常使用文本域、 密码域、文本区域等；如果希望用户进行选择，通常使用单选按钮、 复选框、列表/菜单等；如果希望能够传递一些用户看不到的信息， 通常使用隐藏域等。所有这些元素的组合，称之为表单。
Spry验证复选框
Spry验证复选框构件是HTML表单中的一个或一组复选框，该复选 框在用户选择（或没有选择）复选框时会显示构件的状态（有效或无 效）。例如，可以向表单中添加验证复选框构件，该表单可能会要求用 户进行3项选择。如果用户没有进行所有这3项选择，该构件会返回一条 消息，声明不符合最小选择数要求。 选择【插入记录】/【Spry】/【Spry验证复选框】命令，将在文档中 插入Spry验证复选框。
跳转菜单
跳转菜单利用表单元素形成各种选项的列表。当选择列表 中的某个选项时，浏览器会立即跳转到一个新网页。选择【插 入记录】/【表单】/【跳转菜单】命令，将打开【插入跳转菜 单】对话框，然后进行参数设置即可。
图像域
图像域用于在表单中插入一幅图像从而生成图形化按钮，在 网页中使用图像域要比单纯使用按钮丰富得多。选择【插入记录】 /【表单】/【图像域】命令，可以插入图像域。
Spry选项卡式面板
Spry选项卡式面板构件是一组面板，用来将内容存储到紧 凑空间中。用户可以通过单击要访问面板上的选项卡来隐藏或 显示存储在选项卡式面板中的内容。当访问者单击不同的选项 卡时，构件的面板会相应地打开。在给定时间内，选项卡式面 板构件中只有一个内容面板处于打开状态。选择【插入记录】/ 【Spry】/【Spry选项卡式面板】命令，在页面中添加一个 Spry选项卡式面板构件。
Spry折叠式构件
单击列表框上方的+按钮再添加一个面板项。展开第1个折 叠条，更改折叠条的标题名称及内容。
Spry折叠式构件
折叠式构件是一组可折叠的面板，可以将大量内容存储在 一个紧凑的空间中。站点浏览者可通过单击该面板上的选项卡 来隐藏或显示存储在折叠构件中的内容。当浏览者单击不同的 选项卡时，折叠构件的面板会相应地展开或收缩。在折叠式构 件中，每次只能有一个内容面板处于打开且可见的状态。选择 【插入记录】/【Spry】/【Spry折叠式】命令，在页面中添加 一个Spry折叠式构件。
Spry布局构件
Spry菜单栏 Spry选项卡式面板 Spry折叠式构件 Spry可折叠面板
Spry菜单栏
Spry菜单栏是一组可导航的菜单按钮，当将鼠标悬停在其 中的某个按钮上时，将显示相应的子菜单。选择【插入记录】/ 【Spry】/【Spry菜单栏】命令，打开【Spry菜单栏】对话框 进行参数设置。
按钮
按钮对于表单来说是必不可少的，它可以控制表单的操作。使用按 钮可以将表单数据提交到服务器，或者重置该表单。选择【插入记录】/ 【表单】/【按钮】命令，即可插入一个按钮。
使用行为验证表单
表单在提交到服务器端以前，必须进行验证，以确保输入 数据的合法性。所谓合法性是指，应该输入数据的文本域是否 输入了数据，应该输入数字的文本域是否输入了文本，应该输 入电子邮件的文本域电子邮件格式是否正确，等等。总之，在 将表单提交到服务器端以前，应该对这些需要用户输入的数据 进行检查。使用【检查表单】行为可以对文本框中的数据进行 简单的检查。 表单验证又分两种方式：一种是用户在填写表单时，每输 入完一个文本框的内容立即进行验证，不合法需要重新输入； 另一种是等到用户填写完表单中的所有文本域后，在进行数据 提交时对所有的数据进行验证，如果含有不合法的数据无法提 交表单。对于前一种情况，需要使用【检查表单】行为分别检 查各个表单对象。对于后一种情况，需要选中整个表单，然后 使用【检查表单】行为对各个表单对象进行统一设置。
Spry验证文本区域
Spry验证文本区域构件是一个文本区域，该区域在用户输入几个文 本句子时显示文本的状态（有效或无效）。如果文本区域是必填域，而 用户没有输入任何文本，该构件将返回一条消息，声明必须输入值。 选择【插入记录】/【Spry】/【Spry验证文本区域】命令，将在文档 中插入Spry验证文本区域。
文件域
文件域的作用是使用户可以浏览并选择本地计算机上的某个 文件，以便将该文件作为表单数据进行上传。当然，真正上传文 件还需要相应的上传组件才能进行，文件域仅仅是起供用户浏览 并选择计算机上文件的作用，并不起上传的作用。选择【插入记 录】/【表单】/【文件域】命令，将插入一个文件域。
隐藏域
隐藏域主要用来储存并提交非用户输入信息，如注册时 间、认证号等，这些都需要使用JavaScript、ASP等源代码 来编写，隐藏域在网页中一般不显现。选择【插入记录】/ 【表单】/【隐藏域】命令，将插入一个隐藏域。
表单
在制作表单网页时，应该首先插入一个表单域，然后在表单 域中插入各个表单对象，因为服务器只接受表单域内的内容。也 可以直接插入表单对象，在首次插入表单对象时，Dreamweaver CS3将自动插入表单域。在使用表格布局且有多个表单元素的情况 下，建议先插入表单域，然后在表单域中插入一个多行2列的表格， 在表格单元格中再插入表单对象。 选择【插入记录】/【表单】/【表单】命令，或者在【插入】 /【表单】工具栏中单击 （表单）按钮插入一个表单域。
字段集
插入字段集后，在页面中将出现一个圆角矩形框，用来将一些内容 相关的表单对象放在一组。可以先插入字段集，然后再在其中插入表单 对象。也可以先插入表单对象，然后将它们选择再插入字段集。选择 【插入记录】/【表单】/【字段集】命令，插入一个字段集。
标签
使用标签可以向源代码中插入一对HTML标签“<label></label>”。 其作用与在【输入标签辅助功能属性】对话框的【样式】选项中选择 【用标签标记环绕】单选按钮的用途是一样的。选择【插入记录】/【表 单】/【标签】命令，即可插入一个标签。
什么是Spry
• Spry是实现Ajax的一种简单方式，对 HTML、CSS和JavaScript体验据有入门级 水平的设计人员应该能够发现Spry是一 种整合内容的简单方法。使用适合于 Ajax的Spry框架，以可视方式设计、开 发和部署动态用户界面，可以实现在 HTML网页中展现XML数据、建立诸如 炫酷菜单的一些界面，还有其他的一些 页面特效。在减少页面刷新的同时，增 加交互性、速度和可用性。
什么是Ajax和Spry
• Ajax是Web2.0的核心之一。使用Ajax的 最大优点就是能在不刷新整个页面的前 提下维护数据。这使得Web应用程序可 以更为迅速地响应用户交互。
什么是Ajax
• Ajax是Asynchronous JavaScript and XML的缩写。它并 不是一门新的语言或技术，实际上是几项技术按一定 的方式组合在一起中发挥各自的作用，它包括：使用 XHTML和CSS标准化呈现；使用文档对象模型DOM实 现动态显示和交互；使用XML和XSLT进行数据交换与 处理；使用XMLHttpRequest进行异步数据读取；最后 用JavaScript绑定和处理所有数据。 • 目前Ajax已经成为当前的热门技术。Google作为Ajax 技术的领跑者，早已经走在其它同类网站的前列。基 于Ajax的广为大家熟悉的产品有Google Maps，Google Gmail，Google IG等。
使用行为验证表单
【检查表单】行为主要是指检查指定文本域的内容以确保 用户输入了正确的数据类型。
Spry构件
• 在如今Web2.0盛行、Ajax流行的时代背景下， Adobe公司推出了其Ajax框架Spry，并集成到 Dreamweaver CS4中。Adobe Spry是一个为Web 设计人员开发的Ajax框架，它使得在一个 HTML页面中创建丰富体验成为了可能。 • 本章将从什么是Ajax和Spry、在Dreamweaver CS4中如何使用Spry组件、如何使用Spry显示 数据、添加Spry效果等几个方面进行详细介绍， 使读者对Spry有一个全面认识，并且能够应用 Spry设计简单的交互网页。