2012年8月1日 星期三

[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)

[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)

Wayne Fu 0 A+

(Pic from: youtoart.com)
在我的「Blogger 文章相關工具及技巧(筆記)」 → 「美化文章內容」區塊記錄了一些 "標示特殊文字區塊" 的文章,例如標示 "程式碼"、"重點筆記"、"引文" 區塊等,由於本部落格目前主要是提供 Blogger 的相關工具及技巧,所以使用最多的是 "標示程式碼區塊"。其實各種不同的標示區塊原理相同,而一路使用下來也遇過不少問題,因此本篇來分享自己的心得與解決方案。


一、標示特定文字區塊的原理

要讓特定的文字區塊,與文章其他區塊的文字有所區別,主要的方法便是設定這個區塊的 CSS,讓該區塊的版面配置不同,在視覺上造成區隔性。通常該區塊會設定的 CSS 主要項目如下:

display: block; /*不必變動*/
overflow: auto; /*不必變動*/
font-family: Courier New; /*字型*/
font-size: 8pt; /*字體大小*/
background: #f0f0f0 url(http://lh3.ggpht.com/-kDF-vz6AC4U/Tj_0OOSr5FI/AAAAAAAABpM/1v9lkGI-pZo/s1600/code.gif) left top repeat-y; /*#f0f0f0 可改為自訂區塊底色;url的括號裡面可改為自訂的圖片,而這個 code.gif 是張寬 11px 高 1200px 的圖片,只要自製一個長條圖案,此行的參數會讓這個長條圖案,貼在區塊最左側,由上往下重複顯示。*/
border: 1px solid #ccc; /*邊框的寬度、形態、顏色*/
padding: 10px 10px 10px 21px; /*區塊文字分別距離邊框上、右、下、左的像素值*/
max-height:1200px; /*設定區塊最高的長度,當超過時會出現捲軸。*/
line-height: 1.2em; /*行高*/

每一行的說明請看 "//" 後面的敘述。除了以上的項目之外,也可自行增減 CSS 項目,發揮自己的創意讓區塊更有特色。



二、簡易的使用方式

一般呼叫特殊區塊的方式都是使用 class,例如 <div class="code">顯示的文字</div>,但我不喜歡這種方式,因為要打太多字了。我比較喜歡用 HTML 標籤的方式呼叫,例如「在文章裡顯示優質的程式碼區」這篇的方式,要呼叫程式碼區塊只要打 <code>程式碼</code>,是不是少打了很多字啊?

問題是 <code> 標籤只有一個,且主要是拿來顯示程式碼的,如果我有別的特殊區塊,例如「"公告" 區塊(位於文章開頭)」、「"修訂" 區塊(請參考7.30 增補及文末的增補)」、「"參考資料" 區塊(請參考文末)」、「"系列文" 區塊(請參考文末)」等,不就沒標籤可以使用了?

還好這個問題在「部落格文字加上各種底線圖案的完整解決方案」 已經獲得解決,請參考該文的「二、改進呼叫方式」→「四、安裝方式」→「五、呼叫底線圖案方式」可製作出各式自訂 HTML 標籤。

若不懂這篇文章的原理,直接按以下步驟可達到跨瀏覽器支援、呼叫自訂標籤來顯示「特殊文字區塊」的目的──

1. 假設要製作一塊「公告」的區域,呼叫的 HTML 標籤簡單命名為 <po>。

2. 到 Blogger 後台打開範本文件 → 修改 HTML。接著把下面的程式碼插入 </head> 的前面:

<style type='text/css'>
po {
  填入自訂的 CSS 內容,可把「一、標示特定文字區塊的原理」的 CSS 內容套用過來,圖片改一下、參數改一下即可。
}
</style>

<script type='text/javascript'>
document.createElement("po")
</script>

若想增加其他的自訂 HTML 標籤,依樣畫葫蘆增加以上的內容,置換兩個藍字 po 為自訂 HTML 標籤即可。

3. 存檔後,呼叫的方法為在文章內插入以下──

<po>公告的內容</po>
這樣就能用很簡便的呼叫方法,讓公告內容醒目與其他文字有所區隔。雖然前置作業需要稍費功夫,不過以後呼叫的方式輕鬆又好記多了。


三、區塊文字斷行問題

中文不會有斷行的問題,但英文只要 CSS 設定有問題,當字串過長,便會出現無法斷行的問題。常見情形有以下兩種:

1. 超出邊界



2. 出現捲軸



以上兩種情況不限定出現於哪個瀏覽器,而要避免以上兩種狀況,來達到跨瀏覽器相容,必須檢查 CSS 中是否有以下三項:

display: block; //以區塊呈現
overflow: auto; //固定區塊大小
word-wrap: break-word; //自動斷字

說明請看 "//" 後面的敘述。確定以上三項都有了之後,英文長字串就能自動斷行,如下圖所示──




四、Blogger 系統問題

如果非 Blogger 的部落格平台,到第三大點結束應該就已經解決所有問題,而 Blogger 平台的問題還很大,請繼續往下看。

在編輯文章時,經常於「HTML」模式與「撰寫」模式切換的使用者一定很困惑,Blogger 是否聰明過了頭,經常自作聰明幫我們 "多空幾行"、或是自動轉換、增補程式碼。本文的特殊文字區塊,若是添加了其他標籤也有可能遭到同樣對待,舉例來說,我常常使用的程式碼區塊,在「HTML」模式下是這個樣子──



如上圖,我準備利用 <code> 標籤來顯示程式碼區塊,共有三行程式碼,並使用 <ol> 標籤來編號。結果切換到「撰寫」模式來預覽一下畫面,再切回「HTML」模式竟成了這付模樣──



以上的字串對於熟悉 HTML 碼的讀者來說,應該非常無言吧?簡直一團亂,這讓我當初對「撰寫」模式有非常大的恐懼症。而且對於 Blogger,我幾乎找不到他如何轉換文字、程式碼的完整規則,這個問題該怎麼解決呢?

順待一提,如果想在程式碼區塊 "顯示程式碼",一些特殊符號 <>& 等等得先編碼過,否則這些程式碼就會被 "執行",而不是被 "顯示" 了。我推薦的編碼網站是「HtmlEscape.net」,此網站比其他 HTML 編碼工具強的地方在於,提供了一些編碼的選項,讓我們決定某些字元是否編碼。


五、再次轉碼──HTML 轉換為 Javascript

由於 Blogger 會自作聰明對 HTML 進行轉碼,為了不讓 Blogger 轉碼,我想到的方法是,把 HTML 轉換為 Javascript,讓 Blogger 沒機會下手。

而 HTML 轉換為 Javascript 在網路上可以 google 到不少工具,我常用的是「這個網頁」,舉例來說,把剛剛的程式碼貼到這個網站──



按下「開始編碼」後──



瞬間就完成轉換,把全部內容複製到文章內即可,這些 javascript 絕不會被 Blogger 再動手腳,我們的特殊文字區塊也終於可以正常呈現。

這個線上工具或許不是最佳選擇,因為字元數會膨脹很多,但我圖的是操作方便,且字元數不多;若使用其他工具,操作步驟會比較多一些。

本篇的解決方案動作其實不少,不過如果想讓自己的部落格跟別人不一樣,花點心思及程序,成果會讓人滿意的。有了本篇的基礎知識,下篇將示範一些實作範例:「讓網頁使用各種特殊文字區塊__公告+修訂區塊


CSS 技巧相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP