电子商务第6章

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