跟我学Dreamweaver Spry设计工具——单层可折叠面板功能实现实例
- 格式:pdf
- 大小:435.99 KB
- 文档页数:12
跟我学Dreamweaver Spry设计工具——创建横向或纵向的网页下拉或弹出菜单杨教授工作室精心创作的优秀程序员职业提升必读系列资料目录1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单 .................2 1.1.1 Spry菜单栏...................................................................... ........................................2 1.1.2 自定义菜单栏组件的显示风格(修改CSS文件) .............................................9 1.1.3 更改菜单栏组件的方向 ..................................................................... . (15)杨教授工作室,版权所有,盗版必究, 1/19页杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1 Dreamweaver Spry菜单栏——创建横向或纵向的网页下拉或弹出菜单1.1.1 Spry菜单栏Spry 框架是一个 JavaScript 库,Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。
有了 Spry,就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中,创建构件(如折叠构件和菜单栏),向各种页面元素中添加不同种类的效果。
在设计上,Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和JavaScript 基础知识的用户使用。
1、菜单栏组件是一组可导航的菜单按钮当站点访问者将鼠标悬停在其中的某个按钮上时,将显示相应的子菜单。
使用菜单栏可在紧凑的空间中显示大量可导航信息,并使站点访问者无需深入浏览站点即可了解站点上提供的内容。
目录1.1Dreamweaver Spry 其它组件的功能实现实例 (2)1.1.1Spry验证复选框组件的应用实例 (2)1.1.2Spry 验证文本域组件应用实例 (7)1.1.3Spry验证选择组件应用实例 (15)1.1.4Spry验证密码组件应用实例 (20)1.1.5Spry工具提示组件应用实例 (22)1.1Dreamweaver Spry 其它组件的功能实现实例1.1.1Spry验证复选框组件的应用实例1、Spry表单验证组件Spry框架的构件除了可以提供层叠样式面板等提高用户体验的可视化工具外,还提供了一组用于验证表单数据的Spry构件,不用编写代码,就可以高效快捷地完成表单验证的任务。
这些验证框架有:1)验证文本框2)验证文本区域3)验证列表框4)验证复选框5)验证单选按钮6)验证密码框7)验证确认构件2、Spry验证复选框组件是HTML 表单中的一个或一组复选框(1)验证复选框组件是一组带有校验功能的复选框该验证复选框组件在用户选择(或没有选择)复选框时会显示组件的状态(有效或无效),可以向表单中添加验证复选框组件,该表单可能会要求用户进行三项选择。
如果用户没有进行所有这三项选择,该验证复选框组件会返回一条消息,声明不符合最小选择数要求。
下例显示处于各种状态的验证复选框组件:其中的“A”代表“验证复选框组件的最小选择数状态”,而“B”代表“验证复选框组件的必需状态”。
(2)验证复选框组件具有许多状态(例如,有效、无效、必需值等)可以根据所需的验证结果,使用属性检查器来修改这些状态的属性。
验证复选框组件可以在不同的时间点进行验证,例如当用户在验证复选框组件外部单击时、进行选择时或尝试提交表单时。
1)Initial state(初始状态)——验证复选框组件在页面加载后或表单被重置后的状态。
2)Required state(必选状态)——验证复选框组件通知要提交表单的用户,有复选框是必选项。
如何使用Dreamweaver进行网页设计的教程Dreamweaver是一种强大的网页设计工具,它为用户提供了丰富的功能和易于使用的界面,让网页设计变得简单而效果出色。
本教程将介绍如何使用Dreamweaver进行网页设计的基本步骤和技巧,帮助您快速上手并创造出令人印象深刻的网页作品。
第一步:创建新项目在打开Dreamweaver后,您会看到一个欢迎界面。
点击“创建新项目”按钮,并填写项目名称和存储位置。
第二步:选择合适的页面布局Dreamweaver提供了多种预设的页面布局模板,您可以根据自己的需要选择合适的模板。
如果您希望自定义布局,可以选择空白模板并手动添加元素。
第三步:设计网页结构在Dreamweaver的“设计视图”中,您可以直接拖拽各种元素来设计网页结构。
选择合适的布局容器,例如头部、导航栏、内容区和页脚,并将它们放置在页面中适当的位置。
第四步:编辑页面内容在Dreamweaver的“代码视图”中,您可以编辑页面的HTML和CSS 代码。
通过添加文本、图片和超链接等元素,您可以完善页面内容。
同时,您还可以使用Dreamweaver提供的代码提示和自动补全功能,提高编码效率。
第五步:优化网页加载速度Dreamweaver提供了一些优化工具,帮助您提升网页的加载速度。
可以使用它的优化选项来压缩CSS和JavaScript文件,以减小文件大小。
您还可以优化图片,使其加载更快,同时不损失图像质量。
第六步:测试和调试网页在进行最终发布之前,务必进行全面的测试和调试。
Dreamweaver提供了内置的预览功能,您可以在不离开软件的情况下查看网页的表现。
同时,您还可以在各种浏览器中进行测试,确保网页在不同的环境下正常显示和运行。
第七步:发布网页当您对网页的设计和功能满意后,可以使用Dreamweaver提供的FTP功能将网页上传到服务器上。
填写正确的FTP信息,并选择上传路径,即可将网页发布到互联网上,与他人共享您的作品。
“Spry 效果”是视觉增强功能,可以将它们应用于使用JavaScript 的 HTML 页面上几乎所有的元素。
效果通常用于在一段时间内高亮显示信息,创建动画过渡或者以可视方式修改页面元素。
您可以将效果直接应用于 HTML 元素,而无需其它自定义标签。
注:要向某个元素应用效果,该元素当前必须处于选定状态,或者它必须具有一个 ID。
例如,如果要向当前未选定的 div 标签应用高亮显示效果,该 div 必须具有一个有效的 ID 值。
如果该元素尚且没有有效的 ID 值,您将需要向 HTML 代码中添加一个 ID 值。
效果可以修改元素的不透明度、缩放比例、位置和样式属性(如背景颜色)。
可以组合两个或多个属性来创建有趣的视觉效果。
由于这些效果都基于 Spry,因此在用户单击应用了效果的元素时,仅会动态更新该元素,不会刷新整个 HTML 页面。
Spry 包括下列效果:显示/渐隐使元素显示或渐隐。
高亮颜色更改元素的背景颜色。
遮帘模拟百叶窗,向上或向下滚动百叶窗来隐藏或显示元素。
滑动上下移动元素。
增大/收缩使元素变大或变小。
晃动模拟从左向右晃动元素。
挤压使元素从页面的左上角消失。
重要说明:当您使用效果时,系统会在“代码”视图中将不同的代码行添加到您的文件中。
其中的一行代码用来标识 SpryEffects.js 文件,该文件是包括这些效果所必需的。
请不要从代码中删除该行,否则这些效果将不起作用。
有关 Spry 框架中可用的 Spry 效果的全面概述,请访问应用显示/渐隐效果注:此效果可用于除下列元素之外的所有 HTML 元素:applet、body、iframe、object、tr、tbody 和 th。
1.(可选)选择要为其应用效果的内容或布局元素。
2.在“行为”面板(“窗口”>“行为”)中,单击加号 (+)按钮,从菜单中选择“效果”>“显示/渐隐”。
3.从目标元素菜单中,选择元素的 ID。
如果已选择元素,请选择“<当前选定内容>”。
dreamweaver教程Dreamweaver 是一种常用的网页设计和开发工具,它具有强大的功能和直观的界面。
无论你是初学者还是有一定经验的开发者,下面是一些可以帮助你入门的 Dreamweaver 教程。
1. 创建新的网页文档打开 Dreamweaver,点击"文件"菜单,选择"新建"。
在弹出的窗口中,选择"空白页面",然后点击"创建"。
这将创建一个新的空白网页。
2. 插入标题和段落在网页中插入标题和段落很常见。
首先,点击工具栏上的"插入"按钮,然后选择"标题"。
在弹出的窗口中,输入标题的文本,并设置字体、大小、颜色等属性。
接下来,选择"段落",在网页中插入段落文本。
记住,每个标题和段落都应该有独特的内容。
3. 添加图片要向网页添加图片,先选择"插入"按钮,然后选择"图片"。
在弹出的窗口中,浏览你的计算机,选择你想要添加的图片文件,并点击"确定"。
确保每个图片的文件名和描述都不相同。
4. 创建超链接超链接是实现网页之间导航的重要工具。
要创建超链接,首先选择你希望添加链接的文本或图片。
然后,点击工具栏上的"插入"按钮,并选择"超链接"。
在弹出的窗口中,输入要链接的网页 URL 或选择已存在的文件链接。
确保每个链接的目标是唯一的。
5. 设置网页布局Dreamweaver 提供了丰富的布局选项。
要设置网页布局,先点击"窗口"菜单,选择"CSS 样式"。
在弹出的面板中,选择"新样式"并设置网页布局的外观和属性。
确保每个布局样式的名称不重复。
6. 预览和保存网页在完成网页设计后,可以通过点击工具栏上的"文件"按钮,选择"保存"来保存网页。
1.1跟我学Dreamweaver Spry设计工具——单层可折叠面板功能实现实例1.1.1Spry 单层可折叠面板(Collapsible Panel)
1、可折叠面板是一个面板
它可将内容存储到“紧凑”的空间中,用户单击可折叠面板的选项卡即可隐藏或显示存储在可折叠面板中的内容。
下图显示一个处于展开和折叠状态的可折叠面板:
其中的“A”代表“已展开”状态,而“B”代表“已折叠”状态。
2、新建一个文件名称为spryCollapsiblePanel.html的页面文件
3、在页面中插入可折叠面板
(1)选择“插入”>“Spry”>“Spry 可折叠面板”
也还可以使用“插入”面板中的“Spry”类别插入可折叠面板,如下图所示:
(2)系统自动地生成下面的内容页面
(3)熟悉所生成的HTML标签
在生成的可折叠面板的HTML页面文件中包含一个外部<div>标签,其中包含内容<div>标签和选项卡容器<div>标签。
(4)每个可折叠面板元素都有一个CSS样式名
这些样式控制可折叠面板的呈现风格,存放在外置的CSS文件SpryCollapsiblePanel.css 中。
在可折叠面板的HTML 页面文件中,在文档头中和可折叠面板的HTML 标签之后还包
括有JavaScript脚本标签及代码。
(5)初始化的脚本
初始化可折叠面板的JavaScript脚本实现将ID为CollapsiblePanel1的静态HTML标签转换为动态交互页面元素。
Spry.Widget.CollapsiblePanel()方法是框架中创建可折叠面板对象的构造函数,初始化对象的代码已经包含在SpryCollapsiblePanel.js文件中。
(6)保存页面及有关的CSS样式及JavaScript文件
4、修改可折叠面板标题、内容及默认状态
(1)修改可折叠面板标题和内容文字
(2)设置可折叠面板的默认状态
当系统在浏览器中加载网页时,可以设置可折叠面板的默认状态为打开或处于关闭状态。
只需要在“文档”窗口中选择一个可折叠面板,然后在属性检查器(“窗口”>“属性”)中,从“默认状态”弹出菜单中选择“打开”或“已关闭”。
(3)启用或禁用可折叠面板的动画
默认情况下,如果启用某个可折叠面板的动画,站点访问者单击该面板的选项卡时,该面板将缓缓地平滑打开和关闭。
如果希望禁用动画,则可折叠面板会迅速打开和关闭。
只需要在“文档”窗口中选择一个可折叠面板,然后在属性检查器(“窗口”>“属性”)中,选择或取消选择“启用动画”。
5、激活键盘导航组件的功能
使通过键盘也可以控制折叠组件,这对于不能使用鼠标的情况是很有用的。
键盘导航可以通过箭头键或其他自定义的键控制折叠组件。
而在折叠组件上实现键盘导航是很简单的,只需要为<div>标签添加tabindex 属性,这个属性告诉浏览器如何在文档中使用TAB键。
如果将tabindex属性值设为“0”,浏览器将不记入切换顺序中。
如果是一个正值,其顺序值则是有效的。
6、测试现在的效果
而用鼠标点击该标题时,内容将自动地收缩,如下图所示。
1.1.2自定义可折叠面板
1、实现的基本原理
(1)首先熟悉SpryCollapsiblePanel.css样式文件
可以通过直接修改可折叠面板的CSS样式文件(SpryCollapsiblePanel.css)中的默认规则和定义,并创建根据自己的喜好设置的可折叠面板。
比如,通过设置整个可折叠面板容器的属性或分别设置的各个组件的属性,可以设置可折叠面板的文本样式。
因为系统在创建Spry折叠组组件时,Dreamweaver 都会将SpryCollapsiblePanel.css文件保存到站点内的SpryAssets文件夹中。
(2)修改SpryCollapsiblePanel.css样式文件中相关的CSS样式项目
2、设置可折叠面板文本的样式
(1)修改整个(包括标签页中的文字和内容区中的文字)可折叠面板中的文本字体主要是由“.CollapsiblePanel”属性项目控制,该属性的默认值为“font: Arial; font-size:medium;”。
(2)也可以分别修改折叠面板选项卡中的标签文本字体
主要是由“.CollapsiblePanelTab”属性项目控制,该属性的默认值为“font: bold 0.7em sans-serif;”。
(3)当然,也可以修改内容面板中的内容区中的文本字体
主要是由“.CollapsiblePanelContent”属性项目控制,该属性的默认值为“font: Arial; font-size:medium;”。
3、更改可折叠面板的背景颜色
(1)修改折叠面板选项卡标签页的背景颜色
主要是由“.CollapsiblePanelTab”属性项目控制,该属性的默认值为“background-color: #DDD;”。
(2)修改内容面板的背景颜色
主要是由“.CollapsiblePanelContent”属性项目控制,该属性的默认值为“background-color: #DDD;”。
(3)修改在面板处于打开状态时的选项卡标签页的背景颜色
主要是由“.CollapsiblePanelOpen.CollapsiblePanelTab”属性项目控制
该属性的默认值为“background-color: #EEE;”。
(4)修改当鼠标指针移过(或者指向)已打开面板选项卡上方时的选项卡的背景颜色主要是由“.CollapsiblePanelTabHover,.CollapsiblePanelOpen .CollapsiblePanelTabHover”属性项目控制,该属性的默认值为“background-color: #CCC;”。
比如,修改为下面的值
再测试现在的效果。
4、限制可折叠面板的宽度和内容面板的高度
(1)默认情况下可折叠面板会展开以填充可用空间
可以通过为可折叠面板容器设置width 属性来限制可折叠面板本身的宽度,只需要打开SpryCollapsiblePanel.css文件,并查找“.CollapsiblePanel”属性项目的CSS规则定义。
此规则为可折叠面板的主容器元素定义属性。
(2)向该规则中添加一个width 属性和值
(3)限制折叠组组件的“内容区域”的高度
默认情况,当开启动画效果的时候,面板的高度取决于面板内容的高度。
在SpryCollapsiblePanel.css文件中查找“.CollapsiblePanelContent”属性项目的CSS 规则定义,此规则可用来定义折叠组组件的内容面板元素的属性。
修改其中的“height”属性项目的值就可以控制折叠组组件内容面板的高度。
如果将“height”属性项目的值设置为“height: auto;”,则可以使得浏览器自适应内容面板内的文字实际的高度。
但如果将height:50px; 不起作用,不知道是什么原因?
5、改变折叠组件面板的切换方式从鼠标点击转变为鼠标指示
(1)修改SpryCollapsiblePanel.js文件中的onTabMouseOver事件定义的代码
在SpryCollapsiblePanel.js文件中查找Spry.Widget.Accordion.prototype.onTabMouseOver的函数定义,将原来的代码(如下所示):
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(){
this.addClassName(this.getTab(), this.hoverClass);
};
改变为下面的代码:
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(){
if (this.isOpen())
this.close();
else
this.open();
this.focus();
};
(2)测试修改后的效果
6、设置鼠标离开标签页时内容区自动折叠
(1)当内容区的内容为“只读”时,可以设置鼠标离开标签页时内容区自动折叠内容区域(2)实现的方法
在onTabMouseOut的事件响应函数中增加一条下面的语句:
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(){
this.removeClassName(this.getTab(), this.hoverClass);
this.close();
};。