计算机网络 与网页制作 chapter 17 : 使用 spry 组件
DESCRIPTION
计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件. 复旦大学计算机学院. 肖川 [email protected]. 目标. 创建 Spry 菜单 创建 Spry 选项卡式面板 创建 Spry 折叠式面板 创建 Spry 可折叠面板 用 CSS 设定 Spry 组件 样式. 效果. 1. 构建 Spry 下拉菜单. 单击蓝色标签激活“属性”面板. 定位光标,菜单 插入 >>Spry>>Spry 菜单栏。. 在“属性”面板设置菜单项. 菜单项指向的网页. 预览效果. 2. 用 CSS 设定 Spry 组件样式. - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/2.jpg)
目标 创建 Spry 菜单 创建 Spry 选项卡式面板 创建 Spry 折叠式面板 创建 Spry 可折叠面板 用 CSS 设定 Spry 组件样式
2
![Page 3: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/3.jpg)
3
效果
![Page 4: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/4.jpg)
4
1. 构建 Spry 下拉菜单 定位光标,菜单 插入 >>Spry>>Spry 菜单栏。
单击蓝色标签激活“属性”面板
![Page 5: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/5.jpg)
5
在“属性”面板设置菜单项菜单项指向的网页
![Page 6: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/6.jpg)
6
预览效果
![Page 7: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/7.jpg)
7
2. 用 CSS 设定 Spry 组件样式 一个自动附加至页面的外部样式表,用于控制 Spry 菜单栏的外观
![Page 8: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/8.jpg)
8
控制 Spry 菜单栏的整体外观和尺寸名称最长的规则
![Page 9: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/9.jpg)
9
预览效果
![Page 10: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/10.jpg)
10
3. 创建 Spry 选项卡式面板 定位光标,菜单 插入 >>Spry>>Spry 选项卡式面板。
直接修改标签或者在面板内直接输入内容
决定面板的数量和顺序
![Page 11: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/11.jpg)
11
填充卡式面板的内容单击眼睛图标则打开眼睛所在面板,以便修改面板内容
剪切页面的内容,粘贴至面板内。 保存时消息提示
![Page 12: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/12.jpg)
12
预览效果
![Page 13: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/13.jpg)
13
4. 修改 Spry 选项卡式面板的样式
设定面板的高度
![Page 14: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/14.jpg)
14
再次预览效果改变了标签及面板的背景色
![Page 15: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/15.jpg)
15
5. 创建 Spry 折叠式面板 定位光标,菜单 插入 >>Spry>>Spry 折叠式。
直接修改标签或者在面板内直接输入内容
决定面板的数量和顺序
![Page 16: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/16.jpg)
16
填充折叠式面板的内容单击眼睛图标则打开眼睛所在面板,以便修改面板内容
拷贝rightside.txt 的内容,粘贴至面板内。注:面板内不限于存放文本。
保存时消息提示
![Page 17: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/17.jpg)
17
预览效果
![Page 18: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/18.jpg)
18
6. 修改 Spry 折叠式面板的样式
未展开的标签颜色 展开的标签颜色 面板的背景色和高度
![Page 19: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/19.jpg)
19
修改 Spry 折叠式面板的样式
面板成为页面焦点时未展开标签的颜色 面板成为页面焦点时展开标签的颜色
![Page 20: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/20.jpg)
20
再次预览效果
![Page 21: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/21.jpg)
21
7. 创建 Spry 可折叠面板 定位光标,菜单 插入 >>Spry>>Spry 可折叠面板。
直接修改标签或者在面板内直接输入内容设计视图中面板的状态
单击眼睛图标则打开面板,以便修改面板内容
![Page 22: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/22.jpg)
22
填充可折叠面板的内容 插入表单,再往表单里插入文本域和按钮。
插入文本域 插入按钮
![Page 23: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/23.jpg)
23
8. 修改 Spry 可折叠面板的样式
面板关闭时标签的颜色 面板展开时标签的颜色
![Page 24: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/24.jpg)
24
预览效果
![Page 25: 计算机网络 与网页制作 Chapter 17 : 使用 Spry 组件](https://reader030.vdocuments.mx/reader030/viewer/2022033009/568161e5550346895dd2078f/html5/thumbnails/25.jpg)
25
小结 Spry 菜单 Spry 选项卡式面板 Spry 折叠式面板 Spry 可折叠面板