网页设计中黄金分割线布局

《网页设计中黄金分割线布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、郑州网站建设公司,郑州网站建设数学是优美的，听上去有点奇怪?当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是黄金分割，也被称为神之比例，希腊字母表示其为Φ(phi)。本教程会剖析一个网站的布局，以及如何对其黄金分割。　　网页骨架图1　　这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。　　Container　　所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各

2、有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。container的类型:Liquid:根据浏览器宽度填充。Fixed:指定的宽度，并不会根据浏览器宽度改变。本文归郑州网站建设http://www.wangzhanjs.com/，版权所有，转摘请注明出处.郑州网站建设新浪博客：http://blog.sina.com.cn/wangzhanjs1郑州网站建设公司,郑州网站建

3、设图2　　Header　　header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的liquid或fixed。图3　　Logo你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。　　Naviga

4、tion页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。navigation类型:Horizontal:水平显示，被称为'navigation'Vertical:垂直显示，被称为'menu'本文归郑州网站建设http://www.wangzhanjs.com/，版权所有，转摘请注明出处.郑州网站建设新浪博客：http://blog.sina.com.cn/wangzhanjs1郑州网站建设公司,郑州网站建设图4Mai

5、nContent　　每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。Sidebarsidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS,Twitter,Email,等),联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。本文归郑州网站建设http://www.wangzhanjs

6、.com/，版权所有，转摘请注明出处.郑州网站建设新浪博客：http://blog.sina.com.cn/wangzhanjs1郑州网站建设公司,郑州网站建设图5　　Footerweb页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和header一样，footer也不是一个特殊的元素。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如homepage,contactpage,等.有些网站用这个区域提供一些相关材料或者其他重要信息。　　"Whitespace"　　你可能有强

7、烈的愿望去填充这些页面上的空白，但是请不要这么做。"空白"也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。以上是web页面的骨架，现在我们来看如何黄金分割这些元素。　　黄金分割和使用网格（Grids）　　还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？1.62(实际是1.618…)我不会说这个数字的起源，但是我会告诉你如何使用它。本文

8、归郑州网站建设http://www.wangzhanjs.com/，版权所有，转摘请注明出处.郑州网站建设新浪博客：http://blog.sina.com.cn/wangzhanjs1郑州网站建设公司,郑州网站建设图6