网页中留言板的制作 2.doc

第1节 Frontpage2000的表单操作.表单的概念 简单地说，表单（Form）就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。从作用上说，表单可以理解为Web浏览器（即Web用户）向Web服务器提交信息的工具，相当于Windows中的标准窗口或对话框。在表单上可以放置控件来完成各种功能，包括数据处理，响应用户事件，完成所需操作等等。有多种工具可以实现网页表单设计，如ASP的编程、CGI编程等，这些都要求对相应的语言工具和Html语法比较熟悉。对于非专业的网页制作者来说，就有点困难。使用FrontPage 2000设计网页，可以避免这些麻烦。只要网站的服务器支持FrontPage服务器扩充程序，就可以直观地设计出简单实用的的表单。另外，FrontPage2000提供了将提交结果直接保存于数据库的功能。这使得Frontpage2000具备制作专业网站的能力。特别说明的是：因为表单的执行需要服务器端进行处理，因此制作的任何网页表单在没有发布到支持它的服务器之前都是无法进行测试也无法运行的。同时，根据表单的设计，服务器必须提供相应的支持与服务，如果表单的数据和数据库连接，则服务器还必须提供数据库服务和支持。.表单域类型及作用表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。Frontpage2000的表单域主要有以下类型。表单：插入表单外框及按钮（放在同一个表单外框中的表单元件，视为同一份表单）。单行文本框：用于接收用户输入的一行文本信息，如用户名、口令等。滚动文本框：可以输入多行信息的文本框，它用于让用户输入一个文域，如观点、意见、建议等。复选（按钮）框：提供一个或一组选项，用户可以选中其中的一个或多个选项。单选（按钮）框：提供两个或多个互斥选项，用户只能选中其中的一项。下拉菜单：下拉菜单也叫下拉列表，它允许用户从中选择一项或多项，虽然其功能可通过一组复选框或单选按钮来实现，但是由于下拉菜单可以占用较小的网页空间，因而特别适合于可选项目比较多的情况。按钮：FrontPage 2000中的按钮表单域有三种类型，即“普通”、“提交”和“重置”。创建表单时自动生成的“提交”和“全部重写”按组分别属于后两种。“普通”类型的按钮需要您自己编写响应事件的脚本处理程序。图片：在表单中使用“图片”表单域可以替代“提交”按钮，但是“图片”表单域在单击时会监测返回图片上的位置（X、Y坐标），从而使表单处理程序可以根据不同区域的X、Y坐标做出不同的响应。标签：标签是用来说明一个表单域的作用的，但是在FrontPage 2000中，可以将标签与所说明的表单域关联起来，使其可以点击执行操作，还可为其指定热键。隐藏表单域：一种特殊的表单域，其目的是在表单中添加一些对用户不可见的信息以区分同一网页上的多个表单。提交表单时，隐藏域的值一同传给表单处理程序，利用该值，可以在同一个表单处理程序中分别对不同的表单进行处理。.表单的创建与表单域的添加FrontPage 2000提供了一个专门的“表单”工具栏。但是，与其他工具拦不同的是表单工具栏不是标准工具栏，它不出现在“查看”菜单的“工具栏”子菜单中。若要使用表单工具栏，则需单击“插入”菜单下的“表单”命令，打开其子菜单，然后再用鼠标拖动其顶部的横条将其拽出。拽出的表单工具栏可像普通工具栏那样悬浮在屏幕上，也可放入屏幕上部的工具栏区域。利用表单工具栏可以完成大部分表单的操作，如在网页中插入表单，添加表单域以及设置表单属性等等。在FrontPage 2000中有不同的方法建立表单。（）使用向导建立表单启动Frontpage2000后，执行文件新建网页命令，就可以在新建对话框中，找到表单向导。 如图10.1。图10.1点击确定后，表单向导就可以执行，如图10.2。按照表单的提示，就可以一步一步地进行表单的列表项目、表单属性等操作，并很快建立好一个表单网页。图10.2 用表单向导做出来的表单，虽然方便，但是总是不够灵活，不见得可以完全适用于每一个人，或多或少都需要经过一些修改与调整，才能完全符合个人的要求。（）自制表单 另外一种方法是完全自制表单。执行插入表单命令，就可以看到一个个的表单元件。如图10.3。图10.3只要在网页中插入这些表单元件，就可以从无到有的自制表单。这样虽然麻烦但可以制作出符合需要的表单。 如果直接执行插入表单命令，就会插入如图10.4的表单。图10.4添加的表单包括一个虚线框和“全部重写”和“提交”按钮。这个虚线框实际上是一个空表单，它不能让用户输入任何数据，但是我们可以添加其它表单域（域）到这个空表单中。提交按钮用来将表单里所有域的值向服务器发送一次。我们也可以向网页里直接添加表单域。 在默认情况下，直接向网页里添加域时，一个新的表单就会被创建，这个表单包含“全部重写”和“提交”按钮，我们添加的域会被插入到这个新表单中。如插入“单行文本框”，执行插入表单单行文本框命令，一个新的单行文本框就插入到表单里了。这种文本框只能接受浏览者输入的单行文本信息，比如可以让用户在这里输入邮政编码，为了提示用户，我们可以在单行文本框域前面输入文本“邮政编码”。如图10.5。图10.5我们可以改变单行文本框域的宽度。单击单行文本框，这时在单行文本框的四周就出现了小黑点，拖动小黑点，这时单行文本框的宽度就改变了。单行文本框的高度和一行文本的高度是一样的，不能改变。双击文本框，进入“文本框属性”对话框。如图10.6。图10.6域名称是“T1”，这是FrontPage默认的值，我们把它改为更能显示域含义的名称，宽度里的数值表示我们可以让用户输入多少个字符。 初始值是用来设置文本框在浏览时的初始值的。有效性按钮用来对用户的输入信息进行限制。单击“检查有效性”，就进入了“文本框有效性验证”对话框。如图10.7图10.7为了保证浏览者输入信息的有效性，在这里限制用户可以输入的信息。比如说如果在“数据类型”下拉列表中选择“文本”，并把文本格式的“数字”选中，这样用户就无法在文本框中输入除数码以外的其他字符了。单击确定按钮，返回文本框属性对话框。如果这个文本框是用来输入密码的，当输入密码时，密码应该不显示出来，而是显示“*”号，这样用户就不会因为密码的显示而泄密了。这个设置也可以通过文本框属性进行。在文本框属性有一个“密码域”选择项，如果选中“是”，就表示这是一个密码单行文本框，输入时就会在显示时变成“*”号。如果要输入的信息固定为若干项目，就可以使用单选按钮、复选框或者下拉菜单，让用户自给定的选项中进行选择。如要使用插入“下拉菜单”，选择“插入”“表单”“下拉菜单”选项，这时就创建了一个包含下拉菜单的表单，如图10.8；图10.8接下来设置选项，双击下拉菜单，进入“下拉菜单属性对话框”：如图10.9；如图10.9 名称域为“D1”，我们可以根据需要修改。单击添加按钮，进入“添加选择”对话框，如图10.10。图10.10比如要让用户对某个对象进行评价，接可以设置为若干固定项目，如“坏”、“一般”、“优”等。此时，在第一个选项里输入“坏”，默认情况下，当浏览者选择该选项并提交表单时，“坏”就被发送给服务器，如果把“指定值”复选框选中，在下面的文本框中输入“坏”，这样，当提交表单时如果“坏”选项被选中了，那么，服务器就会收到“坏”字符串信息。单击“确定”按钮，这时“下拉菜单属性”列表框中就有刚才添加的选项，如图10.11。用同样的方法添加其他选项，如果要调整选项的先后顺序可以选中对应的选项后，用“上移”、“下移”调整顺序，也可以用“删除”按钮将已经添加的选项删除，单击“确定”按钮，这时一个下拉列表就设置好了。图10.11网页在浏览器中显示的结果如图10.12，默认的选择是“坏”，选择其它项，可以单击下拉箭头。最后，点击页面上的提交按钮，即可提交成功。图10.12第2节 Frontpage2000的表单向导 除通过表单控件舔加表单及表单域外，在Frontpage2000中，也可以使用表单向导的方法制作表单网页。为更好地理解表单的作用和Frontpage2000表单向导的使用，在此利用表单向导制作一个收集用户联系的表单。（1）选择“表单向导”选项， 单击“确定”按钮，这下我们就进入了“表单网页向导”对话框；如图10.13 ； 图10.13（2）点击下一步，进入域添加页面； （3）点击添加按钮，为你的表单添加所需要的域； （4）因为要建立收集用户联系信息的表单，所以选择“联系信息”类型，然后点击下一步 ；如图10.14；图10.14（5）此时的表单向导里会出现很多的有关联系信息的选项，按照自己的所需勾选相关选项就可以了。选择好后，点击下一步；如果还要添加其他的相关域，重复步，直至所需全部域添加完毕。（6）点击完成按钮，一个新的表单页就完成了。在普通模式如图10.15；：图10.15虚线包围的部分就是网页的表单，里面有一些用于输入的文本框和两个按钮，一个表单元素叫做表单的一个域。在表单域上右击，就可以选择“表单域属性”，为其设置属性。如“姓名”表单域的属性如图10.16；图10.16使用表单向导的时候，程序会自动设置各种属性，如“姓名”域的文本框的名称为“Contact_FullName”，这是由FrontPage自动命名的。“Contact”就是我们在向导中输入的表单的基本名称，“FullName”是FrontPage为区分同主名的各域而为域添加的副名。单击“确定”按钮。这样就建成了一个表单。（7）输出选项设置。注意：网页在运行的时候，用户会在表单域输入信息，这些信息在提交时会被提交到服务器，那么，这些提交的信息保存在那里呢？如何查看这些信息呢？在表单向导制作时，Frontpage2000向导会询问你如何保存这些信息。即设置输出选项。如图10.17： 图10.17制作时可以选择保存的类型并输入保存的文件名。当网页发布后，管理员就可以查看这些文件，了解用户在浏览时输入的信息。第3节实例：利用表单制作留言板留言板（BBS），是用来让浏览者在网页留言，从而达到收集意见建议及不同浏览者互相交流的功能。普通的留言板，一般包括一个类似“我要留言”的按钮或者图片，链接向一个输入信息的页面。在信息输入完成后，通过点击“提交”按钮发送留言。在发送往服务器前，会出现一个确认页面。然后再通过确认页面上的“确认”按钮，发送留言，同时，网页会跳转到留言板网页，显示出输入的留言信息。相关链接：“留言板”文件包下载(需要在服务器发布才可以查看提交结果）在本例中，至少需要制作或者建立四个网页。一个可以输入留言内容的表单网页“board_in.htm”；一个确认网页“confirm.htm”；一个显示留言内容和进入留言表单的网页“board.htm”；一个用来存储留言内容的网页“result.htm”。其相互关系如图10.18：图10.18 为便于理解，在此首先制作输入信息的表单网页。.制作留言板的表单网页 设计一个简单的网页，对网页进行简单布局、美化。（1）插入一个滚动文本框执行插入表单滚动文本框命令，把文本框调整为合适的大小。如图10.19；图10.19 （2）设置文本框属性。普通模式下在滚动文本框上双击鼠标，打开滚动文本框属性。按下图进行设定，设定好后按下确定按钮。其中，名称为这个表单域的名称；初始值为设定默认出现在文字方块中的值；宽度和行数可以限定在文本框中输入文字的形式。在这个例子中我们限定每行可以输入64个字符，最多输入10行。如图10.20：图10.20（3）设定按钮属性。分别在提交按钮和重新设定按钮上双击鼠标，设定其属性如图10.21；图10.21（4）设置表单属性。现在需要建立表单页面和确认页面的正确链接，让使用者在送出资料时能正确链接到确认页面。在表单范围内按下鼠标右键，选择表单属性命令，打开表单属性对话框，如图10.22：图10.22然后按下选项按钮，选择“确认网页”选项卡，在确认网页的URL处，输入确认网页名称“confirm.htm”。如图10.23。图10.23（5）设定表单属性和表单结果的存储方式打开单属性对话框，如图10.24： 图10.24表单结果的保存包括三种类型。选择“发送到”，可以将结果发送到一个指定的文件。文件名称：选择这项可以把表单结果收集到网站中的Html或文本文件中。电子邮件地址：将使用者所填的资料以e-mail的形式寄出。选择“发送到数据库”，可以将表单结果收集到指定的资料库中。选择“发送到其它对象”，可以指定处理表单资料的CGI或ASP等程序。表单属性：在此可以给表单设定名称，对于一个网页存在多个表单的情况，需要利用表单名称进行区别。在默认情况下，表单的结果会储存在一个TXT文本文件中。在此，选择将表单内容收集到一个网页文件result.htm中。选择好处理方式后，按“选项”按钮做进一步设定，如图10.25；图10.25在此，选择将表单结果存储为Html文件。选择“包含域名”选项，在存储表单结果时，会将域名一同储存起来。否则在输出的结果中就只有浏览者输入的资料，而不会有相对的域名。将表单结果储存成Html文件格式，同时选择“最后结果放在末尾”选项