2015-10-13 23:37:55阿輝

部落格CSS排版小技巧 1-行與段落

剛剛看了一下之前文章的人氣,發現日記類的文章人氣實在是低到驚人,比較實用的文章才有人看(廢話,既不是正妹,也不是帥哥,不是小鮮肉,更不是名人,寫得也不好笑,誰理你日記寫啥XD)

那好吧,來分享一些部落格的排版技巧好了

首先先來說說""與"段落"吧。行、段落有什麼差別呢?

其實,就以"視覺"上來說,差別並不大,簡單的說明就是,"段落"與"段落"之間的間隔比較大,大約會有一行的空間,用說的比較難理解,直接看下面的示範比較清楚

這是第一個段落,這裡是第一行
這是第一段裡的第二行
這是第一段裡的第三行

這是第二個段落,這裡是第一行
這是第二段裡的第二行
這是第二段裡的第三行

這是第三個段落,這裡是第一行
這是第三段裡的第二行
這是第三段裡的第三行

從上面的範例中可以看出來,行與行之間,靠的非常近,而段落與段落之間,會有一行的距離,在視覺上,這是最基本的差異

這在平常使用上是沒有什麼差別,但這也只是最基本的用法,而實際上文字架構,其實是有"行"與"段落"的差異的,尤其是在語法上,行與段落在意思上是不一樣的,用法也有差,尤其是如果要做一些排版、美化等效果,其實是需要搞懂兩者的差異的

而在網頁兩者的語法也是有差的,像是段落就是<p>而換行就是<br>,實際怎麼用,再下一篇章節再做詳細說明

另外像是如果文章的內容長一點,分段落就會變的很重要了,畢竟,文章得結構上,本來就是要有分段,這樣閱讀起來才會比較輕鬆,如果沒有分段,每個句子之間都只有分行的話,看起來是會很累的,我下面再來做個示範,如果我把我這篇文章的內容,通通不分段的話,看起來會是怎樣(以下紅框內的內容不用詳細看,只是這整篇文章的內容而以,主要是要示範如果不分段文章看起來的感覺)

剛剛看了一下之前文章的人氣,發現日記類的文章人氣實在是低到驚人,比較實用的文章才有人看(廢話,既不是正妹,也不是帥哥,不是小鮮肉,更不是名人,寫得也不好笑,誰理你日記寫啥XD)那好吧,來分享一些部落格的排版技巧好了首先先來說說"行"與"段落"吧。行、段落有什麼差別呢?其實,就以"視覺"上來說,差別並不大,簡單的說明就是,"段落"與"段落"之間的間隔比較大,大約會有一行的空間,用說的比較難理解,直接看下面的示範比較清楚這是第一個段落,這裡是第一行這是第一段裡的第二行這是第一段裡的第三行這是第二個段落,這裡是第一行這是第二段裡的第二行這是第二段裡的第三行這是第三個段落,這裡是第一行這是第三段裡的第二行這是第三段裡的第三行從上面的範例中可以看出來,行與行之間,靠的非常近,而段落與段落之間,會有一行的距離,在視覺上,這是最基本的差異這在平常使用上是沒有什麼差別,但這也只是最基本的用法,而實際上文字架構,其實是有"行"與"段落"的差異的,尤其是在語法上,行與段落在意思上是不一樣的,用法也有差,尤其是如果要做一些排版、美化等效果,其實是需要搞懂兩者的差異的像是如果文章的內容長一點,分段落就會變的很重要了,畢竟,文章得結構上,本來就是要有分段,這樣閱讀起來才會比較輕鬆,如果沒有分段,每個句子之間都只有分行的話,看起來是會很累的,我下面再來做個示範,如果我把我這篇文章的內容,通通不分段的話,看起來會是怎樣(以下紅框內的內容不用詳細看,只是這整篇文章的內容而以,主要是要示範如果不分段文章看起來的感覺)這樣閱讀起來是不是很辛苦,所以文章分段就很重要了,另外再舉個例子,不曉得有沒有注意到,我這篇文章,在每個段落的第一行,都會有兩個字距的縮排,這樣閱讀起來是不是更清楚呢?(PS.從2015年之後開始更新的文章,我都會這樣做的,另外說明一下,下一篇教學文章就是會教大家怎麼用CSS來做到首行縮棑)因為我沒有再用其他的部落格,不確定其他的部落格的格式如何,可能有的部落格的文字編輯模式,按一次Enter就是一個段落,但是以PChome的新聞台來說,再發文章的時候,文字編及模式底下,按一次Enter就是一次換行,所以沒有換段落的功能,我想很多人應該都是直接給他按兩次Enter來進行兩次換行做到分段的效果吧其實這樣做是沒錯的,不過,阿輝我比較建議用另一個方法,就是先把文章在Word內打好,再複製過來,這樣有幾個好處一、避免發文失敗需要重新打字一次,畢竟是發文到網路上,有時候發文可能會失敗,例如連線問題等,或者是發文的時候需要輸入什麼驗證碼,或者有些要填內容的地方忘了填等因素,導致最後送出的時候,並沒有上傳成功,可能內容就要全部要重新輸入。或者突然跳電等等因素,先在word內把文章打好再送出,總是比較保險二、也是這篇文章的主題,分段落,在word上打字的時候,當你按Enter的時候,就是換段落;而按Shift + Enter的時候,就是換行。而如果你把Word的內容Copy到部落格上的時候,就會有段落和換行的差異了三、利用Word的一些輔助功能協助排版,例如粗體字、字體顏色等等或許會有人覺得用Word排版然後在轉到部落格上不是很好,可能會有一些不必要的語法,這點我同意,所以阿輝我也不是用Word做發文前排版。但如果你沒有做太多莫名其妙的效果的話,到是不用擔心這問題例如只用來排列行與段落,這完全是可以的,如果要插入圖片,把文章貼上發文的文字編輯區,再去設定圖片的部分就好。而如果只是字體顏色、粗體字等簡單的基本效果,也是完全OK的嗯??是不是有人問阿輝不是用Word做發文前的排版,那是用什麼做的嗎?喔,阿輝我是用Dreamweaver來做發文前的排版的,畢竟我還是有用到一些CSS效果,例如前面範例文字外面有個紅框,就是用CSS語法來達成的,所以阿輝用reamweaver來編輯內容或許會有人說,我這篇文章沒什麼重點,就以視覺上來說,沒有分段,就多按一次Enter就好了阿,誰不知道發文要排版,擠在一起很難看,好吧,我承認,單看這章節並沒有多大的意義,但是阿輝後續會有一些CSS排版的教學,到時候有沒有分段就會有差了,所以,重點在後面,好嗎?下一篇就來介紹如何用CSS做到文章首行縮排的效果,這樣再輸入文章的時候,就不用每次都要自己按幾個空白鍵了

這樣閱讀起來是不是很辛苦,所以文章分段就很重要了,另外再舉個例子,不曉得有沒有注意到,我這篇文章,在每個段落的第一行,都會有兩個字距的縮排,這樣閱讀起來是不是更清楚呢?
(PS.從2015年之後開始更新的文章,我都會這樣做的,另外說明一下,下一篇教學文章就是會教大家怎麼用CSS來做到首行縮棑)

因為我沒有再用其他的部落格,不確定其他的部落格的格式如何,可能有的部落格的文字編輯模式,按一次Enter就是一個段落,但是以PChome的新聞台來說,再發文章的時候,文字編及模式底下,按一次Enter就是一次換行,所以沒有換段落的功能,我想很多人應該都是直接給他按兩次Enter來進行兩次換行做到分段的效果吧

其實這樣做是沒錯的,不過,阿輝我比較建議用另一個方法,就是先把文章在Word內打好,再複製過來,這樣有幾個好處

一、避免發文失敗需要重新打字一次,畢竟是發文到網路上,有時候發文可能會失敗,例如連線問題等,或者是發文的時候需要輸入什麼驗證碼,或者有些要填內容的地方忘了填等因素,導致最後送出的時候,並沒有上傳成功,可能內容就要全部要重新輸入。或者突然跳電等等因素,先在word內把文章打好再送出,總是比較保險

二、也是這篇文章的主題,分段落,在word上打字的時候,當你按Enter的時候,就是換段落;而按Shift + Enter的時候,就是換行。而如果你把Word的內容Copy到部落格上的時候,就會有段落和換行的差異了

三、利用Word的一些輔助功能協助排版,例如粗體字、字體顏色等等

或許會有人覺得用Word排版然後在轉到部落格上不是很好,可能會有一些不必要的語法,這點我同意,所以阿輝我也不是用Word做發文前排版。但如果你沒有做太多莫名其妙的效果的話,到是不用擔心這問題

例如只用來排列行與段落,這完全是可以的,如果要插入圖片,把文章貼上發文的文字編輯區,再去設定圖片的部分就好。
而如果只是字體顏色、粗體字等簡單的基本效果,也是完全OK的

不過這邊有個部分需要注意一下,就是要發文的時候,不要直接把Word上的內容直接複製貼上,那真的會有很多莫名其妙的程式碼被貼上來,所以必須使用新聞台發文的一個功能"從Word貼上"

用法請參考這張圖

從word插入

之後會出現下面的畫面,將你Word的內容複製貼上厚,點選底下的"插入"就可以了

從word插入編輯畫面

嗯??是不是有人問阿輝不是用Word做發文前的排版,那是用什麼做的嗎?喔,阿輝我是用Dreamweaver來做發文前的排版的,畢竟我還是有用到一些CSS效果,例如前面範例文字外面有個紅框,就是用CSS語法來達成的,所以阿輝用reamweaver來編輯內容

或許會有人說,我這篇文章沒什麼重點,就以視覺上來說,沒有分段,就多按一次Enter就好了阿,誰不知道發文要排版,擠在一起很難看,好吧,我承認,單看這章節並沒有多大的意義,但是阿輝後續會有一些CSS排版的教學,到時候有沒有分段就會有差了,所以,重點在後面,好嗎?下一篇就來介紹如何用CSS做到文章首行縮排的效果,這樣再輸入文章的時候,就不用每次都要自己按幾個空白鍵了

阿輝的簽名檔