网页设计与制作_第8章网站建设

《网页设计与制作_第8章网站建设》由会员分享，可在线阅读，更多相关《网页设计与制作_第8章网站建设（49页珍藏版）》请在金锄头文库上搜索。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16、技术类别分别建立相应的目录，如Flash，Dhtml，JavaScript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈信息等建立相应的目录。其他的次要栏目，比如whats new、友情链接等内容较多，需要经常更新的栏目可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在同一个目录下。所有的相关程序一般都存放在特定的目录，例如：CGI程序放在cgi-bin目录，便于维护管理，所有需要下载的内容也最好按照类别分别放在各个目录下。,3、在每个主目录下都建立独立的images目录 默认的站点根目录下都有一个images子目录，但是如果将所有图片都存放在这个目录里面，会造成很大的不便。当需要更新某个主栏目，或者将某个栏目删除时，图片的管理相当麻烦，反复修改后images就成为一个庞大的垃圾目录了。 经过实践发现，为每个主栏目建立一个独立的images子目录是最好的办法，也方便管理，而根目录下的images子目录只用来存放根目录下的页面和一些通用栏目的图片。 4、目录的层次不要太深 如同前面所讲到的，目录的层次建议不要超过三层。具体原因就不再复述，其他需要注意的还有：,