Dreamweaver CS3集成Spry之表单检测试用

2016-02-19 19:56 12 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Dreamweaver CS3集成Spry之表单检测试用,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

Dreamweaver CS3集成了AJAX框架Spry,使得我最近对Spry感上了兴趣。

再次说明下Spry是Adobe公司推出的AJAX框架,所谓AJAX框架,就先谈目前流行的Web2.0。

1,这些Web2.0站点从页面形式上来看,页面与浏览者的交互很时尚、也很人性化。比如注册信息时输入邮箱不规则,页面立即提示……当然这在Web2.0之前已有应用,但是从来没有哪个时候像现在如此推崇此类即时检测等很符合用户体验的技术,这些脱离不了Javascript脚本的编写,其已属于AJAX的定义范畴。

2,当然AJAX不仅仅是这些,比如要做个“TabPane 选项卡”很炫酷的页面展示功能,我们手写Javascript脚本就比较的费事,当然还有很多的在Web2.0站点看到的比如“显示和隐藏”、“淡入淡出”等特效,这些都离不开Javascript,而现在我们也称为AJAX技术。

3,AJAX最核心的技术就是数据处理的能力,并能进行远程异步处理的能力,主要集中在对XML数据的数据交互上。

所有这些,Javascript占最大比重,XHTML、CSS作为表现形式而存在、因XML涉及的XSLT、XPATH等技术融入其中,还有相关的DOM操作,这些所有有需要功能文件的组合体就构成了AJAX框架(如果可以,你也可以自己写一个AJAX框架给大家使用)。

Adobe Spry 介绍页有这样一句话:

With Spry, you can use HTML code, CSS code, and a minimal amount of JavaScript to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements.

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

使用Spry框架,用HTML、CSS、JavaScript就可以在HTML文章中展现XML数据、建立诸如炫酷菜单的一些界面,还有其他的一些页面特效(大体上分了三类内容,这也是Spry AJAX框架所具备的)。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

由此,学习Spry就可以从如下三点开始:

Working with Spry widgets

Working with Spry Effects

Working with Spry XML Data Sets

前天关于Dreamweaver CS3集成Spry效果试用 就是Spry widgets中的一例,今天介绍的表单检测还属其中内容。

在页面中插入“Spry”-“Spry validation text field”文本框之后,在选中该表单元素之后除了显示其元素属性以外,在选择该表单元素之上的蓝色文本“Spry TextField”,属性面板中显示了表单验证相关的选项内容。

比如下图就是选择“Type”是“Email Address”的邮件输入检测,触发的动作默认是“Submit”,当然自己也可以选择“Blur”或“Change”,对于这些操作,则要求使用者具备简单的Javascript知识。还可以设置默认文本提示,是否必须填写等。


这些操作,对于有Dreamweaver经验的用户来说,曾经是在DW的脚本行为中的操作,不过那些显示的是弹出警告框,而现在是紧随表单元素之后的即时显示的文字信息,相比较一下哪个更让用户觉得亲切呢?——这就是Web2.0在表现形式上质的飞跃。

利用Spry框架提供这些操作不仅生成基于标准的XHTML+CSS代码,还能完成完善用户体验的页面功能,这是在Dreamweaver cs3初试Spry的体会。

来源:http://www.tulaoshi.com/n/20160219/1622336.html

延伸阅读
标签: Web开发
包含在Adobe Creative Suite 3.0中的Dreamweaver 9究竟如何?让我们来一探究竟。首先,安装界面给人的感觉比Macromedia门下的8.0要漂亮许多,Splash也很有质感。笔者一直很讨厌8.0的Splash画面,但随后笔者就发现一个问题,DW的Logo好像不见了。 图1 Dreamweaver 8与9(Alpha1)的启动封面对比
标签: Web开发
HEAD元素中包含了许多重要的信息,例如文档类型、语言编码、JavaScript和VBscript的函数和变量、搜索引擎的要害字和内容提示等。您可以使用VIEW-HEAD CONTENT或HTML检查器(F10)查看其内容。 要将元素插入文档的HEAD部分请选OBJECT面板的HEAD,下面介绍一下HEAD元素的部分属性: Meta:它可以记录当前页面的信息,例如字符编码、作者、版权和...
标签: Web开发
层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先,请 看下图:   我们首先来做一个层 1、 在「窗口」菜单>选层 , 或点「插入」菜单>布局对象 > 选层。 2、 在页面中显...
标签: Web开发
最新的Dreamweaver cs3在使用时,经常会遇到CPU 100%的情况 不过现在有了一款补丁,可以暂时解决该问题。 经测试效果可行:)
标签: Web开发
此前piscdong已经做过一次评测了,这次的Beta正式推出,我也来参与一下.当回小白鼠吧. 新的界面设计非常让人兴奋 页面内链接进来的css和js文件都可以在这里选择并进入编辑. 代码检查(Code Inspector)功能可以让你非常方便的在设计视图中进行代码修改 各种窗口都可以以图标方式在右边显示,需要时再调用出来,节...

经验教程

565

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部