第六章-spry框架和表单(课堂PPT).ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第六章,spry,框架和表单,本章主要内容：,Spry,效果,Spry,控件,表单,1,一、,Spry,效果,1,、什么是,spry,？,Spry,框架是一个,JavaScript,库，,Web,设计人员使用它可以构建能够向站点访问者提供更丰富体验的,Web,页。有了,Spry,，就可以使用,HTML,、,CSS,和极少量的,JavaScript,将,XML,数据合并到,HTML,文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果,2,2,、,Spry,效果,Spry,效果是一种提高网站外观吸引力的简洁方式。这种效果可以应用于几乎所有的,html,元素中。,一、,Spry,效果,3,一、,Spry,效果,Spry,效果包括下列效果,增大,/,收缩：使元素变大或变小,挤压：使元素从页面的左上角消失,显示,/,渐隐：使元素显示或渐隐,晃动：模拟从左往右晃动元素,滑动：上下移动元素,遮帘：模拟百叶窗，向上或向下滚动百叶窗来显示或隐藏某些元素,高亮颜色：改变元素的背景颜色,效果实例：,1.html,4,(,一,)Spry,效果详解,增大,/,收缩效果,应用对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,p,、,ol,、,ul,、,applet,、,center,、,dir,、,menu,、,pre,5,目标元素：该效果施加的对象,效果持续时间：出现该效果所需要的时间,效果：选择要应用的效果，增大或者缩小,增大自,/,收缩自：定义对象在效果开始是的大小,增大到,/,收缩到：定义该效果结束时的大小。,收缩到：是收缩到页面的左上角还是页面的中心。,切换效果：如果希望该效果是可逆的。,6,（一）,Spry,效果详解,挤压效果（实例,2.html,）,此效果适用于以下,html,对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,img,、,p,、,ol,、,applet,、,center,、,dir,、,menu,、,pre,7,Spry,效果详解,显示渐隐效果（实例,3.html,）,此效果适用于除,applet,、,body,、,iframe,、,object,、,tr,、,tbody,、,th,以外的所有,html,对象,8,（一）,Spry,效果详解,晃动效果（实例,4.html,）,此效果适用于下列,html,对象：,address,、,blockquote,、,dd,、,div,、,dl,、,dt,、,fieldset,、,form,、,h1-h6,、,Iframe,、,img,、,object,、,p,、,ol,、,ul,、,li,、,applet,、,dir,、,hr,、,menu,、,pre,、,table,9,（一）,Spry,效果详解,滑动效果（实例,5.html,）,此效果仅适用于下列,html,对象：,blockquote,、,dd,、,div,、,form,、,center,滑动效果的内容必须有一个,标签,10,（一）,Spry,效果详解,遮帘效果（实例,6.html,）,此效果仅适用于下列,html,对象：,address,、,dd,、,div,、,dl,、,dt,、,form,、,h1,、,h2,、,h3,、,h4,、,h5,、,h6,、,p,、,ol,、,ul,、,li,、,applet,、,center,、,dir,、,menu,、,pre,11,二、,Spry,控件,1,、什么叫,spry,控件？,Spry,框架支持一组用标准,HTML,、,CSS,和,javaScript,编写的可重用控件。在利用,Dreamweaver CSS,制作网页时，可以方便地插入这些控件，然后设置控件的样式。常用的,Spry,控件有：,Spry,菜单栏、,Spry,选项卡式面板、,Spry,折叠式、,Spry,可折叠面板。,12,二、,Spry,控件的使用,插入,spry,控件,可折叠面板控件,菜单栏控件,选项卡控件,折叠式控件,13,二、,Spry,控件的使用,选择和编辑,spry,控件,14,二、,Spry,控件的使用,设置,spry,控件的样式,样式是有,CSS,样式表实现的，要控制其样式只要对相应的,CSS,样式表进行编辑即可。,15,二、,Spry,控件的使用,Spry,的,js,代码的保存。,16,（一）,Spry,控件,-,菜单栏控件,Spry,菜单栏控件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时将会显示相应的子菜单。,插入,”,spry,菜单栏,”,控件,17,Spry,控件,-,菜单栏控件,编辑,”,spry,菜单栏,”,控件,18,Spry,控件,-,菜单栏控件,预览,19,Spry,控件,-,菜单栏控件,更改菜单栏外观,利用,CSS,样式表进行更改。,更改菜单项的文本样式,要更改的样式,垂直或水平菜单栏的,CSS,规则,相关属性和默认值,默认文本,鼠标指针移过文本上方时，文本的颜色,具有焦点的文本颜色,当鼠标指针移过菜单栏上方时，菜单栏项的颜色,当鼠标指针移过子菜单上方时，子菜单项的颜色。,20,（二）,Spry,控件,-spry,选项卡,21,二、,Spry,控件,-spry,选项卡,插入,”,spry,选项卡面板,”,编辑,”,spry,选项卡面板,”,控件,22,Spry,控件,-spry,选项卡,编辑,CSS,样式表更改面板控件的高度,23,（二）,Spry,控件,-spry,选项卡,编辑,JS,文件更改鼠标的事件,24,（三）,Spry,控件,-spry,折叠式控件,25,（三）,Spry,控件,-spry,折叠式控件,插入,“,spry,折叠式控件,”,编辑控件,26,（四）,Spry,控件,-spry,可折叠面板控件,27,三、表单,表单的主要功能：收集客户端的信息，客户端发送信息到服务器以后，服务器端的程序可以处理客户端输入的信息。,28,3.,表单,29,三、表 单,插入表单,左图是网易通行证的注册网页，需要填写一些个人信息，如姓名、性别、出生日期、证件号码等。填写信息的页面上包括很多表单对象，如文本框、单选按钮、下拉列表框、按钮等。,所有这些表单对象合在一起，称为表单。,30,三、表 单,插入表单,插入表单的步骤如下：,（,1,）将光标定位到要插入表单的位置。在插入工具栏单击,“,表单,”,选项，打开表单对象列表。,（,2,）单击,“,表单,”,按钮，或选择,“,插入记录,”,|,“,表单,”,|,“,表单,”,命令，即可在光标处插入表单；插入的表单在窗口中以红色虚线框表示。,（,3,）将光标定位到插入的表单中，可打开表单,“,属性,”,面板。,（,4,）在,“,表单名称,”,文本框中输入标识该表单的唯一名称；在,“,动作,”,文本框中输入处理该表单的页面或脚本的路径，,或者单击文件夹图标定位到适当的页面或脚本,。,31,“,方法,”,下拉列表框用来选择将表单数据传输到服务器的方式。其选项的含义如下：,默认：,使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。,GET,：将表单数据附加在请求页面的,URL,地址后面。,GET,方法用来传送少量数据，字符数不能超过,8192,个字符。,POST,：将在,HTTP,请求中嵌入表单数据。,POST,方法用来传送大量数据。,32,三、表 单,“,目标,”,下拉列表框用来设定提交表单后，请求页面将以何种方式显示返回的结果。,其中各选项的含义如下：,_blank,：在未命名的新窗口中显示返回结果。,_parent,：在显示当前页面的窗口的父窗口中显示返回结果。,_self,：在显示当前页面的窗口中显示返回结果。,_top,：在顶层窗口中显示返回结果。,33,三、表 单,“,MIME,类型,”,下拉列表框：,用于指定提交给服务器进行处理的数据使用的编码类型。,默认设置为,“,application/x-www-form-urlencode,”,，通常与,POST,方法协同使用。,如果表单包含文件上传对象，则应选择,“,multipart/form-data,”,类型。,34,三、表 单,插入表单对象,创建了表单之后，就可以往其中插入不同类型的表单对象，有以下两种方法：,（,1,）选择,“,插入记录,”,菜单中的,“,表单,”,命令，在弹出的子菜单中选择相应的命令。,（,2,）在插入工具栏的,“,表单,”,对象列表中单击相应的按钮。,35,三、表 单,添加按钮,添加按钮的步骤如下：,（,1,）将光标定位在表单中要插入按钮的位置，在插入工具栏的,“,表单,”,对象列表中单击按钮，在表单中插入按钮。,（,2,）选中按钮，在,“,按钮名称,”,文本框中输入按钮的名称；在,“,值,”,文本框中输入在按钮上显示的文本，便于浏览者了解按钮的作用。,36,“,动作,”,选项组用于指定单击按钮后产生的动作。其中各单选按钮的功能如下：,提交表单：单击该按钮后，向服务器提交,表单数据进行处理。,重设表单：单击该按钮后，清除表单中的所有内容，用户可以重新填写。,无：单击该按钮后，执行指定的操作。例如，可以添加一段JavaScript脚本，使得当用户单击该按钮时弹出一个消息框。,37,三、表 单,添加文本域,文本域是用户可在其中输入数据的表单对象。,添加文本域的步骤如下：,（,1,）将光标定位在表单中要插入文本域的位置，在插入工具栏的,“,表单,”,对象列表中单击文本域按钮，在表单中插入文本域。,（,2,）默认情况下插入的文本域为单行文本域，可以在,“,属性,”,面板上设置选中的单行文本域的属性。,（,3,）如果要将选中的文本域设置为多行文本域（文本区域），在,“,属性,”,面板的,“,类型,”,选项组中选择,“,多行,”,单选按钮，可以设置多行文本域的属性。,（,4,）如果要将选中的文本域设置为密码文本域，在,“,属性,”,面板的,“,类型,”,选项组中选择,“,密码,”,单选按钮，可以设置密码文本域的属性。,38,三、表 单,“,文本域,”,、,“,字符宽度,”,和,“,初始值,”,的设置与单行文本域类似。在,“,行数,”,文本框中输入文本域最多可显示的行数。,“,换行,”,下拉列表框用于设置当文本域中的内容超过一行时的换行方式。其中各选项的含义如下：,默认：表示使用浏览器默认的换行方式。,关：表示,当用户输入的内容超过文本域的右边界时，文本将向左侧滚动。用户必须按回车键才能实现换行。,虚拟：表示当用户输入的内容超过文本域的右边界时，文本自动换行。当提交数据进行处理时，自动换行并不应用于数据，数据作为一个数据字符串进行提交。,实体：表示当用户输入的内容超过文本域的右边界时，文本自动换行。当提交数据进行处理时，也对这些数据设置自动换行。,39,三、表 单,添加复选框,复选框用于从一组选项中选择多个选项。,添加复选框的步骤如下：,（,1,）将光标定位到表单中要插入复选框的位置。在插入工具栏的,“,表单,”,对象列表中单击复选框按钮，在表单中插入复选框。,（,2,）在,“,复选框名称,”,文本框中输入复选框的名称。,40,三、表 单,添加单选按钮,单选按钮用于从一组选项中选择一个选项。,单选按钮通常成组地使用，在同一个组中的所有单选按钮必须具有相同的名称。,1.,逐个插入单选按钮,（,1,）将光标定位到表单中要插入单选按钮的位置。在插入工具栏的,“,表单,”,对象列表中单击单选按钮，在表单中插入单选按钮。,（,2,）在,“,单选按钮,”,文本框中输入单选按钮的名称，同一组单选按钮必须使用相同的名称，保证这些单选按钮为互斥选项。,41,2.,插入单选按钮组,（,1,）将光标定位到表单中要插入单选按钮组的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮组按钮。,（,2,）设置,“,单选按钮组,”,对话框。,三、表 单,42,添加列表,/,菜单,列表以可滚动的方式显示多个选项，允许用户在其中选择一个或多个选项。菜单以单击时下拉的方式显示多个选项，只允许用户在其中选择一个选项。,添加列表,/,菜单的步骤如下：,（,1,）将光标定位到表单中要插入列表,/,菜单的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮，在表单中插入列表,/,菜单，默认情况下插入的是菜单。,（,2,）在,“,列表,/,菜单,”,文本框中输入列表,/,菜单的名称。,（3）单击,“,列表值,”,按钮，设置,“,列表值,”,对话框。,三、表 单,43,添加文件域,文件域使用户可以选择本地计算机上不同类型的文件，并将该文件上传到服务器。,添加文件域的步骤如下：,（,1,）将光标定位到表单中要插入文件域的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮，在表单中插入文件域。,（,2,）在,“,文件域名称,”,文本框中输入文件域的名称。,三、表 单,44,添加图像域,用户可以在表单中使用图像域来制作图像按钮，使页面看起来更加美观。,添加图像域的操作如下：,（,1,）将光标定位到表单中要插入图像域的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮，打开,“,选择图像源文件,”,对话框。,（,2,）在对话框中定位图像域的源文件，单击,“,确定,”,按钮，即可在表单中插入图像域。,（,3,）在,“,图像区域,”,文本框中输入图像域的名称。,（,4,）如果要,将某种行为附加到图像域，可以选择图像域，然后利用,“,行为,”,面板来为其附加某种行为。,三、表 单,45,添加隐藏域,隐藏域是一种在网页上不显示的表单对象。有时用户需要在网页之间传递数据，但这些数据又不希望别的浏览者看到，此时就可以使用隐藏域。,添加隐藏域的操作如下：,（,1,）将光标定位到表单中要插入隐藏域的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮，或选择,“,插入,”,|,“,表单,”,|,“,隐藏域,”,命令，在表单中插入隐藏域。,（,2,）在,“,隐藏区域,”,文本框中输入隐藏域的名称，在,“,值,”,文本框中输入要发送给服务器的数据。,三、表 单,46,添加跳转菜单,跳转菜单,可建立URL与下拉式菜单列表中的选项之间的关联。用户从列表中选择一项，可以跳转到相应的页面。,添加跳转菜单的操作如下：,（,1,）将光标定位到表单中要插入跳转菜单的位置。在插入工具栏的,“,表单,”,对象列表中单击按钮，或选择,“,插入,”,|,“,表单,”,|,“,跳转菜单,”,命令，打开,“,插入跳转菜单,”,对话框。,（,2,）设置,“,插入跳转菜单,”,对话框。,三、表 单,47,四、,spry,验证控件,在制作表单时，为了保证采集信息的有效性（比如要求访问者在表单中输入一个有效的电子邮件地址），往往会在网页中实现表单数据验证的功能。,Spry,框架提供了,4,个表单验证控件：,spry,验证文本、,spry,验证文本区域、,spry,验证复选框、,spry,验证选择。,48,Spry,验证文本域：该域用于在站点访问者输入文本时显示文本的状态（有效或者无效）,四、,spry,验证控件,49,属性面板中的验证类型可以指定验证类型和格式。,预览状态：有效、无效和必需值,验证于：可以设置验证发生的时间。,onBlur:,当用户在文本域外部单击时,onCharge,：当用户更改文本域的文本验证,onSubmit:,当用户尝试提交表单时的验证,四、,spry,验证控件,50,”,最小字符,“,或,“,最大字符数,”,主要针对,“,无,”,，,“,整数,”,，,“,电子邮件地址,”,和,“,URL,”,验证类型。,“,最大值,”,和,“,最小值,”,主要针对,“,整数,”,，,“,时间,”,，,“,货币,”,，,“,实数,/,科学计数法,”,。,“,强制模式,”,可以禁止用户在验证文本域控件中输入无效字符。,四、,spry,验证控件,51,Spry,验证文本区域：该区域用户输入几个文本句子时显示文本的状态（有效或者无效）。如果文本域是必填域，而用户没有输入任何文本时，则返回一条消息，声明必须输入值。,四、,spry,验证控件,52,四、,spry,验证控件,53,Spry,验证复选框：该复选框在用户选择（或没有选择）复选框会显示控件的状态（有效或者无效）例如：必须选择三项，如果没有选择，则返回消息声明不符合要求。,四、,spry,验证控件,54,Spry,验证选择：是一个下拉菜单，该菜单用户进行选择时会显示构件的状态。,四、,spry,验证控件,55,