壹、部落格編輯與應用

2 部落格內容管理
2.4 文章發佈的進階應用

上面幾個章節，我們學會了基本的文章發佈與修改的方法，接下來我們要學點更進階的應用，讓網誌內容更豐富。

2.4.1 文字編輯區簡介

進入正題之前，先就文字編輯區作個簡單的介紹。

文字編輯區的工作列，基本功能與大家常用的Word類似，在此不多贅述，僅介紹以下幾個功能：

• 插入功能：這裡所謂的「插入功能」，是指使用者只要點選這幾個圖示，就可以簡單的在文章中加入抄連結、檔案、圖片、影音檔案等，實際的操作方式，我們稍後會詳細解說。
  
  
• 全螢幕功能：使用者點選這個圖示之後，文字編輯區會放大到整個網頁，若要恢復原狀，只要再點一下圖示即可。
  
  
• 原始碼編輯功能：這個功能是方便進階使用者的，點選這個圖示，會跳出如下圖的視窗，讓進階使用者以HTML(寫網頁的一種程式語言)方式編輯文章。
  
  
  
  
• 插入「閱讀全文」分隔功能：這個功能較為特殊，按下它，在編輯區會出現一條虛線：
  
  在虛線以上的部分，會變成所謂的「前言」，虛線以下的部分，會變成所謂的「延伸內文」區塊。
  在網誌頁面的呈現，虛線上方的「前言」內容，會出現在網誌頁面上，而虛線下「延伸內文」這部分的內容，必須按下「閱讀全文」後才能看到。
  
  

2.4.2 在文章中加入網站的連結

發表文章時，若要在文字上加上網站的連結，作法很簡單，只要幾個步驟就能完成。

1. 在文字編輯區中編寫你的文章
2. 複製你要連結的網址
3. 用滑鼠來選取你要連結的文字
4. 按下工具列上的圖示
   
   
5. 跳出「插入連結」的對話視窗
   
   在這視窗中，有三個需要填寫的地方
   
   • Link URL：輸入或貼上剛才複製的網址
   • Target：選擇按下連結後瀏覽器視窗的開啟方式，有兩個選項可以選，一個是「在同一視窗開啟」(open link in the same window)，另一個選項是「在新視窗開啟」(open link in a new winddow)。
   • Title：連結的名稱，可以幫這個連結取個名字，當然，你也可不輸入。

完成填寫後，按下「Insert」鈕後，繼續完成發表文章的動作，就可以去網誌上看看結果：

如果，想要把網址連結從文字拿掉，該如何做呢？

1. 用滑鼠將加上連結的文字反白
2. 按下工具列上的圖示，文字自動恢復成沒有連結的樣子。

2.4.3 在文章中插入圖片

想要發表一篇圖文並茂的文章嗎？很簡單，只要學會以下兩種方法，就可以輕易地在文章上插入圖片。

• 方法一：使用「插入圖片連結」方式

插入圖片連結的方法很簡單，跟上述的插入網站的連結一樣簡單。我們只要知道圖片的連結網址，就可以如法炮製，以下步驟就教你如何完成：

1. 先找出圖片的連結網址，以IE瀏覽器來說，先將滑鼠移至你想插入的圖片上，按下滑鼠右鍵，選擇「內容」
   
   
2. 此時會跳出圖片訊息視窗，將上面圖片的網址複製起來。
   
   
3. 進入發表文章的區塊，將游標移到想要插入圖片的位置，按下圖示
   
   
4. 在跳出的「插入圖片」對話視窗上輸入剛剛複製的圖片網址
   
   這個視窗裡的幾個欄位，作用如下：
   
   • Image URL：輸入圖片的連結網址
   • Image description：輸入對圖片的敘述，可不輸入
   • Alignment：圖片的位置，可以自行調整圖片在文章中的位置，預設是不做任何設定
   • Dimensions：圖片尺寸，不需填寫，系統會自動判斷圖片大小
   • Border：圖片邊框，輸入數字，圖片會顯示出邊框
   • Vertical space：圖片距離文章邊界的垂直間距
   • Horizontal space：圖片距離文章邊界的水平間距
   繼續完成發佈文章的動作，你就可以到網誌頁面上看看成果。
   


• 方法二：使用「插入圖片檔案」方式

插入圖片檔案的方法也不是很難，跟著以下步驟，你也可以輕鬆完成：

1. 在文字編輯區中編寫你的文章
   
2. 將滑鼠游標移到你想要插入圖片的位置，點選圖示，此時會跳出訊息視窗，點選資料夾，準備上傳圖片。
   
   
3. 進入資料夾後，點選「上傳到這裡」的連結，會出現圖片上傳區塊，接著點選上傳區塊中的「瀏覽」，選擇要上傳的圖片之後，按下「新增」。
   
   
4. 圖片成功上傳之後，會出現如下圖所示的縮圖：
   
   縮圖右邊會有三個選項
   
   • 新增檔案 (原圖)：會將原本的圖片，不改變大小，插入在文章內（注意：圖片的尺寸不要太大，否則可能會將網誌的版面移位）
   • 新增檔案預覽 (小圖)：會插入一張含有連結的小圖，發表在網誌上後，按下圖片，可以連結到原始圖片。
   • 新增檔案預覽 (中圖)：會插入一張含有連結的中圖，發表在網誌上後，按下圖片，可以連結到原始圖片。
   點選你想要插入的圖片大小。
   
5. 系統會自動跳回到文字編輯區，你想要放置的圖片，也會跟著出現。
   
   繼續完成發佈文章的動作，你就可以到網誌頁面上看看成果。
   
   

2.4.4 在文章中插入檔案

有時候想在網誌文章上，放幾個重要的文件檔案讓其他人下載，該如何做？文章中插入文件檔案的方法與插入圖片檔案的方式類似，請跟著以下步驟來操作：

1. 在文字編輯區中編寫你的文章
2. 將滑鼠游標移到你想要插入檔案的位置，點選圖示，此時會跳出跟插入圖片一樣的訊息視窗。
   
   
3. 進入資料夾後，點選「上傳到這裡」的連結，會出現圖片上傳區塊，接著點選上傳區塊中的「瀏覽」，選擇要上傳的圖片之後，按下「新增」。
   
   
4. 檔案上傳成功之後，會出現如下圖的縮圖：
   
   
   點選縮圖右邊的「新增檔案 (原圖)」插入文件檔案
   
   
5. 系統會自動跳回到文字編輯區，此時你會看到編輯區出現文件檔案的連結。
   
6. 繼續完成發佈文章的動作，即可到網誌主頁看看成果。
   
   

2.4.5 在文章中插入影音檔案

在文章中插入影音檔案的方法跟插入圖片的方法類似，可以使用「網誌內部檔案插入」或是「利用外部檔案連結」這兩種方法。

從網誌內部檔案插入的方法很簡單，作法跟前面「插入檔案」與「插入圖片」的方法一樣，在此我們以mp3檔案與flv影片檔來做示範。

1. 在文字編輯區中編寫你的文章
2. 將滑鼠游標移到你想要插入影音檔案的位置，接著點選圖示，其他步驟與「插入檔案」與「插入圖片」的方法相同，將檔案上傳。
3. 檔案上傳成功之後，會出現如下圖的縮圖：
   
   只要是mp3及flv檔，都可以看到會有個「插入播放器」的連結
   
   
   
4. 按下「插入播放器」之後，會跳回文字編輯畫面，此時會看到編輯區中出現虛線框
   
   在這裡需注意一點：插入flv影片檔後，預設的影片大小為320X240（含高20像素的播放控制列），但一般MPEG1的影片大小就是320X240了，所以若未更改影片的大小設定，原始影片會稍微被縮小。
   若你一定要完整看到原始的影片大小，或者你的影片大小比320X240還要大（例如640X480等），我們就必須自己手動來調整一下影片的大小了。
   
   調整影片大小
   
   假如您的影片大小原本為320X240，因為播放控制列的高度為20，所以影片大小就調成320X260即可。
   
   
5. 修改完影片大小後，繼續完成發佈文章的動作，回到網誌頁面，就可以看到影音檔案順利加上去。
   
   

學會插入影音檔案的方式之後，接下來我們要來學習「利用外部連結」的方法，為文章加上影音檔案。

• 利用外部連結插入影音檔
  

我們利用目前最大的影片分享網站YouTube來做插入外部影片的示範：

1. 從YouTube網頁上找到影片的網址，如下圖所示：
   
   將網址複製起來備用
   
2. 在文字編輯區中編寫你的文章，將滑鼠游標移到你想要插入影音檔案的位置，接著點選圖示
   
   將網址貼上，勾選你的影片來源，這裡我們將「YouTube」打勾
   
   
3. 按下「Insert」後，繼續完成發佈文章的動作，回到網誌頁面，就可以看到YouTube的影音檔案順利加上去。
   
   

從外部連結插入MP3檔案也是很方便

1. 找到網頁上MP3檔案的連結網址，以IE瀏覽器來說，先將滑鼠移至MP3的連結上，按下滑鼠右鍵，選擇「內容」，將MP3的網址複製起來。
   
   
2. 在文字編輯區中編寫你的文章，將滑鼠游標移到你想要插入影音檔案的位置，接著點選圖示。
   
   將網址貼上，再按下「Insert」
3. 繼續完成發佈文章的動作，回到網誌頁面，就可以看看成果。
   
   

2.4.6 在文章中插入表情符號

要在文章中加入表情符號，作法很簡單

1. 在文字編輯區中編寫你的文章
2. 將滑鼠移到你要插入表情符號的位置，點選圖示
   
3. 跳出「Insert emotion」的視窗，選擇你要加入的表情即可
   
   回到文字編輯區，你可以看到表情符號已經加上去了
   
4. 繼續完成發表文章的動作，到網誌頁面上看看成果。