Download
1 / 25
250 likes | 450 Views
计算机网络 与网页制作 Chapter 17 ： 使用 Spry 组件. 复旦大学计算机学院. 肖川 cxiao@fudan.edu.cn. 目标. 创建 Spry 菜单 创建 Spry 选项卡式面板 创建 Spry 折叠式面板 创建 Spry 可折叠面板 用 CSS 设定 Spry 组件 样式. 效果. 1. 构建 Spry 下拉菜单. 单击蓝色标签激活“属性”面板. 定位光标，菜单 插入 >>Spry>>Spry 菜单栏。. 在“属性”面板设置菜单项. 菜单项指向的网页. 预览效果. 2. 用 CSS 设定 Spry 组件样式.
E N D
计算机网络与网页制作Chapter 17：使用Spry组件 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn
目标 • 创建Spry菜单 • 创建Spry选项卡式面板 • 创建Spry折叠式面板 • 创建Spry可折叠面板 • 用CSS设定Spry组件样式
1. 构建Spry下拉菜单 单击蓝色标签激活“属性”面板 定位光标，菜单 插入>>Spry>>Spry菜单栏。
在“属性”面板设置菜单项 菜单项指向的网页
2. 用CSS设定Spry组件样式 一个自动附加至页面的外部样式表，用于控制Spry菜单栏的外观
控制Spry菜单栏的整体外观和尺寸 名称最长的规则
3. 创建Spry选项卡式面板 直接修改标签或者在面板内直接输入内容 决定面板的数量和顺序 定位光标，菜单 插入>>Spry>>Spry选项卡式面板。
填充卡式面板的内容 单击眼睛图标则打开眼睛所在面板，以便修改面板内容 剪切页面的内容，粘贴至面板内。 保存时消息提示
4. 修改Spry选项卡式面板的样式 设定面板的高度
再次预览效果 改变了标签及 面板的背景色
5. 创建Spry折叠式面板 直接修改标签或者在面板内直接输入内容 决定面板的数量和顺序 定位光标，菜单 插入>>Spry>>Spry折叠式。
填充折叠式面板的内容 单击眼睛图标则打开眼睛所在面板，以便修改面板内容 拷贝rightside.txt的内容，粘贴至面板内。注：面板内不限于存放文本。 保存时消息提示
6. 修改Spry折叠式面板的样式 未展开的标签颜色 展开的标签颜色 面板的背景色和高度
修改Spry折叠式面板的样式 面板成为页面焦点时未展开标签的颜色 面板成为页面焦点时展开标签的颜色
7. 创建Spry可折叠面板 单击眼睛图标则打开面板，以便修改面板内容 直接修改标签或者在面板内直接输入内容 设计视图中面板的状态 定位光标，菜单 插入>>Spry>>Spry可折叠面板。
填充可折叠面板的内容 插入文本域 插入按钮 插入表单，再往表单里插入文本域和按钮。
8. 修改Spry可折叠面板的样式 面板关闭时标签的颜色 面板展开时标签的颜色
小结 • Spry菜单 • Spry选项卡式面板 • Spry折叠式面板 • Spry可折叠面板
