第2章网站规划设计基础

1、 1门户网站门户网站 2普及型网站普及型网站3电子商务类网站电子商务类网站 4媒体信息服务类网站媒体信息服务类网站 5办公事务管理网站办公事务管理网站 6商务管理网站商务管理网站2.3.1 网站主题的确定网站主题的确定 2.3.2 网站名称的确定网站名称的确定 所谓所谓CI（Corporate Identity，企业形象），是指通过，企业形象），是指通过强化视觉效果的手段来加深用户对企业形象的印象。在现实强化视觉效果的手段来加深用户对企业形象的印象。在现实生活中，生活中，CI策划的例子比比皆是，例如，可口可乐公司拥有策划的例子比比皆是，例如，可口可乐公司拥有全球统一的标志、色彩和产品包装，给人

2、们的印象极为深刻。全球统一的标志、色彩和产品包装，给人们的印象极为深刻。1设计网站的标志（设计网站的标志（Logo） 首先设计者需要设计一个网站的标志（首先设计者需要设计一个网站的标志（Logo）。如同商）。如同商标一样，标一样，Logo是站点特色和内涵的集中体现。是站点特色和内涵的集中体现。Logo可以是中文、英文字母、符号或图案，也可以是动物或可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母人物等。例如，新浪网用字母sina加眼睛作为加眼睛作为Logo，体现网，体现网站的敏锐和动感的特色。站的敏锐和动感的特色。Logo的设计创意一般来自网站的名的设计创意一般来自网

3、站的名称和内容。称和内容。 2设计网站的标准色彩设计网站的标准色彩 网站给人的第一印象来自视觉的冲击，确定网站的标准网站给人的第一印象来自视觉的冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配，将产生不同的效色彩是相当重要的一步。不同的色彩搭配，将产生不同的效果，并可能影响到访问者的情绪。果，并可能影响到访问者的情绪。 “标准色彩标准色彩”是指能体现网站形象和延伸内涵的色彩。是指能体现网站形象和延伸内涵的色彩。例如，例如，IBM的深蓝色，肯德基的红色条纹，的深蓝色，肯德基的红色条纹，Windows的红、的红、蓝、黄、绿色块，都使浏览者觉得很贴切，很和谐。蓝、黄、绿色块，都使浏览者觉得很

4、贴切，很和谐。一般来说，一个网站的标准色彩不宜超过一般来说，一个网站的标准色彩不宜超过3种，太多则让人种，太多则让人眼花缭乱。标准色彩要用于网站的眼花缭乱。标准色彩要用于网站的Logo、标题、主菜单和主、标题、主菜单和主色块，给人以整体统一的感觉。至于其他色彩也可以使用，色块，给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。只是作为点缀和衬托，绝不能喧宾夺主。 3设计网站的标准字体设计网站的标准字体 标准字体是指用于标准字体是指用于Logo、标题和主菜单的特有字体。一、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的特有风格，设计般网页默认的字

5、体是宋体。为了体现站点的特有风格，设计者可以根据需要选择一些特别字体。例如，为了体现专业性者可以根据需要选择一些特别字体。例如，为了体现专业性可以使用粗仿宋体，为了体现设计精美可以用广告体，为了可以使用粗仿宋体，为了体现设计精美可以用广告体，为了体现亲切随意可以用手写体等体现亲切随意可以用手写体等。 4设计网站的宣传标语设计网站的宣传标语 网站的宣传标语也可以说是网站的精神、网站的目标，网站的宣传标语也可以说是网站的精神、网站的目标，最好用一句话甚至一个词来高度概括。它类似于实际生活中最好用一句话甚至一个词来高度概括。它类似于实际生活中的广告语句，例如，雀巢的的广告语句，例如，雀巢的“味道好极

6、了味道好极了”，Intel的的“给你一给你一颗奔腾的心颗奔腾的心”，给人们留下的印象都极为深刻，给人们留下的印象都极为深刻。2.5.1 设计网站的栏目设计网站的栏目 网站栏目的实质是一个网站的大纲索引，索引应该将网网站栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在拟订栏目的时候，要仔细考虑，站的主体明确显示出来。在拟订栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下合理安排。一般的网站栏目安排要注意以下4点。点。 1紧扣网站主题紧扣网站主题 2设计一个最近更新或网站指南栏目设计一个最近更新或网站指南栏目 3设计一个可以互动交流的栏目设计一个可以互动交流的栏目

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

8、下几点： 各版块要有相对独立性各版块要有相对独立性； 各版块要相互关联各版块要相互关联； 版块的内容要围绕站点主题版块的内容要围绕站点主题。 网站的整体风格及其创意设计是站长们最希望、也是最网站的整体风格及其创意设计是站长们最希望、也是最难以掌握的。其难就难在没有一个固定的程式可以参照和模难以掌握的。其难就难在没有一个固定的程式可以参照和模仿。对同一个主题，任何两个设计者都不可能设计出完全一仿。对同一个主题，任何两个设计者都不可能设计出完全一样的网站。在设计网站风格时应注意以下样的网站。在设计网站风格时应注意以下4点。点。 1风格是建立在有价值的内容之上的风格是建立在有价值的内容之上的 2将网

9、站将网站Logo尽可能地放在每个页面最突出的位置尽可能地放在每个页面最突出的位置 3使用统一的图片处理效果使用统一的图片处理效果 4设计宣传标语设计宣传标语2.7.1 设计网站的目录结构设计网站的目录结构 网站的目录是指用户建立网站时创建的目录。目录结构网站的目录是指用户建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，以及内容的扩充和移植有着重要的影响。点本身的上传维护，以及内容的扩充和移植有着重要的影响。下面是建立目录结构的一些注意事项。下面是建立目录结构的一些注意事项。 1不要将所有文件

10、都存放在根目录下不要将所有文件都存放在根目录下 2按栏目内容建立子目录按栏目内容建立子目录 3在每个主目录下都建立独立的在每个主目录下都建立独立的images目录目录 4目录的层次不要太深目录的层次不要太深 5不要使用中文目录名不要使用中文目录名 6不要使用过长的目录名不要使用过长的目录名2.7.2 设计网站的链接结构设计网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。建立网站的链建立在目录结构基础之上，但可以跨越目录。建立网站的链接结构有以下两种基本方式接结构有以下两种基本方式。 1树状链

11、接结构树状链接结构 树状链接结构类似于树状链接结构类似于DOS的目录结构，首页链接指向一级页面，一的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。其优点是条理清晰，访问者明确知道自己在级页面链接指向二级页面。其优点是条理清晰，访问者明确知道自己在什么位置，不会什么位置，不会“迷路迷路”。其缺点是浏览效率低，从一个栏目下的子页面。其缺点是浏览效率低，从一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。到另一个栏目下的子页面，必须绕经首页。 2星状链接结构星状链接结构 星状链接结构类似于网络服务器的链接，每个页面相互之间都建立星状链接结构类似于网络服务器的链接，每个页面相互之间都

12、建立有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页有链接。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。其缺点是链接太多，容易使浏览者面。其缺点是链接太多，容易使浏览者“迷路迷路”，搞不清自己在什么位置，搞不清自己在什么位置，看了多少内容看了多少内容。 确定网站的题材，并且收集和组织了许多相关的资料内确定网站的题材，并且收集和组织了许多相关的资料内容后，按照以下方面组织内容来吸引浏览者浏览网站。容后，按照以下方面组织内容来吸引浏览者浏览网站。 1站点结构图站点结构图 2导航栏导航栏 3精美的图片精美的图片 4引人入胜的内容引人入胜的内容 5反馈表反馈表 6联系方式页

13、面联系方式页面 7搜索工具搜索工具 8常见问题解答常见问题解答2.9.1 网页的基本元素网页的基本元素 网页是网站提供信息服务的主要形式，一般包含文字、网页是网站提供信息服务的主要形式，一般包含文字、图像和表格等内容，以及实现信息块之间跳转的超链接。网图像和表格等内容，以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。常见的网页元素页通常以网页文件及其附属文件形式存在。常见的网页元素包括文本、图片、超链接、表格、导航栏、动画和交互表单。包括文本、图片、超链接、表格、导航栏、动画和交互表单。 1文本文本 2图片和动画图片和动画 3声音和视频声音和视频 4超链接超链接 5导航

14、栏导航栏 6表格表格 7表单表单 8其他常见元素其他常见元素2.9.2 网页布局网页布局 网页是网站构成的基本元素。当浏览者移动鼠标，在网网页是网站构成的基本元素。当浏览者移动鼠标，在网海中遨游，一个个精彩的网页会呈现在用户面前。网页是否海中遨游，一个个精彩的网页会呈现在用户面前。网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素片的处理等因素外，还有一个非常重要的因素网页的布局网页的布局。 1网页布局的基本概念网页布局的基本概念 对于初学者，最好应先了解网页布局的基本概念对于初学者，最好应先

15、了解网页布局的基本概念。 （1）页面尺寸）页面尺寸 一般在分辨率为一般在分辨率为1024*768像素的情况下，页面的显示尺寸像素的情况下，页面的显示尺寸为为1007*600像素；在分辨率为像素；在分辨率为800*600像素的情况下，页面的像素的情况下，页面的显示尺寸为显示尺寸为780*428像素；而在分辨率为像素；而在分辨率为640*480像素的情况下，像素的情况下，页面的显示尺寸为页面的显示尺寸为620*311像素。在网页设计过程中，向下拖动像素。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容（尺寸）的方法。但应当注意的页面是惟一给网页增加更多内容（尺寸）的方法。但应当注意的是，除非

16、设计者肯定站点的内容很有吸引力，否则不要让浏览者是，除非设计者肯定站点的内容很有吸引力，否则不要让浏览者拖动页面超过三个屏幕。拖动页面超过三个屏幕。2.9.2 网页布局网页布局 （2）整体造型）整体造型 造型就是创造出来的物体形象。这里是指页面的整体形造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计者可以充分运用自然界中的各种形状及它们的组造型，设计者可以充分运用自然界中的各种形

17、状及它们的组合，如矩形、圆形、三角形、菱形等。合，如矩形、圆形、三角形、菱形等。 虽然不同形状代表不同意义，但目前的网页制作大多结虽然不同形状代表不同意义，但目前的网页制作大多结合多种图形加以设计，只是其中某一种图形的构图比例可能合多种图形加以设计，只是其中某一种图形的构图比例可能占得多一些。占得多一些。2.9.2 网页布局网页布局 2网页布局的一般步骤网页布局的一般步骤 （1）构思）构思 根据网站内容的整体风格，设计版面布局。不要讲究细根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓就行。当然也可能有多种想法，尽量都节，只要有一个轮廓就行。当然也可能有多种想法，尽量都把它们

18、画出来，然后再比较，采用一种比较满意的方案。把它们画出来，然后再比较，采用一种比较满意的方案。 （2）初步填充内容）初步填充内容 这一步就要把一些主要的内容放到网页中，例如，网站这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、导航条、计数器等。要注意重点突的标志、广告条、菜单、导航条、计数器等。要注意重点突出，把网站的标志、广告条、菜单放在最突出、最醒目的位出，把网站的标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其他元素的放置。置，然后再考虑其他元素的放置。 （3）细化）细化 在这一步，设计者可以利用网页编辑工具把草案做成一在这一步，设计者可以利用网页编辑工具把

19、草案做成一个简略的网页，当然，对每一种元素所占的比例也要有一个个简略的网页，当然，对每一种元素所占的比例也要有一个详细的数字，以便以后修改。详细的数字，以便以后修改。2.9.2 网页布局网页布局 3网页排版布局的原则网页排版布局的原则 上面简要介绍了设计网页布局的步骤，而事实上，在构上面简要介绍了设计网页布局的步骤，而事实上，在构思和设计的过程中，设计者还必须要掌握以下思和设计的过程中，设计者还必须要掌握以下5项原则。项原则。 （1）平衡性）平衡性 （2）对称性）对称性 （3）对比性）对比性 （4）疏密度）疏密度 （5）比例）比例2.9.2 网页布局网页布局 4网页布局类型网页布局类型 网页布

20、局大致可分为网页布局大致可分为“国国”字型、拐角型、标题正文型、字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、左右框架型、上下框架型、综合框架型、封面型、Flash型、型、变化型等。变化型等。 （1）“国国”字型布局字型布局 “国国”字型也可以称为字型也可以称为“同同”字型，是一些大型网站经字型，是一些大型网站经常使用的类型。这种布局最上面是网站的标题及横幅广告条，常使用的类型。这种布局最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些

21、基是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。一种布局类型。2.9.2 网页布局网页布局 （2）拐角型布局）拐角型布局 拐角型布局与上一种布局只是形式上的区别，其实是很拐角型布局与上一种布局只是形式上的区别，其实是很相似的。该布局上面是标题及广告横幅，接下来的左侧是一相似的。该布局上面是标题及广告横幅，接下来的左侧是一窄列链接等内容，右面是很宽的正文，最下面也有一些网站窄列链接等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在这种布局中，左侧一般是导航链接的辅助

22、信息。在这种布局中，左侧一般是导航链接。 （3）标题正文型布局）标题正文型布局 标题正文型布局的最上面是标题或类似的一些东西，下标题正文型布局的最上面是标题或类似的一些东西，下面一般是正文，例如，一些文章页面或注册页面等就属于这面一般是正文，例如，一些文章页面或注册页面等就属于这种类型。种类型。 （4）左右框架型布局）左右框架型布局 采用左右框架型布局的网页分为左、右两部分，一般左采用左右框架型布局的网页分为左、右两部分，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。大部分大型论坛和网页教程都使用这种布局，有一是正文。大部

23、分大型论坛和网页教程都使用这种布局，有一些个人网站和企业网站也喜欢采用这种布局。些个人网站和企业网站也喜欢采用这种布局。2.9.2 网页布局网页布局 （5）上下框架型布局）上下框架型布局 上下框架型布局与左右框架型布局类似，区别仅仅在于上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分。这种布局分为上、下两部分。 （6）综合框架型布局）综合框架型布局 综合框架型布局是左右框架型布局与上下框架型布局的综合框架型布局是左右框架型布局与上下框架型布局的结合，相对较复杂，类似于拐角型布局，只是采用了框架结结合，相对较复杂，类似于拐角型布局，只是采用了框架结构。构。 （7）封面型布

24、局）封面型布局 封面型布局一般出现在一些网站的首页，由一些精美的封面型布局一般出现在一些网站的首页，由一些精美的平面设计结合一些小的动画组成，在页面中放上几个简单的平面设计结合一些小的动画组成，在页面中放上几个简单的链接或者仅仅是一个链接或者仅仅是一个“进入进入”的链接，甚至直接在图片上加的链接，甚至直接在图片上加上链接而没有任何提示。这种布局需要精心设计，能给人带上链接而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉。来赏心悦目的感觉。2.9.2 网页布局网页布局 5网页布局的常用技术网页布局的常用技术 （1）CSS（层叠样式表）布局（层叠样式表）布局 CSS对于初学者来说显得

25、有点复杂，但它的确是一种好对于初学者来说显得有点复杂，但它的确是一种好的布局方法。目前，的布局方法。目前，CSS运用的好坏是判断一个网站优秀与运用的好坏是判断一个网站优秀与否的关键。否的关键。 （2）表格布局）表格布局 表格布局的优势在于它能对不同对象加以处理，而又不表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且表格在定位图片和文本上用担心不同对象之间的影响，而且表格在定位图片和文本上比用比用CSS更加方便。表格布局惟一的缺点是，当设计者使用更加方便。表格布局惟一的缺点是，当设计者使用了过多的表格时，会影响页面的下载速度。了过多的表格时，会影响页面的下载速度。

26、（3）框架布局）框架布局 由于框架技术的兼容性问题，框架结构的页面不太受欢由于框架技术的兼容性问题，框架结构的页面不太受欢迎。但从布局上考虑，框架结构不失为一个好的布局方法。迎。但从布局上考虑，框架结构不失为一个好的布局方法。2.9.3 配色原则配色原则 网站给人的第一印象来自于视觉，因此，确定网站的色网站给人的第一印象来自于视觉，因此，确定网站的色彩相当重要。不同的色彩搭配产生不同的效果，从而使网站彩相当重要。不同的色彩搭配产生不同的效果，从而使网站给人以不同的视觉效果，吸引访问者的注意力。对于网站的给人以不同的视觉效果，吸引访问者的注意力。对于网站的色彩处理原则应该是色彩处理原则应该是“总

27、体协调，局部对比总体协调，局部对比”；也就是说，主；也就是说，主页的整体色彩效果应该是和谐的，而局部应该有一些强烈色页的整体色彩效果应该是和谐的，而局部应该有一些强烈色彩的对比彩的对比。 1色彩的形成色彩的形成 简单地说，色彩是一种视觉，是光作用于眼睛的结果。简单地说，色彩是一种视觉，是光作用于眼睛的结果。红、绿、蓝色的光被称为三原色光。红、绿、蓝色的光被称为三原色光。 2色彩的特征色彩的特征 色彩的基本特征主要有色调、亮度和饱和度三个。色调色彩的基本特征主要有色调、亮度和饱和度三个。色调表现色彩的种类，亮度表现色彩的明亮程度，饱和度表现色表现色彩的种类，亮度表现色彩的明亮程度，饱和度表现色彩

28、的鲜艳程度。彩的鲜艳程度。2.9.3 配色原则配色原则 3色彩的心理感觉色彩的心理感觉 在长期的生活实践中，自然界的各种色彩会在人的心中在长期的生活实践中，自然界的各种色彩会在人的心中留下不同的印象，产生不同的心理感觉，例如：留下不同的印象，产生不同的心理感觉，例如： 红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、红色是一种激奋的色彩，具有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉；热情、活力的感觉； 绿色介于冷暖两类色彩的中间，给人以和睦、宁静、健康、安全的绿色介于冷暖两类色彩的中间，给人以和睦、宁静、健康、安全的感觉，它和金黄、淡白色搭配，可以产生优雅、舒适的气氛；感觉，

29、它和金黄、淡白色搭配，可以产生优雅、舒适的气氛； 橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果；效果； 黄色表现快乐、希望、智慧和轻快的个性，它的透明度最高；黄色表现快乐、希望、智慧和轻快的个性，它的透明度最高； 蓝色是最具凉爽、清新、专业感的色彩，它和白色混合，能体现柔蓝色是最具凉爽、清新、专业感的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛；顺、淡雅、浪漫的气氛； 白色具有洁白、明快、纯真、清洁的感觉；白色具有洁白、明快、纯真、清洁的感觉； 黑色具有深沉、神秘、寂静、悲哀、压抑的感觉；黑色具有深沉、神秘、寂静、

30、悲哀、压抑的感觉； 灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。2.9.3 配色原则配色原则 4色彩的分类色彩的分类 按照色彩对人们心理的影响可以进行以下分类按照色彩对人们心理的影响可以进行以下分类。 暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦、热情热情。 中性系：黄绿、绿等色彩让人觉得舒适、和谐中性系：黄绿、绿等色彩让人觉得舒适、和谐。 冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、高雅雅。 色彩具有联想与象征的特质，例如，红色象

31、征火、血、色彩具有联想与象征的特质，例如，红色象征火、血、太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的太阳，蓝色象征大海、天空和水面等。因此设计出售冷食的虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉虚拟店面，应使用消极而沉静的颜色，使人从心理上感觉凉爽一些。如果要制作一个休闲主题的个人站点，不妨将网站爽一些。如果要制作一个休闲主题的个人站点，不妨将网站色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效色彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效果会更好果会更好。2.9.3 配色原则配色原则 5色彩的选择和搭配色彩的选择和搭配 在制作网站的时候，色彩的选择和搭配非常重要。一个在制作网站的时候，色彩的选择和搭配非常重要。一个网站格调的确定，往往取决于色彩的选择与搭配是否适当。网站格调的确定，往往取决于色彩的选择与搭配是否适当。在一般情况下，可