浅谈博客文章排版

|  阅读量 | 分类: 博客运营 | 作者: 卢松松 | 时间:2010年04月19日 09:50

在上篇文章中我提到过,用户总是很快速的浏览和扫描你的文章,这时,你就需要把页面划分成名明确定义的区域。网页的各个部分可以分为导航栏、内容区、图片 区、广告区,各个区域之间可以使用一些视觉处理方法给予区分,相互不能混杂。

 今天卢松松要谈的是关于内容区,也就是博客文章部分,如何使文章的排版更加容易阅读,使用正确的对齐和排版方式很重要。

减少用户思考时间

减少用户眼光水平扫视范围,他们阅读或扫描的速度便会大大加快。你可以把较宽的文字段落以较小的宽度显示。

在以文字为主的博客中,在适当的位置加入图标或分隔线,以及具有醒目字体和颜色的标题等等,这些都可以成为用户区分不同内容的有效标记。它们能够为用户把 视觉焦点从一个地方移动到另一个地方提供线索。

看看下面的文本,你的视线是否感觉不太容易集中?

浅谈博客文章排版 用户体验 博客设计 博客运营 第1张

(图一)

哪怕我们让每一段文字之间多一个回车,稍微加大点行间距,可能要好得多。

浅谈博客文章排版 用户体验 博客设计 博客运营 第2张

(图二)

下面卢松松就介绍一些常用的用CSS做文章排版代码。

文章第一段自动空行

每个段落加两个字空行不言而喻吧,非常方便阅读,有两点很重要,第一:一定要替换成你内容页的CSS标签,否则没效果。第二:在编辑器里按“回车”是换 行,用的是"P"html语法,按“ctrl+回车”用的是“br”html语法。

例如我博客的内容页使用的CSS是post-info标签,如果这样设置(.post-info p{text-indent:2em;}),意思就是,当你在后台编辑文章时按“回车”,则会自动给文章第一段空出两个字。如图二所示。

文章标题加粗样式

第一种:常见的文字加粗,一般也无需设置属性,点击编辑器加粗即可。当然你也可以单独设置strong属性(注:<B>标签用的少了)。例如 我博客的strong标签属性:

.post-info strong{font-family: "微软雅黑", "黑体", "宋体", "Arial Black", "Arial";font-size: 16px;font-weight: 600;},效果参加本文的加粗文字。

第二种:“可能吧”的加粗风格,其实和第一种方法一样,只是加了个背景色(background-color)而已,具体样式可以设置成,如图三所示。

.post-info strong{font-family: "微软雅黑", "黑体", "宋体", "Arial Black", "Arial";font-size: 16px;font-weight: 600;background-color:#99cccc;}

文章引用样式

看到后台编辑器中的“引用”这个小图标了吗?对,就是这个“blockquote”,引用样式也很重要。blockquote标签在文章编辑方面会给博客 文章增色不少。

第一种:博客默认引用样式,一般都不需要修改的,卢松松用的就是默认的。

blockquote {
margin: 0 20px;
padding: 0 10px 0 25px;
border-left: 4px solid #c9ee58;
}
code {
font-family: monospace;
color: #666;
}

第二种:“可能吧”的引用样式,blockquote左侧的灰边

blockquote{border-left:5px solid #DDD; margin:15px 30px 0 10px; padding-left:20px}

<blockquote></blockquote>标签效果是将文 字包围,然后往右边缩进,N组标签可以往右缩进N个单位。

如图所示:

浅谈博客文章排版 用户体验 博客设计 博客运营 第3张

(图三)

以上代码可以直接放到你网站的CSS文件中使用(注意删除原来的)你也可以自己,调节字体和颜色,改到喜欢为止。然后放到自己的CSS中,方法同上。

用户大部分时间都是使用其他网站的

总之,介绍了这么多文章排版的方法,目的就是一个,“减少用户思考”。用户在长期使用互联网的过程中已近积累了很多经验。很多网页对他们来说都是不言而喻 的,因为他们已经很熟悉网站的普遍使用方法。所以在设计网站时一定要保持通用性和实用性。请记住下面的话:用户大部分时间都是使用其他网站的。

相关阅读:

软文投稿与软文写作经验分享

教你打造优秀IT博文

浅谈博客的更新频率

博客内容写作常出现的问题

写博客别偷懒,原创才是王道

博客文章应该多长为好

写好博客内容的几种方式

Admin5访谈:个人博客的运营和营销

顶: 2 踩: 1

来源: QQ/微信:13340454 ,转载请注明出处!

本文地址: