网页设计与制作第8章-网站建设课件.ppt

《网页设计与制作第8章-网站建设课件.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第8章-网站建设课件.ppt（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第八章第八章 网站建设网站建设8.1网站设计的原则与页面风格网站设计的原则与页面风格很多初学者把掌握网页制作软件的使用看作是网站制作的最基本的技能，但事实上并非完全如此，软件的掌握是短期就能够速成的，而且新的软件层出不穷，功能越来越强大，要全部掌握这些软件和功能是不可能的。然而，使用软件的是人必须有良好的网站设计概念才能创造出优秀的网站，这才是网站制作的核心。虽然软件是制作网站必不可少的工具，但是有一点不容忽视：网站设计者使用的制作工具大同小异，无论是初学者还是专家，大多数网站的建设人员都会选用诸如Dreamweaver，FrontPage，Fireworks，Photoshop，Photoi

2、mpact，ImageReady这些主流软件。为什么设计出的网站却在风格、形态上都有很大的区别呢？这正说明了网站创作的灵魂在于站点建设者对网站的规划、网站的风格及网站的概念的理解。虽然一个网站的主要目的是给人们传递它的信息，但是与此同时还把它的文化同样也传递给获取这些信息的人们。比如，众所周知的263首都在线、新浪网、网易、ChinaRen等网站的页面设计都非常朴实，没有太多的花哨效果，运用普通的制作软件就能够制作完成，但它们的页面只需要看一眼就能够让人马上识别它是谁，这是因为它们不仅向访问者传达了新闻等网站的信息，更显示出自己独特的风格。因此，想成为一名网页设计方面的专家，仅仅掌握网页设计软

3、件是远远不够的，必须要从观念上、思想上把握网页设计的特点。下面将以一些著名的网站作为范例，逐个介绍商业网站、事业单位网站和个人网站设计的基本思想与风格。8.1.1网站设计的基本原则网站设计的基本原则网站的设计基本上是按照一定步骤进行的。不同站点的开发人员有他们自己不同的习惯，对于网页设计有自己独特的见解。但一般来说，有一些原则是共同的，一些主要的概念也是相同的。仅仅会输入文本，制作超级链接和排列图片，不是真正意义上的网页制作，或者说不能够称为网页创作。因为网页制作最重要的一个原则是：创意。这个原则也可以看成是网页制作的根本，没有创意的网站不能算是成功的网站，而这样的站点也将不能长期存在。除了创

4、意之外，在网站设计时还需要考虑以下基本原则：网页内容便于阅读。站点内容要精、专和及时更新。注重色彩搭配。考虑带宽。要适当考虑不同浏览器、不同分辨率的情况。要提供交互性。简单既为美。针对上述几条原则，需要作如下解释，以便读者了解网页制作的概念。1、网页内容便于阅读网站最大的目的是发布信息，因此网页作为信息的载体就必须要做到便于阅读。网页能方便浏览者阅读和查找是网站服务的要求，但并不代表是把所有重要的信息都堆积在首页上，方便浏览者的查找和阅读的根本在于科学地分类和组织。个人网站信息量少，几个超级连接就可以包含。而商业网站的信息量较为庞大，如：新浪、FM365、网易、263这样的网站，站点中的内容几

5、乎无所不包，如何有条理地组织、放置超级连接，这就需要仔细考虑，其中包含了“层次”的概念，对如何有层次地组织内容将在后面的章节中单独进行讨论。2、站点、页面色彩的搭配如果色彩选用搭配不当，会影响网站的访问量。比如：采用高亮度的背景色或者前景色很容易让浏览者的眼睛感到疲劳，而且不利于整个网站风格的统一，同时也违背了网站的“简单即为美”原则。3、浏览器与分辨率网页的设计要做到在不同的环境下都能被浏览，初学者容易犯的大忌就是会忽视这一点。许多网页在一种浏览器和特定的显示分辨率下显示的效果不错，但换另一种浏览器和显示分辨率就不能正常地显示，所以在网页设计时要注意测试不同的浏览器和分辨率。基本要求是在IE

6、4.0和Netscape4.0中都能有较好的效果，在分辨率为800*600和640*480中都能正常显示。4、提供与浏览者的交互近年来，站点的交互性越来越为人们重视。不仅商业站点的发展朝着高交互性努力，个人网站也开始通过加强交互性来赢得更多的访问者。这就是为什么个人网站空间提供商往往同时提供聊天室、电子论坛、留言板等服务的原因。8.1.2站点的整体风格与层次站点的整体风格与层次1、页面风格网站所使用的主题图形、基本结构布局、色调和文字的样式等等都包含在网站风格的概念中。我们可以这样理解网站风格的概念：整个网站所采用的结构布局、色调、文字、标志和图案等要素留给访问者关于该网站的印象。在访问者浏览

7、一个网站时，虽然觉得这个网站的图形、文字并没有什么特别优秀的地方，然而这个网站却会使浏览者感到特别，这种特别让浏览者可以识别它，只要看到它就可以知道这个网站的相关内容。这里面正是“特别”的印象在起作用，整个网页设计的生命在于 “创意”。而创意的实质就是要把网站建设得具有自己独特的风格，让人一眼就能够识别。2、层次网站的层次是指主页面（首页或一级页面）和二级页面、三级页面之间的结构关系。大部分网站制作的初学者不够重视这种层次规划以至于网页风格不统一，在网页导航上也出现了很多问题。按照专业网页设计流程，制作网页前应先设计好导航条，即事先规划好网页的层次结构。无论是复杂的商业网站，还是简单的个人网站

8、，在网页的层次结构上都存在着一些共同点。即任何一个网站均可以用三级结构实现，也就是“首页栏目页文章页”或“一级页面二级页面三级页面”结构。制作好这三级结构，就能制作好其他类型的结构，这在任何网站都是适用的。因此，主页的制作主要包括主题图形的制作及页面构图。 二级页面是每个栏目的起始页，该页面应该有栏目对应的主题图形。相对于整个网站的主题图形来说，标志要小但必须醒目。当用户进入该页面后，需要设置通向其他栏目的链接和返回首页上要有明确的指示。三级页面是文章页，位于最底层。当浏览者进入栏目后见到的超级链接，就是通向大篇幅的文章页面。由于文章页面本身包含有大量文字、图片所以不宜安放过多。必要时可以为文

9、章设计一些文章主题图形，但这将使服务器的负荷过重。一般情况下，个人网站应避免这样做。如果个人网站把文章主题的标题做成各种各样的美术字、特效字，结果将是得不偿失。文字可以直接用文本表现，只要色彩、字体搭配得当，就可以制作出美丽的页面，把有限的页面空间留给那些无法用文本表现的装饰图片。在上述的三级结构中，二级页面之间、三级页面之间应保持风格一致，也就是基本布局一致。首页与二、三级页面之间、三级页面之间的风格也需要一致，但这种要求不十分严格，自由度稍大。 三级结构是一种典型结构，并不是唯一的结构。在三级结构之外，网站制作者还可以编排出很多页面，比如：用于显示当日新闻的弹出式活动面板、用于对访问者进行

10、调查的调查问卷、当访问者离开站点时的道别画面等，这些往往不属于典型页面，但他们也包含在网站结构之中。下面我们将向大家介绍一些网站，并分析站点结构：商业站点结构，微软的主站点如图8-1所示：微软网站的主页体现了一般商业网站的设计概念，从标志、站内搜索引擎到公司广告都能体现。在本网站中，导航栏被设计在页面的上方，紧靠在公司标志的下方以及网页的最下方，如果单击它们，就能进入到二级页面。单击“栏目”出现二级页面栏目页，该页上的文字内容较一级页面明显增多。另外，导航条有所改，如图8-2所示Products变成了黄色，同时前面的小三角指待修改。公共信息站点结构，新浪站点是一个非常著名的公共信息站点，如图8

11、-3所示。整个站点严格按照三级结构进行，可以看到公共信息站点的首页上布满了链接：在页面的上部放置了整个站点的特色栏目，比如：新闻、娱乐、游戏等等，这样便于浏览者直接进入相应的栏目；在页面的右边放置的是当天的新闻，使浏览者一登录主页就可以查看到最新的新闻；在页面的主要部分，放置了站点的主要内容、搜索引擎目录，分门别类地放置了很多类别的链接。在首页单击财经栏目，进入如8-4的页面，这是三级结构的第二级。和首页类似，页面的新闻变成了这个栏目的主要新闻，变得更加详细。单击详细的文章名称，进入第三级，如图8-5所示第三级页面以文字为主，同时放置了一些与该文章相关的文章链接。8.2个人网站的结构个人网站的

12、结构本章第一节已经指出，个人网站具有两种不同的类型，而它们的结构特点也不尽相同。主题图形式的网站，三级层次结构很突出；而对于信息发布式的网站，有时候首页和栏目页之间没有太大差别，只是首页上显示更多的综合信息。通过对一些网站层次结构的分析，初学者可以对网站的层次有个清晰地认识。1、主题图形式的个人网站一般来说，首页的主题图形是为突出网站的风格而设计，它给出了通向栏目的超级链接。进入栏目后，栏目本身可以放置一个突出的主题图形，这个主题图形不仅可显示该栏目的风格，而且是区别于其他栏目的标志，并告诉浏览者当前的位置。最后一级文章页，图片要少但要容纳大量文字。在结构布局上，一般没有通向其他栏目的超级链接

13、，而放置一个返回上一级超级链接就可以了。 2、信息发布式个人网站介绍信息网站的层次布局，与公共信息站点一样，在第一、二级之间不需要太大的区别，只区分首页和栏目页即可。如该栏目的图标用明显的颜色显示，而其他栏目用一般的颜色显示。但是在进入第三级文章页后，应该有较大的变动，不允许该页面有过多的图片，而要能容纳大篇幅的文字，整个页面尽量放开，结构也要简单。另外，在该页面上还需要放置一个返回主页的超级链接，用来返回上一级的栏目页。由于使用的是文本链接，对页面下载速度影响不大，整体风格要清新而淡雅，不会在读者阅读信息时产生不良的刺激。网站作者的E-mail、网站版权信息等都置于页面的下方，不影响主要内容

14、的显示。这种网站的建设起来比较快，因其层次结构具有很大的廷伸性，只需要稍加改动，就能产生一个新的栏目页。8.3网站目录结构组织网站目录结构组织网站的目录是指你建立网站时创建的目录，例如：在用FrontPage98建立网站时都默认建立了根目录和images子目录。网站的目录结构是一个容易被忽略的问题，不少初学者往往不规划，就随意创建子目录。由于超级链接的存在，可以随意在目录间跳转，因此目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，站点内容未来的扩充和移植有着重要的影响，后面小节将讲述规划目录结构时应当遵循的几个原则，大家应当理解、掌握对以后的网站规划和维护有很大帮

15、助。1、不要将所有文件都存放在根目录下有些初学者为了方便，将所有文件都放在根目录下。这样做造成的不利影响在于：（1）文件管理混乱。常常搞不清哪些文件需要编辑、更新，哪些无用的文件可以删除，哪些是相关联的文件，最终影响了工作效率。（2）上传速度慢。服务器一般都会为根目录建立一个文件索引，当所有文件都放在根目录下，那么即使你只上传、更新一个文件，也需要将所有文件再检索一遍，再建立新的索引文件。很明显，文件量越大等待的时间就越长。所以，应该尽可能地减少根目录下的文件存放数。2、按栏目内容分别建立子目录既然要求分散文件，那么就需建立子目录。首先，应该按站点的内容主要栏目来建立。例如：网页教程类站点可以

16、根据技术类别分别建立相应的目录，如Flash，Dhtml，JavaScript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈信息等建立相应的目录。其他的次要栏目，比如whats new、友情链接等内容较多，需要经常更新的栏目可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在同一个目录下。所有的相关程序一般都存放在特定的目录，例如：CGI程序放在cgi-bin目录，便于维护管理，所有需要下载的内容也最好按照类别分别放在各个目录下。3、在每个主目录下都建立独立的images目录默认的站点根目录下都有一个images子目录，但是如

17、果将所有图片都存放在这个目录里面，会造成很大的不便。当需要更新某个主栏目，或者将某个栏目删除时，图片的管理相当麻烦，反复修改后images就成为一个庞大的垃圾目录了。经过实践发现，为每个主栏目建立一个独立的images子目录是最好的办法，也方便管理，而根目录下的images子目录只用来存放根目录下的页面和一些通用栏目的图片。4、目录的层次不要太深如同前面所讲到的，目录的层次建议不要超过三层。具体原因就不再复述，其他需要注意的还有： 1、切忌使用中文目录。网络无国界，使用中文目录可能对网址的正确显示造成困难。2、不要使用过长的目录。尽管服务器支持长文件名，但是太长的文件名不便于记忆，也没有必要。

18、3、尽量使用意义明确的目录。如上面提到的网络技术教学站点例子中，可以用“Flash”，“Dhtml”，“JavaScript”这几个名称，也可以用1，2，3建立目录，但是哪一个更明确、更便于记忆和管理呢，？显然是前者！随着网页技术不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次，但上面的几个原则依然适用。8.4首页设计和版面布局首页设计和版面布局8.4.1首页设计首页设计在全面考虑好网站的栏目、链接结构和整体风格之后，就可以正式动手制作首页了。“好的开端是成功的一半”，在网站设计上也是如此。首页的设计是一个网站成功与否的关键，因为访问者往往

19、看到第一页就对站点有了一个整体的印象。能否使访问者继续点击进入并吸引访问者留在本网站上，全凭首页设计的效果。所以，首页的设计和制作是需要我们重视的，一般首页设计和制作占整个制作时间的40%。首页从根本上说就是全站内容的目录，是个索引。设计一个好的首页，一般步骤如下：确定首页的功能模块。 （1）确定首页的功能模块首页的功能模块，是指需要在首页上实现的主要内容和功能。一般的站点都需要这样的一些模块：网站名称（logo）、主菜单（menu）、新闻（new）、搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright）等。选择哪些模块、实

20、现哪些功能、是否需要添加其他模块等，都是进行首页设计时首先要确定的。（2）设计首页的版面在功能模块确定后就可以开始首页的版面设计了，就像搭积木，每个模块是一个单位积木，如何搭拼出一座漂亮的房子，就看创意和想象力了。设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现最终效果。（3）处理技术上的细节技术上的细节包括：主页如何能在IE和NC下看起来都不至于太粗糙、如何设置字体和链接颜色等。 8.4.2版面布局版面布局设计首页的第一步是设计版面布局，就像传统的报刊杂志编辑一样将网页看作一张报纸、一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学

21、习场景编剧，但是固定的网页版面设计基础，依然是必须学习和掌握的。它们的基本原理是相同的。版面，是指是浏览器看到的完整的一个页面（可以包含框架和层），因为每显示器的分辨率是不同的，所以同一个页面的大小可能会出现640480像素、800600像素或1024768像素等不同尺寸。布局，就是将图片和文字排放在页面的不同位置以适合浏览的一种方式。版面布局也是一个创意的问题，但是比网站的整体创意容易，有规律可循。版面布局一般可以分为以下步骤：（1）草案新建的页面就像一张白纸，可以尽可能地发挥自己的想象力，将想到的“结构”设计出草案来（建议先用一张白纸和一支铅笔，或者制图软件Photoshop等构思出来）。

22、这属于创意阶段，不讲究细腻工整也不必考虑细节功能，只是以简陋的线条勾画出创意的轮廓。尽可能地多画几张，最后选定一个满意的作为继续创作的依据。（2）粗略布局在草案的基础上，把需要放置的功能模块安排在页面上。注意，这里必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置。（3）定案将粗略布局细化、具体化。在布局过程中，应该遵循的原则有：协调平衡，亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能给访问者稳定诚实、可信的效果。（4）具体设计和规划，其方式可以是：异常平衡，即非对称形式，但也要讲究平衡和协调。此种布局能达到强调性、不稳定性、高注目性的效果。对比

23、。所谓对比，不仅在形象上要利用色彩、色调等技巧表现，在内容上也可涉及古今、新与旧、贫与富等对比。凝视，所谓凝视是指，利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。空白，空白有两种作用，一方面比其他网站显得突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。图片解说，此法对不能用语言说服或用语言无法表达的情感特别有效。图片解说的方式，可以传达给浏览者更多的想象空间。8 5具体网站的设计具体网站的设计在创建网页之前，必须学会建立和管理站点。Dreamweaver MX为我们提供了强大的站点方面的功能。8.5.1、创建本地站点、创

24、建本地站点在建立站点前，首先要对站点结构有一个比较清楚的规划。一般来说，站点就是一个大的文件夹，其中又包括很多文件夹。下面我们来创建一个本地站点，操作步骤如下：（1）在某个驱动器的根目录下，创建一个文件夹，作为本地站点的根目录。（2）打开“站点”菜单，选择【管理站点】【新建】命令。即可打开如图8-6所示的对话框。在“高级”选项卡本地站点信息项中的站点名文本框中键入站点的名称：个人主页。在本地根目录文本框中输入本地站点的根目录位置，或单击“文件夹”按钮，从磁盘上定位站点的根目录位置。（3）如果选中“自动刷新本地文件列表”复选框，则每当本地站点文件有更新时，系统都会自动刷新站点窗口中的站点文件列表

25、。（4）可以在HTTP地址文本框中输入该站点地址。（5）如果选中“启用缓存”复选框创建本地站点的缓存，系统可以加快站点链接更新的速度。（6）设置完毕后，单击“确认”按钮。系统自动检索当前网站中的文件。完成对站点所有文件的检索后，站点的建立就大功告成了。在文件浮动面板中，可以浏览创建好的网站结构图。8.5.2、设置站点的参数、设置站点的参数创建完站点后，为便于管理，在Dreamweaver MX中还可以设置站点的相关参数。具体的操作步骤如下：（1）打开“站点”菜单，选择“管理站点”命令，即可以打开如图8-7所示的对话框。（2）选择“个人主页”站点，单击“编辑”按钮，弹出“个人主页的站点定义为”对

26、话框，如图8-8所示，选择“站点地图布局”选项。也可以直接在文件浮动面板的站点选项的“视图”菜单中选择“布局”命令，打开“个人主页的站点定义为”对话框。（2）选择“个人主页”站点，单击“编辑”按钮，弹出“个人主页的站点定义为”对话框，如图8-8所示，选择“站点地图布局”选项。也可以直接在文件浮动面板的站点选项的“视图”菜单中选择“布局”命令，打开“个人主页的站点定义为”对话框。（3）在“主页”文本框中输入主页的路径和名称。也可以单击右边的“文件夹”按钮，从磁盘上选定主页文件“index.htm”。（4）在“列数”文本框中，输入站点地图的列数；在“列宽”文本框中，输入站点地图的列宽。这里选择Dr

27、eamweaver MX 的默认值，分别为200和125。（5）在“图标标签”选项组中，设置站点地图中文件图标下的文件名显示类型。这里选择“文件名称”单选按钮，在站点地图中显示文件的名称。若选择“页面标题”单选按钮，则在站点地图中显示网页的标题。（6）在“选项”选项组中，若选中“显示标记为隐藏的文件” 复选框，则在站点地图中将不仅显示正常属性的文件，还显示属性为隐藏的文件。若选中“显示相关文件”复选框，则在站点地图中将显示各个文件之间的链接关系。（7）设置完毕，单击“确认”按钮。（8）在文件浮动面板的“站点”选项中选择“站点地图”命令，即可以浏览已创建好的网站结构地图。8.5.3、发布站点、发

28、布站点本地站点只有发布到Internet上，才能被千千万万的人浏览。Dreamweaver MX的强大功能很容易实现站点的发布。1将本地站点文件上传到局域网服务器上如果本地局域网服务器中提供了个人网页的存储空间，就可以将本地站点上传到局域网服务器指定的存储目录中，完成本地站点的上传。操作步骤如下：（1）在“站点”菜单中选择“管理站点”命令；弹出如图8-7所示的对话框，在对话框中选择需要上传的站点：个人主页。（2）单击“编辑”按钮，弹出“个人主页的站点定义为”对话框，如图8-9所示，选择“远程信息”选项。（3）在“访问”下拉列表框中选择“本地/网络”；在“远端文件夹”文本框指定文件上传的目录。（

29、4）单击“确认”按钮，确定操作。下面我们将已经建立好的站点上传到远程目录中。操作步骤如下：（1）选中需要上传的文件。这里选中整个站点。（2）在文件浮动面板中，选择“站点”选项卡中“站点”菜单中的“上传”命令，或者单击面板上的“上传”按钮，开始上传站点。上传文件过程中，系统显示“状态”对话框，如图8-10所示。上传完毕后，在文件浮动面板中，选择“远程视图”命令，面板中显示过程目录下的站点结构，可见远程目录下的站点结构与本地站点的完全一致。2用FTP将本地站点发送到远程Web服务器上在向远程Web服务器上发布个人网站，一般需要申请存储空间。在申请成功后，远程Web服务器会发送一个包含用户名和密码的

30、电子邮件，这样用户就可以利用FTP上传工具将网站发布到远程服务器上了。在Dreamweaver MX中通过FTP上传个人网站的操作步骤如下：（1）在“站点”菜单中选择“管理站点”命令。弹出对话框如图8-7所示。在对话框中选择需要上传的站点：个人主页。（2）单击“编辑”命令，弹出“个人主页的站点定义为”对话框，选择“远程信息”，在“访问”下拉列表框中选择“FTP”，如图8-11所示。（3）在“个人主页的站点定义为”对话框的FTP主机文本框中填入远程服务器主机的地址，在“主机目录”文本框中填入远程站点上存放个人站点的目录名称，在登录和“密码”文本框中分别填入用户登录名和登录密码。选中“保存”复选框

31、，可免去每次链接到远程服务器上都需要输入密码的麻烦。（4）单击“确认”按钮，确定操作。（5）选中需要上传的文件，这里选中整个站点。在“文件”浮动面板中，选择“站点”菜单中的“上传”命令，或者单击面板上的“上传”按钮，就可以通过FTP将站点传送到远程Web服务器上。8.5.4、管理站点、管理站点在“站点”菜单中选择“管理站点”命令，即可以打开如图8-15所示的对话框。选择所要打开的站点（可能是多个），即可以进行“编辑”、“复制”、“删除”、“导出”和“导入”等操作。也可以在“文件”浮动面板的“站点”选项卡中选择“站点”菜单中的“管理站点”命令，对网站进行操作管理。8.6、网站网页的上传与维护、网

32、站网页的上传与维护要将网页上传至Internet，首先要申请存放网页的空间，获取后即可上传网页，以后你只要进行网页的维护与管理工作就可以了。8.6.1网页空间的申请网页空间的申请1、租用专线选择这种方法的时候要注意，将会有一笔不菲的费用要支出。如果你的财政还不算紧张而又舍得花费，可以向ISP（Internet服务提供者）租用专线享受特权，让计算机24小时上网架设Web服务器。这样，你的网站就可以像网易、搜狐等网站一样，保持24个小时向全世界开放。2、租用网页空间或虚拟主机通常，ISP还会提供网页空间或虚拟主机的出租服务，而且其价格相对来说更容易接受，适合用较少钱办较多事的用户。有关网页空间或虚

33、拟主机出租的价格、申请程序、上传方式、网页空间大小是否满足要求等事项，可以到你准备去租用的ISP处查询。3、申请免费网页空间这可是天上掉下来的馅饼，不花钱还可以办实事！是的，你可以上网申请免费网页空间。不过这种方式需要你承担一定的风险：第一是，带宽不够导致传输速率慢，有时慢的惊人；二是，白给的空间是有限制的，也许并不能满足你的要求；三是，免费网页空间提供的服务或功能会更少，也许不支持CGI接口技术、SSI、PHP和DENG；四是，你的网页没准也变成了别人的部分空间，比如被要求放上广告等。还有，网页空间通常只是一个目录，不能设置个人网域。所以，如果你的网页很重要，要求全世界时时关注，建议最好还是

34、投资租用网页空间或虚拟主机。不过，就目前的情况来看，申请免费网页空间也是一种时髦，对于那些不是很重要的网页或学习网页设计者来说，还是可以使用这种方便省钱的办法的。下面给出了几个提供免费网页空间服务的站点，读者可以去看一看：网易：http:/虎翼网：http:/东方网景http:/ Pro、CuteFTP、LeechFTP、FLASHftp等。8.6.4网页测试网页测试实际上，当网页设计完成后并不等于万事大吉了，建设网站的长期工作主要在于测试和维护网站。在网页刚发布时，对网页进行全面的测试是必不可少的，因为实际情况不可能完全预见，不论在制作网页时多么小心，在网站的实际运行中还会出现这样或那样的问

35、题。网页发布初期对网页进行全面的测试，目的是在尽可能短的时间内，发现尽可能多的问题，然后经过发现问题、解决问题的过程，确保网页能在尽可能短的测试期后正常运行。1、网页测试发布如果是在自己的计算机上建设站点，最好的测试方法就是在本机上使用Web浏览器测试。这样的测试虽然说是网页测试，但实际上包含了对网页和网站服务的总体测试，在实际的测试过程要注意以下几点：（1）尽量多使用几种不同的Web浏览器测试网页，最典型的是IE和Netscape，至少要保证网页在这两种浏览器中都能正常运行。（2）尽量不要使用最新版本的浏览器进行网页测试，使用比较常用的浏览器版本。（3）尽量在多种操作系统中测试网页。网页的测

36、试过程也是对网页的修改过程，在测试网页的同时应根据结果及时进行相应地修改，其目的是保证大多数用户的利益，使他们得到最优质的页面效果和最快的响应。网页测试不能仅限于制作人员，应该请位于不同的主机、不同的职业、不同的受教育程度和不同年龄的人来访问并测试网页，以得到尽量全面而客观的评价。2、测试项目网页制作者在制作网页的过程要根据制作的项目进行测试，一般包括以下几个方面：链接测试链接测试主要看网页中是否有超链接掉链的情况，包括页面、图像、CGI程序等。如果是图像掉链，页面中图像的位置是个空框；如果是页面或CGI程序掉链，服务器会返回一个“404 NOT FOUND”响应信息。遇到这种情况，就要检查H

37、TML文档中关于这个链接的引用是否正确，并及时进行相应的修改。遇到类似现象的原因有这样两种情况：1）文件名不正确。出现这种现象，在Linux中很可能是文件名的大小写不匹配所造成的。如果完全使用FrontPage的图形界面来制作网页，一般会出现文件名不正确错误在于源于文件名的大小写。2）文件路径不对。在FrontPage中制作超链接或嵌入图片时，如果所引用的文档不在当前文件夹中，将使用绝对路径记录在HTML中。在FrontPage的普通视图中，用户无法看到相对路径和绝对路径的区别，只能到HTML文档中检查而且在本机使用浏览器测试无法看出，因此很容易被忽略，网页真正上传到服务器时这个毛病就会暴露出

38、来。在制作网页的过程中如果严格按已规划好的目录结构存放文档以及图片，会大大降低测试阶段的工作量。外观测试外观测试主要看网页在浏览器中是否按预想的排版布局在页面中显示，之所以要进行这样的测试主要基于以下原因：1）FrontPage的网页制作界面所显示的效果和浏览器中的效果有一定的出入。2）不同的浏览器对同一页面显示的效果有出入。3）不同的操作系统下的浏览器对同一页面的浏览效果有出入。效果表现不同通常体现在以下方面：第一，字体大小，在不同的浏览器或不同的操作系统下，字体的大小会有出入。第二，表格的间距，在所见即所得的编辑视图中，表格的间距和浏览器中显示的大小有出入。第三，表单的外观，不同的浏览器、

39、操作系统下的网页表单的外观有出入。在制作网页时要顾及到大多数浏览器的效果，并且要通过细致地调整使页面尽量在众多浏览器中保持一致的效果。速度测试测试页面的下载速度关系到页面内容以及服务器的设置，尽量多在局域网内的不同机器上访问、测试网页，看是否能在令人可以接受的时间内完成页面的下载和显示并且不影响网页的效果，速度越快越好。脚本和程序测试测试网页中的JavaScript以及CGI程序是否能正常工作。1）JavaScript的脚本错误情况主要有：第一，脚本设计的逻辑错误，这是导致脚本无法正常工作的常见原因。通常出现在If、While等需要进行逻辑判断的部分，为避免出现这样的错误，要求在开始编写脚本时

40、就有清晰的逻辑设计思路。另外，在编写脚本时应该多做注释，这样在测试脚本时，不至于遗忘当初的脚本设计思路。第二，由于笔误发生的错误，JavaScript没有变量声明和数据类型检查，这就可能由于笔误使该用的变量没有用上，而对无用的变量进行存取操作。这样的错误通常发生在脚本没有语法错误却又不能正常工作的页面中，最难检查到。为防止这样的错误，要求脚本编写者在编写过程中一定须小心仔细。第三，利用服务器响应测试，CGI脚本或程序涉及服务器端的编程及服务器的环境设置，通过访问测试无法获得直接的错误提示信息。有两种情况：如果CGI程序能工作，就向它提交信息，通过返回的结果以及服务器端记录文件的记录，判断CGI

41、程序是否正常工作以及可能出现的错误；如果CGI不能正常工作，只有通过浏览器的错误响应结果获得错误响应信息来查找CGI程序的错误，服务器的错误日志error_log中记录的信息可以帮助排除错误。8.6.5网站维护网站维护网站维护的一个重要内容是查看留言板，通过查看留言板获得用户反馈信息。通常，用户会利用留言板反映网页中存在的问题，管理员对这些问题立即进行检查，若确实是服务器和网页方面的原因，应该及时改善。用户也可能对网站的内容或页面布局提出一些有用的建议，作为管理员应该听取好的建议，并在今后的更新中得以实施。8.7网站更新网站更新网页发布后，不能总是一成不变，否则访问量会降低。进行网页更新最有用

42、的依据是日志记录，通过分析用户对服务器资源的访问情况，确定网页内容的增删。首先，可以从各时期日志文件的大小大致得出各时期网站访问量的增减趋势。例如，我们的日志文件每半个月更新一次，假如日志文件自建立以来，其大小就不断地增长，则说明我们的网站是成功的；否则就要分析自己的网站究竟为什么不受欢迎。其次，从日志记录中选取一段时期内的记录进行分析，从而比较网页中各部分的访问量。注意，最好不要选取刚建立网站时的记录，因为这时的访问者对我们网站的各部分还不熟悉，必然要各个部分都看一看，因此看不出各部分的优劣。当网站进入正常运行期，访问者就会根据自己的需要有选择地访问各栏目。网页更新还应该参考用户的意见和建议

43、，根据用户的提议，通过自己不断地更新、增加内容，这样我们所做的网站就会一天天的丰富、成熟起来。8.8网站升级网站升级在对网站维护的同时也要做好网站的升级工作，它包含两方面内容：服务器软件的升级和操作系统的升级。服务器软件随着版本的升高，其性能和功能都有提高，适时地升级服务器软件能提高网站的访问质量。稳定强大的操作系统也是服务器性能的保证，应根据稳定性能来不断升级操作系统。操作系统升级有一定的危险性，为了保证Web服务能正常提供，每次升级前应该提醒用户，并且在访问量最低的时候升级。此外还有技术升级，在网站建设过程中，通过不断掌握新的Web技术并把它应用到网页中，提高网页的质量。总之，网站维护是一个长期的过程，应该尽自己最大的努力，持之以恒地进行网站维护工作以便给用户提供更好的服务。