企业建站从零开始（一）-规划与栅格系统

        一点牢骚：经常会碰到新手问：网站怎么做啊？对这样的问题，我只能无语。好吧，做一套教程，你就看着一步步做吧。本文只对新手有帮助，高手嘛就不用看了，也不用说风凉话。因为我也是从菜鸟走过来的，更是被“高手”鄙视过N次。写这个，纯粹给刚入行学习的朋友们一点帮助。欢迎转载，但是请注明出处。写这个，也是很花时间滴。。。BY 寒影

        我们要做一个企业站，简单的来说要分几个步骤 规划网站结构-设计平面图稿-切图-生成HTML – 嵌套程序。我主要讲的是从设计图稿到生成HTML这部分内容。

        首先 我们需要有一个LOGO，没有怎么办？不会做？OK 试试这个软件 AAALOGO。非常强大，几千个模板，任意组合。不会做LOGO的人也能拼凑一个出来了。不过这个软件不支持中文。所以，如果需要做中文LOGO的 可以再AAALOGO里做好以后放到PS里增加文字。

        然后，我们要准备好我们制作网站所要用到的武器： Photoshop，Dreamweaver，EditPlus 3 ，如果在本地调试动态网站，需要装一个IIS。PS不会用？不会的同学去学下基础操作再来看！

        在做网站之前 我们需要一个拓扑图。也就是网站结构图。我们要先明确我们做网站的需求。然后确定网站的内容结构，一般的小型企业网站都包括以下主要内容：

1. 企业简介：介绍企业的发展历程、企业的概况、组织结构、员工队伍等企业的基本信息。多采用图文并茂的网页来表现。现在很多企业也将网站的这个部分做成中英文两种版本，方便企业与国外的联系。
2. 产品展示：详细介绍企业产品。向客户提供最新的企业产品介绍，一般都有详细的产品展示图，有些实力网站还利用多媒体技术，使客户更直观地了解产品的全貌。
3. 企业的最新动态：介绍企业的一些最新决策、促销活动等。
4. 售后服务：将企业的详细的售后服务方案公布在网上，提供客户意见反馈表单，便于更好的为客户提供优质服务。
5. 企业的联系方式：将企业的网站地址、E-mail、电话、传真多种联系方式公布在网上，方便新老客户的联系。

       归纳一下。公司简介、新闻信息、产品信息、客户服务、联系我们。
        有5个栏目够用啦！~~当然 这只是简单的结构。比如说还有公司荣誉啊 员工风采。等等很多二级栏目 都可以放到公司简介里去。（这个只是一个具备基础功能的网站，还可以增加在线客服，在线订单等功能，暂时先不讨论）

        在做首页之前，首先要确定制作页面的大小。很多人在争论到底什么样的尺寸才是最完美的。个人认为，适合自己用的就是最好的。我用950宽度这个尺寸。为了基于栅格系统来设计页面。
什么是栅格系统呢？接下来将通过实例，详细的介绍一下网页栅格系统的原理与应用：

        在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：
 

        从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：

       在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……

        当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。

        呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。（以上关于栅格内容引自蓝色理想，我很懒。- -#）

        对于企业站来说。基本上不存在太多内容信息不确定的情况。所以我习惯用以栅格系统来设计页面。

        OK 开始干活. 新建页面尺寸950*600
        做PS的朋友们都知道，做着做着PS里的图层会越来越多。管理相对也越来越麻烦。
        一个小技巧：PS里建几个组，同一部位的层放在一个组里 便于管理。
        Top Header Content Footer Background 5个组。一目了然。
        在正式动手之前，请先考虑好，版面要怎么安排，首页需要放什么内容。各板块的高度设为多少。在白纸上画一张草图是一个好习惯，起码在你刚开始学的时候。（待续）
 

设计路上 版权所有