网页排版几个基本元素

有如下几个基本元素：

字体、字号

现在随着显示器愈来愈大，分辨率愈来愈高，常常会以为看12px的文字有点吃力，作为设计师也会不自觉的开始大量使用14px的字体，并且 愈来愈多的网站开始使用1五、16px甚至18px以上的字号作正文文字。大字号的使用，对英文字体来说，衬线体的高辨识度和流畅阅读的优点就体现出来 了。中文宋体在显示14号以上字体时，单线条大字老是看上去有些单薄不那么协调，特别是这款点阵字在ClearType（http://baike.baidu.com/view/755822.htm） 强制平滑显示状态下尤为显得模糊不清。微软雅黑就是微软在这个字体显示问题上的解决方案。

让咱们分别对比下中英文的衬线体与非衬线体在不一样字号时的显示效果。

英文以Times和Verdanad为例，中文以宋体和微软雅黑为例。

行长

咱们随手拿起一本书或者一份报纸，数一数每行的文字，通常状况下都不会超过40个汉字。这是由于若是每行文字过长，读者会不停的转动脖子，感到疲惫 的同时也会下降阅读效率；目光从行尾移至下一行首，也很容易串行，影响读者浏览文章的节奏。这点一样适用于网页上的文章阅读。因为显示器是横向的，咱们更 要注意划分阅读区域。

文本宽度控制在450-700px为宜，此范围内参照字号大小；
英文每行80-100个字母（空格算一个字母）为宜；
中文每行30-40个汉字为宜。

间距

经过设置间距，咱们就能够控制文字的密度。若是每行间距过小，与文字过长同样，读者浏览文章时也容易串行；若是行距过宽，阅读时就会感受文章不够连贯。

间距没有固定的值，一般是根据字体大小来定义的。在word里咱们常看到双倍行距、单倍行距和1.5倍行距的选项。网页上行距的单位经常使用 em来表示，无论是中文网站仍是英文网站，你们多喜欢用1.5em－1.8em的行距。以1.6em的行距为例，字号16px的字，行距就是 25.6px。

如（图）所示，1.5-1.8em的行距的确是很是适于阅读的文字密度。

关于段距，咱们要考虑一下具体实际状况。好比文章篇幅较短，就不须要很宽的段距；二文章篇幅很长，特别是那些偏学术的比较枯燥的文章，就要多利用段距把握文章的节奏，给阅读者喘息和思考的机会，且使文章更有层次和可读性。

背景

白色是全频光，全放射光对人眼睛的最有刺激，因此不少印刷品读物的纸张都选用乳白色或者淡黄色的纸张。因为显示器自己就发光，因此同是纯白色背景的 文字，在电脑上比在纸上阅读会使眼睛更容易疲乏，另有研究代表：在电脑上阅读只有在纸上阅读速度的78%，阅读效率大大减低。所以，为了提升页面浏览的舒 适度和效率，愈来愈多的页面采用浅灰色和淡黄色作为页面背景。

另外，印刷品以文字为主的出版物每每会采用低光泽度的纸张，也是由于光泽度高的纸张反射度高，致使阅读质量降低，容易令人视觉疲劳

技巧

另外下面我还复制了一篇关于排版技巧的文章，但愿能做为资料方便你们学习。

网页的排版问题经常被忽视。这挺遗憾的，若是你能改进你的网页排版，那么设计和可读性也就随之改进。在这篇文章中，介绍了10个很是有用的排版技巧，可使你的网站看起来更好。 

1. 设置正确的行高 

最多见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，因此它必需要根据字体大小进行设置。 

通常来讲，当我设置文本行的高度时我老是再给字体大小增长7个像素的行间距（字体大小为12至15个像素）。

Css代码 

1. BODY {  

2.     字体大小：14px;  

3.     行高：21px; / * 14px + 7px * /  

4. }  

2. 设置正确的标题间空白 

另外一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为何一个标题的上边缘空白应该比下边缘的空白宽。 

3. 不要使用太多不一样的字体 

为了保证网页的可读性和专业性，你不该该使用超过3种不一样的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。 

另外一方面，使用更少的字体，使你的页面看起来整洁和易读。你可让标题使用一种字体，正文使用一种字体，标语和副标题使用另外一种字体。 

4. 使用等宽字体来显示代码段 

若是你是一个开发人员，你可能想把一些代码片断放在你的博客上。若是是这样，请使用等宽字体显示你的代码片断。那么，什么是等宽字体？这个字体的字母和每一个字符占有相同数量的水平空间。 

那么，在一个网站上应该用什么字体显示代码片断呢？Courier字体是目前最流行的，可是为何不尝试使用目前最新的字体，如Consolas 或者 Monaco？若是你想选择更多的字体，你必定要看看这里。 

5. 注意对比度 

若是你的网站排版很好，那么另一点要考虑的就是对比度。若是你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），不然你的内容可能难以辨认，尤为是老年人或者视力很差的人。 

通常来讲，若是你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体造成鲜明的对比，加强你的网站的可读性。 

6. 保证有划线的文本能够连接 

浏览器的默认连接格式是一个带下划线的蓝色字体文本。尽管蓝色经常会改变为其余颜色，下划线一直是公认的连接格式。这就是为何有下划线的文本一般被认为是能够连接的，而不是其余的意思。不然，这将会给你的读者带来很大的困扰。 

7. 建立一个样式库 

让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户建立特定的风格。例如，建立.warning CSS类向读者显示警告信息。 

8. 标题和文本有层次感 

为了提升网页的可读性，给标题、简介、段落和正文建立出层次感是很是重要的，这样你的文章很是形象的呈现给读者，他们会迅速找到感兴趣的部分。 

9. 不要担心页面有空白部分 

我所知道的最好的排版建议之一是：“不要惧怕页面有空白部分”。它可使你的页面看上去整洁和专业。不少人都喜欢苹果的网站风格，缘由是：网页虽然复杂精细，但页面简单并有大量的空白区域。 

10. 使用正确的符号 

若是你正在寻找方法改善你的排版，很重要的一点是使用正确的符号。例如，可使用双引号（“”）来代替角秒符号（""）。或者你也能够试试HTML字符编码 &s;ldquo; „ 。 

原文参考自：http://caibaojian.com/521.html和http://www.iteye.com/news/25623

（本文算是结束我过年的吃喝玩乐，开始投向我所热爱的网络时代来咯！但愿你们在新的一年里学习进步。）