电子商务第章3

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设设计表单网网6.2.1提交表单单提交表单是是使用最为为普遍的一一种表单。。顾名思义义，提交表表单就是把把用户填写写的内容提提交到服务务器上。在在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保保存存表表单单属属性性搜搜索索表表单单在FrontPage2000中中提供了“搜搜索表单”组组件，可以很很方便地在网网页中加入全全文检索的功功能。搜索表表单实现的是是对整个网站站的所有文件件进行全文检检索。只要在在搜索表单的的搜索输入框框里填上一个个单词，单击击“开始搜索索”按钮，搜搜索表单就会会自动搜索站站点上所有文文件的内容，，查找与搜索索单词相匹配配的语句，并并将搜索结果果以超链接的的形式列在网网页上，以便便用户选择浏浏览。建立搜索表单单的操作步骤骤如下：（1）启动FrontPage2000并新新建或者打开开站点。搜索索表单组件必必须在站点工工作方式下才才能插入到网网页