您的位置:网大 >> 网络 >> 网页制作 >> 正文

建立人机交互的Web主页

作者:不详时间:2006-2-9 14:55:19

随着计算机和互联网技术的发展,固定不变的网页已不能满足人们的需求,在这种情况下实现人机交互的动态网页就显的尤为迫切。但由于Web服务器不具有产生动态的HTML文件的能力,只好借助于外部应用程序的帮助,Web服务器与外部应用程序的接口被称为CGI(CommonGatewayInterface)通用网关接口,而外部应用程序又称为CGI程序。这种人机交互的动态网页具有以下优点:

(1)读者可与Web服务器进行交互;

(2)可实现数据库的查询;

(3)可以与HTML以外的文件进行交互;

(4)可缩短查询时间,提高浏览效率。

1、生成动态网页的步骤

CGI网关接口接口是HTML文件与Web服务器之间的接口程序,它的主要作用是负责处理HTML文件与运行在Web服务器中的程序之间的接口。CGI程序是集成与HTTPD之中的,通常情况下,当安装了HTTPD之后CGI程序就存在于Web服务器中了。产生动态网页的过程大致是这样的:

(1)用户在浏览器中提出数据或查询条件的请求,并执行“提交”后,便将请求信息发送到网上相应的Web服务器上;

(2)Web服务器收到这一请求便激活一个CGI程序(程序是驻留在Web服务器上的一个程序);

(3)CGI程序调用该服务器下的所有程序或数据库,并完成读者需要的任务,同时将处理结果送回CGI网关接口;

(4)网关接口程序又将其结果转换成该服务器能识别的HTML文件格式,并确定CGI返回文档的类型;

(5)Web服务器将其结果送回浏览器中,浏览器进行数据处理并显示结果。

 

2、使用表单技术实现人机交互

在Web中实现人机交互主要使用表单(FORM)来标识,FORM与CGI程序一起共同完成用户与Web服务器之间的交互,它主要完成两个功能:一是指定CGI的路径和名称;二是将读者从浏览器中输入的信息送给CGI。表单中经常使用的HTML标记包括:FORM(在文档中产生表单,指明表单的开始和结束)、INPUT(在文档中输入多种类型的字段,其类型由TYPE属性设置,常见的类型包括单选按钮.复选框和文本等)、SELECT(定义用于选择的项目,它可以产生我们经常使用的列表框)、OPTION(SELECT标记内包含的选项)、TEXTAREA(允许用户输入多行内容的字段)。

我们通过<FORM>…</FORM>标识建立一个信息输入提示区。该标识有两个属性:一个属性指明其CGI的路径和程序名;另一个说明读者输入信息给Web服务器的数据传输方式。前者使用<FORMACTION=‘…’>格式,后者使用<FORMMETHOD=‘POST/GET’>格式,其中POST指明将FORM输入的信息进行包装,CGI程序中通过CONTENT-LENGTH环境变量决定输入信息的长度,再从标准输入中将其读出。GET指明将FORM输入信息作为字符串附加在ACTION所设定的URL后面,中间用“?”隔开。CGI程序可以用QUERY-STRING环境变量去取得FORM传送的输入信息。

使用<INPUT>标识就可完成一般的信息输入,在INPUT中共有七种类型,它们分别是TYPE、PASSWORD、RADIO、CHECKBOX、SUBMIT、RESET、HIDDEN类型。TYPE类型允许用户在窗口中手动输入信息;PASSWORD方式用于口令输入,不显示输入数据;RADIO通常称为“无线按钮”,当使用该类型时,在屏上出现了多个按钮供选择使用;CHECKBOX可使得输入信息可以具有多选钮的方式进行数据传送;SUBMIT可在屏幕上产生一个具有“提交”功能的按钮,它是FORM中必不可少的;RESET可使用户输入的数据被清除,以重新输入数据;HIDDEN类型使FORM窗口隐藏。

也可通过<SELECT>…</SELECT>标识设置一个下拉菜单或带有滚动条的菜单项。在SELECT标识中共有三个属性:NAME(提交时的名字)、SIZE(同时显示菜单中的选项条数)、MALTIPLE(允许使用者一次选多个选项)。其基本格式为:

<Form…>

<Selectsize=numbermultiple>

<Option>第一项

<Option>第二项

<Option>第三项

</Select>

使用<TEXAREA>…</TEXTAREA>标识可使的交互的窗口可以出现多行多列进行数据输入,同样该标识也有三个属性:NAME(提交用的名字)、ROWS(行数)、COLS(列数)。

3、使用举例

以下程序是一个使用表单进行用户信息调查的例子:

<HTML>

<Head>

<Title>西安博通公司招聘广告</Title>

<Body>

<Center>西安博通公司招聘广告</Center>

<FormMethod=postAction=“http://www.xabt.com/getmail”>

本公司是一家从事通讯工程软件开发的高科技公司,现根据业务

发展需要,招聘软件设计人员两名、系统工程师三名,有意者请

在表单内填写你的基本情况。<P>

姓名:<InputType=“Text”Name=“name”size=8>

年龄:<InputType=“Text”Name=“age”size=8>

专业:<InputType=“Text”Name=“speciality”size=8>

学历:<SelectName=“education”>

<Optionselected>大学

<Option>硕士

<Option>博士

<Option>大专

<Option>中专

<Option>高中

</select>

性别:<InputType=“radio”Name=“sex”checked>男

<InputType=“radio”Name=“sex”>女

<p>

婚姻状况:<InputType=“radio”Name=“MRY”checked>

未婚

<InputType=“radio”Name=“MRY”>

已婚

<p>

联系电话:<InputType=“Text”Name=“call”Size=12>

E-mail:<InputType=“Text”Name=“email”maxlength=20>

</Form>

<FormEnctype=“multipartform-date”Action=“http://www.xabt.com/getmail”>

您的特长及工作经历:<InputType=“file”Name=“file”>

<P>

为了保密请设置您的个人密码:<InputType=“password”Name=“t1”>

<P>

<InputType=“Submit”Value=“提交”>

<InputType=“Reset”Value=“重置”>

</P>

</Form>

</Body>

</HTML>

4、结束语

本文简要介绍了在Web网页中进行人机交互的方法和步骤,给出了交互网页设计时所使用的HTML语句规则和使用示例,对人机交互的网页设计有一定的帮助。


评论数: 来源:不详


网大首页 - 网站地图 - 广告服务 - 关于网大 - 招聘信息 - 联系我们
Copyright (C) 1999-2005 NETBIG.COM (CHINA) LIMITED All Rights Reserved
粤B-20050190