网页布局的位置重心与位置间的对比关系（2）
作者：小毅 来源：蓝色理想 发布时间：2007-10-15 19:20:00
大布局
基本上网页的布局分为，上中下、左中右、左右、上下、与上下左右之混合几类。同时我们还要思考的是分辨率与网页大小的关系。现在大部分的机器都是1024以上的分辨率了，那我们的宽度是不是一定也要顺应变得宽一点呢。个人观点是大可不必。因为网页本身也会与浏览器产生视觉对比。如果塞得太满势必也不是很好看。如果留下空隙网面与留出来的空白也可形成一定的对比，其比例也较接近黄金分割率。所以我觉得还是不要塞满浏览器为好，给网页一个可以呼吸的空间。那网页自身的上下左右布局呢?同样的，如只是上下或是左右结构我们不能把上下或是左右平分，而是最好采用黄金分割比来进行划分。如果是上中下或是左中右呢。我们同样不能平分，我们我们要注意三者之间的关系，比如上中下结构，我们很清楚中间是主要内容需要大一点的空间，那么中空间的部分会尽量的点有大比例，一般来讲我们会让中间占大约百分之六十。而上面占百分之三十，下面占百分之十。那也就是说，下面是上面的三分之一，上面是中间的三分一。这样的分割就会比平面看起来要舒服很多。但是左中右的结构就不能这么分了。因为百分之十的宽度会很难放得下什么内容。一般左中右结构会有另一种分法:左占百分之四十，中右各占百分之三十。或是左右占百份之三十，中间占百分之四十。也可以进行532、622、442、的分配。也就是说大布局上要尽量避免平分的局面。
小布局
也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。而是顶部与中间的中部位置，有些人喜欢排位，并且会把最重要的放在最上面，其实不然啊，放在最上面的未必是最核心的位置。比如我们看一下各大门户网站的头条新闻的位置，是不是没有放在最顶部的?当然由于分辨率的问题目，这些头条可能位置也会有所变化。在800下头条是偏下的，而1024是居中一点，1600就偏上一点。但是从浏览器的大角度来看，这些头条也都是处于视觉中心点的。
图片布局
我们在处理图片的时候也会用到布局，比如我们的文字放在什么地方，标志放在什么地方这些都是布局的范畴。这里也要应用上述的概念，重要的要核心不要放在正中或是过于偏向角落。当然也会遇到重心的东西很大，基本上都占满了画面，下面让大家来看一张招贴画。
大家看上面这张图，画面重点是那个MP4，但是这个对象很大。没关系，把这个MP4的图做得有透视性，左右的重量就不一样了。这样向左去一点，那么重心就向左去了，再加上MP4偏上，这个MP4就正好在视觉中心点上了。而主要的信息文字同样也处在视觉中心的位置上。而一些不重要的文字都放在了角度去冷落他。
好了，关于布局就说这么多，这里总觉得这里还少些东西，细想可能是视觉平衡方面的问题。这里讲得很多了，视觉平衡方面的问题目就再想想过些日子再整理出来。
0
投稿猜你喜欢
- 大大小小也搞过一些数据库设计，见过一些其他人的设计，看过些书，总结总结，经验谈。选表类型：大家都知道mysql的myisam表适合读操作大，
- this指向当前作用域的对象，如果找不到，往上一层找，直到window。this 关键字很好用，很灵活，正因为很灵活，所以一不小心你就会掉进
- 在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;CSS手册上是这样说明的：该属性的值指出了不允许有浮动
- 全文索引在 MySQL 中是一个 FULLTEXT 类型索引。FULLTEXT 索引用于 MyISAM 表，可以在 CREATE TABLE
- 这篇是Nicholas讨论如果防止脚本失控的第二篇，主要讨论了如何重构嵌套循环、递归，以及那些在函数内部同时执行很多子操作的函数。基本的思想
- 一般一个网站的首页访问量是最大的,如果您的网站的首页打开的非常缓慢,您的客户将会陆续离开你的网站.通常我们把需要经过复杂运算或者查询数据库得
- 在我们制作网页的时候会经常碰到一些需求，如果不知道方法，说不定会困扰我们半天。其实实现它们都很简单，下面我们就一起来看看这些常用的网页编辑方
- 虽然ting88没有注册的用户不能下载歌曲,但搞定它也非难事啊:)进入www.ting88.com的网站,把歌手专辑页面的URL复制到文本框
- 1、查询SQL中的所有表： Select TABLE_NAME FROM 数据库名称.INFORMATION_SCHEMA.TABLES W
- 在IE浏览器调试代码，我们可以选择使用 IE WebDeveloper但是我个人用惯了ff浏览器下的firebug，所以在网上搜了一下，如果
- 在业界，普遍认为Oracle数据库的安全性要比SQL Server数据库高。下面笔者就来谈谈这两种数据库在安全性设计上面的异同。掌握好这些内
优点：·减少使用空间·使后面的背景层模糊或者渐隐出现让用户的焦点集中在当前层。什么时候使用（对话框等）模式窗口？·图片/视频灯箱效果·联系表- 听到一些人说现在做产品设计很没有成就感。没有什么创造力，除了抄袭模仿（称之为竞争分析）、千篇一律（又称规范标准）还有复杂的流程、粗制滥造的表
- 计算分页，嘿嘿一次搞定不用判断intNumPage = Abs(Int(-(intNumRecord/intPerPage)))
- 核心提示：VB读取MP3文件帧的信息比特率，采样频率，播放时间Private Sub Command1_Click()On Error Go
- 之前整理发表了《XMLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，
- 一、关于XML解析XML在Java应用程序里变得越来越重要, 广泛应用于数据存储和交换. 比如我们常见的配置文件,都是以XML方式存储的.
- 下面这段代码，你知道有哪些错误吗：var g_bar = "bar";function foo(container, c
- 现像如下:站点无法打开,或者打开很慢.HTML可以打开.重新启动或者回收应用程序池可恢复.但过一段时间又会出现日志里会有:ISAPI
- 美化主要表现在鼠标放到菜单上后（即鼠标悬停）的效果，这里首先介绍几个经常用到的CSS属性：backgr
