试谈网页制作及其工具

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,第6章 网页制作及其工具,6.1 网页制作与FrontPage,6.2 设计表单网页,第6章 网页制作及其工具,返回主目录,第6章 网页制,作,作及其工具,6.1 网页制,作,作与FrontPage,6.1.1 Web页面,电子商务最重要,的,的一个环节就是,在,在网上发布信息,，,，掌握网页制作,技,技术是网上发布,信,信息的必要条件,。,。用于网页制作,的,的工具很多，如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”快捷菜单,，,，选择此菜单可,以,以执行FrontPage 2000，进入FrontPage的普通网页编,辑,辑器后，出现如,图,图6-1所示的FrontPage窗口。,这个窗口有点象Word窗口，,实,实际上微软是把FrontPage作为Office中的一部,分,分来发布的，所,以,以FrontPage和其它成,员,员有类似的界面,。,。不过，在Word中处理的是,文,文档，在FrontPage中,处,处理的是页面。,至,至于工具栏的使,用,用、其它的编辑,操,操作和剪贴板功,能,能，则与Word中的用法几乎,是,是一样的。,图6-1 FrontPage,窗,窗口,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所示的,下,下拉列表属性,对,对话框。,如果设定“高,度,