综合spry构件介绍zykc.pdfVIP

学习目标

知识目标

了解Spry构件的组成部分。

掌握Spry构件的类型。

能力培养目标

培养学生举一反三、灵活运用知识的学习能力。

目标

通过学习本节知识，增长学生的见识，激发学生对网页设计

与制作课程的。

要求理解的内容

本节本节

重点难点

Spry构件的类型。Spry构件。

要求熟练应用的内容

Spry构件的类型。

案例及任务

知识点讲解：

Spry构件是预置的一组用户界面组件，可以使用

CSS自定义这些组件，然后将其添加到网页中，

通过启用用户交互来更丰富的用户体验。

Spry构件由以下3部分组成:

1构件结构：用来定义构件结构组成的HMTL

代码块。

2构件行为：用来控制构件如何响应用户启动

的JavaScript。

3构件样式：用来指定构件外观的CSS。

案例及任务

DreamweaverCS3的Spry组件包括验证文本

域组件、验证文本区域组件、验证选择组件、验

证复选框组件、Spry菜单栏、Spry选项卡式面板、

Spry折叠式面板、Spry可折叠面板等八种类型。本

节将对上述组件进行简单介绍。

案例及任务

Spry构件

在“记录”|“Spry”子菜单中选择要的Spry构

件名称，或者通过“Spry”Spry构件。

案例及任务

1、验证文本域组件

案例及任务

2、验证文本区域组件

案例及任务

3、验证选择组件

验证选择组件可以对下拉列表中的选项进行验证。

案例及任务

5、Spry菜单栏

Spry框架中预设了一些网页中常用的组件，

菜单栏就是其中之一。Spry了两种菜单

栏布局样式：水平与垂直。

案例及任务

6、Spry选项卡式面板

Spry还了选项卡式面板，使用此组件可以轻松创

建适合自己网页的选项卡面板。

案例及任务

7、Spry折叠式面板

Spry还了折叠式面板，使用此组件可以轻松创建

适合自己网页的折叠式面板。

案例及任务

8、Spry可折叠面板

Spry还了可折叠面板，使用此组件可以轻松创建

适合自己网页的可折叠面板。

课后练习

Spry构件由哪几个部分组成?

DreamweaverCS3的Spry组件包括哪些类型?