CSS 设计中的黄金分割率应用

首页> 缘震优势

缘震优势

2015-11-13 00:00:00

希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。

在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置

line-height = font-size * 1.62

paragraph margin = paragraph line-height * 1.62 / 2

header’s margin-top = headers line-height * 1.62

不过对中文而言，至少 font-size 和 line-height 之间使用黄金分割率是不适合的，假如中文字体使用 12px 的话，最佳行高是 22px，如果字体使用 14px 的话，行高应该使用 24px 。

另一个例子，在表单中，输入框的宽度应该是标签文字的宽度乘以 1.62。而对于显示在 Web 上矩形来说，它的宽度应该是高度乘以 1.62。

这样一来，Web 设计师同时需要很好的计算能力，至少要在旁边放一台计算器，为了节省时间，作者建议在设计中随时记住一个 62/38 原则，在任何需要分割的地方，都使用 62% 和 38% 作比例。

对于需要分割成三份的场合，可以先按 62%，38%原则分成两份，再将那份大的按 62% 和 38% 的比例分割。（来源：cssglobe.com翻译：OMSHARP CMS）

网站建设一般怎样去设计网站导航

上海缘震认为:网站拥有一个清晰的网站导航，是每一个网站的站长和网站用户所希望看到的，这是网站设计非常重要的一个部分。清晰合理的网站导航会有效的降低网站用户访问的跳出率，有助于提升网站网络营销的实际效果。那么，对于企业的网络营销来说，怎样去设计一个合理的网站导航呢？

网站导航要提前规划分类

在上海网站制作的过程中，不乏会有客户在我们询问其网站导航的设计分类时，不知从何说起。这就是在做网站之前并没有规划自己网站的框架结构和分类，这不但会影响网站建设的策划时间，也会影响网站的导航栏目设计。

网站导航分类使用纯文字设计

目前，互联网中大多数的网站都是采用纯文字导航栏的，因为使用文字导航有助于搜索引擎的爬行和收录，对网站优化来说是十分有帮助的。不过，也有很多网站更注重网站的欧美风格和特殊效果，会把网站导航设计成图片或者一些JS等特殊效果来实现。作为上海网站优化公司来说:首先，使用图片虽然也能被搜索引擎爬行和抓取，但会影响网站点击加载速度。其次，使用JS、Flash等特殊效果是对搜索引擎不友好的一种表现。最后，想实现导航栏、框架具备一定的效果性，目前使用最多的就是DIV+CSS。

网站导航分类主次分明，合理布局

这里为什么要要求网站导航的主次分明呢，因为导航顾名思义就是用来引导用户的，不能把导航做的乱七八糟，要从主到次一步步引导用户。举个例子来说，假如有一个培训机构的网站，那么用户在访问这个网站时肯定是要先了解这所培训机构，其次就要了解这所机构的品牌文化、师资力量、培训案例等等。

网站导航使用面包屑导航

何为面包屑导航呢?其实就是我们在浏览一个网站时，所看到的您当前所处的位置是.....,也就是从主导航点击到次导航页面。所以，对于一些大型的分类信息网站以及信息栏目较多的企业网站来说，面包屑导航是不可缺少的，这不但有助于提升网站的用户体验，也有利于搜索引擎的爬行和抓取。

网站导航上面不要关键词堆砌

对于目前的网站优化而言，切记不要以为优化而做优化，要特别注意网站的用户体验和网站结构。不要为了增加网站的关键词密度而在网站导航上增加一些关键词的链接导航，这种增加关键词密度的方式是搜索引擎不赞成的。建议可以在网站的导航栏目上增加一个核心关键词，这样也能在一定程度上传递网站的权重，提升关键词排名。