《Dreamweaver CS6 完全自学教程》笔记 第十七章：Spry 框架技术
文章目录
- 第十七章：Spry 框架技术
- 17.1 Spry 菜单栏
- 17.1.1 插入 Spry 菜单栏
- 17.1.2 设置 Spry 菜单栏的属性
- 17.1.3 设置菜单项的尺寸
- 17.2 Spry 选项卡式面板
- 17.2.1 插入 Spry 选项卡式面板
- 17.2.2 设置 Spry 选项卡式面板的属性
- 技术专题：自定义选项卡式面板的 CSS 样式
- 17.2.3 调整 Spry 选项卡式面板的宽度
- 17.3 Spry 折叠式构件
- 17.3.1 插入 Spry 折叠式构件
- 17.3.2 设置 Spry 折叠式构件的属性
- 技术专题：自定义折叠构件的 CSS 样式
- 17.3.3 调整 Spry 折叠式构件的宽度
- 17.4 Spry 可折叠面板
- 17.4.1 插入 Spry 可折叠面板
- 17.4.2 设置 Spry 可折叠面板的属性
- 技术专题：自定义 Spry 可折叠面板的 CSS 样式
- 17.4.3 调整 Spry 可折叠面板的宽度
- 17.5 Spry 工具提示
- 17.5.1 插入 Spry 工具提示
- 17.5.2 设置 Spry 工具提示的属性
第十七章：Spry 框架技术
17.1 Spry 菜单栏
Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以为站点访问者提供更丰富的 Web 效果。有了 Spry ，就可以使用 HTML、CSS 和极少量的 JS 创建构件（比如折叠构件和菜单栏）。在设计上，Spry 框架的标记非常简单，且便于那些具有 HTML、CSS 和 JS 基础知识的用户使用。
17.1.1 插入 Spry 菜单栏
将光标放置在要插入位置，点击 插入 -> Spry -> Spry 菜单栏，或单击 “插入” 面板上的 “ Spry 菜单栏” ，打开 “ Spry 菜单栏” 对话框，在对话框中选择 “水平” 或 “垂直” 布局。
17.1.2 设置 Spry 菜单栏的属性
参数介绍：
- 菜单条： 在该文本框中可以为插入到页面中的 Spry 菜单栏命名。
- 自定义此 Widget： 可以链接到 Adobe 官网的相关页面。
- “禁用样式” 按钮： 可以禁用 Spry 菜单栏的 CSS 样式，以便查看 HTML 结构。
- 菜单项列表： 在 “属性” 面板中间显示有 3 个列表，从左至右为 “主菜单项列表”、“子菜单项列表”、“ 3 级菜单项列表”，每个列表中可以对相应的菜单项进行添加、删除以及调整顺序的操作。
- 文本： 更改选中的菜单项的名称。
- 链接： 为选中的菜单项设置相应的链接。
- 标题： 为选中的菜单项设置提示文本。
- 目标： 设置链接的打开方式，比如直接打开或是在新窗口中打开。
插入 Spry 内容后，保存页面时，会弹出 “复制相关文件” 窗口，点击确定后，会自动复制到站点目录的 SpryAssets 文件夹内。
17.1.3 设置菜单项的尺寸
可以通过更改菜单项的 li 和 ul 标签的 width 属性，来更改菜单项的尺寸。打开 SpryAssets 文件夹中的 SpryMenuBarHorizontal.css 文件，找到 ul.MenuBarVertical li 或 ul.MenuBarHorizontal li 规则：
ul.MenuBarHorizontal li{margin: 0;padding: 0;list-style-type: none;font-size: 100%;position: relative;text-align: left;cursor: pointer;width: 8em;float: left;
}
将 width 属性改为所需要的宽度，或更改为 auto 。然后添加 white-space: nowrap;。
17.2 Spry 选项卡式面板
17.2.1 插入 Spry 选项卡式面板
将光标放置于要插入位置，点击 插入 -> Spry -> Spry 选项卡式面板 ，或点击 “插入” 面板上的 “ Spry 选项卡式面板” 按钮即可。
17.2.2 设置 Spry 选项卡式面板的属性
参数介绍：
- 选项卡式面板： 可以为 Spry 选项卡式面板命名。
- 自定义此 Widget： 可以链接到 Adobe 官网的相关页面。
- 面板： 显示了该 Spry 选项卡式面板的各个面板，可以添加、删除面板或调整前后顺序。
- 默认面板： 选择某个面板，在默认情况下所选择的面板将显示，而其他面板将隐藏。
技术专题：自定义选项卡式面板的 CSS 样式
在插入 Spry 选项卡式面板时，会自动创建 SpryTabbedPanels.css 文件，并保存到 SpryAssets 文件夹中。
- 更改选项卡式面板的文本样式：
- 更改选项卡式面板的背景颜色：
17.2.3 调整 Spry 选项卡式面板的宽度
默认情况下，Spry 选项卡式面板的宽度会显示为 100% ，但可以通过 CSS 样式中的 width 属性来限制其宽度。
打开 SpryTabbedPanels.css ，找到 .TabbedPanels 规则，然后在 Width 属性中进行调整。
17.3 Spry 折叠式构件
17.3.1 插入 Spry 折叠式构件
点击 插入 -> Spry -> Spry 折叠式，或点击 “插入” 面板上的 “ Spry 折叠式” 按钮就即可。
17.3.2 设置 Spry 折叠式构件的属性
参数介绍：
- 折叠式： 为插入到页面的 Spry 折叠式构件命名。
- 面板： 可以进行添加和删除面板或调整顺序。、
技术专题：自定义折叠构件的 CSS 样式
- 更改折叠式构件的文本样式
- 更改折叠式构件的背景颜色
17.3.3 调整 Spry 折叠式构件的宽度
默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。
打开 SpryAccordion.css 找到 .Accordion 规则，添加 width 属性即可。
17.4 Spry 可折叠面板
17.4.1 插入 Spry 可折叠面板
点击 插入 -> Spry -> Spry 可折叠面板，或点击 “插入” 面板上的 “ Spry 可折叠面板” 按钮即可。
17.4.2 设置 Spry 可折叠面板的属性
参数介绍：
- 可折叠面板： 进行命名
- 显示： 可以设置 Spry 可折叠面板在 Dreamweaver CS6 的设计视图中是打开还是关闭，默认为 “打开” 。
- 默认状态： 设置在浏览器中浏览 Spry 可折叠面板时， Spry 可折叠面板的默认状态。
- 启用动画： 面板将缓缓地平滑打开和关闭。
技术专题：自定义 Spry 可折叠面板的 CSS 样式
- 更改折叠式面板的文本样式
- 更改折叠式面板的背景颜色
17.4.3 调整 Spry 可折叠面板的宽度
默认宽度显示为 100%，但可以通过设置 CSS 样式中的 width 属性来限制其宽度。
打开 SpryCollapsiblePanel.css 找到 .CollapsiblePanel 规则，添加 width 属性即可。
17.5 Spry 工具提示
Spry 工具提示可以在鼠标滑过某网页对象时显示一段文字，并在滑开时隐藏。
17.5.1 插入 Spry 工具提示
将光标放置于要插入位置，点击 插入 -> Spry -> Spry 工具提示 即可。
17.5.2 设置 Spry 工具提示的属性
参数介绍：
- Spry 工具提示： 给 Spry 工具提示命名。
- 触发器： 用于激活提示工具的元素。
- 跟随鼠标： 提示工具会跟随鼠标。
- 鼠标移开时隐藏： 只要鼠标离开触发器元素，工具提示就会自动关闭。
- 水平偏移量： 设置工具提示与鼠标的水平相对位置，单位为像素，默认为 20px。
- 垂直偏移量： 设置工具提示与鼠标的垂直相对位置，单位为像素，默认为 20px。
- 显示延迟： 设置工具提示出现的延迟，单位为毫秒，默认为 0。
- 隐藏延迟： 设置工具提示隐藏的延迟，单位为毫秒，默认为 0。
- 效果： 选择出现工具提示时的效果，有 “无”、“遮帘”、“渐隐” 3 种。
《Dreamweaver CS6 完全自学教程》笔记 第十七章：Spry 框架技术相关推荐
- 《Dreamweaver CS6 完全自学教程》笔记
声明: 博主完全采用自学方式进行学习,内用不够严谨,学习路线不够系统,仅可用作参考,如有错误请及时指正. 博主主要参考<Dreamweaver CS6 完全自学教程>这本书进行学习,但不限 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十四章：使用 CSS 设计网页
文章目录 第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十三章：Dreamweaver 中的 HTML 代码
文章目录 第十三章:Dreamweaver 中的 HTML 代码 13.1 HTML 介绍 13.2 HTML 的基本结构 13.2.1 单标签 13.2.2 双标签 13.2.3 标签属性 13.3 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第五章：网页中的图像编辑
文章目录 第五章:网页中的图像编辑 5.1 图像占位符 5.1.1 插入图像占位符 5.1.2 将图像占位符替换为图像 技术专题:预览网页时不显示图像的问题 5.2 交互式图像 实战:创建网页导航条 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第六章：使用表格进行网页布局
文章目录 第六章:使用表格进行网页布局 6.1 创建表格 6.2 应用表格 6.2.1 输入表格内容 6.2.2 选定表格元素 6.2.3 设置表格与单元格属性 实战:制作细线表格 6.2.4 添加和 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十章：表单的使用
文章目录 第十章:表单的使用 10.1表单概述 技术专题:表单的工作流程 10.2表单的创建及设置 10.2.1 创建表单 10.2.2 设置表单属性 10.3 创建表单对象 10.3.1 创建文本域 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十二章：框架的应用
文章目录 第十二章:框架的应用 12.1 创建框架或框架集 12.1.1 创建自定义框架 12.1.2 创建预定义框架 技术专题:框架的拆分与合并 12.1.3 创建嵌套框架 12.2 框架和框架集的 ...
- 《Dreamweaver CS6 完全自学教程》笔记 附录：Dreamweaver 常用快捷键、HTML 代码标签、CSS 属性
返回
- 《Adobe Dreamweaver CS6中文版经典教程》——第2课 HTML基础2.1 什么是HTML
本节书摘来自异步社区<Adobe Dreamweaver CS6中文版经典教程>一书中的第2 章,第2.1节,作者:[美]Adobe公司 更多章节内容可以访问云栖社区"异步社区& ...
最新文章
- 二维码QR Code不是一个产品,是一个功能
- DM8168学习--内存烧写位置
- Solr入门和实践以及我对Solr的8点理解
- SpringBoot入门 (一) HelloWorld
- python选择题题库百度文库_大学Python程序题题库
- [Swift通天遁地]二、表格表单-(11)创建星期选项表单和拥有浮动标签的文本框
- 对不起，我不是你爸爸
- mfc动态改变clip风格_欧式古典家具风格的演变历程
- Nature | 易基因DNA甲基化测序助力人多能干细胞向胚胎全能8细胞的人工诱导
- 公网Wiki站点搭建全流程攻略·小白向（含Parsoid和VisualEditor）
- 使用EasyExcel上传下载excel
- TypeScript 学习笔记（四）--- 泛型（Generics）
- 风机疲劳载荷谱转SACS疲劳载荷定义文件
- MAC | svn: E175002: DAV request failed: 411 Content length required.
- Android 登录3D翻转动画效果
- 8000401a和80080005
- 安卓SDK和安卓版本的对应关系
- [网易博客]淘宝技术这十年读后感
- IntelliJ IDEA详细配置图解，挖掘更多的功能！
- Vue项目开发中优雅的切换服务端ip