第2章 网站规划设计

网站规划设计是指在建立网站前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站规划设计对网站建设起到计划和指导作用，对网站的内容和维护起到定位作用。

2.1 建立网站的一般步骤

规划网站时必须明确两点：首先要明确为什么要建这个网站，即建设网站的目的；其次，要明确这个网站的主题，即网站的主要内容。明确之后再制定具体建站的框架。

建立一个网站如同开发软件一样，一般按以下7步进行：

① 目标规划；

② 系统分析；

③ 网站设计；

④ 网站实现；

⑤ 网站发布；

⑥ 网站调试；

⑦ 维护与管理。

以上的7个步骤是建设一个网站大体上应遵循的。在实际的工作中，用户可以根据实际情况进行具体的安排。

2.2 网站的规划与设计

在建立网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的方案，这就是网站的规划与设计。

网站的规划与设计一般应遵循以下三个原则：

● 最大限度地满足用户需要；

● 最有效地进行资源利用；

● 使用方便，界面友好，运行高效。

常规的网站规划与设计方法一般有以下三种：自顶向下、自底向上、不断增补的设计方法。

1.自顶向下的设计方法

所谓自顶向下，就是从整个网站的首页开始设计，然后向下一层一层地展开。采用这种方法要求建站者对整个网站的内容比较了解，对整个网站的大体轮廓比较清晰。

2.自底向上的设计方法

自底向上的设计方法是，先设计树状信息结构的各个子结点，然后通过归纳，设计它们的树干结点，最后完成对根结点的设计。采用这种设计方法的优点是，网站的各个部分可以根据网站内容进行因地制宜的设计，而不必拘泥于条条框框，较为有风格。

3.不断增补的设计方法

这是在网站投入运行后常用的方法，是一种需求驱动的设计方法。当出现某种信息服务的需求时，就立即设计相应的信息服务页面。随着需求的增加，不断地增加网页，不断地调整相互之间的链接，使网站在短时间内建立起来。采用这种设计方法的优点是缩短规划分析期，效率较高。

需要注意的是，这三种方法一般都是相互穿插着进行的。例如，整个网站可以用自顶向下的设计方法，而网站的某一部分则可以采用自底向上或不断增补的设计方法来实现。

2.3 确定网站的类型和整体风格

2.3.1 网站的类型

随着Internet的飞速发展，网络已经成为人们学习、工作和生活中不可缺少的一部分。各种各样的网站如雨后春笋般建立起来，综观Internet上数以百万计的网站，按照其功能和结构形式大体上可以分为以下5类。

1.门户网站

门户网站（Portal Site）集合了众多内容，提供多样服务，并使其尽可能地成为网络用户的首选。目前比较知名的中文门户网站有三类：第一类是像新浪、搜狐、网易这样完全由国内网络公司经营的网站，网站内容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、体育、健康、科技、财经、教育等若干版块，以及网上短信、个人主页空间、免费邮箱等服务项目；第二类是境外投资的网站，如中文雅虎、美国在线等，网站内容以新闻和娱乐为主，少数提供免费信箱、在线聊天等服务项目；第三类是国内传统媒体办的网站，以人民网、新华网、央视国际网为代表，以提供新闻和时事评论为主。

2.普及型网站

企事业单位和个人根据自身要求建立和发布网站，以介绍其基本情况、通信地址、产品和服务信息、供求信息、人员招聘及合作信息等为主旨，这类网站属于普及型网站。该类网站以向客户、供应商、公众和其他一切对该网站感兴趣的人宣传、推介自身，并树立网上形象为目的，网站内容一般比较全面。

3.电子商务类网站

电子商务类网站分为B2B（商家对商家）和B2C（商家对个人客户）两种，按照交易过程可分为商品检索、商品采购、订单支付三个阶段。因此，电子商务网站应该具有如下功能：

● 商品发布功能；

● 商品选购功能；

● 具有个性化的采购订单模板，顾客可以进行购物组合比较；

● “购物车”内置的价格计算模型可以根据商家的价格体系灵活定制；

● 在线交易功能；

● 商品交接、资金结算功能。

4.媒体信息服务类网站

媒体信息服务类网站是报社、杂志社、广播电台、电视台等传统媒体为了树立自己的网上形象，方便服务对象而建立的网站，主要功能包括：信息发布、电子出版、客户在线咨询、网站管理。

5.办公事务管理网站

办公事务管理网站是企事业单位为了实现办公自动化而建立的内部网站，包括以下主要功能模块：办公事务管理、人力资源管理、财务资产管理和网站管理。

2.3.2 网站的整体风格

网站的整体风格及其创意设计是网站拥有者最希望、也是最难以掌握的。其难就难在没有一个固定的程式可以参照。对同一个主题，任何两个设计者都不可能设计出完全一样的网站。

风格（Style）是抽象的，是指站点的整体形象给浏览者的综合感受。例如，浏览者可能会觉得网易是平易近人的，迪士尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。在设计网站风格时应注意以下4点。

1.风格是建立在有价值的内容之上的

一个网站有风格而没有内容，就好比“绣花枕头”，外表光鲜，但内容空洞，是不会吸引浏览者再次访问的。因此，设计网站风格时，首先必须保证内容的质量和价值，这是最基本的，也是毋庸置疑的。

2.将网站Logo尽可能地放在每个页面最突出的位置

例如，以搜索引擎为特色的新浪网用英文字母sina和眼睛图案作为Logo，并且在每个页面的显著位置出现。

3.使用统一的图片处理效果

图片有强化视觉效果、营造网页气氛、活泼版面的作用，处理时要注意，图片阴影效果的方向、厚度、模糊度都必须一致，图片的色彩与网页的标准色彩搭配也要适当。

4.设计宣传标语

设计一条朗朗上口的宣传标语，把它制作在广告条（Banner）里，或者放在醒目的位置，告诉浏览者网站的特色。

2.4 定位网站的主题和名称

2.4.1 网站主题的确定

所谓网站的主题也就是网站的题材。网站使用的主要题材有：新闻、网上聊天/ICQ、网上社区/讨论/邮件列表、科技、财经、娱乐、网上求职、参考/资讯、教育、生活/时尚等。在选择网站题材时要注意以下3点。

1.主题小而内容精

网站的定位要准。制作一个包罗万象的网站，把所有自认为精彩的东西都放在上面，会让人感觉没有主题和特色，样样都有，却样样都很肤浅，而且有可能没有足够的能力去维护和及时更新。创新的内容是网站的灵魂，没有新颖的内容，网站就失去了生命力。

2.题材最好是自己擅长的内容

一个企业的网站，要密切结合自己的业务范围来选择内容，不要脱离业务主题去搞什么国内国际新闻、娱乐动态等与本身业务不相关的东西，或者为了增加访问量而去办一些本身并不熟悉、技术难度又比较大的栏目，如网上聊天之类的东西。

3.题材不要太滥、目标不要过高

题材“太滥”是指使用到处可见、人人都有的题材，如免费信息，软件下载等。“目标过高”是指在这一题材上已经有非常优秀、知名度很高的网站，要超过它们很难。

2.4.2 网站名称的确定

网站名称也是网站设计的一部分，而且是很关键的一个要素。例如，“电脑学习室”和“电脑之家”相比，显然后者更简练些。和现实生活一样，网站名称是否端正、响亮、易记，对网站的形象和宣传推广也有很大影响。选择网站的名称时要注意以下3点。

1.名称要端正

名称端正是指名称要合法、合情、合理，不能用反动、色情或危害社会安全的词语。

2.名称要易记

根据中文网站浏览者的特点，除非特别需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如，Beyond Studio和超越工作室相比，后者更亲切、更好记些。另外，网站名称的字数应该控制在6个字（最好4个字）以内，如“XX阁”、“XX设计室”等，4个字的名称可以使用成语，如“指间情缘”等。

3.名称要有特色

网站名称最好能体现一定的内涵，这样可以给浏览者更多的视觉冲击和空间想象力。例如，音乐前卫、网页陶吧、天籁绝音等，在体现出网站主题的同时，也点出了网站的特色。总之，定位题材和名称是设计一个网站的第一步，也是很重要的一部分。

2.5 确定网站的CI形象

所谓CI（Corporate Identity，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。一个杰出的网站，和实体公司一样，也需要整体的形象包装和设计。有创意的CI设计，对网站的宣传推广有事半功倍的效果。在网站主题和名称确定下来之后，用户需要考虑的就是网站的CI形象。在现实生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人们的印象极为深刻。

1.设计网站的标志

首先设计者需要设计一个网站的标志（Logo）。如同商标一样，Logo是站点特色和内涵的集中体现。

Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼睛作为Logo，体现网站的敏锐和动感的特色。Logo的设计创意一般来自网站的名称和内容。

① 网站有代表性的人物、动物、花草，可以用它们作为设计的蓝本，加以动画化和艺术化，例如，迪斯尼的米老鼠、搜狐的狐狸、鲨威体坛的篮球鲨鱼等。

② 专业性的网站可以以本专业有代表性的物品作为Logo，如中国银行的铜板标志，奔驰汽车的方向盘标志等。

③ 最常用和最简单的方法是用自己网站的英文名称作为Logo，采用不同的字体、字母的变形、字母的组合就可以很容易地制作出自己的Logo。

2.设计网站的标准色彩

网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。

“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM的深蓝色，肯德基的红色条纹，Windows的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。

一般来说，一个网站的标准色彩不宜超过3种，太多则让人眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主色块，给人以整体统一的感觉。其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。

3.设计网站的标准字体

标准字体是指用于Logo、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切、随意可以用手写体等。

4.设计网站的宣传标语

网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的“味道好极了”，Intel的“给你一颗奔腾的心”，都给人们留下极为深刻的印象。

2.6 网站内容的设计

确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下步骤组织内容来吸引浏览者浏览网站。

2.6.1 设计网站的栏目

网站栏目规划的主要任务是对所收集的大量内容进行有效的筛选，并将它们组织成一个合理的便于理解的逻辑结构。

初学者最容易犯的错误是确定题材后立刻开始制作。这样做的弊端是，当设计者制作完一页一页的网页之后才发现，网站结构不清晰，目录庞杂，内容东一块西一块，不但浏览者看着迷糊，设计者自己扩充和维护网站也相当困难。网站栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在拟订栏目时，要仔细考虑，合理安排。一般的网站栏目安排要注意以下4点。

1.紧扣网站主题

一般的做法是，将网站的主题按一定的方法分类，并将它们作为网站的主栏目。例如，制作一个以动画素材为主题的网站，可以将栏目分为动物动画、标志动画、三维动画、卡通动画等，并在首页上标明最近更新的动画。记住，主题栏目个数在总栏目中要占绝对优势，这样的网站才显得专业，主题突出，容易给人留下深刻印象。

2.设计最近更新或网站指南栏目

如果网站的首页没有安排版面放置最近更新的内容信息，就有必要设立一个“最近更新”栏目。这样做的目的是为了照顾常来的访客，让主页更人性化。

如果网站内容庞大（超过15MB）、层次较多，而又没有站内的搜索引擎，建议设计“本站指南”栏目，这样可以帮助初访者快速找到想要的内容。

3.设计可以互动交流的栏目

互动交流栏目不需要很多，但一定要有。例如，论坛、留言本和邮件列表等，可以让浏览者留下自己的信息和看法。

4.设计下载栏目及常见问题回答栏目

网络的特点是信息共享。如果浏览者看到一个站点中有大量有价值的资料，肯定希望能一次性下载，而不是一页一页浏览存盘。在网站的主页上设置一个资料下载栏目，会得到浏览者的认可和欢迎。另外，如果站点经常收到网友关于某方面问题的来信，最好设计一个常见问题回答的栏目，既方便了网友，也可以节约设计者维护网站的时间。

至于其他的辅助内容，如关于本站、版权信息等，可以不放在主栏目里，以免冲淡主题。总结以上几点，设计者在划分栏目时需要注意的是：

● 尽可能删除与主题无关的栏目；

● 尽可能将网站最有价值的内容列在栏目上；

● 尽可能方便访问者的浏览和查询。

2.6.2 设计网站的版块

版块比栏目的概念要大一些，每个版块都可以有自己的栏目。举个例子，网易站点分新闻、体育、财经、娱乐、教育等版块，每个版块下面有各自的主栏目。一般的个人站点内容较少，只要有主栏目就够了，不需要设置版块。如果设计者觉得有必要设置版块，应该注意以下3点：

● 各版块要相对独立；

● 各版块要相互关联；

● 版块的内容要围绕站点主题。

2.6.3 确定网站的目录结构

网站的目录是指用户建立网站时创建的目录。目录的结构是一个容易忽略的问题，许多设计者都有未经规划，随意创建子目录的不良习惯。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。下面是建立目录结构的一些注意事项。

1.不要将所有文件都存放在根目录下

有的设计者为了方便，将所有文件都放在根目录下。这样做会造成如下不利影响。

（1）文件管理混乱

设计者常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相互关联的文件，影响工作效率。

（2）上传速度慢

服务器一般都会为根目录建立一个文件索引。如果所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件数量越多，等待的时间也将越长。因此要尽可能减少根目录下的文件存放数量。

2.按栏目内容建立子目录

子目录的建立，首先按主菜单栏目内容建立。例如，网页教程类站点可以根据技术类别分别建立相应的目录，像Flash、DHTML、JavaScript等；而企业站点可以按公司简介、产品介绍、价格、在线订单、反馈联系等建立相应的目录。

其他一些不需要经常更新的栏目，例如，关于本站、关于站长、站点经历等可以合并放在一个统一的目录下。

所有程序一般都存放在特定的目录中。例如，CGI程序放在cgi-bin目录下，这样便于维护管理。所有需要下载的内容也最好放在一个目录下。

3.在每个主目录下都建立独立的images目录

在一般情况下，一个站点根目录下都有一个images目录。刚开始学习制作主页时，初学者习惯将所有图片都存放在这个目录里。可是后来就会发现这样做很不方便，当需要将某个主栏目打包供网友下载，或者删除某个栏目时，图片的管理相当麻烦。经过实践证明，为每个主栏目建立一个独立的images目录是最方便管理的，而根目录下的images目录只用来放首页和一些次要栏目的图片。

4.目录的层次不要太深

目录的层次建议不要超过3层。原因很简单，这样便于设计者维护管理。

5.不要使用中文目录名

网络无国界，使用中文目录名可能对网址的正确显示造成困难。

6.数据库文件单独放置

数据库文件因为安全要求较高，所以最好放置在HTTP所不能访问到的目录下。这样可以避免恶意的用户通过HTTP方式获取数据库文件。

2.6.4 设计网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象地说，每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上的，而是存在于一个立体的空间中。建立网站的链接结构有以下两种基本方式。

1.树状链接结构

树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构，需要逐级进入，再逐级退出。其优点是条理清晰，访问者明确知道自己在什么位置，不会“迷路”。其缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。

2.星状链接结构

星状链接结构类似于网络服务器的链接，每个页面相互之间都建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。其缺点是链接太多，容易使浏览者“迷路”，搞不清自己在什么位置，看了多少内容。

以上两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构结合起来使用。设计者希望浏览者既可以方便快速地到达自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是，首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。

2.6.5 组织网站的内容

网站内容不仅仅是网站发展的根本，同时是搜索引擎搜索一个网站的重要条件。提供有价值的内容，能够让网站快速获得搜索引擎的青睐，进而提升网站在搜索引擎上的整体表现。

1.站点结构图

站点结构图是一种有关站点结构、组织方式的示意图。站点的主要栏目或者关键内容列在其下的副标题中。当浏览者单击标题、题目或副标题时，相关的网页就会出现在屏幕中。站点结构图还可以被看做站点的分级结构图，以这种方式组织起来的信息可以使浏览者迅速找到信息所在的位置。

2.导航栏

每个网站都应该包括一组导航工具，它出现在此网站的每一个页面中，称为导航栏。导航栏中的按钮应该包括：主页、联系方式、反馈及其他一些用户感兴趣的内容。这些内容应该与站点结构图中的主要题目相关联。

3.精美的图片

图片不必过多，要选择合适的、无须太多内存及下载时间的图片。可以降低图片精度，对每页的文字和图像进行限制，或创建纯文本的版本。

4.引人入胜的内容

在每页中都要包含相关的、引人入胜的内容，特别是当某个网站需要宣传推销产品的时候，每一个页面都要用详细的内容和图片精心修饰一番。这样做的目的是吸引用户。另外，语言应该通俗易懂，对专业术语要进行解释。

5.反馈表

利用反馈表，用户可以随时提出信息需求，而不必记下电话号码。反馈表还能为那些没有E-mail的用户提供方便。从反馈表中可以发现网站中哪些信息是重要的，哪些信息是无关紧要的。

6.联系方式页面

在联系方式页面中创建可发送E-mail的链接，使E-mail的地址可以自动地出现在“收信人”栏中。这样，访问者在录入相关内容后单击“发送”按钮即可完成邮件发送。此页面还应该包括其他联系方式，如联系人及通信地址、传真、电话号码等。在导航栏中应能很方便地找到这些信息。

7.搜索工具

用户可以在搜索工具中输入关键词语或词组，在单击查询按钮后，与关键词相关的网页列表就会出现在屏幕上。注意，要提供关于有效查询的说明。

8.常见问题解答

创建常见问题解答可以避免重复回答相同的问题，以节省管理者和浏览者的时间和精力。

2.7 网站策划书撰写要点

经过充分调研，确定了网站建设目标和任务后，就可以动手撰写网站策划书了。应该从访问者的角度来考虑问题，而不是从开发者的角度，因为决定网站是否成功的是访问者。网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。下面以最常见的企业网站为例，介绍网站策划书的撰写要点。

1.前期调研分析

（1）了解目前网上相关行业的市场状况，对本企业的市场特点进行分析，看是否适合在互联网上开展业务，可以利用网站提升哪些竞争力。

（2）市场主要竞争者分析，了解竞争对手上网情况及其网站规划、功能、作用等。

（3）对网站可能的访问者的分析，从可能的访问者中分析出潜在顾客，并利用网站的各种功能模块为他们提供特色服务。

（4）对网站制作者自身条件、建设网站的能力（费用、技术、人力等）进行分析。

2.网站的功能定位

（1）首先要确定建立网站的目的是为了宣传自己的产品，还是为了建立行业性网站。

（2）根据需要和计划确定网站的功能，如产品宣传型、网上营销型、客户服务型、电子商务型等。

3.网站技术解决方案

（1）确定建站是采用自建服务器，还是租用虚拟主机。

（2）选择操作系统，用UNIX、Linux还是Windows 2000/NT，并分析投入成本、功能、稳定性和安全性等。

（3）确定是采用现成的企业上网方案、电子商务解决方案，还是自己开发。

（4）确定网站安全性措施，防入侵、防病毒方案等。

（5）相关程序开发，如：ASP，JSP，CGI及数据库选择等。

4.网站内容规划

根据网站的目的和功能规划网站内容。一般企业网站应包括：公司介绍、产品介绍、服务内容、价格信息、联系方式、网上订单等基本内容。电子商务类网站要提供会员注册、商务服务信息、信息搜索查询、订单确认、付款方式、个人信息保密措施、相关帮助内容。

如果网站栏目比较多时，需考虑指定专人负责相关内容。

5.网页设计

（1）网页美术设计要求。网页美术设计一般要与企业整体形象保持一致性，要符合CI规范，要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。

（2）在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度和阅读习惯等。

（3）制定网页改版计划，如每半年到一年进行一次较大规模的改版。

6.网站维护

（1）制定服务器及相关软硬件的维护计划。对可能出现的问题进行评估，制定响应时间。

（2）有效地利用数据库维护网站的重要内容。

（3）制定内容的更新、调整计划。

（4）制定相关网站维护的规定，将网站维护制度化、规范化。

7.网站测试

网站发布前要进行细致周密的测试，以保证正常的浏览和使用。

主要测试内容包括：

● 服务器稳定性、安全性；

● 程序及数据库测试；

● 网页兼容性测试，包括不同浏览器下的显示结果、不同显示器分辨率的页面效果等；

● 需要的其他测试。

8.网站发布与推广

（1）网站测试完成后进行发布前的公关、广告活动。

（2）搜索引擎登记等。

9.网站设计日程表

网站设计日程表包括各项规划任务的开始时间、完成时间、负责人等内容。

10.费用明细

要详细列出所需各项费用的清单，估算出总的投资额度。

习题2

2.1 简述网站建站的步骤。

2.2 网站的规划与设计的原则和方法是什么？

2.3 举例说明网站主题的分类和选择主题的原则。

2.4 什么是网站的CI形象？怎样设计网站的CI形象？打开网易主页（http://www. 163.com），查看其CI形象标志。

2.5 打开搜狐网主页（http://www.sohu.com），了解搜狐网的主要版块和栏目。

2.6 简述确定网站风格的注意事项。

2.7 举例说明怎样设计网站的目录结构和链接结构。

2.8 简述组织网站内容的方法。

2.9 简述怎样撰写网站策划书。