试谈网制作及其工具

6.1网页制作与FrontPage6.2设计表单网页第6章网页制作及其工具返回主目录第6章网页制作及其工具6.1网页制作与FrontPage

6.1.1Web页面电子商务最重要的一个环节就是在网上发布信息，掌握网页制作技术是网上发布信息的必要条件。用于网页制作的工具很多，如Dreamweaver、Flash、Fireworks、FrontPage等，对于网页制作的初学者来说，FrontPage被认为是最容易掌握的一个网页制作工具，而且，其效果也相当不错。因此，本章主要介绍用FrontPage制作Web页面。网页是用HTML（超文本标识语言）在文本文件中加入标记以*.Htm或者*.html保存的文件，但*.Htm或者*.html与Word生成的.doc文档不同，后者包含了插入的图片和其它对象，可以自由地移动和发布，而网页是纯文本文件，它并不包含插入其中的图片等对象，它只是将插入对象的位置告诉浏览器，而后由浏览器来定位和显示。所以，如果在网页中插入了图片或者其它对象，一定要将这些图片文件与网页一起发布，否则网页将不能正常显示。如果在网页中有一个链接指向本地的另一个网页文件，也要把这个图片文件与该网页文件一并发布，否则，当点击这个链接时，浏览器将找不到要跳转的目标文件。

6.1.2如何制作页面FrontPage是微软公司推出的Web站点创建和管理工具，它包含以下几项功能：①创建、设计和管理整个Web站点；②“所见即所得”地制作Web页面；③将计算机配置为Web服务器，通过Internet或Intranet对外发布Web页面；④处理Web页面中图像；⑤FrontPage的扩展功能。

1.启动主页制作工具在Window98/NT/2000系统中安装FrontPage后，将生成一个“MicrosoftFrontPage”快捷菜单，选择此菜单可以执行FrontPage2000，进入FrontPage的普通网页编辑器后，出现如图6-1所示的FrontPage窗口。这个窗口有点象Word窗口，实际上微软是把FrontPage作为Office中的一部分来发布的，所以FrontPage和其它成员有类似的界面。不过，在Word中处理的是文档，在FrontPage中处理的是页面。至于工具栏的使用、其它的编辑操作和剪贴板功能，则与Word中的用法几乎是一样的。图6-1FrontPage窗口2.制作简单的页面1）输入文字输入文字的步骤如下：(1)按工具栏上的按钮，新建一个空白网页。(2)在网页中键入文字，其使用方法与其它字处理软件相同。(3)设置文本的格式。用鼠标选定一块文本后，可以用来调整对齐方式，用来改变文本字体效果。其它用来更改文本颜色及文字大小的工具均与Word中的相同。(4)保存网页。指定保存的路径和文件名，一个纯文本的网页就编成了。新建一个网页应马上保存文件，并为本次工作专门建立一个目录，把相关的文件都保存在该目录中。可以在目录中再建立下一级的子目录，如imge子目录专门存放网页中的图片,down子目录存放下载文件，sound子目录存放声音文件等，这样，在以后发布主页时只要将工作目录中的文件和子目录一并上载即可。需要注意的是，回车时的设置和Word有所不同，Shift+Enter为行回车，而直接按Enter则是段落回车，段落回车后的两行之间会插入一个空白行。在键入中文字符的时候，最好将字体设置为宋体，因为有的浏览器只支持宋体中文字符的显示，如果使用其它字体，则可能出现乱码。2）插入图片将光标移动到页面要插入图片的位置，选择“插入/图片”菜单，其选择方法与在Word中的相同，如果直接点击图像工具栏按钮，就会出现如图6-2所示的对话框。可以直接键入图片的所在位置。如果在网页中插入了图片，在发布网页时一定要将图片放在一起，而且还要保持网页文件和图片文件的相对路径不变，否则网页中的图片将不能正常显示。如果在工作目录下建立了一个子目录专门存放图片，这样就不会出现相对路径改变的情况。注意，制作网页时不要在网页中插入过多的图片，否则由于网络通信带宽有限，会造成用户等待下载网页的时间过长。图6-2选择图片对话框3））插插入入表表格格FrontPage提提供供了了强强有有力力的的表表格格制制作作功功能能。。将光光标标移移动动到到要要插插入入表表格格处处，，选选择择““表表格格/插插入入/表表格格””菜菜单单，，可可直直接接插插入入新新的的表表格格，，弹弹出出的的对对话话框框如如图图6-3所所示示。。将其其中中的的““边边框框粗粗细细””设设置置为为0，，则则在在网网页页中中不不显显示示表表格格的的边边框框。。但但在在编编辑辑时时可可以以看看到到虚虚线线的的边边框框。。这这只只是是为为了了便便于于编编辑辑，，使使用用户户在在浏浏览览器器中中看看不不到到表表格格的的边边框框。。4））插插入入超超链链接接超链链接接是是FrontPage非非常常重重要要的的概概念念，，超超链链接接可可以以有有效效而而又又清清晰晰地地组组织织网网页页，，并并让让访访问问者者方方便便地地浏浏览览相相关关信信息息。。图6-3““插插入入表表格格””对对话话框框当访访问问者者单单击击一一个个超超链链接接，，Web浏浏览览器器就就根根据据超超链链接接所所指指示示的的URL从从相相应应的的位位置置检检索索文文档档，，如如果果成成功功的的话话就就显显示示出出来来，，如如果果超超链链接接跳跳转转的的目目标标不不是是网网页页而而是是其其它它类类型型的的文文件件，，Web浏浏览览器器就就会会自自动动运运行行相相应应的的程程序序以以打打开开文文件件或或者者让让用用户户下下载载文文件件。。要建立超链接接，首先要在在网页中选择择要作为超链链接载体的文文本或者图像像，然后使用用“插入”菜菜单上的“超超链接”命令令，FrontPage编辑器将打打开“创建超超链接”对话话框，如图6-4所示。。图6-4““创建超链接接”对话框6.2设计计表单网提提交表单提交表单是使使用最为普遍遍的一种表单单。顾名思义义，提交表单单就是把用户户填写的内容容提交到服务务器上。在FrontPage2000里，，设计表单要要用到的对象象作为一组页页面元素放置置在“插入””菜单里，单单击“插入””菜单，选择择“表单”选选项，就会打打开一个子菜菜单，里面列列出常用的表表单元素，如如单行文本框框、滚动文本本框、复选框框、单选按钮钮、下拉菜单单、按钮等。。这些对象在在表单里称之之为“表单域域”。当在网网页中中插入入第一一个表表单域域的时时候，，FrontPage会会自动动创建建一个个表单单，在在表单单的周周围有一个个虚框框，这这是表表单的的边界界，表表单的的边界界就起起到区区分表表单与与网页页上其其它内内容的的作用用。根根据需需要用用户填填写或或者选选择的的内容容在网网页上上添加加各种种表单单域，，可以以组成成各种种各样样的提提交表表单。。注意，，当插插入点点在表表单边边界以以外，，将会会创建建另外外一个个表单单，因因此，，在向向表单单里加加入新新的表表单域域时要要注意意光标标的位位置是是否在在表单单边界界以内内。1.单单行文文本框框文本框框是表表单中中收集集信息息的主主要工工具，，根据据用户户输入入信息息的多多少，，可以以分别别采用用单行行文本本框和和多行行文本本框。。当只只需要要输入入姓名名、民民族、、电话话号码码等简简单信信息的的时候候，往往往采采用对对话文文本框框。从“插入””菜单的““表单”子子菜单中单单击“单行行文本框””按钮，就就会在网页页上插入一一个单行文文本框，如如果网页上上还没有表表单，将会会自动创建建一个表单单，并加入入“提交””和“重新新填写”按按钮。用鼠标右右键单击击文本框框，在快快速菜单单中选择择单击““表单域域属性””选项，，打开如如图6-6所示示的对话话框便可可进行单单行文本本框的设设置。文本框的“名名称”是每个个表单域的标标志，在服务务器程序中处处理表单时使使用这个名称称来调用文本本框里的内容容；“初始值值”是当网页页浏览时就在在文本框里出出现的默认文文字；“宽度度”是规定的的文本框的显显示宽度，而而不是输入文文字的宽度；；“Tab键键顺序”是指指定在按动““Tab”键键时，光标在在表单域之间间切换的顺序序；如果要建建立一个输入入密码的文本本框，只要选选中“密码域域”栏中的复复选框“是””，则用户键键入的任何字字符都显示为为“*”。2.滚动文本本框如果需要输入入比较多的文文字，可以选选择滚动文本本框。它的使使用方法和单单行文本框的的选择方法相相类似，所不不同的是在属属性设置里没没有“密码域域”，而多了了显示行数的的设置。3.复选框对于需要用户户进行选择的的情况，可以以使用“复选选框”和“单单选按钮”来来制作选择题题。同样地，，从“插入””菜单的“表表单”子菜单单中单击“复复选框”选项项，就在网页页上插入了一一个复选框““”。可以在在复选框的旁旁边加入文字字以表明复选选框的内容。。用右键单击击复选框，在在快捷菜单中中选择“表单单域属性”选选项，可以打打开如图6-7所示的复复选框属性设设置对话框。。图6-7复复选框属属性复选框中““名称”和和“Tab键顺序””的设置和和文本框中中的设置是是一样的；；“值”是是指要发送送到服务器器的复选框框所对应的的数值或内内容，可以以在输入框框里输入指指定的值；；“初始状状态”是指指定默认情情况下复选选框是否被被选中。4.单选按按钮单选按钮的的使用方法法与复选框框的使用方方法相类似似，所不同同的是单选选按钮的名名称是“组组名称”。。因为单选选按钮的功功能是在几几个选项里里指定一个个选项，那那么这几个个选项就是是一个组，，它们共同同使用一个个组名称。。同组的单单选按钮只只能有一个个被选中。。5.下下拉拉菜菜单单通过过表表单单的的下下拉拉菜菜单单还还可可以以为为用用户户事事先先定定义义好好一一系系列列选选项项，，在在下下拉拉列列表表或或者者滚滚动动列列表表中中显显示示，，由由用用户户进进行行选选择择。。从从右右键键的的快快捷捷菜菜单单中中的的““表表单单域域选选项项””可可以以打打开开如如图图6-8所所示示的的下下拉拉列列表表属属性性对对话话框框。。如果果设设定定““高高度度””大大于于1，，则则就就会会显显示示一一个个滚滚动动列列表表；；““允允许许多多重重选选项项””指指定定列列表表是是否否可可以以同同时时选选择择多多个个选选项项；；单单击击““添添加加””按按钮钮可可以以设设定定一一个个列列表表项项目目，，对对话话框框如如图图6-9所所示示。。在““选选项项””中中输输入入列列表表中中显显示示的的文文字字；；在在““指指定定值值””中中输输入入要要发发送送到到服服务务器器上上的的值值；；在在““初初始始状状态态””栏栏指指定定该该选选项项的的默默认认选选择择状状态态。。图6-8下下列列菜单单属性性图6-9添添加选选项6.按按钮表单所所要用用到的的按钮钮有两两个：：“提提交””按钮钮和““重新新填写写”按按钮。。在插插入第第一个个表单单域的的时候候，就就会自自动建建立这这两个个按钮钮。用用右键键单击击按钮钮，在在快捷捷菜单单中选选择““表单单域属属性””选项项，可可以打打开如如图6-10所所示的的“按按钮属属性””对话话框。。在“值值/标标签””中指指定的的是在在按钮钮上显显示的的文字字；““按钮钮类型型”用用来设设置按按钮的的功能能；““普通通”按按钮是是用来来配合合脚本本语言言（如如JavaScript）使使用的的；““提交交”按按钮将将表单单的内内容发发送到到服务务器上上；““重置置”按按钮将将表单单里所所有表表单域域的内内容恢恢复到到默认认状态态。注意，，表单单是网网页的的一部部分，，同样样可以以加入入文字字等内内容。。在制制作表表单的的时候候，要要正确确加入入需要要的表表单域域，将将它们们在网网页上上合适适地排排列，，并配配合文文字等等内容容，组组成一一个清清楚而而美观观的表表单。。图6-10按按钮钮属属性性7.提提交交表表单单的的属属性性设设置置为了了使使表表单单的的信信息息能能上上传传到到服服务务器器，，仅仅有有““提提交交””按按钮钮是是不不够够的的，，还还必必须须指指定定表表单单提提交交的的目目的的地地：：可可以以将将表表单单的的内内容容保保存存在在当当前前站站点点的的一一个个文文件件里里；；或或是是将将表表单单信信息息发发送送到到指指定定的的E-mail地地址址；；也也可可以以把把表表单单的的内内容容发发送送给给自自己己编编制制的的一一个个表表单单处处理理网网页页或或应应用用程程序序。。指指定定表表单单发发送送目目的的地地是是在在表表单单属属性性里里完完成成的的。。设置置提提交交表表单单属属性性的的操操作作步步骤骤如如下下：：（1））在在表表单单边边界界内内单单击击右右键键，，在在快快捷捷菜菜单单中中选选择择““表表单单属属性性””选选项项，，弹弹出出如如图图6-11所所示示的的对对话话框框。。图6-11表表单单属属性性（2））设设置置发发送送目目标标。。表表单单信信息息可可以以发发送送到到以以下下四四种种形形式式的的对对象象中中：：一一是是发发送送到到网网站站的的一一个个文文件件保保存存起起来来；；二二是是作作为为一一份份电电子子邮邮件件寄寄到到指指定定的的E-mail地地址址；；三三是是把把表表单单的的数数据据保保存存到到一一个个数数据据库库里里；；四四是是发发送送到到另另外外编编制制的的表表单单处处理理网网页页或或应应用用程程序序。。在在选选中中““发发送送到到””单单选选按按钮钮时时，，单单击击““选选项项””按按钮钮，，可可以以进进行行表表单单信信息息发发送送目目标标的的设设置置，，如如图图6-12所所示示。。（3）对保存存表单信息的的文件进行设设置。在图6-12中中，“文件名名称”指定将将要保存表单单信息的文件件名；“文件件格式”选择择信息以什么么格式存放在在文件里；““可选的第二二文件”指定定另外一个存存放表单信息息的文件。图6-12保存表单单属性6.2.2搜索表单单在FrontPage2000中提提供了“搜搜索表单””组件，可可以很方便便地在网页页中加入全全文检索的的功能。搜搜索表单实实现的是对对整个网站站的所有文文件进行全全文检索。。只要在搜搜索表单的的搜索输入入框里填上上一个单词词，单击““开始搜索索”按钮，，搜索表单单就会自动动搜索站点点上所有文文件的内容容，查找与与搜索单词词相匹配的的语句，并并将搜索结结果以超链链接的形式式列在网页页上，以便便用户选择择浏览。建立搜索表表单的操作作步骤如下下：（1）启动动FrontPage2000并新新建或者打打开站点。。搜索表单单组件必须须在站点工工作方式下下才能插入入到网页上上。从“插插入”菜单单的“组件件”子菜单单中选择““搜索表单单”选项，，打开“搜搜索表单属属性”对话话框，如图图6-13所示。图6-13搜索表单单属性（2）设置置搜索表单单在网页上上显示的属属性。在图图6-13所示的选选项卡中要要设置的是是搜索表单单在网页上上的显示形形式。“输输入框的标标签”是出出现在输入入框左边的的文字，用用来提示用用户输入搜搜索文字；；“以字符符为单位的的宽度”是是指定输入入框允许