Web设计中的黄金分割[译]
作者:被遗忘 发布时间:2009-02-20 13:41:00
数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候,我确信如此。数学如此刻板乏味。你可能会惊讶的发现,最美观的设计,艺术作品,物体,甚至人都有数学上的共同点。尤其是黄金分割,也被称为神之比例,希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局,以及如何对其黄金分割
网页骨架
这些是web页面的主要元素。有很多不同的方法去组织它们,但是这种布局也许是最常用的。
Container
所有的web页面都用一个container,主要是为了同一个目的:去包含一些页面元素,然而这个方法实现各有不同。例如,body标签或者是最常用的div。甚至于过去常用的table(不要使用table作为你的container,这是一个破方法)。想想container作为你房子的外墙,里面包含卧室,厨房,起居室等等。
container的类型:
Liquid: 根据浏览器宽度填充。
Fixed: 指定的宽度,并不会根据浏览器宽度改变。
Header
header并不真的是一个特定的元素,尽管某些人会认为它是。它更多是用在涉及到你放置你的logo,导航栏,tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container,所以它有两种类型选择,就是上文提到的 liquid 或 fixed 。
Logo
你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是,从左往右,从上至下,所以你的log应该放在访问者第一眼能看到的地方。
Navigation
页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。 它应该是容易被找到且易用的,这就是为什么大多数的人把它放在header部分,最少也是在页面顶端附近的原因。
navigation类型:
Horizontal: 水平显示,被称为‘navigation’
Vertical: 垂直显示,被称为‘menu’
猜你喜欢
- 本文介绍了网页运行代码框(runCode), 复制代码框(copyCode), 保存代码框(saveCode),的实现方法。javascri
- ACCESS有个BUG,那就是在使用 like 搜索时如果遇到日文就会出现“内存溢出”的问题,提示“80040e14/内
- 我们在使用ASP 内置的ADO组件进行数据库编程时,通常是在脚本的开头打开一个连接,并在脚本的最后关闭它,但是就较大脚本而言,在多
- 一套javascript摇奖程序,随机6+1选号码,类似游戏彩票摇奖效果,实时滚动。截图:<style>.inp{ width:
- 代码如下:ALTER proc [dbo].[sp_common_paypal_AddInfo] ( @paypalsql va
- 由于连续的字符(字母、符号、数字)在默认情况下是不换行的,可能会破坏整个界面布局。那如何解决这个问题呢?在 IE 和 Safari 1.3+
- <% pagenum=55'指定打印行数 %> <HTML> <HEAD> <
- <% Dim aData aData = Array(3,2,4,1,6
- 可能接触网站与编程设计的人都知道,一个属性值需要引号包括起来,但是有的时候就是因为没有正确设定引号类型,导致程序出错,就连我自己也是这样,我
- 我们提倡尽可能使用CSS,而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候
- msxml3.dll 错误 '80004005'未指定的错误/Project/lijiang_071017/include/
- 关于asp随机数的相关文章:asp生成一个不重复的随机数字 8个asp生成随机字符的函数 <html> <me
- 最近论坛里总有人问幻灯片怎么从数据库里取数据,花了几分钟简单的写了下。用到的人可以自己在细化<%dim rs,sqlset&
- ExpiresAbsolute 属性指定缓存于浏览器中的页的到期日期和时间语法Response.ExpiresAbsolute [
- 之前在《首都机场的点烟器》中分析了一个软件系统所处的状态并且列举了不同的状态所需要的展示给用户的各类信息,我们先简单回顾一下:要设计一个软件
- 【名称】Abs【类别】数学函数【原形】Abs(number)【参数】必选的。Number参数是一个任何有效的数值型表达式【返回值】同numb
- 面对不断成长的用户,跟随用户的脚步齐步向前,做引起共鸣的改变,去除低龄化的设计,用成熟稳重的心态面对用户。QQBanner自2006 年推出
- 如何制作关联的下拉菜单?看看代码:<form name=f1 METHOD="POST">
- adodb.stream对象的方法/属性cancel 方法使用方法如下object.cancel说明:取消执行挂起的异步 execute 或
- 格式为: SCRENC [/s] [/f] [/xl] [/l defLanguage ] [/e de