当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页设计中的黄金比例

CSS样式表
CSS网页布局学习之Font-size的妙用
CSS实例教程:网页区块中标题右侧更多
CSS教程(1):学习CSS背景相关知识
CSS教程(4):通过实例学习CSS背景
CSS教程(5):通过实例学习CSS背景
极酷的三层分离的标准滑动门导航菜单
网页版Firebug
CSS实例:CSS实现的等高网页布局
CSS教程:CSS3圆角属性
CSS教程:制作对用户友好的站内搜索表单
IE盒子模型和标准W3C盒子模型
CSS外边距叠加的问题,CSS教程
IE8的一些有趣的新功能
CSS高级技巧:滑动门技术
CSS设计网页边框的几个实例
雅黑字体对IE中的网页布局的影响
CSS技巧:改善代码可读性并简化代码管理
吸引用户点击的按钮设计以及网页按钮实例
CSS实例:超酷的网站导航按钮
CSS实例:创建一个鼠标感应换图片的按钮

CSS样式表 中的 网页设计中的黄金比例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 133 ::
收藏到网摘: n/a

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造,在我看来这些新的概念对网页设计来说是一种尝试和提升,会给你接下来的创意构思提供一个坚实的基础,让人从一个新的视角来看待好的网页设计。

在超越CSS这本书中,就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说,黄金比例并不陌生,它是最符合自然界美感的一个很神奇的东西,在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说,只要记住一个数字就可以了:“1.62”,以950局中的页面为例:

我们要为一个950px宽度局中页面来设计栏目,根据黄金比例原则,可以这样设计:这样的Web布局具有一定的平衡感,整个页面也比较和谐。

 

 

现在的页面布局一般都是比较弹性的设计,因为这样页面可以充满浏览者的屏幕空间,而不管视窗的大小尺寸是多少,这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说,1024*768就是王道,摒弃了两端的使用人群。在超越css这本书中还提到,即使是固定宽度的设计,减掉浏览器的滚动条宽度和浏览者打开了工具栏的宽度之后,水平宽度就显得不够用了:

许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计,往往会出现挑选的宽度没有考虑到说要表现的内容,在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候,并没有完全依靠视觉效果图来实现,有时就大致量了一下然后根据以往经验来定制宽度,而这种宽度往往不能很好的适应他们的内容,所以,这时候,黄金比例的使用就很重要了。

黄金比例不仅在大的布局上可以使用,在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素,比如一块图片信息展示区域:

书中还提到可以根据内容反向推导出大的区域宽度,例如网页的首页上需要放一个宽度为500banner图片,那么我们可以用黄金比例算出整个网页可以选择的合适宽度:500*1.62=810px,并不一定要是950或者800这些被很多人推崇的页面宽度。

黄金比例还有哪些用处,大家一起来探讨~~