1

Size: px

Start display at page:

Download "1"

伪疋狄
5 years ago
Views:

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

2 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 參考資料

3 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 製作的網頁將會更符合網頁規範與標準

5 3. 安裝連線到選擇適自己作業平台的版本, 下載最新版本的 Nvu

6 4.NVU 操作 4.1 NVU 操作介面

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

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

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

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

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

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

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

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

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

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

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

19 Action URL 所定義的頁面

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

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

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

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

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

3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的核取方塊物件 4.14. 表單物件群組選擇按鈕 1. 選擇插入功能表的表單選項然後選取表單欄位選項或按下按下功能圖示表單旁的倒三角型, 選取表單欄位選項 2.

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

能有一個被設定為初始時自動選取 3. 按下 OK 之後, 網頁編輯區就會出現剛才定義的群組選擇按鈕 4.15.

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

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

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

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

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

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

32 5. 參考資料

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

$輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4$ JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling