輔助輸入工具

5. 編輯工具
10 /28 2014
在文章輸入欄的上方,排列著各種工具的圖像。
在此就裝飾文字的工具做說明。

5-1.jpg 

編輯工具的基本使用方法

以下就常用的文章編輯工具做說明
1. 將文字部分用滑鼠點選反白

5-2.jpg 

2. 點選工具的圖像後,在指定位置將出現HTML碼

5-3.jpg 

各工具的說明

5-4.jpg 插入標籤: < span style="color:#3366FF" >文字< /span > 
可改變文字的顏色。

5-5.jpg 插入標籤: < span style="font-size:large" >文字< /span >
可將字體變大。

5-6.jpg 插入標籤: < span-style="front-size:x-small" >文字< /span >
可將字體稍微變大。

5-7.jpg 插入標籤: < span style="font-size:x-small" >文字< /span >
可將字體變小。

5-8.jpg 插入標籤: < strong >文字< /strong >
可將字體變粗體字。

5-9.jpg插入標籤: < i> 文字< /i > 
可將字體變斜體字。

5-10.jpg 插入標籤: < s >文字< /s >
可在文字加上刪除線。

5-11.jpg 插入標籤: < u >文字< /u >
可在文字下方加底線。

5-12.jpg 插入標籤: < blockquote >< p >引用文< /p >< /blockquote >
此工具可用在當文章中的某些文字是引用他處時,在文字周圍將會被框線表示。

從其他網頁中所複製的文章部分,或是引用雜誌和書籍等文章做介紹時,可善加利用此工具。


5-13.jpg 插入標籤: < hr size="1" >
可在指定的文字上方加上水平線。

線體的寬度自動設定為「1」,若手動輸入越大數字則線體將可隨之變粗。

5-14.jpg 上傳檔案或是將檔案插入文章輸入欄中,點選此工具圖像使其視窗跳出。

5-15.jpg 插入標籤: < a href="URL"target="_blank" > 文章連結 < /a >

將連結貼至文章中。
在欲貼上連結的文章部分為反白的狀態下,點選此工具圖像開啟輸入視窗。

5-16.jpg 

輸入欲連結網址的URL。
如指定另外開啟視窗做連結,則會追加[target="_blank"]於標籤中。

5-17.jpg 搜尋引擎、連結Google搜尋結果

將文字先點選反白後,點選此工具圖像,所反白文字即可成為搜尋關鍵字的連結。
點選工具圖像後,也可直接輸入關鍵字。

5-19.jpg 點選此實體的圖像後即可輸入的「<」和「>」符號。
畫面上將以半形不等號的形式顯示。
若直接輸入半形不等號仍會被視為HTML標籤,由於將無法顯示在瀏覽器上,因此需要將之轉換為實體參照(文字列)。
若直接輸入半形不等號做為表情符號時,也會被視為HTML標籤,因此請點選此工具圖像輸入。

5-20.jpg 可在文章中插入表情符號。

5-21.jpg 可在文章中插入在繪畫編輯工具中所作成的的繪畫。
詳細請參照此

5-22.jpg 可在文章中插入FC2影音的影片。
詳細請參照此

5-23.jpg 可在書寫文章時伸縮調整輸入欄的寬度。
點選↓可向下延伸加寬,點選↑則可縮小。

5-24.jpg








続きを読む

WYSIWYG文章編輯的使用方法

5. 編輯工具
10 /28 2014
 WYSIWYG文章編輯

8-1.jpg 
WYSIWYG為What You See Is What You Get的縮寫。意即「您所得到即是您所看到的」。
在文章編輯畫面中雖然有「即時預覽」的功能,但
WYSIWYG文章編輯則是直接在輸入的視窗中進行即時預覽。
WYSIWYG文章編輯在啟動時,即時預覽功能將不會運作。


推薦環境

WYSIWYG文章編輯在正常運作下,將形成以下環境。另外由於多功能的關係,根據收訊環境和PC的性能,有可能無法順暢運作。

Windows IE, Sleipnir, Firefox broadband
MAC OSX Firefox 

WYSIWYG的開啟/關閉方法

使用WYSIWYG文章編輯時,開啟部落格文章編輯的畫面,在內文輸入欄的上方所排列的圖像中右側點選 39
關閉WYSIWYG文章編輯時點選此時是灰色的39


WYSIWYG文章編輯               
 工具                                                說明

8-3.jpg 來源                           在別的視窗中顯示來源
8-4.jpg 預覽                                     在別的視窗中預覽
8-5.jpg 剪下                                     剪下所選取的文字列和圖片
8-6.jpg 複製                                     複製所選取的文字列和圖片
8-7.jpg 貼上                                     貼上所剪下或複製的文字列和圖片
8-8.jpg 貼上文字                             僅貼上文字列的文字(文字的大小和顏色將被重新設定)
8-9.jpg 貼上Word                            直接貼上MicrosoftWord的文章
8-10.jpg 復原                                     取消上一個動作
8-11.jpg 重作                                     再度執行上一個取消的動作
8-12.jpg 搜尋                                     搜尋文字列
8-13.jpg 替換                                     將搜尋的文字列替換成其他文字列
8-14.jpg 全部選擇                             選擇所有在編輯中的資料
8-15.jpg消除編排                              重設文字顏色、文字尺寸等
8-16.jpg 文字顏色                             指定所選文字列的顏色。從另開視窗的調色盤中選擇文字顏色。<span style="color: rgb(r, g, b);">文字列</span>
8-17.jpg 背景顏色                             指定所選文字列的背景顏色。 從另開視窗的調色盤中選擇背景顏色。<span style="background-color: rgb(128, 128, 128);">文字列</span>
8-18.jpg 粗體字                                 將所選文字列變換成粗體字。<span style="font-weight: bold;">文字列</span>
8-19.jpg 斜體字                                 將所選文字列變換成斜體字。 <span style="font-style: italic;">I am</span>                           
8-20.jpg 底線                                     將所選文字列加上底線。<span style="text-decoration: underline;">文字列</span>
8-21.jpg 刪除線                                 將所選文字列加上刪除線。<span style="line-through;">文字列</span>
8-22.jpg 下標                                     將所選文字列縮小顯示於右下方。<sub>文字列</sub>
8-23.jpg 上標                                     將所選文字列縮小顯示於右上方。<sup>文字列</sup>
8-24.jpg 編號                                     在行首加上編號將文字項目化。點選後將會插入編號「1.」,之後按Enter鍵繼續接下來的編號。<ol> <li>文字列</li> <li>文字列</li> <li>文字列</li> </ol>
8-25.jpg 追加/刪除項目                       在行首加上中黑點號將文字項目化。點選後將會插入「・」,之後按Enter鍵繼續接下來的項目。<ul> <li>文字列</li> <li>文字列</li> <li>文字列</li> </ul>
8-26.jpg 移除縮排                             將縮排解除
8-27.jpg 縮排                                     將文字向右縮排 <div style="margin-left: 40px;">文字列</div>
8-28.jpg 靠左                                     將所選段落靠左對齊 <div style="margin-left: 40px;">文字列</div>
8-29.jpg 置中                                     將所選段落置中 <div style="text-align: center;">文字列</div>
8-30.jpg 靠右                                     將所選段落靠右對齊 <div style="text-align: right;">文字列</div>
8-31.jpg 兩端對齊                             將所選段落的兩端對齊 <div style="text-align: justify;">文字列</div>
8-32.jpg 插入/編輯連結                       將所選的文字加入連結。點選後會出現連結URL的對話窗。選擇欲連結的URL、http://,將之 插入空格中。若要改變來源請至選擇設定。
8-33.jpg 刪除連結                              將有設定連結的文<a href="(URL)">網站名</a>字列選取後,點選此工具圖像將連結移除。
8-34.jpg 插入/編輯目標                       點選後將開啟目標名稱的對話窗。任意出入半形英數字的文字列後,可插入目標。
8-35.jpg字型         指定所選文字列的字型
8-36.jpg大小                  指定所選文字的大小
8-37.jpg 插入/編輯圖片                      將圖片插入文章中。如在URL的欄位中無法顯示圖片網址,而無法顯示圖片時,請輸入顯示的文字列。可指定寬度和高度、框線和周圍的餘白、縮行等。<a target="_blank" href="(圖片URL)"><img border="0" alt="(代替TEXT)" src="(圖片URL)" /><img width="21" height="21" src="skins/default/toolbar/bgcolor.gif" alt="" />
8-38.jpg 插入/編輯表格                         插入表格。在行列中分別輸入數字,可指定表格的寬度和高度、框線和網底的大小(寬度)、表格內的餘白和間隔等。在標題中輸入文字列後,在表格的上方即會顯示標題。
8-39.jpg 水平線                                      插入水平線
8-40.jpg 表情符號                                  開啟預先設定好的表情符號視窗。選擇後即可插入。
8-41.jpg 插入特殊文字                          可顯示特殊符號和文字等。點選後在視窗內選擇欲插入的文字。
8-42.jpg 小幫手                                      對上述使用需要詳細的解說時,請參照。連結後所顯示為英文網頁。



 

















 

続きを読む

blogmanualtw

歡迎來到FC2部落格!