网页布局教程

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

1、网页设计技巧系列之文本排版http://www.webjx.com 更新日期：2006-11-2913:10 出处：蓝色理想 作者：太长时间没写文章了，主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助，同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。我们在做网页的时候会发现：自己画的图也不错，自己做的布局也很精致，做的图标也很漂亮，第一眼看起来都觉得很漂亮，但是看看就觉得不舒服，也不清楚为什么……这里我告诉你，也许就是你的排版出现问题了。页面排版不合理产生的视觉效果会让读者的眼睛产生的疲劳感，基本

2、的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。大家可以从下面的图示和讲解内容中看出差别，同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥，我所提供的都是一般性的提议，不同网站不同对待，不要过于拘泥我所给大家的一些参数。下面我们用图例来说明。大家仔细看下面第一张图，前三个图是行距的问题，后两个是字数的问题。行距的问题第一个太挤了，都粘在一起了，这样眼睛在看这个文本的时候会需要花点时间去分辨，这样的排版会让读者看得很累。很不舒服。大家看一下

3、自己手头上所做文本的是不是太挤了，如果是那就改一下吧!第二个是比较适中的，由于每行分得很清楚，这样看起来有很强的识别性。第三个是比较宽的，松了一点，这样看起来也很清楚，但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节，一般排版不会越过两个字体高度(2em)。字数的问题下面两个图是字数的问题。第四个每行文字太长，这样看起来头要摇来摇去，这样读者更容易显得很累。因为要不断的转动头，或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完，不然从行末到下一行行首也会形成断裂感。

4、而下面的又太扁了，这样看起来也不是很舒服。由于在不断的换行阅读，眼球也会觉得不舒服。推荐的最好字数是：不大于45个字母，不大于30个汉字。下面我们再看一幅图，聊聊段落的距离问题。段落的距离下面这幅图是关于段距的。上面一个是比较合适的，这样的把段落分开了，让读者觉得文章并不是很多很难读。如果不把段落当一回事，任其自然那么就会如下面一样，两段成为一段。大家可以看出哪种更好，如果是几十段合在一起，那么这个文章就很少有人能读下去了!现在经典论坛中的行距已经重新设定过了，现在发布长篇的文章就不会觉得糊在一起了，并且在链接上加了下划钱，

5、对于色盲或色弱的朋友也容易识别，更为人性化了!网页布局的位置重心与位置间的对比关系　　网页的布局也许是大家最不放在眼里的地方，其实布局地位如同文字的排版一样，随便可布，布即随便。但是看过我上篇《网页设计技巧系列之文本排版》的朋友也许就会清楚，文字排版是一种不起眼但却非常重要的细节。做好了会让作品更为精细漂亮，做不好也许就成为作品失败的重要原因。　　布局也是一样，需要我们足够的重视。下面我要讲的不是网页布置成“左中右”、“左右”、“上中下”之类的问题，而是位置的重心与位置之间的对比关系。　　黄金分割率的概念大家都知道。下面我引

6、用一段非常专业的解释：“黄金分割最早见于古希腊和古埃及。黄金分割又称黄金率、中外比，即把一根线段分为长短不等的a、b两段，使其中长线段的比(即a+b)等于短线段b对长线段a的比，列式即为a:(a+b)=b:a，其比值为0.6180339……这种比例在造型上比较悦目，因此，0.618又被称为黄金分割率。”大家也看清楚了什么叫黄金分割。　　我们中国也有一种类似于这样的概念叫九宫格。这个也许就有一些朋友不清楚了，这是一种用以临写碑帖的一种界格纸。基本形是一个长方形等分九格。在这个九宫格中中间部分就产生了四个交叉点，这四个交叉点就是

7、视觉中心点。图示：九宫格　　我们为什么要讲这两个概念呢?是因为这两个概念是设计的决窍之所在。我们很多时间喜欢把重要的东西放在正中心，表示重视想吸引目光注意。但是我要告诉大家。正中心属于盲点区。也就是说按人的视觉习惯来讲正中心是常常被忽视的。并且放在正中心也不会引起视觉刺激。用句玩笑话来侃一下:两眼中间是看不清楚的。不信拿你的手指指着鼻尖看你的手。那什么地方是视觉中心点呢，这就要用到上面的概念了。不过什么a:(a+b)=b:a都太麻烦了谁会那么细致的去算呢。这里用中国的九宫格原理就清楚得多了。四个视觉中心点很显然大家也清楚是什

8、么位置了。　　那么在实际应用中我们要怎么用呢。这点很重要，实战意义要比空谈概念重要得多。下面我们就来说一下实战中的应用，这里虽说是“网页设计技巧”，同样可以应用在平面设计与摄影或是其它的设计中，但是必竟是讲网页设计，所以主要还是举网页例。我们先从大布局来谈，然后再讲小布局，最后讲设计图片的