1

NVU 操作介紹 1 前言 2 NVU 簡介 3 安裝 4 NVU 操作 4.1 NVU 操作界面 4.2 Nvu 網站管理員設定 4.3 建立一個新的網頁 4.4 為網頁建立適當的頁面標籤 4.5 設定網頁顏色及背景 4.6 插入圖片

4.7 製做文字超連結 4.8 製做圖型超連結 4.9 插入表格 4.10 表單物件 定義一個表單 4.11 表單物件 單行文字欄位 4.12 表單物件 密碼欄位 4.13 表單物件 核取方塊 4.14 表單物件 群組選擇按鈕 4.15 表單物件 Submit 按鈕 4.16 表單物件 Reset 按鈕 4.17 表單物件 File 物件 4.18 表單物件 多行文字方塊 5 參考資料

1. 前言 Nvu 是一套非常新穎的網頁設計工具, 具備許多先進的概念, 同時它跨平台的特性, 更是吸引許多人嘗試使用的關鍵, 目前網頁製作工具中, 最多人使用的大概是 Macromedia Dreamweaver 及 Microsoft FrontPage, 但這兩套軟體有個比較大的問題, 就是只能在 Microsoft Windows 平台上運作, 對於使用其它作業平台的人相當的不方便, 再加上不斷加入的親功能, 讓軟體變成巨大的怪物, 一點一滴的消耗掉系統的資源,Nvu 的誕生, 解決了這個問題, 網頁開發者可以遊走於不同的平台工作, 而不用擔心平台的問題或操作界面的問題, 再加上 Nvu 開放原始碼的特性, 提供了許多想學習網頁製作的人一個合法取得開發工具的機會, 我想, 受惠最大的應該是學生吧! Nvu 是一個輕量級的開發工具, 沒有華麗複雜的功能迷惑使用者, 透過其簡單的操作 界面, 使用者可以像是在處理文書作業一般的輕易完成網頁, 本文提供一個簡易的入門 介紹, 以期第一次使用 Nvu 的人, 能夠透過本文更加瞭多 Nvu 的操作 2.NVU 簡介 Nvu( 讀作 N-view, 是 New view 之意 ) 是由 Linspire 主導的的開放原始碼軟體,Nvu 根基於 Mozilla 平台, 以 Gecko 模塑引擎為基礎, 具有所見即所得 (WYSIWYG ) 的 編輯器 易學易用的親和力以及跨平台的優勢 同時,Linspire 更找來了 Mozilla Composer 的主要作者 Daniel Glazman 為 Nvu 擔任計劃領導人,Nvu 目前還是一個非常新的軟體, 實驗性質很強, 但從 Nvu 的發展, 我們可以預見一套功能強大, 且具親和力的網頁開發工具即將誕生... Nvu 產生的網頁具有高度的可閱讀性, 由於 Nvu 遵守重要的網頁設計規範來產生網頁, 所以透過 Nvu 製作的網頁將會更符合網頁規範與標準

3. 安裝 連線到 http://moztw.org/nvu/, 選擇適自己作業平台的版本, 下載最新版本 的 Nvu

4.NVU 操作 4.1 NVU 操作介面

4.2.Nvu 網站管理員設定 1. 按下 Nvu 網站管理員 的 編輯網站 按鍵 2. 這時會出現 發佈設定 設定畫面 發佈設定 功能可以設定網站檔案存放在位置, 透過 發佈設定 設定, 使用者 可以透過 Nvu 網站管理員存取網站上的檔案 3. 設定好 發佈設定 之後, 即可以透過 Nvu 網站管理員 的下拉式功能表管理網 站檔案

4.3. 建立一個新的網頁 直接按下功能圖示中的 新增 鈕即可在網頁編輯區以分頁的方式產生一個新的 空白網頁, 也可以按下 新增 圖示旁的倒三角型按鈕, 以進階的方式選擇建新 網頁的方式 其中 頁面於新分頁 是以 分頁 方式建立新的網頁, 而 頁面於新視窗 則是以 新的視窗建立新的網頁

4.4. 為網頁建立適當的頁面標籤 1. 選擇 格式 功能表的 頁面標題與屬性 選項 2. 這裡會出現一個 頁面屬性 的對話視窗, 此時, 可以在這個視窗內填上這個網 頁的相關資料 3. 為網頁建立適當的頁面標籤是很重要的, 建立好頁面標籤之後, 可以立即在 Nvu 的分頁標籤上顯示頁面標籤的內容

另外, 當網頁被使用者瀏覽時, 頁面標籤的內容會出現在瀏覽器的分頁標籤及瀏 覽器視窗的視窗列上, 一個為網頁建立適當的頁面標籤可以方便使用者閱讀網頁

4.5. 設定網頁顏色及背景 1. 選擇 格式 功能表的 頁面文字顏色及背景顏色 選項 2. 這時會出現一個 顏色與背景 的對話視窗, 此時, 可以在這個視窗內填上這個 網頁的相關資料 3. 頁面文字顏色 設定選項可以設定網頁的一般文字顏色 超連結顏色 背景色等 設定 4. 按下 背景圖片檔 的 選取檔案 按鈕, 可以為網頁插入一張背景圖 5. 按下 進階編輯 按鈕, 則會開啟 進階屬性編輯器 視窗, 進入進階設定模式

4.6. 插入圖片 1. 選擇 插入 功能表的 圖片 選項或按下按下功能圖示 2. 這時會出現一個 圖片屬性 的對話視窗, 按下 選取檔案 鈕, 可以選擇要在網 頁上插入的圖片 3. Nvu 為了要讓網頁更加符合網 W3C 的規範, 插入圖片時,Nvu 會要求使用者輸入 提示文字, 以保證讓在無法顯示圖形的環境下能夠表示網頁的資訊, 因此, 如果所插入的圖片是具有意義的圖片, 必須在 替代文字 選項下填入替代性文字 如果圖片只是單純的用來排版 美化排面等美工用途, 則必須選擇 不要使用替代文字 選項

4.7. 製做文字超連結 1. 選擇 插入 功能表的 鏈結 選項或按下按下 鏈結 功能圖示 2. 這時會出現一個 鏈結屬性 的對話視窗, 鏈結文字 項目的內容是要填入在網 頁上顯示的超連結文字內容, 而 鏈結到 項目則是要填入被連結的網頁, 按下 選取檔案 鈕, 可以選擇要被連結的網頁檔案

4.8. 製做圖型超連結 1. 可以在 插入圖片 時, 在出現 圖片屬性 的對話視窗時, 點選 鏈結 頁籤, 即 可加入超連結資訊 2. 如果已經先在網頁上插入了圖片, 事後要為圖片加上超連結, 此時, 必須先以 滑鼠點選該張圖片, 然後在這張圖片上按滑鼠右鍵, 這時會出現一個右鍵選單, 在選單上選取 建立連結 選項, 就會出現 圖片屬性 的 鏈結 頁籤, 透過 鏈結

頁籤, 即可為該圖片建立超連結

4.9. 插入表格 1. 選擇 插入 功能表的 表格 選項或按下按下 表格 功能圖示 2. 這時會出現一個 Insert Table 的對話視窗, 使用者可以直接用滑鼠選取表格的 行數及例數

4.10. 表單物件 定義一個表單 1. 選擇 插入 功能表的 表單 選項然後選取 定義表單 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 定義表單 選項 2. 這時會出現一個 表單屬性 的對話視窗, 在表單名稱欄位必須填入一個表單的 名稱, 送出時的 URL (Action URL) 則是接收這個表單資料的網頁檔名稱, 傳 送方式 (Method) 則是表單傳送資料的方法 (GET/POST) 3. 成功定義好表單之後, 網頁編輯區會出現一個綠色虛線的框框, 此框框的範圍 即是表單的範圍, 只有在此一範圍內的表單物件內的資料值, 才會被送出至

Action URL 所定義的頁面

4.11. 表單物件 單行文字欄位 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇文字, 欄 位設定則填入這個物件的設定值, 欄位名稱是新插入的物件名稱, 內含值初始 值是物件的預設值

3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的單行文字物件

4.12. 表單物件 密碼欄位 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇密碼, 欄 位設定則填入這個物件的設定值, 欄位名稱是新插入的物件名稱, 內含值初始 值是物件的預設值

3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的密碼欄位物件 密碼欄位物件與單行文字物件最大的差別在於, 密碼欄位在瀏覽器上顯示時, 會出現 * 遮住使用者輸入的值, 以確保資料的隱密性

4.13. 表單物件 核取方塊 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇核對方塊, 欄位設定則填入這個物件的設定值, 欄位名稱是新插入的物件名稱, 欄位內含值是物件的預設值, 初始時自動設定是設定這一個核取方塊在網頁載入時, 是否預設為打勾

3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的核取方塊物件 4.14. 表單物件 群組選擇按鈕 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇單選按鈕 (Radio Button), 欄位設定則填入這個物件的設定值, 群組名稱是新插入的物件名稱, 同一群的按鈕, 都應具備相同的群組名稱, 欄位內含值是物件的預設值, 初始時自動選取是設定群組選擇按鈕在網頁載入時, 是否預設為選取, 由於群組選擇按鈕在同一群組中, 只能有一個被選, 所以同一群組的按鈕中, 只

能有一個被設定為初始時自動選取 3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的群組選擇按鈕 4.15. 表單物件 Submit 按鈕 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項

2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇送出按鈕, 欄位名稱則填入這個物件的設定值, 欄位內含值是按鈕顯示在網頁的名稱 3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的送出按鈕 4.16. 表單物件 Reset 按鈕

1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇重設按鈕, 欄位名稱則填入這個物件的設定值, 欄位內含值是按鈕顯示在網頁的名稱 3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的 Reset 按鈕

4.17. 表單物件 File 物件 1. 選擇 插入 功能表的 表單 選項然後選取 表單欄位 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 表單欄位 選項 2. 這時會出現一個 表單欄位屬性 的對話視窗, 在欄位型態選項上選擇檔案, 檔 案名稱則填入這個物件的設定值

3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的 File 物件, 這個物件能讓使用 者透過網頁傳遞檔案到伺服器端 4.18. 表單物件 多行文字方塊 1. 選擇 插入 功能表的 表單 選項然後選取 文字區域 選項或按下按下功能圖示 表單 旁的倒三角型, 選取 文字區域 選項

2. 這時會出現一個 文字區域屬性 的對話視窗, 在欄位名稱欄位填入該物件的名 稱, 列是指顯示在畫面上的列數 ( 橫向 ), 欄是指顯示在畫面上的行數 ( 直向 ) 3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的多行文字方塊

5. 參考資料 http://www.nvu.com/ http://www.nvudev.org/ http://forum.nvudev.org/ http://free.tnc.edu.tw/modules/news/article.php?storyid=747