Web布局的准备工作
4/12/2013 2:08:22 AM
——此文章摘自《精通Web标准建站:标记语言、网站分析、设计理念、SEO与BI(附光盘) 》定价：￥55.00 特价：￥41.25 购买>>
10.2 布局的准备工作
准备工作是网页布局的第一步。网页设计者需要确定4个方面内容，即：确定网站类型、合理规划网站目录、选择网站链接结构、确立网站CI要素。只有明确了以上内容，才能设计出符合网站要求的网页布局结构。
10.2.1 依照网站类型设计
网页布局设计的准备工作中，第一步并不是急匆匆地着手具体的设计工作，而是要了解所要设计网站的类型。一个网站的类型，决定了其受众群的诉求和欣赏品味。要使这个网站的网页布局设计能够得到受众群的认同和信任，就要符合他们的诉求和欣赏品味。如果匆匆进行设计，不考虑以上因素，那么设计出的网页布局不会是受人喜爱的布局，而是失败的布局。
网站的类型按照网站的内容分类，可分为：企业事业单位网站、电子商务网站、娱乐网站、知识库网站、新闻网站、搜索引擎网站、资源下载网站、个人网站等，还有一部分是大型的综合类门户网站。不同类型的网站，其布局设计也是不同的，如图10.2和10.3所示。食品类企业的网站与知识库网站在布局风格上是有区别的。
图10.2 某食品网站界面
从上面两种布局可以得出：食品类企业的网站在布局上活泼、生动，摆脱了传统的布局样式、而知识类网站在布局上给人以严谨、可信的感觉，以规矩的块状结构为主。总结一下，那就是内容影响着结构，结构服务于内容，不能抛弃任何一方去想问题。
应当注意的一点是，布局设计虽然是艺术设计的一个分支，但是不要过于强调艺术性，毕竟实用性是布局设计的最终属性。单纯地为艺术而艺术，为设计而设计是一种脱离实际的做法。
10.2.2 建立网站目录
在建站之初，会有很多的素材和内容，而这些内容往往是杂乱无章的，这就需要建立一个网站目录，设置专门的栏目，将素材和内容分门别类，并且在各个栏目中按重要性分类，重要的栏目，要置于首页，其他的相对不是很重要的内容则置于二级链接之中。以新华网为例，如图 10.4所示。
图10.3 某知识类网站界面
图10.4 新华网网站界面
新华网的主栏目设置是：时政专区、地方联播、港澳台地区等栏目。在版块内又列出了相应的二级栏目，使浏览者一目了然。将栏目进行合理的规划，能够使浏览者快速地了解网站的内容结构，快速查阅到所需信息。
10.2.3 设置网站链接结构
网页的布局设计与平面设计很类似，但也有不同之处。网页设计中不但要考虑美观，还要考虑到操作性，毕竟网页设计中很大的一部分内容是实用性。设计出的网页不但赏心悦目，还要操作简便。网站中最基本也是最简单的操作方式是单击链接，所以要实现网页的操作性，就要从链接入手。这就引出了一个非常重要的内容——网站链接结构。网站的链接结构就是该网站的网页与网页之间的链接互动关系。
链接结构的大分类为线性结构和非线性结构。线性结构是最为简单的一种链接结构。使用线性结构的网站，网页与网页间是逐层递进的关系，所有的网页均向一个方向链接。由于这种结构非常简单，所以是个人主页和内容相对较少的小型网站的最爱，如图10.5所示。
图10.5 网页线性结构图
非线性结构还可以分出3种主要的链接结构，分别为树状链接结构、星状链接结构、复合型链接结构。
树状链接结构：树状链接结构的第一层为首页，由首页分别引出几个二级页面，以此类推，每个页面都会引出更多的页面，页面的数量随之不断增多，这种结构也可以看作是一种金字塔结构，如图10.6所示。
图10.6 网页树状链接结构图
星状链接结构：星状结构与树状结构的不同之处在于，星状结构不像树状结构那样等级森严。星状结构非常自由，任意一个页面都可以链接到其他页面，如图 10.7所示。星状结构是操作最为便捷的一种链接结构。浏览者可以在一个页面中进入到其他任意一个界面中，但是星状结构的缺陷是必须使用大量的页面面积来设置转向其他页面的链接，这样损失了很多有效的浏览面积。另外，太多的链接也会让浏览者眼花缭乱，难以选择。
图10.7 网页星状链接结构图
复合型链接结构：复合型结构综合了星状结构和树状结构的优势，对其不足进行了互补。复合结构的基本模式是，在首页和第一、二级页面的链接中采用树状结构，在之后的各级页面中采用星状结构，如图10.8所示。
图10.8 网页树状、星状复合型链接结构图
10.2.4 在网站中使用CI要素
网站是对公众的一个窗口和展示平台。对于网站所有者而言，这种宣传效应比传统媒体要大得多，所以网站的设计也要融入到整个企业或者组织的形象设计中。在上文中，曾经提及过网站的LOGO要服从网站所有者的CIS系统，那么网站的CIS也要与所有者的一致，其中包括：标准色彩、标准字体和广告宣传语、标志性图片等。百事网站集合了企业所有的CI要素，如图10.9所示。
图10.9 百事集团的网站首页