计算机网络与网页制作Chapter 17 ：使用 Spry 组件

复旦大学计算机学院

肖川cxiao@fudan.edu.cn

目标 创建 Spry 菜单 创建 Spry 选项卡式面板 创建 Spry 折叠式面板 创建 Spry 可折叠面板 用 CSS 设定 Spry 组件样式

2

3

效果

4

1. 构建 Spry 下拉菜单 定位光标，菜单 插入 >>Spry>>Spry 菜单栏。

单击蓝色标签激活“属性”面板

5

在“属性”面板设置菜单项菜单项指向的网页

6

预览效果

7

2. 用 CSS 设定 Spry 组件样式 一个自动附加至页面的外部样式表，用于控制 Spry 菜单栏的外观

8

控制 Spry 菜单栏的整体外观和尺寸名称最长的规则

9

预览效果

10

3. 创建 Spry 选项卡式面板 定位光标，菜单 插入 >>Spry>>Spry 选项卡式面板。

直接修改标签或者在面板内直接输入内容

决定面板的数量和顺序

11

填充卡式面板的内容单击眼睛图标则打开眼睛所在面板，以便修改面板内容

剪切页面的内容，粘贴至面板内。 保存时消息提示

12

预览效果

13

4. 修改 Spry 选项卡式面板的样式

设定面板的高度

14

再次预览效果改变了标签及面板的背景色

15

5. 创建 Spry 折叠式面板 定位光标，菜单 插入 >>Spry>>Spry 折叠式。

直接修改标签或者在面板内直接输入内容

决定面板的数量和顺序

16

填充折叠式面板的内容单击眼睛图标则打开眼睛所在面板，以便修改面板内容

拷贝rightside.txt 的内容，粘贴至面板内。注：面板内不限于存放文本。

保存时消息提示

17

预览效果

18

6. 修改 Spry 折叠式面板的样式

未展开的标签颜色 展开的标签颜色 面板的背景色和高度

19

修改 Spry 折叠式面板的样式

面板成为页面焦点时未展开标签的颜色 面板成为页面焦点时展开标签的颜色

20

再次预览效果

21

7. 创建 Spry 可折叠面板 定位光标，菜单 插入 >>Spry>>Spry 可折叠面板。

直接修改标签或者在面板内直接输入内容设计视图中面板的状态

单击眼睛图标则打开面板，以便修改面板内容

22

填充可折叠面板的内容 插入表单，再往表单里插入文本域和按钮。

插入文本域 插入按钮

23

8. 修改 Spry 可折叠面板的样式

面板关闭时标签的颜色 面板展开时标签的颜色

24

预览效果

25

小结 Spry 菜单 Spry 选项卡式面板 Spry 折叠式面板 Spry 可折叠面板