Html:网页设计技巧系列之文本排版

2016-02-19 21:33 12 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的Html:网页设计技巧系列之文本排版,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

  太长时间没写文章了,主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助,同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。

  我们在做网页的时候会发现:自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来都觉得很漂亮,但是看看就觉得不舒服,也不清楚为什么……

  这里我告诉你,也许就是你的排版出现问题了。页面排版不合理产生的视觉效果会让读者的眼睛产生的疲劳感,基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。大家可以从下面的图示和讲解内容中看出差别,同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥,我所提供的都是一般性的提议,不同网站不同对待,不要过于拘泥我所给大家的一些参数。

  下面我们用图例来说明。大家仔细看下面第一张图,前三个图是行距的问题,后两个是字数的问题。

  行距的问题

  第一个太挤了,都粘在一起了,这样眼睛在看这个文本的时候会需要花点时间去分辨,这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了,如果是那就改一下吧!

  第二个是比较适中的,由于每行分得很清楚,这样看起来有很强的识别性。

  第三个是比较宽的,松了一点,这样看起来也很清楚,但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节,一般排版不会越过两个字体高度(2em)。

  字数的问题

  下面两个图是字数的问题。第四个每行文字太长,这样看起来头要摇来摇去,这样读者更容易显得很累。因为要不断的转动头,或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完,不然从行末到下一行行首也会形成断裂感。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  而下面的又太扁了,这样看起来也不是很舒服。由于在不断的换行阅读,眼球也会觉得不舒服。推荐的最好字数是: 不大于45个字母,不大于30个汉字。

  下面我们再看一幅图,聊聊段落的距离问题。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  段落的距离

  下面这幅图是关于段距的。

  上面一个是比较合适的,这样的把段落分开了,让读者觉得文章并不是很多很难读。

  如果不把段落当一回事,任其自然那么就会如下面一样,两段成为一段。

  大家可以看出哪种更好,如果是几十段合在一起,那么这个文章就很少有人能读下去了!

  现在经典论坛中的行距已经重新设定过了,现在发布长篇的文章就不会觉得糊在一起了,并且在链接上加了下划钱,对于色盲或色弱的朋友也容易识别,更为人性化了!

来源:http://www.tulaoshi.com/n/20160219/1626508.html

延伸阅读
上一节: 用途相似的标签 web标准知识链接与文本标签们 这篇主讲的内容涉及链接、标题、插入、删除、上下标、分割线、换行等标签。 我们都知道网页的最大特性是链接,是的这个在我们现在看起来习以为常的东西,让我们的生活发生了巨大的变化,是这个小小的标签成就了这个世界上无数的互联网天才。那么让我们看看这个标签的真面目: ...
标签: Web开发
当网页中插入音乐时,要根据不同的后缀名,来写不同的代码!下面面就是多种格式文件的详细使用代码。 注:   "音乐文件和地址"——待播放文件的文件名,前面带上绝对路径,或者本站的相对路径。 width_num——指定一个作为宽度的数字; height_num——指定一个作为高度的数字; 1.mid embed src="音乐文件和地址" type="au...
标签: Web开发
1.怎样定义网页语言(字符集)?       在制作网页过程中,你首先要定义网页语言,以便访问者浏览器自动设置语言,而我们用所见即所得的HTML工具时,都没有注意到这个问题,因为它是默认设置。要设置的语言可以在HTML代码状态下找到: meta http-equiv="Content Type" content="text/html; charset=gb2312" ...
标签: Web开发
怎样设计网页? 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了…… 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设...
标签: Web开发
网页的版式设计---网页的排版与布局 很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver、flash、firework、photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快。 今天的很多认为是较难实现的功能也许经过软...

经验教程

69

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部