[教學] BBCode 完整教學

Forum Help Guide
這裡收集了論壇的使用教學與問題解答。
對於論壇操作有任何疑問,或是發現論壇的某某功能故障了,歡迎您進來發表。
主題已鎖定
頭像
鳥站長
本站地頭蛇兼工友
本站地頭蛇兼工友
文章: 1264
註冊時間: 2002-11-19 08:22 pm
暱稱: 鳥站
來自: 安息日的深紫飛船

[教學] BBCode 完整教學

#1

文章 鳥站長 » 2002-11-29 03:36 am

很多論壇、討論區和留言板都有支援編輯網頁所使用的 HTML 語法。
利用 HTML 語法,會員在發表文章時,就可以變換字型大小、顏色,還有貼圖。
不過並不是每一位會員都瞭解 HTML 語法要如何使用,所以很多論壇開發了簡易的語法來取代 HTML 。
其中最受歡迎的,就是被稱為「BBCode」的語法。

在發表主題、回覆文章和編輯文章的頁面上,都會有一個如下圖的功能區:

圖檔

這就是 BBCode 了!您會看到數個由黑線框起來、中間標示英文的小按鈕,
還有設定字型顏色、字型大小的下拉式選單,以及一條像是彩虹的顏色棒。

請您將滑鼠移到每一個按鈕上,顏色棒下方就會顯示這一個按鈕的功用,這一些按鈕分別是:

<pre>B 粗體;將文字變成粗體字。
i 斜體;將文字變成斜體字。
u 底線;將文字加上底線。
Quote 引言回覆;回覆文章時,將先前會員發言的內容挑選部分出來加上框線,當作引言。
Code 顯示程式代碼;將 HTML 語法的原始碼展示出來。
List 列表;將每一行文字以列表方式整齊列出。
List= 依序排列;將每一行文字依您設定的 LIST=* (1或A)整齊列出。
Img 插入圖像;也就是俗稱的貼圖,將網路上的圖像展示出來。
URL 插入 URL ;將文字轉成連結。
字型顏色 設定文字的顏色。
字型大小 設定文字的大小。</pre>想要瞭解這一些 BBCode 的功用,以及實際呈現出來的效果如何,請到 [測試地帶] 板練習發表文章。
以下鳥站長僅針對「字型顏色」「URL」和「Img」這三個語法作詳細的講解。
因為這三個語法是最基本、也是最常使用到的語法,只要您學會這三個語法,其他語法絕對難不倒您!



<hr>字型顏色

本論壇的預設字型顏色為黑色,整篇文章的字型顏色都是黑的,未免有些單調。
例如您打算發表這樣的一篇文章:

圖檔

如果您想要改變文章的顏色,請您在輸入文章後,將想要變色的字句反白,
然後按一下字型顏色下拉式選單,或是點一下顏色棒,選擇您喜歡的顏色。
這樣就能夠將 BBCode 的字型顏色語法「color」插入到文章,改變文章的顏色。

例如,您想要將文章中的「今天天氣真好」這六個字變成紅色。
您只要將「今天天氣真好」這六個字反白:

圖檔

然後按一下字型顏色下拉式選單,設定為紅色。
或是在顏色棒中找到紅色的部位,然後點一下,您輸入的文章就會變成這樣:

圖檔

您會發現, BBCode 的 color 語法已經插入到文章內了。
這一個 color 語法是由 [color=顏色] 和 <font color="#FF0000">[/color]</font> 這二個代碼組合而成。
因為我是要將「今天天氣真好」這六個字變成紅色,
所以 [color=顏色] 和 <font color="#FF0000">[/color]</font> 這二個代碼,必須各別置於「今天天氣真好」的前後,
這樣 color 語法才會針對「今天天氣真好」這六個字產生效果。
簡單的說,就是您必須將更改字型顏色的字句,包在 [color=顏色] 和 <font color="#FF0000">[/color]</font> 這二個代碼中間。

值得一提的是,並不是只有 color 語法如此,其他 BBCode 語法也是如此喲!
這就是 BBCode 語法的基本概念,也是決定 BBCode 能不能產生效果的關鍵。
每一個 BBCode 語法都是由 [語法][/語法] 這二個代碼組合而成。
如果您要使用 BBCode 影響文章中的某一部分,就要讓「被影響的那一部分」,包在 [語法][/語法] 這二個代碼中間。

最後,請您按下預覽,預先看看即將發表出來的文章會是什麼樣子:

圖檔

改變字型顏色就是這麼簡單。
改變字型顏色如此,改變字型大小、粗體字、斜體字....等,也是如此。
只要您確實掌握到「讓被影響的那一部分,包在 [語法][/語法] 這二個代碼中間」的原則,不管是什麼 BBCode ,都難不倒您!



<hr>Img

如果您想要在文章中展示一張圖像,也就是俗稱的「貼圖」,請您輸入圖像網址:

圖檔

然後,請將圖像網址反白:

圖檔

最後,按下 圖檔 按鈕,您輸入的文章就會變成這樣:

圖檔

您會發現,圖像網址前後,已經被自動插入了 圖檔%20和%20[/img] 這二個 Img 語法的代碼。
請您按下預覽,預先看看即將發表出來的文章會是什麼樣子:

圖檔

如何?圖像順利的被您貼在文章當中了吧!
只要確實將 [語法][/語法] 這二個代碼放到適合的位置, BBCode 該語法的效果就能夠呈現出來。



<hr>URL

使用方法有三種。
  • 將您輸入的網址轉成連結。例如:
    http://您輸入的網址
    您輸入的網址,就是一個連結,點擊這一個網址,就可以造訪這一個網站。
  • 將您輸入的文字或是圖像,具有連結效果,連結到任何網站。例如:
    您輸入的文字
    點擊您輸入的文字,就可以連結到您輸入的網址,造訪這一個網站。
  • 當然,您也可以這樣:
    您張貼的圖像
    點擊您張貼的圖像,就可以連結到您輸入的網址,造訪這一個網站。
<hr>對於新手來說,使用 BBCode 最常犯的錯誤有以下二點,請注意:
  • 語法放錯位置
    按下 BBCode 按鈕後,語法是自動插入到文章的最後面,而不是插入到滑鼠游標停留的位置。
    這一點很多人常常忽略,導致已經插入了語法,卻因為放錯了位置,使得 BBCode 語法失效。
    所以最好是先將要改變的字句反白,再按下該語法,才不會失誤。
    關於這一點,在我講解「字型顏色」的時候,已經有詳細的說明,請再回頭看一下吧!

  • 少了 [/語法] 代碼
    只要是屬於按鈕類型的 BBCode ,
    在您按了一次之後,都必須再按一次,才會插入具有關閉效果的 [/語法] 代碼,這樣的語法才算完整,也才能夠生效。
    所以,在您發表文章前,請務必檢視一下文章中的 BBCode 語法是否完整。
    最好的方法,就是看一下 BBCode 按鈕中,是否多出了一個 * 號,
    有的話,表示您尚未插入這一個語法的關閉代碼,請按一下。
    再不然,就是按一下右邊的關閉標籤,自動為文章中尚未完整的語法加上關閉代碼。
BBCode 一點也不難,只要多練習幾次,相信您一定能夠駕輕就熟。
如果還有不懂的地方,歡迎到 [論壇完全手冊] 板發問。
2007.10.1 攝於日本京都錦市場 :xd:
圖檔

主題已鎖定

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 5 位訪客