微信高级排版编辑教程汇总
----原创教程 @刘健亮 出品-----
微信平台经常需要发布些图文消息，如何利用微信简单的编辑系统进行推送内容的排版，是很多微信君必须面对的问题。
01期 微信排版进阶教程
（一）如何排版文档段落
① 你会首行缩进吗？
在中文段落中我们习惯在段首添加2个字符的缩进，离开WORD该如何设置呢？最笨的办法就是在输入法全角状态下敲打２个空格啦。
② 你会使用段落对齐吗？
微信内容编辑器提供"左对齐""右对齐"""居中对齐"以及“两端对齐”共4种方式。对齐功能大家平常可能想不起来使用，如果会使用的话能实现非常棒的排版效果。（下方是香港中文大学微情书大赛一等奖作品《百字令》菱形排版示范）
见
惊艳
目流连
再难思迁
踌躇欲向前
只恐天上人间
悲欢喜怒一线牵
循环往复恨此心坚
花开花落转眼已三年
天人合一处垂首对漪涟
思或淡情未移口三缄
燕去燕归沧海桑田
倘注定有分无缘
亦感蒙赐初面
纵此生不见
平安惟愿
若得闲
仍念
歉
③ 你会使用段落列表标记吗？
微信内容编辑器提供有序列表和无序列表两种方式。有序列表包括阿拉伯数字、英文字母大小写、罗马数字大小写共5种样式。无序列表包括小圆圈、小圆点、小方块几种方式。
如果你觉得系统提供的列表标记太单调，我们就要自己设计些列表标记。比如有序列表可以使用搜狗输入法里的特殊符号①②③，无序列表同样可以使用搜狗输入法里的一些特殊符号⊙▷☆。
举个栗子：
@秋叶语录６月份上市的新书有：
⊙《不要等到毕业以后》
⊙《和秋叶一起学PPT》
⊙《微信控控微信》
（二）如何排版图片
图片的对齐方式左对齐、右对齐、水平居中大家都不陌生，根据需要可以灵活设计图文排版样式。
书名：微信控控微信
作者：萧秋水等
定价：45.00
出版社：人民邮电出版社
（三）如何排版表格
在微信中插入表格绝大部分人没有尝试过，微信的内容编辑器自带插入表格功能并可以对行、列进行增删操作、对单元格可以实现合并操作。
也可以从EXCEL或其它地方复制表格再在微信中进行样式的设计。选中单元格右击可以设置单元格属性，包括单元格背景颜色以及对齐方式。值得注意的是，背景颜色使用的是十六进制数据，需要通过PS等辅助软件或其它计算方式获得颜色的RGB数值十六进制数据。
| 微信公众账号推荐 | ||
| 序号 | 微信名称 | 微信号 |
| 1 | 青龙老贼 | Z_talk |
| 2 | 鬼脚七 | taobaoguijiaoqi |
| 3 | 小道消息 | WebNotes |
能排版出类似上图的表格效果说明你对微信中表格的使用已经基本掌握，如果你喜欢探索的话还可以在单元格中插入图片等。
有点遗憾的是微信中的表格属性不好设置，要不然的话把表格边框去掉或许会更好看点，庆幸的是可以在EXCEL中制作好表格再复制到微信中。
下图是作者在南通大学微信公众账号ntuweixin中使用表格的一个案例，大家关注账号后回复“TDWM”可查看效果。
（四）隐藏的<blockquote>样式支持
<blockquote></blockquote>是html里的一对标签，<blockquote></blockquote>之间的所有文本都会从常规文本中分离出来，经常会左右进行缩进。
上面的一段话可能很多人看不明白，但是基于<blockquote>标签可以设计出来的样式真的是微信的彩蛋！下面放两个文本段落效果，大家感受下！
“欢迎加入微信碎片化学习小组“秋叶PPT”，爱学更要爱动手，三分钟教程，帮助你每天进步一点点！“
@刘健亮：南通大学数字媒体091学生
如果你懂点CSS技术的话，可以设计出更多漂亮的<blockquote>样式效果！
对了，如何调用<blockquote>样式效果呢？在网页中设计好段落效果，然后把文本复制到微信就可以啦！
02期 微信排版教程之字得其乐（一）
（一）如何设置文字样式
① 你会设置字体大小吗？
如果使用微信默认字体的话，大小应该是固定的，很多微信君可能会痛骂微信不支持文字样式设置。但是你会发现本教程中字体不是一样大的，方法总比困难多。
▶你可以复制网页中文字如这样：
【更新完毕】深度体验 iOS 7 测试版
昨天 17:07
▶如果你会html的话文字可以是这样：
font size="5"
font size="4"
font size="3"
font size="2"
font size="1"
从网页中复制文字没有难度，在html里改文字大小可能就有很很多人看不懂了，没关系，没有什么高深的代码。JUST FOLLOW ME！
STEP 1： 在百度搜索框输 "FONT" (PS: font就是字体的意思）
STEP 2： 从第一个搜索链接点进去，进入w3schoo网页
STEP 3： 点击网页中的TIY，进入w3schoo提供的html在线测试网页
STEP 4： 修改font size 后面的数值，比如改成“1”“2”“3”等，再点击提交代码，即可在右侧看到效果。把右侧的文字复制到微信里就可以得到自己想要的字体大小。
有点遗憾的是，微信里好像不支持字体的设置，也有可能是作者本人还没找到解决办法吧，如果你知道解决办法欢迎sina微博私信@刘健亮。
② 你会设置文字效果吗？
微信中为可以为文字设置加粗、斜体、下划线 等效果，还可以设置文字的颜色以及背景色。（PS：令人不解的是微信中的斜体效果在手机端显示不出来）
03期 微信排版教程之字得其乐（二）
（二）你擅长玩文字汉堡效果吗？
文字汉堡效果指叠加使用文字的各种效果。
举些栗子
⊙ 文字可以五颜六色
⊙ －－－文字和线条组合－－－
⊙ 【文字和标点符号组合】
⊙ 文字伪渐变
……
第一个例子比较简单，为单个文字或局部区域文字设置不同的颜色即可，比如 “蓝方 VS 红方”
第二个例子主要锻炼思维想象力，利用文字和线条可以组合多种效果，比如 “==示例==”、“~~~示例~~~~"
第三个例子利用文字和标点符号组合也可形成多种效果，比如 “{ 推荐 }”、“『特别关注』”
第四个例子跟第一个例子差不多，只不过填充的颜色色系一样，而明度有些变化，形成色彩上的伪渐变。
上面的例子都比较简单，如何你能想到利用搜狗输入法里的特殊符号，那么还可以设计出以下的效果：
▷ 推荐指数★★★★★
▷ ✪ HOT NEWS
▷ ◣DREAM◢_________
……
搜狗输入法里有许多特殊的符号，大家可以发挥想象尽情创造神奇的效果！
04期 微信排版教程之高手有段
（一）你有意识段落设计吗？
一个没有态度的微信君在编辑文本段落时，可能是直接复制的文本，也有可能是键盘直接敲打出来的文本。
如果你能在段首敲打2个空格（输入法全角状态），你可以实现首行缩进。如果你能在段尾打个ENTER回车键，那么段落之间结构会很分明。
微信中既然提供有序列表和无序列表功能，说明列表功能还是很实用的。
项目一
项目二
项目三
如果有排版需要，段落格式（鼠标右击会出现菜单）中的左对齐、右对齐、居中对齐、两端对齐可以应用。
（二）你想成为高手吗？
如果你用过html中<blockquote>标签、并且懂一点CSS基础的话，那么你可以设计出高富帅的效果。
举些栗子
▷ 高富一：
雷锋网努力做好移动互联网的三个代表，代表移动互联网未来发展的方向，代表移动互联网的颠覆创新思潮，代表移动互联网创业者和从业者的利益。
▷ 高富二：
雷者，万钧之势；锋者，锐利之芒；雷锋网与正在爆发的移动互联网革命同生同息，与越来越多投身这个行业的创业者和从业者共成雷霆之景，锋芒之相。
▷ 高富三：
联系作者：@刘健亮 （新浪微博）
效果怎么实现的呢？给高手点拨下，给<blockquote>设置CSS样式，比如border、color、background-color、padding等。在网页制作工具或其他地方设置好样式，再复制文本，文本的样式就会跑到微信中来啦！
考虑到有人听不明白，下面详细讲下这三个高富帅效果吧。
⊙ 高富一剖析：
<blockquote style="padding:0px 20px;border-left:5px solid #c9c9c9;">雷锋网努力做好移动互联网的三个代表，代表移动互联网未来发展的方向，代表移动互联网的颠覆创新思潮，代表移动互联网创业者和从业者的利益。</blockquote>
你不需要知道<blockquote>标签是什么意思，英文style暗示后面的代码是设置样式用的。"padding:0px 20px"作用是设置左边距为20px,"border-left:5px solid #c9c9c9;"意思是设置左边框，边框的粗细为5px，样式为实线（高富三样式为点状，dashed），边框颜色为#c9c9c9。关于文字的颜色就必要在代码中声明了，在微信中即可修改。
代码写好后怎么使用呢？不是直接复制微信就可以使用的，我们需要在其他地方把网页效果显示出来，再把文字复制到微信即可，而此时的文本保留了CSS样式。一个完整html的文件具有相应的格式，完整代码如下：
<html>
<head>
</head>
<body>
教程制作：@刘健亮
<blockquote style="padding:0px 20px;border-left:5px solid #c9c9c9;">雷锋网努力做好移动互联网的三个代表，代表移动互联网未来发展的方向，代表移动互联网的颠覆创新思潮，代表移动互联网创业者和从业者的利益。</blockquote>
转载请注明作者
</body>
</html>
你只需把上方红色的文本复制到记事本，并保存为文件名.html形式，然后通过浏览器打开即可看到效果：
全选复制网页中所有东西在微信中黏贴，便修改成自己的效果，高富帅效果就诞生啦！
⊙ 高富二剖析：
高富二与高富一主要区别是四周都有边框，把border-left改成border即可。
完整代码如下：
<html>
<head>
</head>
<body>
教程制作：@刘健亮
<blockquote style="padding:0px 20px;border:2px solid #c9c9c9;">雷者，万钧之势；锋者，锐利之芒；雷锋网与正在爆发的移动互联网革命同生同息，与越来越多投身这个行业的创业者和从业者共成雷霆之景，锋芒之相。</blockquote>
转载请注明作者
</body>
</html>
⊙ 高富三剖析：
高富三的边框样式为点状dashed，而非实线solid，另外添加了背景颜色：background-color:#116D8A；
完整代码如下：
<html>
<head>
</head>
<body>
教程制作：@刘健亮
<blockquote style="padding:0px 20px;border:2px dashed #c9c9c9;background-color:#116D8A;">联系作者：@刘健亮 （新浪微博）</blockquote>
转载请注明作者
</body>
</html>
大家可以动手操作起来，也可以尝试修改其它参数，有什么不懂的可以微博联系@刘健亮
05期 微信排版教程之大有用图
（一）你会使用图片对齐吗？
如果图片尺寸较大的话，图片会全屏呈现，图片对齐意义不大。如果图片尺寸小的话，微信君一定要学会使用图片对齐哦！
举些栗子
▷ 居中对齐应用
扫一扫关注微博
▷ 右对齐应用
书名：微信控控微信
作者：萧秋水等
定价：45.00
出版社：人民邮电出版社
（二）你尝试插入过gif图片吗？
Gif 作为动态图片可以实现类似视频的效果。合理使用gif图片或者把短视频转换成gif格式可以按需动态表现某些想法。
06期 微信排版教程之表里如一
（一）你尝试过用表格吗？
在微信中插入表格默认是五行五列，但是微信系统本身提供行列增删、合并拆分等操作，因此微信可以设计出很灵活的表格。
下方是利用微信绘制的一个很粗糙的微信推荐表格，说粗糙因为颜色、背景色等都没有进行修饰。
| 微信推荐 | 微信名称 | 微信号 |
| 学习类 | 秋叶PPT | PPT100 |
| php100 | php00mm | |
| 优秀网页设计 | youshege | |
| 兴趣类 | 36氪 | wow36kr |
| 罗辑思维 | luojisw | |
| 创业邦杂志 | ichaungyebang | |
| 极客公园 | geekpark | |
| 小道消息 | WebNotes | |
| 青龙老贼 | Z_talk | |
| 虎嗅网 | huxiu_com | |
| 骑行西藏 | gobybike | |
| 天猫 | tmall01 | |
| 娱乐类 | 喷嚏图卦 | penti_tugua |
| 猜图 | fengkuangcaitu | |
| 大学助手 | dxhand |
选中单元格以后可以设置单元格的属性，包括单元格的背景颜色以及对齐方式，直接选中文本可以设置文本的颜色。
下面我对上面表格处理下给大家看下效果:
| 微信推荐 | 微信名称 | 微信号 |
| 学习类 | 秋叶PPT | PPT100 |
| php100 | php00mm | |
| 优秀网页设计 | youshege | |
| 兴趣类 | 36氪 | wow36kr |
| 罗辑思维 | luojisw | |
| 创业邦杂志 | ichaungyebang | |
| 极客公园 | geekpark | |
| 小道消息 | WebNotes | |
| 青龙老贼 | Z_talk | |
| 虎嗅网 | huxiu_com | |
| 骑行西藏 | gobybike | |
| 天猫 | tmall01 | |
| 娱乐类 | 喷嚏图卦 | penti_tugua |
| 猜图 | fengkuangcaitu | |
| 大学助手 | dxhand |
在微信中绘制表格的灵活性还是不如在EXCEL中绘制，微信中的表格调节行宽、列宽都不如excel方便，另外excel复制过来的表格是没有边框线 ，下面的截图是作者在excel绘制在微信加工的表格效果。
更多的表格效果期待大家凭自己的想象力去发挥，大家可以私信新浪微博＠刘健亮 与作者分享你的想法哦！（PS：微信5.0改版后，编辑器有一些变化，对表格的比较影响大些，对表格有需要的可以在微信海外版编辑）
@刘健亮 原创分享，转载请注明作者
✔有梦想 ✔爱行动 ✔会思考 ✔能执行
更多建议：