排版：如何让你的文章看起来更有条理

 Web
一 252010
 

通常写作的时候都不会很在意自己页面的排版，但是时间一长就会发现，当你自己再回首自己的文章的时候，会觉得抓不住要点，这就是排版的重要性，突出要点、方便阅读、良好的标签使用甚至可以对SEO有所帮助。下面简单说一下文章中用到的一些页面的排版。

我自己的这个小博客最经常使用的就是你看到的底线突出标题和背景颜色的一般应用，
文字底线的具体操作方法如下：

在主题css中加入如下代码：


下载[loc=http://cid-c3e2e750c485309f.skydrive.live.com/self.aspx/.Public/z7z8/underline.rar]所需要的图片[/loc]到主题style目录下的images目录中

使用方法：

[code=html]
使用方法
[/code]

[loc=http://hanamizuki.tw/2008/03/16/text-img-decoration/]WordPress的用户可以看看这个[/loc]

背景颜色的应用：

这个方式灵活性很高，而且需要对css有点简单的了解，通常背景颜色和边框并用，也有单独使用的。

比如我当前的主题中定义了如下css：


当我在文中使用
[QUOTE]测试内容 样例内容[/QUOTE]时，代码会自动显示成下面这个样子：

测试内容
样例内容

当然不局限于blockquote标签，比如你可以在文章中使用副标题h2标签，这当然需要你在主题的css中针对文章中的h2标签做单独的定义之后才会生效，当然也可以随时使用随时写在文章中，前者的缺点是一旦更换主题，还要把对应的css更新过，后者就没有这个麻烦：

比如文章中你可以这样写：

效果就是下面这样的

一、第一点内容

你还可以用边框，border

通常设置边框不会让文字区域的四周都有边框，而是文字区域的一侧有边框(通常是左侧)，这样比较醒目哪些是同一个标题下的内容。

通常这样写

效果就是这样的：

Google做出这个决定，对于IT业内的人来说，有惊讶也有欢喜。

Google做出这个决定，对于IT业内的人来说，有惊讶也有欢喜。

Google做出这个决定，对于IT业内的人来说，有惊讶也有欢喜。

段落首行缩进：

这个对段落比较长，行文流水能长篇的人比较有用，在我这效果不是特别好，因为我通常都是还没换行，就已经换段落了。首行缩进的定义方式，在主题css中针对文章区域的段落p定义css：


通常zblog发布文章的时候，我推荐一般没有代码的文章使用 [windows live writter],而有代码的文章推荐使用后台的UBB编辑，并且在UBB编辑时手写html代码，一方面方便以后使用可视化编辑器编辑，而zblog后台的fck经常生成大量的br换行，让人很不爽，最开始我采取的是修改编辑器，无奈已更新就给覆盖掉设置，所以就放弃了这个方法。

对于一些内容，颜色要突出重点部分，切忌颜色过杂，反而无法突出重点。

文章中的部分内容，借鉴了[loc=http://www.kenengba.com]可能吧[/loc]的排版方式。

 Posted by nobird at 14:45  Tagged with: ,

  20 Responses to “排版：如何让你的文章看起来更有条理”

  1. wulinfo says:
    2010 年 1 月 25 日 at 17:23

    评论有些问题
    我觉得加粗加大字体色彩区分，甚至下线这些足以区分突出重点[GRAVATAR=http://www.birdol.com]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-1-26 12:23:23 回复

    评论有什么问题？我在FF 下没发现。。。

    [GRAVATAR=http://hi1980.com/]d541eaa023b893c3c312ccf9eada14e1[/GRAVATAR]

    wulinfo 于 2010-1-27 11:30:46 回复

    只是很奇怪，我写了半天提交时忽然不见了，后退也磨了

    [GRAVATAR=http://www.birdol.com/]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-3-8 11:24:44 回复

    问题解决了 提交函数上有个小bug.

  2. 左岸读书 says:
    2010 年 1 月 25 日 at 21:02

    一个好的版面更易于阅读。

  3. 万戈 says:
    2010 年 1 月 25 日 at 21:03

    CSS怎么学都学不完，还有很多妙用

  4. MJ says:
    2010 年 1 月 25 日 at 23:41

    这个不学程序的人会弄么？[GRAVATAR=http://www.birdol.com]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-1-26 12:25:08 回复

    呵呵 其实不少做网站的人不怎么懂程序的，这个只是很简单的css应用，稍加留意就行了~

  5. 现实呓种 says:
    2010 年 1 月 26 日 at 06:00

    非鸟童鞋，你这做法也太高级了，根本不考虑你的兄弟——菜鸟的感受……[GRAVATAR=http://www.birdol.com]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-1-26 12:28:18 回复

    额。。。把这些都归罪zblog吧。。。exclaim

  6. 教学时光 says:
    2010 年 1 月 26 日 at 09:09

    你这下划线倒是蛮有个性的~~~~[GRAVATAR=http://www.birdol.com]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-1-26 12:53:43 回复

    我这也是从别人那学来的~

  7. 腾飞 says:
    2010 年 1 月 26 日 at 11:56

    受用，收藏了@

  8. 蛋王 says:
    2010 年 1 月 26 日 at 13:49

    我还是喜欢能不用图片就不用。。。直接用下划线样式。。

  9. 吉光片羽 says:
    2010 年 1 月 27 日 at 00:15

    貌似FCK回车是P吧？
    最近比较中意这个P，无论从语义排版来说，都更惬意。但已经习惯用UBB了。
    发现UBB只能是BR，或者，有修改的方法？[GRAVATAR=http://hi1980.com/]d541eaa023b893c3c312ccf9eada14e1[/GRAVATAR]

    wulinfo 于 2010-1-27 11:29:19 回复

    加Ctrl就是br了

    [GRAVATAR=http://www.birdol.com]acb31bc1883ad280a90d8044f61b3009[/GRAVATAR]

    nobird 于 2010-2-1 16:56:57 回复

    p 段落 我也开始很喜欢这个东东~ o(∩_∩)o…

  10. 17gogo says:
    2010 年 1 月 28 日 at 00:41

    收藏部分，备用

  11. zachary says:
    2010 年 1 月 30 日 at 16:11

    nobird….跟过来顶一下rolleyes

  12. 寻觅寻觅 says:
    2010 年 2 月 1 日 at 00:25

    很不错值得一看！

  13. stone says:
    2010 年 2 月 1 日 at 15:08

    是的，不过我不赞同采用背景来突出，因为会感觉与页面不协调，可以适当的加粗或者放大字体

  14. 红箭 says:
    2010 年 2 月 3 日 at 12:38

    这个不错，我用了，谢谢

  15. 二崬曹 says:
    2010 年 2 月 14 日 at 09:37

    菜鸟的感受就是：这个东东很好，就是根本不知道怎么用exclaim

  16. 豆丁 says:
    2010 年 3 月 5 日 at 13:02

    非常感谢鸟儿，一直在用谢谢了。

  17. 豆丁 says:
    2010 年 3 月 7 日 at 14:06

    每次写文章都要来这里找排版，呵呵。

  18. 豆丁 says:
    2010 年 5 月 24 日 at 00:36

    每次都上来找代码，排版文章。哈哈

  19. 两天 says:
    2010 年 7 月 21 日 at 19:55

    看看一下 效果不错啊

  20. 年五 says:
    2011 年 2 月 19 日 at 10:16

    相当好的说

Sorry, the comment form is closed at this time.

   
© 2011 鸟儿博客 Suffusion theme by Sayontan Sinha