北护网站操作手册.doc

無障礙編輯器(Smart Editor) 操作手冊 一、 網頁編輯器 2 1、 操作介面說明 2 2、 如何做「文字編輯」 4 3、 如何做「文字連結」 7 4、 如何「插入圖檔」 8 5、 如何加入「自製表格」 10 6、 如何去除word格式 14 網頁編輯器 操作介面說明 編號 圖示 功能 說明 1 插入圖檔 可於游標處插入圖檔。 如何插入圖檔。 2 加上連結 先標示文字，再點選此按鈕。可加上文字連結。如何加入連結 3 字體加粗 先標示文字，再點選此按鈕，即可將文字字體加粗。 4 清除格式 點選後，編輯器內所有內容將成為純文字。主要用於去除word格式的資料。 如何純文字化。使用方式參考：如何做文字編輯 5 項目符號 先標示文字，再點選此按鈕，即可文字標號。 字體顏色 先標示文字，選擇文字色彩，即可改變文字色彩。 6 選擇字型 先標示文字，選擇文字字型，即可改變文字字型。 網頁字型(text)：只有英文 中文網頁字型只有細明體，因細明體為「系統字型」在Windows灌好後就有這個字型。其他如文鼎或華康均屬外掛字型，無法在網頁上正常顯示。 7 文字對齊 先標示文字，再點選此按鈕，即可做單行對齊。 8 剪下、貼上、複製 剪下：將資料剪下，即 Ctrl+X 貼上：將資料剪下，即 Ctrl+V 複製：將資料剪下，即 Ctrl+C 9 編輯範圍 在此做圖文排版編輯。如何做文字編輯 10 編輯原始碼 點選此按鈕可進入原始碼的編輯視窗，以html碼編輯網頁 回目錄 [TOP] 如何做「文字編輯」 Word、Excel、PowerPoing等軟體轉貼過來的資料含有不合法的html格式。因此，編輯文字時需先經過一些處理過程。 步驟1 將資料貼入編輯器中 回目錄 [TOP] 步驟2 點選清除格式 「」 回目錄 [TOP] 步驟3 以無礙障編輯器編輯內容(文字色彩、文字編排) 回目錄 [TOP] 如何做「文字連結」 步驟1 選取文字，點選 標示欲加上連結的文字，如下圖： 步驟2 鍵入連結網址。 如：.tw (不含http:// ) 如下圖： 步驟3 選擇視窗開啟模式 Not Set：直接覆蓋本頁(直接在本頁開啟視窗) New Window(_blank)：另外開啟新視窗 步驟4 確認 點選後，即完成設定 回目錄 [TOP] 如何「插入圖檔」 步驟1 載入圖檔 點選後會另外開啟一個SmartEditor圖檔總管的視窗(如步驟2)，挑選到所需的圖後，再點選左下角的確認(Action)鍵。 回目錄 [TOP] 步驟2 上傳圖檔 步驟 動作 操作說明 2.1 新增資料夾 根據單元建立資料夾，分類管理。 系統新增使用者時，也會同時產生一個「個人」的資料夾，每個人可以在自己的檔案總管(根目錄)內自由新增子資料夾。當使用者被刪除時，資料夾的內容也會被刪除。 2.2 瀏覽並上傳圖檔 瀏覽您電腦中的檔案，點「上傳」後，圖片會增加在下方檔案列表。 2.3 載入圖檔 點選檔案名稱即可「載入圖檔」。系統將結束圖檔總管的畫面，回到圖檔設定(上一個畫面)。 回目錄 [TOP] 步驟3 圖片設定 步驟 動作 操作說明 3.1 圖片預覽 從這個地方可以確認所選擇的圖片是否正確 3.2 圖片註解 請打上一行圖片的註解，可便於搜尋引擎(如：Google)的搜尋。 3.3 圖片對齊方式 Left：圖片靠左，文繞圖 Right：圖片靠右，文繞圖 Absolute Middle：圖片居中，沒有文繞圖 3.4 確認 點選「確認」(Action)鍵，完成圖片插入。 回目錄 [TOP] 如何加入「自製表格」 在無障礙網站的規則中，表格必須符合下列規定，才能通過無障礙檢測： 要在table標籤中加入”summary”屬性，對表格做「摘要說明」。 表格的寬度設定，必須用相對單位(%)，不可用絕對單位(pixel)。 表格若為「資料表格」(非排版用表格)，其表頭(即欄位說明)必須將td標籤改為th 更多相關資料請參閱無障礙網站 .tw/doc2.jsp#S5 由於表格的規則過於複雜，無法使用無障礙編輯器完成，如有需要，請以Dreamweaver製作，說明如下： 請依下列步驟於Dreamweaver上製作表格，再將原始碼貼入Smart Editor： (請自習Dreamweaver的基本操作，本單元將略過基本操作的部份。) 步驟1 先清除Dreamweaver中的所有原始碼。如下圖： 回目錄 [TOP] 步驟2 繪製您所需要的表格，設定其欄數及列數。如下圖： 注意：表格寬度不可用絕對單