CnBlogs博文排版技巧
最近很多博友問，你的文章如何排版的？你的程式碼怎麼這麼漂亮？你的圖片怎麼有陰影效果？為了滿足大家需要，我特地總結一下博文排版技巧~~希望你讀完這篇文章後有個全新的體驗和輕鬆的心情寫博文了~~
在部落格園博文五要素：標題、段落、程式碼、圖片、版權。
我的原則是HTML最簡、文章最美觀、內容最清晰！本篇文章適用Windows Live Writer。
一、寫作方式選擇
線上Web編輯器：部落格園提供了三種線上編輯器，我想這個是給博文內容寫的少的使用者提哦方便的，各有優點。推薦使用TinyMCE。
Windows Live Writer：配置好設定，詳情請看這裡。就可以離線專心寫文章啦。推薦使用Windows Live Writer離線寫博文
Microsoft Office Word：另一種離線方式，配置好設定也可以寫文章，但是不推薦，因為存在轉換HTML過程，這轉換的HTML簡直多的嚇死人，對搜尋不利，文章排版不容易控制。
二、排版樣式
標題樣式
標題分為：標題1、標題2……使用<h1>、<h2>……表示，寫作時，新增適當的標題，你的博文內容會清晰了很多哦。
有不少博友標題使用“<p><strong>標題</strong></p>”表示，這是不好的，還是建議使用<h1>、<h2>……表示。
當然由於舊的博皮問題，建議大家還是使用Custom之後的博皮或者是2008年的博皮比較標準，博皮列表在這裡。不過有的<h1>、<h2>的CSS樣式被重寫了，我們需要重新定義，在部落格後臺(選項---Configure---通過CSS定製頁面下面的文字框)定義：
這裡我給出的的樣式：
.postBody h1 { margin: 15px 0; padding: 0; font-size: 135%; } .postBody h2 { margin: 15px 0; padding: 0; font-size: 125%; } .postBody h3 { margin: 15px 0; padding: 0; font-size: 110%; }
段落樣式
段落，我們平常寫的一段一段的文字就是段落了，用“<p>段落</p>”表示，段落在不同的博皮下面有的會自動首行縮排，有的沒有，不過我不推薦使用“ (空格)”來代替首行縮排。沒有縮排功能也是一樣美觀的，相反使用“ (空格)”HTML就變亂了很多。
例如我這篇介紹，只用了<h2>、<h3>表示標題和<p>表示段落還有<pre>用於程式碼。
其它樣式
我還定義了<img>和<strong>樣式了。
三、程式碼樣式
我們想要的程式碼樣式，就是提供一個區域塊，顯示自己需要展示的程式碼片段，一些關鍵字能夠高亮顯示就行了。看看我所找到的程式碼樣式，分享一下；
博友A型：可能沒有弄清怎麼寫部落格或者不想排版博文，直接就是正文一樣的程式碼。
博友B型：受到部落格園的薰陶，使用部落格園“插入程式碼”功能，好好的程式碼弄成了啥樣，高亮顯示不健全還弄個灰色div包裹著，還顯示了行號太不雅了。
丁學型：Web精簡專家，儘量做到HTML程式碼的精簡(這樣對搜尋有利，很容易搜尋到)，所以他連程式碼都是以節約著稱。
阿一型：哎~這麼浪費，好好的程式碼非要線上執行起來，所以弄上大大的文字框很按鈕，整個頁面程式碼都在那個文字框中。誰讓阿一是負責Web前端的呢？
老趙型：老將親自動手，原來的程式碼就是手動自定義的，哪個關鍵字需要高亮顯示，就手動定義，實在麻煩啊~~現在使用外掛替換了過去的勞動力了。
外掛型：使用了Windows Live Writer的各種各樣程式碼外掛，例如：Syntax Highlighter、Syntax Highlighter for Windows Live Writer，這些外掛效果很不好，生成HTML嚇人了，有的還有JS程式碼，主要原因是沒有比較這些外掛~~
受害型：所有程式碼沒有縮排，整在一排輸出了，這不是他的錯，他是受害者，是CuteEditor編輯器的BUG錯。CuteEditor的一個BUG會過濾掉每行前面的空白，這樣導致程式碼沒有縮排，整在一排輸出了，哎~換成“純文字框”就可以了，這一點顆粒寧博愛體會最深了~~
老李型：這是我看好的最精簡、好看的程式碼了，打上100分。下面重點介紹
小李型：我的，很早時候參照老李的~~
上面生成程式碼的HTML大多數都是使用<div>作為外層，用 充當空格，使用<br>來換行(照理說應該是<br/>)，高亮顯示方式各異，完全違背了Web標準。W3C無法通過~~
最佳方案：
強烈大家使用Windows Live Writer的Paste from Visual Studio外掛，從這裡下載，如需高亮顯示程式碼，只要從Visual Studio或者SQL Server中複製一下，然後點選“插入from Visual Studio...”。其HTML程式碼就自動生成了~，唯一的缺點就是每次會在結尾加一個空連結，可能來註明版權吧。
該外掛程式碼使用<pre>標籤，沒有空格、換行HTML標籤(節省一些HTML程式碼)，提供class="code"自定義<pre>標籤樣式。有自動縮排功能。程式碼原樣輸出，需要高亮的關鍵字使用<span style="color:顏色">關鍵字 </span>定義了樣式。是我看過定義程式碼樣式HTML程式碼最少的一個外掛。其它外掛生成HTML程式碼居多，對搜尋不利。
看看Paste from Visual Studio生成的程式碼，點選放大：
我們使用Windows Live Writer寫博文，建議把部落格園編輯器設定為“純文字框”(後臺選項---Preferences---預設編輯器或者後臺左邊操作快捷通道)，千萬不要使用CuteEditor，這個編輯器存在一些BUG，由於這個外掛不是使用“ ”來縮排的，直接是空白用於縮排，編輯器存在BUG會過濾掉每行前面的空白，這樣導致你的程式碼沒有縮排，整在一排輸出了，就如上面的受害型，當然還有其它BUG~~
我們可以在部落格後臺(選項---Configure---通過CSS定製頁面下面的文字框)定義code的CSS樣式讓包裹程式碼的邊框更有風格~~提供我的樣式：
.code { background: #fbedbb; border: #c0c0c0 1px solid; padding: 5px; margin: 0 40px 0 20px; font-family: Verdana,Helvetica, "微軟雅黑" , Arial, "宋體" , sans-serif; }
大家可以隨意修改背景顏色啊，邊框樣式啊，達到自己的風格。
四、圖片處理
一篇文章圖文並茂才好看，推薦我使用的一款截圖小工具685KB：SPX Instant Screen Capture (截圖工具) 綠色版 v6.0，可以添加註釋和邊框效果。我們不要定義HTML，直接在圖片上加上陰影效果。
管理圖片
我覺得CuteEditor編輯器的管理圖片功能比較強大，可以自由管理、上傳自己的圖片（這就要不時的切換編輯器了），推薦大家使用CuteEditor來上傳圖片，然後在Windows Live Writer中插入圖片是來引用地址，不建議使用Windows Live Writer自動提交上傳圖片功能，這樣圖片地址、圖片名稱不容易控制，另外它還自動生成一個圖片縮圖即一張圖片在伺服器上生成兩張，這無疑浪費了部落格園空間資源。
管理圖片功能(點選放大)
我相信以後部落格園會專門開發個圖片管理功能的。
插入圖片
我們插入圖片，根據博皮選擇，部落格園博皮分兩種，一種是自適應寬度的，例如InsideDotNet博皮，根據你的瀏覽器解析度而自動適應。 這種的好處是：可以自適應寬度，什麼解析度都可以填滿。但是，不同解析度下瀏覽器效果會有變化，特別是文章排版也會發生變化 。還有一種是固定寬度的，例如ChinaHeart博皮，整體寬度一般是950px（1024×768解析度下也能取得較好的顯示效果），一般正文顯示區域660px寬度，所以圖片最好寬度小於550px，以便取得較好的顯示效果。 固定寬度的優點是：寬度固定，什麼解析度下的顯示效果都一樣。從而保證你的排版能被忠實的反映出來。 缺點是：太寬的解析度下，兩邊會比較空，對於解析度比較大的使用者而言有點浪費。
我們插入圖片時推薦使用alt標籤定義說明，這樣對搜尋有利。按照博皮選擇，插入適當大小的圖片，如果對於圖片過大可以使用height、width強制定義圖片大小，然後對圖片加上超連結，像這樣：
<p><a href="http://images.cnblogs.com/cnblogs_com/lyj/NHibernate/6-2.jpg" target="_blank"> <img alt="成功提交程式碼覆蓋率分析結果" height="295" width="460" src="http://images.cnblogs.com/cnblogs_com/lyj/NHibernate/6-2.jpg"/></a></p>
如果你想顯示圖片速度快點，可以減少圖片大小，利用Windows自帶的畫圖工具無失真壓縮一下：只要使用畫圖工具開啟圖片，另存為就可以了，其它什麼也不做，這樣一個500KB可以減小到100KB的大小，這樣顯示速度也快點，也減少了空間，一舉兩得。
五、版權
現在轉載太厲害，為自己的文章加上版權也是不錯的選擇，例如在圖片上加上水印、為文章加上一段宣告~~大家自由想象吧，看看我下面的宣告：
(大家查考本頁原始碼，為什麼我加入了<br/>，就是避免了有的博皮會首行縮排，這樣不對齊了)
六、釋出
在釋出前請預覽你的文章，注意圖片地址是否正確，是否引用網路上的圖片了。
由於Windows Live Writer對部落格園的一些釋出選項支援不全，我在這裡強烈建議把部落格園編輯器設定為“純文字框”(後臺選項---Preferences---預設編輯器或者後臺左邊操作快捷通道)：
然後直接把HTML複製到純文字框裡面，填寫標題、個人分類、網站分類、釋出選項、參與的團隊、摘要內容、Tab標籤等內容後就直接可以釋出。
希望這篇介紹對你有所幫助~~