會員專區 | 討論區 | 網站說明 | 廠商合作 | 加入會員 | 常見問題 | 聯絡方式
討論區搜尋 :
   首頁 : 繁體 | 簡體 | Eng
 
內容分類
 
 
熱門快選
 

所見即所得 --

FCKeditor HTML編輯器

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

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

FCKeditor的全貌:


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



由左至右:顯示原始程式碼文件屬性預覽編輯的成果預設樣版

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


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

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



由左至右:剪下(Ctrl+X)複製(Ctrl+C)貼上(Ctrl+V)以純文字貼上貼上來自Word的複製內容復原(Undo)重複(Redo)

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



由左至右:尋找取代全選清除格式

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

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



由左至右:表單核取方塊選項按鈕文字方塊文字區域清單/選單按鈕影像按鈕隱藏欄位

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




 

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



由左至右:文字設定為粗體文字設定為斜體文字設定有底線文字設定為刪除線文字為前面文字的下標文字為前面文字的上標編號清單項目清單減少縮排增加縮排引用文字新增DIV標籤

粗體斜體底線刪除線

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

這是第一項的項目

↓ (選取)

這是第一項的項目

↓ (按下編號清單)
  1. 這是第一項的項目
↓ (在第一項最後面按下Enter)
  1. 這是第一項的項目
  2. 第二項

增加縮排減少縮排就如同字面意思一樣,整排(行)文字往後退或是往前,此功能於編排樹狀目錄最常用,或是某些內容須表現內文是附屬於某一主題或區塊。
EX:
一、內容主題
(一)內容主題一之副主題
1. 內文的其他主題
內容撰寫於此
 

引用文字:先選取要成為引用的字句,然後按下「引用文字」。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

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

按此回到預設樣板



由左至右:插入/編輯影像圖片插入/編輯Flash插入/編輯表格插入水平線插入表情符號插入特殊符號插入分頁符號

插入/編輯影像圖片
在編輯內容的時候,我們常會用到圖片來輔助內容,所以這個功能很常用到。圖片的來源可以是已經在網路上的某張圖片連結路徑,也可以從您的電腦透過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

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


文字的格式


字體(字型)


文字的大小


文字的顏色


 
文字的背景顏色



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

最大化後...


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


  批評指教    
請輸入暱稱(Nick name)
請評分(Score)
1 5
辨識碼(大小寫不拘)
=
留言內容 (如為私密留言,請勾選以下方塊)

目前有 1 個批評指教,列出最近的20筆資料,觀看全部的評論請按此

翰翰
2012-12-24 12:59:35
[ 這是一則私密留言 ]
我要評論
本網站由納喜設計工作室製作‧內文引用之商標或名稱所屬權力為其出處所有‧請勿任意複製本站內容
有任何問題請參考聯絡方式PowerOn百力龍工商服務網PowerOn版型專區