教育部技職校院南區區域教學資源中心主軸計畫七經驗傳承攜手精進組 7-2 提升教學品質改善計畫 KompoZer 網頁編輯器 數位教材手冊 指導單位 : 教育部技職司主辦單位 : 南區區域教學資源中心承辦單位 : 國立屏東商業技術學院協辦單位 : 國立高雄應用科技大學課程名稱 : 網頁設計與應用購買單

教育部技職校院南區區域教學資源中心主軸計畫七經驗傳承攜手精進組 7-2 提升教學品質改善計畫 KompoZer 網頁編輯器 數位教材手冊 指導單位 : 教育部技職司主辦單位 : 南區區域教學資源中心承辦單位 : 國立屏東商業技術學院協辦單位 : 國立高雄應用科技大學課程名稱 : 網頁設計與應用購買單位 : 百加資通股份有限公司 中華民國 99 年 08 月 27 日

目錄 1.KompoZer 軟體說明與安裝... 1 1-1. 軟體說明... 1 1-2.KompoZer 下載與安裝... 2 1-3. 設定頁面語言和編碼... 3 2.kompozer 軟體使用與設定... 5 2-1. 使用 kompozer 修改網頁樣本... 5 2-2. 修改字型變化... 8 2-3. 加入超連結... 9 2-4. 插入圖片 ( 動畫 )... 10 2-5. 新增 複製與控制圖層... 13 2-6. 編輯背景... 17 2-7. 消除網頁樣版標籤... 19 2-8. 編輯表格... 21 2-9. 編輯框架... 23 3.FTP 檔案上傳... 23 3-1. 使用 Kompozer 上傳網頁... 23 3-2. 使用 FileZilla 上傳網頁... 26

1.KompoZer 軟體說明與安裝 1-1. 軟體說明 軟體名稱 :KompoZer 網頁編輯軟體 軟體說明 : KompoZer 的是前身 NVU, 是一套同樣以 Mozilla 為核心的網頁編輯器 ( 就像市面上常見的 FrontPage 或是 Dreamweaver 等等網頁編輯程式 ), 但重要的是這是一套免費的網頁編輯軟體 KompoZer 功能可快速編輯簡單的 HTML 網頁, 除此之外亦提供 CSS 的編輯能力, 讓使用者可以更方便地製作出模版樣式供網頁設計使用, 省去重複工作的負擔 還有內建站台管理器, 讓使用者能方便管理網站的上下傳資料, 同時 KompoZer 不但支援 Mac Linux 等作業系統也支援繁體中文介面 下載位置 :http://kompozer.net/download.php (KompoZer 官方網站 ) 1

1-2.KompoZer 下載與安裝 (1) 官方網站下載 kompozer-0.8b3.zh-tw.win32 版本, 此版本好處是皆已中文 化完成, 不需再安裝中文語系 (2) 開始安裝, 點選剛下載完成的安裝檔, 滑鼠點兩下進行安裝 歡迎畫面, 執行 下一步 出現授權條款, 勾選 我同意 執行 下一步 選擇安裝 kompozer 位置, 執行 下一步 詢問是否要改變開始功能表的程式位置, 若無特殊設定請按 下一步 是否要增加圖示畫面, 勾選 建立桌面圖示 執行 下一步 開始安裝畫面 安裝完成, 選擇馬上啟動 kompozer 軟體 (3) 安裝完成畫面 2

1-3. 設定頁面語言和編碼 使用者在使用 kompozer 軟體之前, 請先更改 kompozer 的字元與編碼方式, 否則製作完成的網頁格式, 會容易出現字元亂碼的現象 (1) kompozer 工具列的 工具 偏好設定 新頁設定 將語言改成 zh-tw 字元集改為 UTF8 確定 (2) 回到 kompozer 軟體主畫面, 先關掉現存畫面 3

(3) 產生新的 無標題頁面, 才是 kompozer 剛設定完成的字元與編碼格式 4

2.kompozer 軟體使用與設定 2-1. 使用 kompozer 修改網頁樣本可至推薦網站下載免費的網頁範本 : http://www.freewebsitetemplates.com/ (Freewebsitetemplates) http://www.freelayouts.com/template_categories/1?page=1 (Freelayouts) http://www.opendesigns.org/ (Opendesigns) (1) 本範例採用 http://www.freelayouts.com/templates/corporate-office 的 範本, 先將樣本下載至桌面 (2) 解壓縮下載至桌面的網頁樣本檔案 5

(3) 使用 kompozer 軟體開啟 :kompozer 工具列的 開啟 開啟解壓縮完後的 index.html 檔 注意!!: 開啟後, 為 設計 頁面, 若要檢視 程式碼, 請點選右下角的 原始 碼 6

(4) 設定首頁面 :kompozer 工具列的 格式 頁面標題與屬性 修改標 題名稱, 郭冠樟老師教學網 確認 語系 與 編碼, 執行 確定 (5) 修改 Banner 名稱 : 將游標移至 Banner 畫面, 直接修改 Banner 名稱 7

2-2. 修改字型變化 (1) 先把 文字反白 更據需求變化字體 (2) 由於我們是使用網頁樣板, 有時會發生文字不能修改情況, 此時可進到 CSS 標籤內, 進行編輯動作 可將滑鼠點選左下角的 <h1> 標籤, 發現網頁樣本出現黑色框線, 就表示 <h1> 標籤包含的範圍, 可點選 <h1> 標籤 右鍵點選 內含樣式, 修改 CSS 表 8

(3) 此時可修改 <h1> 標籤內的文字 背景 框線與排版定位等進階功能 2-3. 加入超連結 (1) 將欲超連結文字反白 個人簡介 滑鼠點選右鍵, 選擇 連結屬性 在 連結屬性對話框中, 即可設定超連結網址或是檔案, 亦可設定開啟方式 9

2-4. 插入圖片 ( 動畫 ) (1) 上網搜尋需要的動畫檔, 將此圖檔按 滑鼠右鍵 另存影像 選擇儲存位置 ( 要儲存在製作網頁檔底下的資料夾下 ) 重新命名 ( 切記! 不要取中文名稱 ) 儲存 (2) 插入圖片 :kompozer 工具列的 插入 圖片 選擇開啟圖示資料 夾 選擇要插入的圖片 開啟舊檔 10

(3) 回到圖片屬性對話框, 確認 圖片位置 勾選 不要使用替代文字 (4) 在 kompozer 編輯器中,GIF 圖片並不會呈現動畫畫面, 此時可用 瀏覽頁面 方式 ( 檔案 瀏覽頁面 儲存檔案 ), 使用瀏覽器觀看插入成果 11

(5) 插入成功! 12

2-5. 新增 複製與控制圖層 (1) 先插入一張圖片,kompozer 工具列的 圖示 選擇開啟圖示資料夾 選擇要插入的圖片 開啟舊檔 回到圖片屬性對話框, 勾選 不 要使用替代文字 確定 (2) 點選 圖片 按右上角的 ( 圖層按鍵 ) 13

(3) 點選移動圖層, 即可將圖片隨意放置 (4) 注意!! 請利用拖曳方式, 將網站管理員縮至最後, 讓 設計頁面 呈現百 分百的真實比例, 避免放置圖層時, 會產生誤差的結果 (5) 複製圖層 : 點選圖片, 按滑鼠右鍵選擇 複製 14

(6) 將游標移置空白處, 否則會發生不能貼上的情況, 之後請按滑鼠右鍵選 擇 貼上 (7) 圖層會複製在原本圖片上, 請選擇移動圖層, 即可移動 (8) 控制圖層 : 右上角圖示, 可控制圖層要往前或是往後 15

(9) 點選完畢, 會發現圖層不會有任何變化, 此時請將 游標移到空白處, 點 選一下, 即可發現圖層已改變位置 (10) 用瀏覽器預覽畫面, 若比例跑掉, 請關掉網站管理員, 再次編輯移動圖層 16

2-6. 編輯背景 (1) kompozer 工具列的 格式 頁面色彩及背景 點選 使用者自訂色 彩 即可修改文字與背景顏色 (2) 背景已改成鵝黃色 17

(3) kompozer 工具列的 格式 頁面色彩及背景 點選 背景圖片檔 即可插入圖片當使用背景 (4) 背景已改成圖片檔 18

2-7. 消除網頁樣版標籤 (1) 網頁樣板會有許多網頁標籤是你不需要, 因此先在 <div #right> 右邊標籤用滑 鼠點選一下 再點選下方的 <div #right>, 會產生黑色虛線選取範圍 (2) 點選滑鼠右鍵 選擇 刪除 19

(3) 在 <div # left> 中間標籤用滑鼠點選一下 再點選下方的 <div # left>, 會產 生黑色虛線選取範圍 在 <div # left> 標籤處點選右鍵, 選擇 內含樣式 將寬度改成 95% 確定 註 :CSS 中的 % pt px 差別, 請參考 Microsoft Office 之置放網頁元件說 明 http://office.microsoft.com/zh-tw/frontpage/hp052826531028.aspx (2) 修改完成 20

2-8. 編輯表格 (1) 在欲插入表格處, 點選一下 選擇圖示 可使用 快速 或 精確地 插 入表格 (2) 在表格邊線用滑鼠點選兩下, 會出現表格屬性, 在此可編輯 表格 或 儲存 格 格式 21

(3) 增減欄和列 : 有兩種方法, 一種為 kompozer 工具列的 表格 插入或刪除 (4) 另一種為, 表格上的圖示, 左右三角型圖示代表增加儲存格, 而中間圓形 圖式則代表減少欄位 (5) 表格編輯完成 22

2-9. 編輯框架框架的意思就是將網頁版面分割成幾個區域, 畫面分割完成的同時, 必須指定那個框要載入那個 網頁, 才能夠正常顯示 但因為 Kompozer 完全不支援 frameset 的功能, 所以要使用 Kompozer 來當成主要的網頁編輯器時, 這一部份要獨立處理 我們的建議是, 以純文字的編輯器 ( 如 MadEdit ), 直接去編輯 frameset 的 HTML 原始碼 設定好型式 大小之後存檔備用 關於框架教學網頁 : 1. http://www.ns-bbs.com/teach/list.asp?id=112 2. http://www.study-area.org/coobila/tutorial_292.html 3. http://www.sy3es.tnc.edu.tw/teaching/teach4/page9.htm 3.FTP 檔案上傳 3-1. 使用 Kompozer 上傳網頁 (1) 編輯站台列表: 編輯 網站發佈設定 一般設定 站台名稱 : 可自訂 站台資料夾 : 選擇本機制作儲存網頁的 資料夾, 方便上傳管理 HTTP 網址 : 欲上傳的 HTTP 網址 23

(2) 編輯站台列表 : 編輯 網站發佈設定 FTP 設定 (3) 設定完成 24

(4) 發佈網頁 : 25

3-2. 使用 FileZilla 上傳網頁除了 Kompozer 上傳管理之外, 建議亦可使用 FileZilla 上傳軟體, 可使上傳更增加穩定度 (1) 解壓縮下載完成的 FileZilla(3.2.8.1) 檔案, 直接執行 filezilla.exe (2) 設定 主機名稱 帳號 密碼 快速連線 (3) 選取欲上傳檔案或目錄, 直接拖曳至 遠端伺服器 26

(4) 恭喜你 ~ 上傳成功 27