微信高級排版編輯教程匯總

----原創(chuàng)教程  @劉健亮  出品-----

微信平臺經(jīng)常需要發(fā)布些圖文消息，如何利用微信簡單的編輯系統(tǒng)進行推送內(nèi)容的排版，是很多微信君必須面對的問題。

01期   微信排版進階教程

（一）如何排版文檔段落

① 你會首行縮進嗎？

　　在中文段落中我們習慣在段首添加2個字符的縮進，離開WORD該如何設置呢？最笨的辦法就是在輸入法全角狀態(tài)下敲打２個空格啦。

② 你會使用段落對齊嗎？

　　微信內(nèi)容編輯器提供"左對齊""右對齊"""居中對齊"以及“兩端對齊”共4種方式。對齊功能大家平常可能想不起來使用，如果會使用的話能實現(xiàn)非常棒的排版效果。（下方是香港中文大學微情書大賽一等獎作品《百字令》菱形排版示范）

見

驚艷

目流連

再難思遷

躊躇欲向前

只恐天上人間

悲歡喜怒一線牽

循環(huán)往復恨此心堅

花開花落轉(zhuǎn)眼已三年

天人合一處垂首對漪漣

思或淡情未移口三緘

燕去燕歸滄海桑田

倘注定有分無緣

亦感蒙賜初面

縱此生不見

平安惟愿

若得閑

仍念

歉

③ 你會使用段落列表標記嗎？

　　微信內(nèi)容編輯器提供有序列表和無序列表兩種方式。有序列表包括阿拉伯數(shù)字、英文字母大小寫、羅馬數(shù)字大小寫共5種樣式。無序列表包括小圓圈、小圓點、小方塊幾種方式。

　　如果你覺得系統(tǒng)提供的列表標記太單調(diào)，我們就要自己設計些列表標記。比如有序列表可以使用搜狗輸入法里的特殊符號①②③，無序列表同樣可以使用搜狗輸入法里的一些特殊符號⊙?☆。

　　舉個栗子：

　　@秋葉語錄６月份上市的新書有：

　　⊙《不要等到畢業(yè)以后》

　　⊙《和秋葉一起學PPT》

　　⊙《微信控控微信》

（二）如何排版圖片

　　圖片的對齊方式左對齊、右對齊、水平居中大家都不陌生，根據(jù)需要可以靈活設計圖文排版樣式。

　書名：微信控控微信

　作者：蕭秋水等  

　定價：45.00

　出版社：人民郵電出版社

（三）如何排版表格

　　在微信中插入表格絕大部分人沒有嘗試過，微信的內(nèi)容編輯器自帶插入表格功能并可以對行、列進行增刪操作、對單元格可以實現(xiàn)合并操作。

　　也可以從EXCEL或其它地方復制表格再在微信中進行樣式的設計。選中單元格右擊可以設置單元格屬性，包括單元格背景顏色以及對齊方式。值得注意的是，背景顏色使用的是十六進制數(shù)據(jù)，需要通過PS等輔助軟件或其它計算方式獲得顏色的RGB數(shù)值十六進制數(shù)據(jù)。

　　能排版出類似上圖的表格效果說明你對微信中表格的使用已經(jīng)基本掌握，如果你喜歡探索的話還可以在單元格中插入圖片等。

　　有點遺憾的是微信中的表格屬性不好設置，要不然的話把表格邊框去掉或許會更好看點，慶幸的是可以在EXCEL中制作好表格再復制到微信中。

　　下圖是作者在南通大學微信公眾賬號ntuweixin中使用表格的一個案例，大家關注賬號后回復“TDWM”可查看效果。

（四）隱藏的<blockquote>樣式支持

　　<blockquote></blockquote>是html里的一對標簽，<blockquote></blockquote>之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會左右進行縮進。

　　上面的一段話可能很多人看不明白，但是基于<blockquote>標簽可以設計出來的樣式真的是微信的彩蛋！下面放兩個文本段落效果，大家感受下！

“歡迎加入微信碎片化學習小組“秋葉PPT”，愛學更要愛動手，三分鐘教程，幫助你每天進步一點點！“

@劉健亮：南通大學數(shù)字媒體091學生

　　如果你懂點CSS技術(shù)的話，可以設計出更多漂亮的<blockquote>樣式效果！

　　對了，如何調(diào)用<blockquote>樣式效果呢？在網(wǎng)頁中設計好段落效果，然后把文本復制到微信就可以啦！

02期 微信排版教程之字得其樂（一）

（一）如何設置文字樣式

① 你會設置字體大小嗎？

　　如果使用微信默認字體的話，大小應該是固定的，很多微信君可能會痛罵微信不支持文字樣式設置。但是你會發(fā)現(xiàn)本教程中字體不是一樣大的，方法總比困難多。

　　?你可以復制網(wǎng)頁中文字如這樣：　　

　　【更新完畢】深度體驗 iOS 7 測試版

　　昨天 17:07

　　?如果你會html的話文字可以是這樣：

font size="5"

font size="4"

font size="3"

font size="2"

font size="1"

　　從網(wǎng)頁中復制文字沒有難度，在html里改文字大小可能就有很很多人看不懂了，沒關系，沒有什么高深的代碼。JUST FOLLOW ME！

　　STEP 1：  在百度搜索框輸 "FONT"  (PS: font就是字體的意思）

　　STEP 2：  從第一個搜索鏈接點進去，進入w3schoo網(wǎng)頁

　　STEP 3：  點擊網(wǎng)頁中的TIY，進入w3schoo提供的html在線測試網(wǎng)頁

　　STEP 4：  修改font size 后面的數(shù)值，比如改成“1”“2”“3”等，再點擊提交代碼，即可在右側(cè)看到效果。把右側(cè)的文字復制到微信里就可以得到自己想要的字體大小。

　有點遺憾的是，微信里好像不支持字體的設置，也有可能是作者本人還沒找到解決辦法吧，如果你知道解決辦法歡迎sina微博私信@劉健亮。

② 你會設置文字效果嗎？

　　微信中為可以為文字設置加粗、斜體、下劃線 等效果，還可以設置文字的顏色以及背景色。（PS：令人不解的是微信中的斜體效果在手機端顯示不出來）

03期 微信排版教程之字得其樂（二）

（二）你擅長玩文字漢堡效果嗎？

　　文字漢堡效果指疊加使用文字的各種效果。

       舉些栗子  

　　⊙ 文字可以五顏六色

　　⊙ －－－文字和線條組合－－－

　　⊙ 【文字和標點符號組合】

　　⊙ 文字偽漸變

　　……

　　第一個例子比較簡單，為單個文字或局部區(qū)域文字設置不同的顏色即可，比如 “藍方 VS 紅方”

　　第二個例子主要鍛煉思維想象力，利用文字和線條可以組合多種效果，比如 “==示例==”、“~~~示例~~~~"

　　第三個例子利用文字和標點符號組合也可形成多種效果，比如 “{ 推薦 }”、“『特別關注』”

　　第四個例子跟第一個例子差不多，只不過填充的顏色色系一樣，而明度有些變化，形成色彩上的偽漸變。

　　上面的例子都比較簡單，如何你能想到利用搜狗輸入法里的特殊符號，那么還可以設計出以下的效果：

　　?  推薦指數(shù)★★★★★

　　? ? HOT NEWS

　　?  ◣DREAM◢_________

      ……

　　搜狗輸入法里有許多特殊的符號，大家可以發(fā)揮想象盡情創(chuàng)造神奇的效果！

04期   微信排版教程之高手有段

（一）你有意識段落設計嗎？

　　一個沒有態(tài)度的微信君在編輯文本段落時，可能是直接復制的文本，也有可能是鍵盤直接敲打出來的文本。

　　如果你能在段首敲打2個空格（輸入法全角狀態(tài)），你可以實現(xiàn)首行縮進。如果你能在段尾打個ENTER回車鍵，那么段落之間結(jié)構(gòu)會很分明。

　　微信中既然提供有序列表和無序列表功能，說明列表功能還是很實用的。

• 項目一

• 項目二
  

• 項目三

　　如果有排版需要，段落格式（鼠標右擊會出現(xiàn)菜單）中的左對齊、右對齊、居中對齊、兩端對齊可以應用。

（二）你想成為高手嗎？

　　如果你用過html中<blockquote>標簽、并且懂一點CSS基礎的話，那么你可以設計出高富帥的效果。

　　 舉些栗子  

　　? 高富一：

雷鋒網(wǎng)努力做好移動互聯(lián)網(wǎng)的三個代表，代表移動互聯(lián)網(wǎng)未來發(fā)展的方向，代表移動互聯(lián)網(wǎng)的顛覆創(chuàng)新思潮，代表移動互聯(lián)網(wǎng)創(chuàng)業(yè)者和從業(yè)者的利益。

　　? 高富二：

　　雷者，萬鈞之勢；鋒者，銳利之芒；雷鋒網(wǎng)與正在爆發(fā)的移動互聯(lián)網(wǎng)革命同生同息，與越來越多投身這個行業(yè)的創(chuàng)業(yè)者和從業(yè)者共成雷霆之景，鋒芒之相。

　　? 高富三：

聯(lián)系作者：@劉健亮   （新浪微博）

　　效果怎么實現(xiàn)的呢？給高手點撥下，給<blockquote>設置CSS樣式，比如border、color、background-color、padding等。在網(wǎng)頁制作工具或其他地方設置好樣式，再復制文本，文本的樣式就會跑到微信中來啦！

　　考慮到有人聽不明白，下面詳細講下這三個高富帥效果吧。

　　 ⊙ 高富一剖析：

      <blockquote style="padding:0px 20px;border-left:5px solid #c9c9c9;">雷鋒網(wǎng)努力做好移動互聯(lián)網(wǎng)的三個代表，代表移動互聯(lián)網(wǎng)未來發(fā)展的方向，代表移動互聯(lián)網(wǎng)的顛覆創(chuàng)新思潮，代表移動互聯(lián)網(wǎng)創(chuàng)業(yè)者和從業(yè)者的利益。</blockquote>

　　你不需要知道<blockquote>標簽是什么意思，英文style暗示后面的代碼是設置樣式用的。"padding:0px 20px"作用是設置左邊距為20px,"border-left:5px solid #c9c9c9;"意思是設置左邊框，邊框的粗細為5px，樣式為實線（高富三樣式為點狀，dashed），邊框顏色為#c9c9c9。關于文字的顏色就必要在代碼中聲明了，在微信中即可修改。

　　代碼寫好后怎么使用呢？不是直接復制微信就可以使用的，我們需要在其他地方把網(wǎng)頁效果顯示出來，再把文字復制到微信即可，而此時的文本保留了CSS樣式。一個完整html的文件具有相應的格式，完整代碼如下：　　

<html>

<head>

</head>

<body>

教程制作：@劉健亮

 <blockquote style="padding:0px 20px;border-left:5px solid #c9c9c9;">雷鋒網(wǎng)努力做好移動互聯(lián)網(wǎng)的三個代表，代表移動互聯(lián)網(wǎng)未來發(fā)展的方向，代表移動互聯(lián)網(wǎng)的顛覆創(chuàng)新思潮，代表移動互聯(lián)網(wǎng)創(chuàng)業(yè)者和從業(yè)者的利益。</blockquote>

轉(zhuǎn)載請注明作者

</body>

</html>

　　你只需把上方紅色的文本復制到記事本，并保存為文件名.html形式，然后通過瀏覽器打開即可看到效果：

　　全選復制網(wǎng)頁中所有東西在微信中黏貼，便修改成自己的效果，高富帥效果就誕生啦！

　　⊙ 高富二剖析：

　　高富二與高富一主要區(qū)別是四周都有邊框，把border-left改成border即可。

　　完整代碼如下：

<html>

<head>

</head>

<body>

教程制作：@劉健亮

 <blockquote style="padding:0px 20px;border:2px solid #c9c9c9;">雷者，萬鈞之勢；鋒者，銳利之芒；雷鋒網(wǎng)與正在爆發(fā)的移動互聯(lián)網(wǎng)革命同生同息，與越來越多投身這個行業(yè)的創(chuàng)業(yè)者和從業(yè)者共成雷霆之景，鋒芒之相。</blockquote>

轉(zhuǎn)載請注明作者

</body>

</html>

⊙ 高富三剖析：

　　高富三的邊框樣式為點狀dashed，而非實線solid，另外添加了背景顏色：background-color:#116D8A；

　　完整代碼如下：

<html>

<head>

</head>

<body>

教程制作：@劉健亮

 <blockquote style="padding:0px 20px;border:2px dashed #c9c9c9;background-color:#116D8A;">聯(lián)系作者：@劉健亮   （新浪微博）</blockquote>

轉(zhuǎn)載請注明作者

</body>

</html>

　　大家可以動手操作起來，也可以嘗試修改其它參數(shù)，有什么不懂的可以微博聯(lián)系@劉健亮

05期   微信排版教程之大有用圖

（一）你會使用圖片對齊嗎？

　　如果圖片尺寸較大的話，圖片會全屏呈現(xiàn)，圖片對齊意義不大。如果圖片尺寸小的話，微信君一定要學會使用圖片對齊哦！

　　 舉些栗子  

　　? 居中對齊應用

掃一掃關注微博

　　? 右對齊應用

　書名：微信控控微信

　作者：蕭秋水等  

　定價：45.00

　出版社：人民郵電出版社

（二）你嘗試插入過gif圖片嗎？

　　Gif 作為動態(tài)圖片可以實現(xiàn)類似視頻的效果。合理使用gif圖片或者把短視頻轉(zhuǎn)換成gif格式可以按需動態(tài)表現(xiàn)某些想法。

06期   微信排版教程之表里如一

（一）你嘗試過用表格嗎？

　　 在微信中插入表格默認是五行五列，但是微信系統(tǒng)本身提供行列增刪、合并拆分等操作，因此微信可以設計出很靈活的表格。

　　下方是利用微信繪制的一個很粗糙的微信推薦表格，說粗糙因為顏色、背景色等都沒有進行修飾。

　　選中單元格以后可以設置單元格的屬性，包括單元格的背景顏色以及對齊方式，直接選中文本可以設置文本的顏色。

　　下面我對上面表格處理下給大家看下效果:

　　在微信中繪制表格的靈活性還是不如在EXCEL中繪制，微信中的表格調(diào)節(jié)行寬、列寬都不如excel方便，另外excel復制過來的表格是沒有邊框線 ，下面的截圖是作者在excel繪制在微信加工的表格效果。

　　更多的表格效果期待大家憑自己的想象力去發(fā)揮，大家可以私信新浪微博＠劉健亮　與作者分享你的想法哦！（PS：微信5.0改版后，編輯器有一些變化，對表格的比較影響大些，對表格有需要的可以在微信海外版編輯）

@劉健亮 原創(chuàng)分享，轉(zhuǎn)載請注明作者

?有夢想 ?愛行動 ?會思考 ?能執(zhí)行