設計相關技術問題
- 2015Aug.21
- HTML 編輯器常用功能
一般我們想要新增或編輯網站中的文章，都會用到 HTML 編輯器，我們可以在 Word 軟體編排好後，將文章複製貼上至 HTML 編輯器內(如下圖)。
另外也可以直接在 HTML 編輯器中編輯，以下就來介紹編輯器常用的功能~
一、 文字編輯
輸入文字內容後，可以將文字反白，進行字體的樣式的設定，設定方式與我們常用的 Word 文字編輯軟體類似。
如下圖框選部分：設定文字「粗體、斜體、底線」、文章內容編號、文章對落對齊位置、設定字體樣式與大小、設定字體的顏色與背景色。
二、 插入圖片
若要在文章內容插入圖片，點選下圖框選處
點選後會跳出功能視窗，可進行上傳圖片的動作，可依欲上傳圖片位置進行不同操作，如下：
1. 影像資訊：
若圖片已儲存於網站伺服器端，可點選「瀏覽伺服器端」，找出欲上傳之圖片，下方可設定圖片的樣式(寬度、高度、圖片邊框、水平與垂直距離、對齊位置)
2.超連結：
若有特殊想要將圖片設定超連結，讓瀏覽者點選圖片會跳到指定頁面，才會設定此功能。
3.上傳：
此功能最常使用，因大部分圖片會存在電腦資料夾，點選「選擇檔案」，即可從電腦資料夾中選擇想要上傳的圖片，再按「上傳至伺服器」按鈕，就完成了!
4. 進階：
這部分通常就少使用，除非想要將圖片設定特別的樣式與更詳細的圖片資訊才會需要用到，這部分的設定須了解基本網頁設計排版技巧，才能更流暢地操作喔~
最後，若圖片已上傳完畢，記得按確定，就大功告成了!!
三、 插入超連結
文章內若要加入超連結，先決定超連結的呈現方式，再點如下圖框選處的按鈕：
呈現方式有：直接顯示連結、點入指定文字
1. 直接顯示連結(如下圖)：直接點「插入連結」即可
2. 點入指定文字，才會連結到指定頁面(如下圖)：先選取文字，再按「插入連結」
再來就要說明插入超連結的方法~
下圖左為超連結圖，下圖右為取消連結符號。
點選圖示後，開始設定超連結，操作方法如下：
1. 超連結資訊：在 URL 地方輸入欲連結位置。
2. 目標：選取超連結目標，就是點入超連結後，網址頁面的呈現位置。
一般會用在「新空白視窗開啟 New Window(_blank)」、「原視窗開啟 Same Window(_self)，若不設定也會呈現此效果」]
3.上傳：選取上傳檔案，按此連結後即跳出檔案
4. 進階：這部分也較少用到，如需特別設定才會使用!
四、 插入表格
有時候也會需要在自己的網站中列出用表格排版的資訊，這時候就可以點下圖框選處來新增表格喔!
1. 表格屬性：
點入後，開始進行表格的設定，根據需求來設定表格列數與欄數，也可以設定表格的寬度與高度；另外表格內若有標題部分，也可以在此設定，例如：標題位置在第一列，他就會自動將表格的第一列文字設定為粗體置中……。
再來，也可以統一設定表格內文字對齊的部分：靠左對齊、置中、靠右對齊。
2. 進階：
一般從表格屬性就可以設定好自己想要的表格樣式，而進階設定的部分也是需要了解一些基本的網頁設計技巧才能操作得更好喔~
五、利用原始碼 插入 youtube 影片
除了使用文字編輯器新增或修改文章內容以外，想要在自己的網站放上影片要怎麼做呢?
若想要在自己的網站內放自己所拍攝的影片，可以先將影片上傳至 YouTube，再將影片嵌入編輯器內。可以依照下列說明步驟…
(一) 在 YouTube 上傳影片
1. 在 YouTube 網站點「上傳」
2. 登入 Google 帳號
3. 選取要上傳的影片，也可以選擇此影片是要「公開」、「非公開」、「私人」
4. 按一下 「發佈」可將公開影片上傳到 YouTube。如果將影片的隱私設定設成 「私人」或「非公開」，可以按「完成」來完成上傳，或是按「分享」私下分享影片。
p.s. 更詳細的操作說明可以參照 YouTube 網站 – 上傳影片說明
(二) 在編輯器嵌入 YouTube 影片
1. 按一下影片下方的「分享」連結
.jpg)
2. 點選「嵌入」連結，並複製展開方塊中的程式碼
3. 將程式碼貼入編輯器內「原始碼」中，即可將影片嵌入您的網站
p.s. 嵌入影片前，請注意該影片是否屬於版權物，會不會有版權的問題喔~
以上就是 HTML 編輯器常用功能，如有其他問題可以歡迎與我們連絡~
