给你些东东，不要汗哦~~~
第十课 表单设计
1.搜索表单
上一课我们学习了站点操作,在结合网页的编辑技巧,相信你已经可以制作一个自己的站点了.不过我们要把站点设计的更好,还需要继续学习.比如说,搜索网页.
你看这一个网页,在网页中有一个搜索文本框,里面可以输入文本,同时还有"开始搜索"和"重新填写"两个按钮.这是一个最简单的搜索表单.
它是将搜索表单发布到WEB服务器并在浏览器中看到的结果.我们在自己的计算机上编辑完站点以后,可以先把站点的文件拷贝到一个大家都可以访问的服务器上,这样别人就可以通过浏览这个服务器来来访问我们的站点.这个过程就好像把工厂生产的产品拿到商店里让大家选购一样.我们把这个过程叫做站点的发布.我们把站点的WEB页拷贝到一个服务器上让大家访问,为了把这个放WEB页的服务器和其他服务器区分开,我们就把它叫做WEB服务器. 我们试一下就知道这个发布到WEB服务器的搜索表单有什么用了.
现在我们在"搜索"文本框中输入"Test",单击网页上的"开始搜索"按钮.
网页上多出了一个表格.这个多出的表格列出了我们网站中所有出现了"TEST"的网页,以及这些网页的修改日期,大小,和与关键字匹配的紧密程度.
这个网页是一个进行关键字搜索的网页.现在我们自己也做一个这样的搜索表单我们首先在要插入这样的搜索表单的位置单击,使插入点放到指定位置,选择"插入"菜单的"组件"子菜单,单击"搜索表单",进入"搜索表单属性"对话框.
在"搜索表单属性"选项卡里,我们可以改变搜索表单的文本框和按钮的提示,现在我们把"输入框的标签"改为"在网站中搜索:",
单击"搜索结果"选项卡,
在这里我们可以设置显示查询结果时要显示哪些信息,以及信息的格式,我们选中"显示文件大小"和"选中文件日期"复选框,单击"确定"按钮.
搜索表单显示在指定位置了.除了搜索文本框的提示信息之外,它的外观和刚才的搜索表单并没有什么不同.现在我们单击"预览"选项卡,切换到预览模式,在"在网站中搜索:"中输入"FrontPage",单击"开始搜索"按钮.
没有反应? 我们看一下预览窗口的标题:"该网页中存在着需要保存或发布后才可正常预览的元素".这说明我们的搜索表单在发布到WEB服务器之前是不能正常工作的.
我们来看一看表单的工作原理.首先说说搜索表单和普通网页有区别:搜索表单可以让我们输入字符串,还可以查询关键字.而普通网页只能让浏览者通过选择超链接的方法进行选择,察看指定的网页,这些网页都是事先设计好的,在浏览时并不改变.但是搜索表单的查询结果可以不一样,每次查询都会改变网页的显示内容,这也就是说搜索表单在浏览时显示是可以改变的.
我们再来看一下表单的工作过程:
(1)首先,用户输入要查询的关键字,然后单击"开始搜索"按钮,浏览器就会把用户输入的信息发送到WEB服务器,这个过程叫
做提交;
(2)接着WEB服务器受到信息之后就进行查询找到相关的网页,提取它们的大小,名字的等信息,并把这些信息格式化为WEB网页;
(3)最后,服务器再把格式化后的网页发回用户的浏览器,这时用户就看到查询到的信息了,我们把这个过程叫做表单处理.
也就是说,表单处理的过程是在WEB服务器上完成的.正是因为这个道理,我们如果不把搜索表单发布到服务器就不能正常使用搜索表单的功能.
2.创建表单网页
学习了如何创建搜索表单之后,我们就可以学习怎么创建其他类型的表单了. 我们先来看一个表单例子:
是一个让用户填写个人信息的表单,其中有文本框可以输入字符串,还有复选框和单选框,也有下拉列表.不管表单多复杂,它都是用来收集浏览者从客户端向WEB服务器发送的信息的,而普通的网页只是用来向浏览者显示一些固定的信息.
在WEB服务器上有表单处理程序,通过表单处理程序WEB服务器可以对表单收集的信息进行处理,处理方法除了象搜索表单那样把信息格式化为WEB页之外,还可以将信息以文本文件的形式保存或把信息以Email的形式发送给站点管理员等.
需要指出的是,我们用不着自己编写表单处理程序,用FrontPage可以创建表单, 在FrontPage里,我们可以用表单模板,表单向导和字定义的方式来创建表单.
用模板和向导比较简单:现在我们单击"文件"菜单的"新建"项,选择"网页"命令,
在"常规"选项卡里我们可以找到"表单向导",利用它我们可以创建几乎所有的表单;另外,我们还可以看到"搜索网页"图标,"意见册"图标,"意见薄"图标,"用户注册"图标,选择这些图标就选择了特定的模板来创建相应用途的表单.
我们单击"意见薄"图标,在"新建"窗口的右方就说明了这一个模板的用途,它是用来收集浏览者对站点的意见的.
刚才说过利用表单向导我们可以创建几乎所有的表单,我们试一下就知道了,现在我们创建一个表单,该表单的作用是收集用户的联系信息.我们选择"表单向导"选项, 单击"确定"按钮,这下我们就进入了"表单网页向导"对话框,根据向导提示进行操作后,我们就可以得到这个表单:
这个网页的表单部分是虚黑线包围的部分,里面有一些用于输入的文本框和两个按钮,我们把这些元素的每一个叫做表单的一个字段.
现在我们在"姓名"文本框上右单击,选择"表单域属性"命令,
对话框的名称文本框显示了当前选中文本框的名字叫做"联系_FULLNAME","联系"就是我们在向导中输入的变量基本名称,"FULLNAME"是FrontPage为区分同主名的各字段而为字段添加的付名.单击"确定"按钮.这样就建成了一个表单.
3.添加表单字段
用模板或向导创建表单网页的确很方便,但是我们也可以自己设计表单,而不用表单和向导.
FrontPage提供了许多类型的表单字段,我们可以根据需要来添加不同的表单字段,任意设计自己的表单:选择"插入"菜单的"表单"命令,
看,我们的页面多了一个虚线框,在框里还有"全部重写"和"提交"按钮.这个虚线框实际上是一个空表单,它不能让用户输入任何数据,但是我们可以添加其他表单字段到这个空表单中.
接下来我们来添加其他表单字段:单击空表单,这时插入点就进入了空表单,选择"插入"菜单的"表单"命令,选择"单行文本框",一个新的单行文本框就插入到表单里了.我们可以使用这种方法向表单里添加更多的表单字段,来实现我们的功能.
可以向网页里直接添加表单字段:选择"插入"菜单的"表单"命令,单击"滚动文本框",插入一个滚动文本框.
页面上添加了"全部重写"和"提交"按钮. 在默认情况下,直接向网页里添加字段时,一个新的表单就会被创建,这个表单包含"全部重写"和"提交"按钮,我们添加的字段会被插入到这个新表单中.
4.表单字段的使用(上)
你知道表单的各种字段分别在什么时候用吗?现在我们先来看一下最基本的表单字段:单行文本框.
选择"插入"菜单的"表单"子菜单,单击其中的"单行文本框"命令,这时一个新的单行文本框就插入到网页中了.这种文本框只能接受浏览这输入的单行文本信息,比如可以让用户在这里输入邮政编码,为了提示用户,我们可以在单行文本框字段前面输入文本"邮政编码".
我们可以改变单行文本框字段的宽度:单击单行文本框,这时在单行文本框的四周就出现了小黑点,
拖动小黑点,这时单行文本框的宽度就改变了.
单行文本框的高度和一行文本的高度是一样的,不能改变.
现在我们双击文本框,进入"文本框属性"对话框.
名称字段是"T1",这是FrontPage默认的值,我们把它改为"TEXT1".宽度里的数值表示我们可以让用户输入多少个字符,因为邮政编码最多六个数码,所以我们在这里输入"6". 初始值是用来设置文本框在浏览时的初始值的,我们输入"1000". 再看一下有效性按钮又是设置什么的.我们现在单击"检查有效性",这时就进入了"文本框有效性验证"对话框.
为了保证浏览者输入信息的有效性,我们可以在这里限制用户可以输入的信息.邮政编码只可能是数码,因此我们在"数据类型"下拉列表中选择"文本",并把文本格式的"数字"选中,这样用户就无法在文本框中输入除数码以外的其他字符了,单击"确定"按钮,选择"确定".
这是把网页发布以后看到的内容,你看,文本框里出现了我们刚才输入的默认置"100084".
再插入一个单行文本框.
我们用它来输入密码,当我们输入密码时,密码并不显示出来,而是显示"*"号,这样用户就不会因为密码的显示而泄密了.
我们来看看这是怎么设置的吧:在普通模式下看一下刚才的密码框网页,双击单行文本框,进入"文本框属性"对话框,
你看,"密码域"部分的"是"被选中了,这就表示这是一个密码单行文本框,我们的输入就会在显示时变成"*"号.
单行文本框只可以输入一行文本,如果浏览者要输入的内容有好几行,就要使用滚动文本框了.我们选择"插入"菜单的"表单"子菜单,单击"滚动文本框"命令,这样就在网页内创建了一个有滚动条的文本框.
我们双击文本框,进入"滚动文本框属性"对话框.
首先我们为它起一个名字,在默认状况下,它的名字是"S1",这里我们输入"SCROLL1"."宽度"文本框可以设置文本框的可见宽度,我们在行数字段中输入"5",单击"确定",我们的文本框就变高了,
当浏览者输入的文本行数很多时,他可以滚动文本框的右侧滑块来滚动文本.
由于在"滚动文本框属性"对话框里没有密码域选项,所以它无法设置成为密码框.
在各种的表单字段的属性对话框中都有"Tab键顺序"选项.当一个表单里有多个表单字段时,在默认情况下浏览者可以按Tab进入下一个字段,我们可以在"Tab键顺序"里输入一个数,设置按Tab时移动的字段数.就是说,滚动文本框和单行文本框的区别就是滚动文本框可以输入多行,但不能设置为密码框.
下面我们看一下单选按钮,单击"插入"菜单,选择"表单"选项,单击"单选按钮",一个新的表单就插入到网了,这个表单包含一个单选按钮,
我们用这个表单来让浏览这输入他们的姓名.在单选按钮字段和提交字段之间单击鼠标,把插入点放到字段和按钮之间,按两次回车键,在表单里新产生两行,在空白行处单击鼠标,调整插入点到空行,再插入一个单选按钮,并在两个单选按钮后分别输入"男"和"女".
我们双击"男"单选按钮,进入单选按钮对话框,
每一个单选按钮都有一个组名,表示它属于哪个按钮组,在同一个按钮组里的单选按钮是不能同时选两个以上的,在默认情况下组名称叫"R1",我们在"组名称"文本框里输入:"RADIO1". 数值文本框表示我们选择当前的单选按钮后,在
提交表单时向WEB服务器发送什么值.在这里我们输入"男",确认"初始状态"的"已选"处于选中状态,单击"确定"按钮.
双击"女"单选按钮,类似的,将"组名称"设置为"RADIO1","数值"设置为"女",单击"确定"按钮.
由于我们在男单选按钮的属性对话框中设置它的初始状态是"已选",所以"男"单选按钮初始状态是选中的,现在我们单击"提交"按钮,"RADIO1"组发往服务器的值就是"男".
用复选框就可以实现多选多.选择"插入"菜单的"表单"命令,单击"复选框"命令.
继续向表单里插入复选框,并为复选框添加选项卡得到这样的结果(选择爱好,包括:音乐,体育和其他).如上图.
双击"音乐"复选框,进入"复选框属性"对话框.
没有"组名称".由于复选框在选择时不会相互影响,所以复选框都是相互独立的,不用分组.他们在提交时都分别向服务器发送值,而单选框一组只发送一个值.我们在名称里输入"CHECK1",同样的方法把其他两个复选框的名称设置为"CHECK2" 和"CHECK3".
在"值"文本框里的"ON"表示在复选框选中的情况下,复选框向服务器发送"ON".这是网页发布以后在浏览器里看到的结果:
我们选中"音乐"复选框,单击"提交"按钮,"CHECK1"复选框向服务器发送了"ON"值,而其他两个复选框由于没有选中,所以它们向服务器发送的是空值. 有了单选按钮和复选框,我就可以让浏览者很方便地进行选择了.
4.表单字段的使用(中)
但是如果选项太多,那么使用单选按钮或复选框就会使网页太松散,这是我们可以采用下拉菜单.
我们现在来创建一个让用户输入地区的下拉列表:选择"插入"菜单的"表单"子菜单,单击"下拉菜单"选项,这时我们就创建了一个包含下拉菜单的表单,
下面我们来看看下拉菜单里的选项怎么设置:双击下拉菜单,进入"下拉菜单属性对话框":
在名称字段里输入"DROP1",这样下拉列表的名字就改变了.
单击添加按钮,进入"添加选择"对话框,
在选项里输入"河北",默认情况下,当浏览者选择该选项并
提交表单时,"河北"两字就被发送给服务器,我们现在把"指定值"复选框选中,在下面的文本框中输入"HEBEI",这样,当
提交表单时如果"河北"选项被选中了,那么,服务器就会收到"HEBEI"字符串信息,单击"确定"按钮,这时"下拉菜单属性"列表框中就有了我们刚才添加的选项,
用同样的方法添加其他选项,如果要调整选项的先后顺序可以选中对应的选项后,用"上移","下移"调整顺序,也可以用"删除"按钮将已经添加的选项删除,单击"确定"按钮,这时一个下拉列表就设置好了.
这是在浏览器中的结果,默认的选择是"河北",我们选择"山东",单击"提交"按钮,服务器就收到"SHANDONG"的信息了.
如果要选择多项怎么办呢?我们在普通模式下双击刚才的下拉列表,进入"下拉菜单属性对话框",
将"允许多重选择"设置为"是",并将高度设置为"5",单击"确定"按钮,这时我们得到的就不是一个下拉列表,而是一个列表框了.
我们在下拉列表框前面添加"选择第二个地区:"现在列表是进行多项选择了,控制不多不少只选择两个.我们双击下拉列表,
单击"检查有效性"按钮,进入下拉菜单验证对话框,将"要求有数据"选中,把"最少的项目数"和"最多的项目数"都设置为2,这时浏览者就必须选择两项才能
提交表单,我们在显示名称里输入"地区列表",单击"确定"按钮,选择"确定".
这是我们发布网页后在浏览器中看到的表单结果,单击"提交"按钮,由于我们没有选择列表项,所以就出现了提示信息,
单击提示窗口的"确定"按钮,选择两项,选择"提交",我们的选择就被发送到服务器了,两个选项的值是用","号隔开的.
和在windows里一样,只要在按住CTRL键的同时单击需要选中的项目就可以选择多项.
4.表单字段的使用(下)
我们再来看一下如何在网页里使用按钮:单击"插入"菜单,选择"表单"选项,单击"按钮"选项,这样就创建了一个包含插入按钮的表单,
双击插入的按钮,进入"按钮属性"对话框,
将按钮的名称改为"BUTTON3",在"值/选项卡"文本框里输入"我的按钮".就是说,按钮的选项卡和向服务器发送的值是一样的,这里按钮的选项卡和向服务器发送的值都是"我的按钮".
如果按钮类型是"提交",那么按钮的作用和表单默认创建的"提交"按钮作用是一样的,都是用来将表单里所有字段的值向服务器发送一次.
如果设置按钮类型为"重置",那么当浏览者单击按钮时,表单的所有字段就会重置为默认的值.设置为"重置"类型的按钮的作用和表单默认创建的"全部重写"按钮是一样的作用.
再来看看"普通"类型是做什么的:"普通"类型的按钮用来执行除提交和重置以外的其他操作,我们必须为操作编写或创建脚本.
在这里介绍一下,脚本就是按钮被单击时执行的一段小程序.我们单击"提交"单选按钮,单击"确定"按钮,按钮的选项卡就变成"我的按钮"了.这是我们在网页发布到服务器上以后在浏览器里看到的结果,
单击"我的按钮",这时服务器就收到按钮发送的值是"我的按钮".
我们不仅在需要的时候要自己创建提交和重置按钮,还可以用图片来创建提交按钮.不过不是插入普通图片,而是一个图片表单字段.
我们单击"插入"菜单,选择"表单"命令,单击"图片"按钮,
在弹出的"图片"对话框里选择需要插入的图片,单击"确定"按钮.这时一个图片字段就插入到表单里了.
我们来看一看图片字段和普通图片有什么区别:单击鼠标右键选择"表单域属性"对话框,
在"表单域"选项卡里,我们看到这个图片也有一个字段名"I1",这说明图片也是表单的一个字段,我们把"名称"改为"IMAGE1",单击"确定"按钮.
这是我们把网页发布到服务器上以后,在浏览器中看到的网页,单击图片,表单就提交了,
这说明图片字段也可以进行提交按钮操作.
图片字段在提交时,字段本身要向服务器发送两个值.在这里就是:"IMAGE1.X"和"IMAGE1.Y",它们是两个数,分别表示鼠标在单击图片时,相对于图片的X和Y坐标,这样我们就可以知道浏览者单击了图片的哪个部分.
7.确认网页
这是一个在浏览器里的表单网页,它让浏览者输入姓名,电话,Email地址和传真号.
我们现在输入适当的信息,单击"提交查询内容"按钮,你看,确认网页就出现了,
它向浏览者显示了服务器收到的信息,这个网页我们称它为确认网页.这一个确认网页是在我们的表单信息发送到服务器以后,服务器自动产生的,不过我们也可以自己创建确认网页.
为什么要使用自己创建确认网页而不使用默认的确认网页呢?我们创建一个确认网页你就知道了.
首先我们回到普通模式下,单击"常用"工具栏的"新建"按钮,新建一个网页,单击"常用"工具栏的"保存"按钮,
在文件名框内输入"确认网页.htm"单击"保存"按钮.在表单上单击鼠标右键,选择"表单属性",单击"选项"按钮,将网页标题改为"确认网页",
单击"确定"按钮,再单击"保存"按钮,现在就要对"index.htm"这个文件进行编辑,点工具栏上的"文件夹列表"按钮,双击"index.htm",就将它打开了,这是一个空网页,我们用前面的方法插入四个"单行文本框",分别在它们前面写上"姓名","电话","Email","传真",
再改变一下网页的主题,还要修改一下姓名"单行文本框"的名称,将它改为"Name",用同样的方法把其它的几个"单行文本框"的"名称"分别改为"Tel,Email,Fax".
在表单里单击鼠标右键,选择"表单属性",
单击"选项"按钮,选择"确认网页"选项卡,
单击"确认网页"文本框后的"浏览"按钮,选择"确认网页.htm".
点"确定"按钮.
接着切换到"保存的域"中,
现在我们所看到的就是我们刚才生成的单行文本框的名字,这正是我们所需要的东西,点"全部保存",接着分别选上"日期格式"和"时间格式",
最后点"确定",返回"表单属性"对话框,再单击"确定"按钮就行了.
这样,我们就把单前表单的确认网页指定到了我们新创建的网页:"确认网页.htm".点"工具栏"上的"保存"按钮,保存一下结果.
我们看到的"确认网页.htm"是一个空网页.别急,现在我们就向确认网页里添加确认字段.在文件夹列表框里双击"确认网页.htm",选择插入菜单的组件选项,单击"确认域"选项,进入确认域属性对话框,在这里我们把姓名字段的名称"name"填入其中,
单击"确定"按钮,
你看,这时在网页里就多了一个确认域"name"它用来接收表单的姓名字段发送的值.用同样的方法我们把电话,Email地址和传真号几个字段也添加进来.我们在每一个确认域前面以普通文本的形式添加适当的提示信息,同时将感谢信息也加进去,在制作一个回到表单网页的链接,这时我们的确认网页就编辑好了.
这也给了网页的设计者很大的灵活性.
站点发布后的结果出来了(见本节第一张图),输入必要的信息,单击"提交"按钮,确认网页就出现了(见本节第二张图),那些确认域出现的地方都被对应字段向服务器发送的值代替了
8.保存表单结果
服务器收到表单发送的信息后,把这些信息保存为文本文件,网页文件和Email.
现在我们来学习设置这些保存的方式:右单击表单,选择"表单属性"按钮.
2004-12-21 01:35
