所見即所得 --

FCKeditor HTML編輯器

此編輯器可能是目前使用率最高的HTML內容編輯器，因為其操作直覺性高，學習門檻低，上手容易，基本上不太需要閱讀操作手冊，便可以直接上手。不過如果要達到更進階的效果，可能需要稍微有點網頁設計基礎的人員(例如：CSS或是Javascript等技術)。

基本上於PowerOn上的編輯器所開出來的功能，幾乎是全開，為的是讓管理者方便操作(支援CSS和Javascript的原始碼撰寫)，但是其實很多功能在大部份的時候都用不到，常用到的基礎功能其實只要夠熟悉，相信使用上就不會有太多問題。現在依序介紹各區塊常用的功能以及範例，如果您覺得已經很熟習，其實是可以跳過本篇文章的喔！

FCKeditor的全貌：


在內容建置區域按下滑鼠右鍵也可以直接修改所選的物件(例如圖片、表格、連結等等)



顯示原始碼：
有時候我們需要比較進階的需求，或是奇怪的原因導致格式跑掉了，可能需要直接修改裡面HTML，這時候就需要按下「原始碼」這個功能按鈕，此時編輯器就會變成以下畫面：


預覽編輯的效果：
當編製好本文後，我們可以按下「預覽」的按鈕，來看看編修後效果。不過要注意的是，後台的編輯和前台的網頁可能會因CSS等設定而顯示狀況有所不同，所以建議還是開啟前台網頁來觀看會比較準確。

預設樣板：
預設樣板點選後，可以選擇幾個排版樣式。點選適合您目前編修的編排方式，然後再加以修改，可以快速完成內容建置。以下為按下「樣版」按鈕的畫面：
 
注意：如果點選「取代原有內容」則目前的編輯內容會被整個取代。


剪下、貼上、復原和重複都是文書處理軟體基本的功能，於此不再贅述。但是要特別說明的是純文字貼上、Word內容的貼上。純文字貼上，就是會將之前所選取複製的內容，不管複製的內容裡面是否有圖片、有樣式的文字(例如文字的大小、或顏色底色等等)，只要是使用純文字貼上，最終那些圖片或是文字的樣式都會不見，只剩下一般單純的文字。而Word內容的貼上，主要是針對Word來的複製內容，因為內容很可能有許多網際網路瀏覽器不支援的格式，或是某些格式是FCKeditor不支援的格式，為避免無法預知的錯誤，所以最好所有經由Word而來的內容，都要使用「自Word貼上」這個功能來清除多餘格式，一方面也會讓內容的原始碼更短更乾淨，也比較不會造成網頁下載的頻寬浪費以及編輯的困難。


尋找、取代、全選也是一般文書處理軟體的基本功能，使用上也都差不多。特別要注意的是「清除格式」這個功能。很多時候我們不小心將某行文字做了太多效果，想要重新修改該行文字的樣式，這時候就必須要先清除該行文字的格式。做法便是先選取，然後按下「清除格式」，便會回復到純文字的樣子。不過有時候會有清除格式失敗的情況，這時候就要打開原始碼來修改了。(當然也可以告訴我們來讓我們幫您)

清除格式前：                                                                
NEW*芳香植物精油排毒
清除格式後：                                                                 
NEW*芳香植物精油排毒


以上所有的功能都是為了要製作表單，透過以上這些表單的元素，可以製作各種各式的表單，例如：報名表、問卷、客服表單等等。
大致上必須要注意的是，所有表單元素都必須開始於第一個元素--「表單」。建立好這個元素後再把其他的元素建立在「表單」這個框框內：




 

要學習建立表單，以上的解說是不夠的，其中還要注意的地方很多，包括欄位的命名規則，發送的方式(Post or Get)等等，不過您可以試著建立看看您的表單，然後再與我們連絡，我們可以線上幫您看看您建立的方法是否正確，表單是否可以運作。


粗體、斜體、底線、刪除線、下_標、上^標、

關於清單的使用，建議您可以先將第一項輸入後，選取該行文字，然後按下清單(如果您要數字的請按下編號清單，如果您不需要數字的就可以使用一般的項目清單。然後在該行的最後面按下「Enter」，這樣就可以開始在新的一行輸入第二項。EX:

這是第一項的項目

↓ (選取)

這是第一項的項目

↓ (按下編號清單)

1. 這是第一項的項目

↓ (在第一項最後面按下Enter)

1. 這是第一項的項目
2. 第二項

增加縮排和減少縮排就如同字面意思一樣，整排(行)文字往後退或是往前，此功能於編排樹狀目錄最常用，或是某些內容須表現內文是附屬於某一主題或區塊。
引用文字：先選取要成為引用的字句，然後按下「引用文字」。EX:

“「工欲善其事，必先利其器」

新增DIV標籤：對於熟悉CSS的使用者，使用DIV可能是家常便飯，在建構內容上可以利用DIV標籤加上CSS的運用，變化出很不同的內容編排。


關於CSS可在網路上查到非常豐富的資源。另外可以配合「顯示區塊」的功能來顯示看不到的DIV區塊。



其中要注意的是在IE裡面，文字左右對齊的功能無法使用。須在CSS內定義：
.test　{
　text-align: justify;　/*　Firefox到此即可對齊　*/
　text-justify: distribute;　/*　IE需再加上此行　*/
}


如果您想要某一行文字或是某一張圖在點擊(click)後連結到某一個網頁或是某一個檔案下載，這時候您就必須要使用「超連結」來達成。作法如下：

1. 選取要設定連結的目標(圖或文字都可以)
2. 點選「插入/編輯超連結」的按鈕
3. 輸入網址或選擇檔案：
   
4. 如果要點選後跳出新視窗請切換「目標」頁籤：
   

而移除連結主要是對某個連結設定做取消的動作。可以直接選取該連結，然後按下「移除超連結」的按鈕。例如：
jasonxxx@ms.poweron.com.tw  取消後-> jasonxxx@ms.poweron.com.tw

另外值得一提的是插入/編輯錨點，這個功能是要做同一網頁或不同一個網頁，但要利用卷軸來移到所指定的位置的一種連結方式，簡單來說，點選以下連結，本文會移到上方的「預設樣版」的位置：

按此回到預設樣板


插入/編輯影像圖片
在編輯內容的時候，我們常會用到圖片來輔助內容，所以這個功能很常用到。圖片的來源可以是已經在網路上的某張圖片連結路徑，也可以從您的電腦透過PowerOn的網路檔案管理員上傳，以下畫面分別解說：




插入/編輯Flash
插入Flash可將Flash檔案放在您編排的內容裡。以下圖面說明(崁入youtube影片)：


插入/編輯表格
我們常常會利用表格來規劃我們版面的配置，如果您熟悉CSS也可以用其他方式做到同樣或更好的效果。以下便是我們利用表個來規劃版面的一個範例(邊框設定為0)：

以上範例的網址連結：http://www.iseevision.com/cgi-bin/cstcnt.cgi?lang=zh-tw&cid=760&aid=69
當然您也可以當成一般表格的方式來使用，建立您要的內容。(邊框設定為1)
 

插入水平線
有時候區隔上下兩個區塊，我們也會用「水平線」來分隔，下面就是一個水平線

---

水平線沒有可以設定的參數，但是事實上可以利用CSS的方法來修改他的顏色、粗細、長短等等。

插入表情符號
表情符號可以讓內容更活潑有情感，您可以依據內容的屬性來使用。
        

插入特殊符號


插入分頁符號
當內容太長，列印的時候很可能會被切到，這時候就可以利用分頁符號來規劃頁面在列印的時候分頁的位置，可以避免被切到不該切的地方。但是分頁符號對於一般瀏覽者在瀏覽器上瀏覽並沒有任何影響。


樣式
FCKeditor已經內建幾種文字的樣式，您可以直接指定某行文字來指定所選的樣式。


文字的格式


字體(字型)


文字的大小


文字的顏色
文字的顏色

 
 文字的背景顏色
文字的顏色


編輯視窗最大化
這個功能很常用到，是可以讓編輯視窗最大化的功能。尤其遇到要編輯比較複雜的內容時，將視窗放大到最大可以更方便編輯內容。

最大化後...


顯示區塊
按下此按鈕會顯示DIV的區塊虛線。顯示區塊虛線，可以幫助您編輯所指定的DIV內容設定，主要是輔助前項「新增DIV標籤」功能。