首页 | 新闻资讯 | 软件应用 | 图形图像 | 网络应用 | 硬件学堂 | 程序开发 | 安全中心 | 素材下载 | 作者专区 | 学院论坛
精选专题 | 精美壁纸 | 专家答疑 | Flash剧场 | Photoshop | 名词解释 | 梦幻桌面 | PS高手进阶 | QQ区 | 图书 | 黑客教材
Flash教程| 卡通制作 | AutoCAD | 3DMax实例 | PS视频教程| 网页制作 | CorelDRAW| Firework | 滤镜与实例 | 全部视频教程
当前位置:eNet硅谷动力 > 学院频道 > 设计技巧

开发技巧:网页设计中的黄金比例
2008-11-06 10:12 作者:TAOBAO UED 来源:网页教学网
【简 介】
也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造,在我看来这些新的概念对网页设计来说是一种尝试和提升,会给你接下来的创意构思提供一个坚实的基础,让人从一个新的视角来看待好的网页设计。
    
加入收藏  设为首页

  在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来web设计还可以这样。比较突出的例子是现在经常被设计师提到的网页栅格设计,TAOBAO UED曾经探讨过这个问题,通过很有逻辑性的公式换算加上一定的数学分析,得到对网页设计有建设性的概念指导,从一定程度上说算是一种创新。

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

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

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

  


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



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

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

css


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

  

  

【责任编辑 彭凡】

关键字: 网页设计  网页布局  css 
您对这篇文章的看法是:    喜欢 反感 支持 反对 加油 鄙视 学习 打击 佩服 漂亮 路过 发表评论
视频教程】 【专题汇总】 【不懂就问我关闭窗口

360安全卫士 V5.1.1正式版发布!
Photoshop给模特美腿加上质感肤色
了解差距 国外27款创意名片设计赏
认清五种被忽视的黑客攻击方式
QQ音乐播放器2009正式版今天发布!
 本栏目最新文章
·网站对字体大小的选取也是有学问的
·技巧:教你制作友好的错误页面
·返回404错误页面的合理设置方式
·UCenter Home好友上限与150法则
·SNS网站个性展示:图片幻灯片切换
 精彩回放
·3DSMAX打造书本翻开效果
·共享上网技巧应用四则
·陪酒女浸泡在酒里的青春
·美女的性感靓丽婚纱设计
·妖冶身姿 死或生3壁纸
·剿灭Win XP下的29个烦恼
·黑客必备 NET命令大全
·用PS制作精致绝伦的红酒
 精彩推荐
 今日软件下载
杀毒软件免费随便用
瑞星全功能安全软件2009 基于“云安全”策略和“智能主动防御”技术开发.
www.rising.com.cn
 往日推荐
·推荐“美图秀秀”就能赚Q币
·五大搜索引擎横向评测
·防御计算机病毒十大步骤

论坛精华
·史上最强最多 photo 
·photoshop完美扣图教 
·网络学院flash教程目 
·Photoshop下载大全 
·PhotoShop实例精选电 
·打包笔刷 附图的~~ 
热点推荐
绘制逼真金蛋
浪漫婚纱照片
Flash视频编程
Ulead GIF教程
热点关注
·Flash CS4 制作经典小游戏
·C语言程序设计视频教程
·PHP+MYSQL开发视频教程
·Flash CS4从入门到精通教程
·服装设计与效果图绘制教程
·21视频之Fireworks8网页制作
·Vray高级实例应用视频教程
·CorelDRAW14入门到高级教程
·Vray高级实例应用视频教程
全国计算机等级考试二级(VB语言)
往日推荐
网站重构设计
鹏哥C#教程
服装设计教程
PS唯美风景
焦点关注