尝试了多种方法,可能最省心的方法是直接使用html代码来写博文。使用ms expression web编辑器可以方便的插入自定义的代码片段。其他的编辑器如:fresh html、coffee cup html、page breeze等似乎都不好用。

1. 整篇博文包含在一个div中,high/normal/other分别表示较高技术难度、一般技术和非技术性的文章,这三种文章分别用不同的三种颜色表示:淡蓝/淡绿/淡黄。其中淡蓝色的文章,可能需要有三五年开发经验或相关的技术积累才能看的懂我在说什么。在ms expression web中分别定了下述代码段的名称:rdhigh/rdnormal/rdother。

<div class="ruandao high" style="background-color:#98D2FE;line-height:150%;font-size:12px;">
...
</div>
<div class="ruandao normal" style="background-color:#96FD8A;line-height:150%;font-size:12px;">
...
</div>
<div class="ruandao other" style="background-color:#FFFFAA;line-height:150%;font-size:12px;">
...
</div>

2. 博文中的标题使用h2、h3,遗憾的是用live write的发布会过滤掉,而且51cto中h2/h3的字体设置不合适,因而用下述代码片段,快速插入名称是rdh1/rdh2

<h2 style="font-weight:bold;font-size:16px;"></h2>
<h3 style="font-weight:bold;font-size:14px;"></h3>

3. 博文中的正文段落使用下述p代码片段,快速插入名称是rdp。

<p style="text-indent:2em;font-size:12px;">
...
</p>

4. 在51cto中ol/ul如果不使用行内样式,列表项的序号和标记都没有,因而需要下述两个代码段,快速插入名称是rdol/rdul。li中根据需要可以使用<br>分行。

<ol style="list-style-type:decimal;">
    <li></li>
</ol>
    <ul style="list-style-type:disc;">
<li></li>
</ul>

5. 插入表格的代码段名称是rdtable。

<table border="1" cellpadding="5" style="border-bottom-color:gray;border-collapse:collapse;"
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

6. 在文章中需要强调行内的部分内容时使用下述标记。

<strong>...</strong>
<em>...</em>

7. 下述两个代码段的名称是rdimg/rdleftimg,rdimg代码段用来单独居中显示图片,rdleftimg用来左浮动显示图片,图片的右边可以是几段图片的相关文字。

<div style="text-align:center;"><img src="" alt=""><br>...</div>
<div><img src="Koala.jpg" alt="" style="float:left;margin:1em;"><br><p>
...
</p><div style="clear:both;"></div></div>

8. 程序代码使用下述代码片段,名称是rdcode。当插入代码文本时使用expression web的“粘贴文本”/“一个使用<pre>设置格式的段落”功能。如果选择多个pre方式粘贴文本则生成以空行分离的多个pre标签。

<div style="border:1px solid #808080; color:navy; background-color: #EEEEEE"><pre>
...</pre></div>