[97] [教學] 文章排版教學

資管系大二下學期選修課程
授課教授:XO

版主: b80203, ghost3401, XO, maa, kelly19881227

分享到: Facebook

[97] [教學] 文章排版教學

文章DanielGau » 週四 5月 21, 2009 12:07 am

若在完整編輯畫面可以直接搭配編輯區上方 Toolbar 按鍵,若無就手動輸入吧
圖檔

(以下為了解說,文中提到中括號括起來的 Tag 時,為了避免被真的觸發該 Tag 的動作,左邊中括號之後,多加了一個空白字元,實際使用時是
不可以多那個空白字元的。)


  1. 首先最簡單的文字編輯 B I u size 我就不加以說明了。
  2. [ quote] 是「引用」的意思,若未加任何參數直接使用如 [ quote]我是美女[/quote] 會顯示
    我是美女


    若加上參數如 [ quote= "圩君"]我是美女[/quote] 會顯示
    圩君 寫:我是美女

    (註:原來上方簡單的「引言回覆」變成為「圩君 寫到」)
  3. 再來是 [ Code],使用「程式碼」的時候,許多空格的排版會跑掉,為了避免這個情形可以 [ Code] 標籤 將其包住: [ code]程式內容[/code]
    除了可以保有原對齊排版之外,也能對程式語法透過顏色 來協助閱讀。

    以 JAVA 的 Hello World 為例,若沒有使用 [ Code] 標籤,程式會呈現為 ...

    public class Hello
    {
    public static void main(String[] args)
    {
    System.out.println("Hello, world!");
    }
    }


    但是使用 [ Code] 加註後如下,若再點取 Code [syntax off] 成為 Code [syntax on] ,還可以開啟前述顏色輔助呈現的功能。
    你可以試著在下面點選一下 Code [syntax off] ...

    代碼: 選擇全部
    public class Hello
    {
        public static void main(String[] args)
        {
            System.out.println("Hello, world!");
        }
    }

  4. 接下來是 [ list],若純用 [ list]

    [ list]我們清新
    我們健康
    我們專業 [ /list]

    顯示如下
      我們清新
      我們健康
      我們專業

    這實在太初階了,我們一定要更進一步啊!
    加上最基本圓圈圈項目符號 (Bullet points) 用法如下

    [ list ][ *] 我們清新
    [ *] 我們健康
    [ *] 我們專業[ /list]

    顯示為
    • 我們清新
    • 我們健康
    • 我們專業

    若項目符號要改用數字來編序,則加上參數 =1 ,如下
    [ list=1][ *] 我們清新[ *] 我們健康[ *] 我們專業[ /list]

    或者將每個項目將以斷行

    [ list=1][ *] 我們清新
    [ *] 我們健康
    [ *] 我們專業[ /list]

    並不會影響排版結果,皆會顯示為...

    1. 我們清新
    2. 我們健康
    3. 我們專業

    同理以 abc... 加註序碼編排則可以加上 =a ,顯示如下

    1. 我們清新
    2. 我們健康
    3. 我們專業
  5. [img]圖片網址URL[/img] 可以讓你在文章當中夾圖。
  6. 最簡單顯示網址的方式:[url]http://eoffice.im.fju.edu.tw/phpbb/[/url]
    若想要使用文字標題呈現超連結:[ url=http://eoffice.im.fju.edu.tw/]E-office[ /url]
最後由 DanielGau 於 週三 6月 17, 2009 11:39 pm 編輯,總共編輯了 1 次。
DanielGau
E-Office 小組
 
文章: 738
註冊時間: 週二 8月 29, 2006 10:08 pm

Re:[97] [教學] 文章排版教學

文章XO » 週六 2月 27, 2010 10:23 pm

比照: DC 課程專版 使用說明 請在文章主題前加註 [98] 代表 98 學年度、[97] 代表 97 學年度、... 餘類推!

若要在文章中穿插附圖,可以將擷圖以夾檔方式上傳,記得圖檔取個比較不容易跟人家衝突的名字,好比說
前面冠上自己的 ID 例如我的 ID 是 XO,我上傳ㄧ個 PNG 圖檔格式的大頭貼,就可以取個 XO-Avatar.png

將圖檔以上傳附加檔方式夾檔儲存,之後滑鼠移到 PO 文圖片夾檔上方,R-click 取得該上傳圖檔的 URL,例如本例取得的 URL 為:
download/file.php?id=3379
然後 ...

將整個 URL 用 [img]...[/img] 標籤包夾起來... 下面就是一個實例 (可以按文章右上角那個「引言」來觀察)。
我都是 URL 字串整個點選起來,然後按下編輯畫面上右上角的那鍋 [Img] 按鈕。

標記成:[ img]http://eoffice.im.fju.edu.tw/phpbb/download/file.php?id=3379[/img] 就可以如下內嵌圖片在 PO 文裡 ...

圖檔
附加檔案
XO-Avatar.png
XO's Avatar
(323.45 KiB) 被下載 3 次
eXtra Old 的是我「不是酒」哦!
제 이름은 오조휘 입니다

臉書裡依舊是 Extra.Old: http://www.facebook.com/extra.old
頭像
XO
資管系教師
 
文章: 5378
註冊時間: 週二 4月 27, 2004 12:20 pm
來自: CQ Inc.

Re:[97] [教學] 文章排版教學

文章XO » 週五 10月 26, 2012 2:50 pm

頂一下這篇本站 PO 武功祕笈...
eXtra Old 的是我「不是酒」哦!
제 이름은 오조휘 입니다

臉書裡依舊是 Extra.Old: http://www.facebook.com/extra.old
頭像
XO
資管系教師
 
文章: 5378
註冊時間: 週二 4月 27, 2004 12:20 pm
來自: CQ Inc.

Re: [97] [教學] 文章排版教學

文章XO » 週二 9月 11, 2018 1:06 pm

或是用前助教所提供的下面這一個方法也可以:
(千萬不要用論壇外的任何圖庫儲存空間分享圖片,時間久了會有失聯之虞!)

[101]文章圖片夾檔無法顯示暫時解決方案
eXtra Old 的是我「不是酒」哦!
제 이름은 오조휘 입니다

臉書裡依舊是 Extra.Old: http://www.facebook.com/extra.old
頭像
XO
資管系教師
 
文章: 5378
註冊時間: 週二 4月 27, 2004 12:20 pm
來自: CQ Inc.


回到 Web程式設計

誰在線上

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

cron