Nvu 是一個沒有華麗複雜功能的網頁製作工具，透過簡單的操作界面，

113

附 錄

附錄一 電腦態度量表 親愛的同學你好：

這是一份研究用的問卷，填答的資料僅供研究之用，請依據真實的情況填 答，答案本身沒有對錯之分，請放心填答。謝謝你的合作！

國立臺灣師範大學工業科技教育研究所 林博民 敬上 非常 不同 意 不同 意 無意 見 同意 非常 同意

1 會用電腦，以後可以找到較理想的工作。 □ □ □ □ □ 2 知道如何用電腦，可以增加我的學習能力。 □ □ □ □ □ 3 在求學過程中，有很多方面需要用電腦。 □ □ □ □ □ 4 電腦對我的未來有幫助。 □ □ □ □ □ 5 電腦很有用處，所以我要學習電腦。 □ □ □ □ □ 6 我喜歡上電腦課。 □ □ □ □ □ 7 我期待每個星期的電腦課。 □ □ □ □ □ 8 遇到無法解決的電腦問題，我會一直不斷地尋找答案。 □ □ □ □ □ 9 上電腦課蠻輕鬆自在的。 □ □ □ □ □ 10 一開始用電腦，我就停不下來。 □ □ □ □ □ 11 我喜歡與別人談論電腦的話題。 □ □ □ □ □ 12 不會使用網路將被社會淘汰。 □ □ □ □ □ 13 我能利用電腦工作。 □ □ □ □ □ 14 我相信能在電腦課獲得好成績。 □ □ □ □ □ 15 我有自信利用電腦工作。 □ □ □ □ □ 16 我具有學習電腦的能力。 □ □ □ □ □ 17 現代家庭都應該有電腦。 □ □ □ □ □

114

非常 不同 意 不同 意 無意 見 同意 非常 同意

18 我的生活已經離不開電腦。 □ □ □ □ □ 19 我花在電腦的時間很多，所以讀書的時間減少了。 □ □ □ □ □ 20 我使用電腦的目的，主要是休閒娛樂。 □ □ □ □ □ 21 上網是電腦最主要的功用。 □ □ □ □ □ 22 網路上的資訊都頗有可信度。 □ □ □ □ □ 23 網路上的資訊對我都有幫助。 □ □ □ □ □

〜請再檢查一遍，非常謝謝您的填答〜

115

附錄二 自由軟體使用意見表 親愛的同學你好：

下面有一些題目只是想瞭解你對Nvu 軟體的看法，答案並沒有對或錯，你只

要照自己的想法回答問題就好。同學們的答案只是用來研究分析，請安心作答。

國立臺灣師範大學工業科技教育研究所 林博民 敬上 填答方式說明：請依據你真實的情況在每題的「非常同意」、

「同意」、「無意見」、「不同意」及「非常不同意」五個 項目中選擇最符合的選項，請在□內打ˇ，每一題只勾選一 個答案。

非常 不同 意 不同 意 無意 見 同意 非常 同意

1. 知道如何使用Nvu 對我是有用的。 □ □ □ □ □

2. 使用Nvu 可以讓自己學到更多網頁製作的技巧。 □ □ □ □ □

3. 在學校裡學習Nvu 是有幫助的。 □ □ □ □ □

4. 資訊科技發達的社會中，學習 Nvu 是有用的而且是應

該學的。 □ □ □ □ □

5. Nvu 操作過程的顯示，對我來說很清楚。 □ □ □ □ □ 6. Nvu 所提供的圖示和文字，有助於我的操作。 □ □ □ □ □ 7. Nvu 在操作上，對我來說是簡單且容易的。. □ □ □ □ □

8. 學習Nvu，對我來說是簡單的。 □ □ □ □ □

9. 操作Nvu 時，我會緊張。 □ □ □ □ □

10. 當別人談論到 Nvu，我會覺得有壓力。 □ □ □ □ □

11. 上課時使用 Nvu，令我煩惱。 □ □ □ □ □

12. 我相信我能用 Nvu 完成工作。 □ □ □ □ □

13. 我想我有能力再學習進階的 Nvu 課程。 □ □ □ □ □ 14. 使用 Nvu 解決問題時，我覺得我是厲害的。 □ □ □ □ □

15. 我覺得使用 Nvu 是有趣的。 □ □ □ □ □

16. 我喜歡使用 Nvu。 □ □ □ □ □

17. 看到有人使用 Nvu 製作網頁，會吸引我的注意。 □ □ □ □ □

116

填答方式說明：請依據你真實的情況在每題的「非常同意」、

「同意」、「無意見」、「不同意」及「非常不同意」五個 項目中選擇最符合的選項，請在□內打ˇ，每一題只勾選一 個答案。

非常 不同 意 不同 意 無意 見 同意 非常 同意

18. 每當使用 Nvu，我發現很難停下來去做別的事。 □ □ □ □ □

19. 我有空閒時，會想去使用 Nvu。 □ □ □ □ □

20. 有需要的時候，我會想去使用 Nvu。 □ □ □ □ □

21. 以後我願意使用 Nvu。 □ □ □ □ □

22. 製作網頁的時候，我會首先選擇 Nvu。 □ □ □ □ □

〜請再檢查一遍，非常謝謝您的填答〜

117

附錄三 Nvu 教材

4-2 Nvu 基礎實作

Nvu

是由 Linspire 組織所主導的自由 軟體，是具有所見即所得的編輯器，並擁有易學易用的親和力以及跨平台的 優點。由於 Nvu 遵守重要的網頁設計規範來產生網頁，所以透過 Nvu 產生 的網頁具有高度的可閱讀性，以及更符合網頁規範與標準。

Nvu 是一個沒有華麗複雜功能的網頁製作工具，透過簡單的操作界面，

操作方式可以像是在處理文書作業一般的容易。本節將分別介紹如何應用 Nvu 的基本操作來製作班級網站，以及如何將製作完成的網站發送到網際網 路中。

4-2.1 Nvu 基本操作

Nvu 是一套非常新穎的網 頁製作軟體。在本小節中，我們 將以圖 4-10 所示的「班級網站」

為例，介紹 Nvu 的工作環境並說 明 Nvu 的各種基本功能的使用 方法。

http://moztw.org/nvu/

Nvu 官方中文化網站

認識 Nvu 的工作環境

Nvu 的作業視窗，大致可分為標題列、功能表列、工具列、格式列、網

示。

▲圖4-10 班級網站完成圖

118

標題列：用來顯示網頁檔案的路徑。

功能表列：將 Nvu 所提供的功能分類顯示，以方便使用者操作。

工具列：用來放置常用的工具按鈕，以節省操作的時間。

格式列：用來設定各項網頁內容的格式。

網站檔案管理區：用來連結網頁伺服器及管理網站檔案。

網頁編輯區：是編輯網頁內容的區域。

網頁編輯功能頁籤：用來切換檢視網頁的模式。

關閉鈕：用來關閉 Nvu 程式。

最小化鈕：用來將視窗最小化至工作列上。

關閉視窗鈕：用來關閉個別的網頁。

建立新網頁

在 Nvu 中，要建立一份新網頁可直接按下功能圖示 即可在網頁編輯 區以分頁的方式產生一個新的空白網頁，也可以按下「新增」圖示旁的倒三 角型按鈕，以進階的方式選擇建新網頁的方式。(如圖 4-12)

網頁編輯區 功能表列

工具列 格式列

網站檔案 管理區

網頁編輯功能頁籤

標題列 最小化鈕

關閉程式鈕 還原/

最大化鈕 關閉檔案鈕

網頁編輯區

▲圖4-11 Nvu 的工作環境

119

其中「頁面於新分頁」是以「分頁」方式 建立新的網頁，而「頁面於新視窗」則是以新 的視窗建立新的網頁。（如圖 4-12）

網頁的基本編輯

啟動 Nvu 後，我們即可在網頁

|，用來標示可輸入文字的位置。

(如圖 4-13)

網頁的儲存

網頁製作完成之後，我們可以 將它儲存起來，方便日後再叫出來 使用，也可以利用「另存新檔」的 功能，將修改後的網頁以另一個檔 名儲存，以保留修改前的網頁內 容。(如圖 4-14)

▲圖4-13 在 Nvu 中輸入文字

氣

▲圖 4-14 在 Nvu 中輸入文字

儲存位置下拉式方塊 在此選擇儲存檔案的位置

網案名稱欄 在此輸入檔案名稱

檔案類型下拉式方塊 選擇要儲存的檔案類型

▲圖4-12 建立新網頁

在游標所在位置輸入文字

120

<<操作實例 1 啟動 Nvu 並編輯網頁 1. 選取「應用程式/網際網路

/Nvu1.0」選項，執行 Nvu 程式，並開啟檔案 Ex04-2a。

2. 開啟 Writer 文件”個人自 傳”，複製文件中的所有資 料；將游標移至要貼上資料 的位置，選取「編輯/貼 上」，將複製的文件貼到網 頁中。

3. 選按「檔案/另存新檔」以 開啟另存新檔交談窗。

認識網頁編輯功能頁籤

Nvu 的編輯功能頁籤有四種模式，包含「一般」、「HTML 標籤」、「原

▲圖4-15 貼個人自傳資料

圖4-16 另存新檔畫面

121

一般模式

可直接進行文字的輸入、圖片的 插入等網頁編輯工作，編輯完成的內 容會和將來在瀏覽器（如 IE）中所顯 示的網頁畫面幾乎相同。(如圖 4-17)

HTML 標籤模式

顯示網頁的內容物件的 HTML 標 籤，可以清楚的瞭解網頁內容使用的 HTML 標籤，並隨時修改網頁內容或樣 式。(如圖 4-18)

原始碼標籤模式

顯示網頁的 HTML 原始碼，我們 可以在此標籤下直接編輯網頁的 HTML 原始碼，以調整網頁的內容或樣 式。(如圖 4-19)

預覽模式

預覽網頁在瀏覽器中所呈現的 樣子。(如圖 4-20)

▲ 圖 4-17 「一般」模式畫面

▲ 圖 4-18 「HTML 標籤」模式畫面

▲ 圖 4-19 「原始碼」標籤模式畫面

▲ 圖 4-20 「預覽」頁籤籤畫面

122

( ) 1. 在 Nvu 中，想要大量重複使用相同的文字內容，可以利用下列何項 功能快速完成？ (A)剪下 (B)複製 (C)儲存檔案 (D)搬移。

( ) 2. 在 Nvu 的環境裡，可以預覽網頁在瀏覽器所呈現的畫面的模式是 (A) 一般模式 (B)HTML 標籤模式 (C)原始碼模式 (D)預覽模式。

4-2.2 班級網頁的製作

一個只有白底黑字的網頁通常不容易吸引瀏覽者的目光，我們可以利用 Nvu 的各種文字及段落格式設定來突顯網頁的主題，以美化網頁的外觀。在 本小節中，我們將介紹美化網頁常用的方法。

文字樣式的設定

網頁上的文字可以做字型、色彩、大小及醒目提示等樣式設定；設定文 字樣式可以突顯網頁的主題文字，以提高瀏覽者閱讀網頁的興趣。圖 4-21 為各種文字樣式。

段落格式的設定

我們可以為網頁中的每一個段落設定 不同的段落格式，也可以將整個網頁套用 同一種段落格式。可以設定的段落格式包 括「段落樣式」、「對齊方式」及「縮排

設定段落樣式 設定縮排方式

設定對齊方式

▲圖 4-22 段落交談窗

▲圖 4-21 各種文字格式

123

<<操作實例 2 設定段落格式 1.將滑鼠移至欲設定的段落，並選

按「格式/段落/已格式化段落」選 項。

▲圖 4-23 段落交談窗

2.在「網頁編輯區」右側會出現「段 落調整方塊」，以滑鼠左鍵拖曳下方 橫線即可。

3.選擇「格式/增加縮排」選項或「格 式/減少縮排」選項，以調整段落縮 排格式。

▲圖 4-24 段落交談窗 以滑鼠左鍵拖曳調整

段落間距

▲圖4-25 段落交談窗

124

▲圖 4-27 符號及編號設定方式

▲圖 4-26 符號及編號畫面

符號及編號設定

在 Nvu 中我們可以利用「清單」樣式的

「符號式」或「編號式」功能，為「條列式

的內容」加上項目符號或編號，這樣不但可 以讓整個網頁看起來層次分明，也可讓瀏覽 者更快速掌握網頁的重點。（如圖 4-26）

設定網頁顏色及背景

在製作網頁時，我們可以使用適當的圖片或色彩來做為網頁的背景。例 如，在製作和「氣象」相關的網頁時，可以將藍天白雲的圖片設為背景，除 了美化網頁之外，也可襯托出網頁的主題。

另外，我們也可以設定網頁使用連結樣式，以縮短美化網頁外觀的時間。

<<操作實例 3 設定網頁顏色及背景 1. 選擇「格式」功能表的「頁面文字顏

色及背景顏色」選項

符號及編號設定

▲圖 4-28 設定網頁顏色與背景

125

▲圖 4-27 設定網頁顏色及背景

2. 這時會出現一個「顏色與背景」的對 話視窗，可以在這個視窗內填上這個 網頁的相關資料。

3. 「頁面文字顏色」設定選項可以設定 網頁的一般文字顏色、超連結顏色、

背景色等設定。

4. 按下「選取檔案」按鈕，可以為網頁 插入一張背景圖。

5. 按下進階編輯按鈕，則會開啟「進階 屬性編輯器」視窗，進入進階設定模 式。

4-2.3 班級網頁的發送

網站建立完成之後，我們必須將網頁發送到網站伺服器（web server）

上，才能讓網路上的其他人瀏覽（如圖 4-30 所示）。在本節中我們將介紹 網站空間的申請及網站的發送方法。

▲圖 4-29 顏色與背景設定窗

網 頁

126

▲圖 4-30 瀏覽者透過網站伺服器(web server)瀏覽網站

網站空間的申請

在發送網站之前，我們必須先在網站伺服器上擁有足夠存取網站的空 間，才能放置要發送的網站。網站空間的取得方法大致可分為以下 3 種：

1. 向學校申請網站空間：為配合教學需要，學校的資 訊中心多半會規劃學生專用的網站空間，以提供同 學使用。

2. 向提供免費網站空間的網站申請：大多數提供免費

網站空間的網站，會先要求使用者加入該網站成為會員，然後才可以使用 免費的網站空間。表 4-1 為幾家提供免費網站空間的網站。

表 4-1 提供免費網站空間的網站

3. 向提供付費網站空間的網站申請：需要大容量網站空間的使用者，可以付

費的方式向廠商租用更大的網站空間。

127

網站的發送

在取得網站空間之後，我們就可以利用 Nvu 中 的「Nvu 網站管理員」功能，將網頁發送到網站伺 服器中。圖 4-31 為網頁發送流程圖。

<<操作實例 4 Nvu 網站管理員 1. 按下「Nvu 網站管理員」的「編輯網

站」按鍵。

2. 這時會出現「發佈設定」的設定 畫面。「發佈設定」功能可以設 定網站檔案存放在位置，透過

「發佈設定」的設定，使用者可 以透過 Nvu 網站管理員存取網 站上的檔案。

3. 輸入使用者名稱及密碼，並按

「確定」鈕。

4. 設定好「發佈設定」之後，即可以透過「Nvu 網站管理 員」的下拉式功能表管理網站檔案。

▲圖 4-33 網站發佈設定視窗

▲圖 4-32 網站管理員

▲圖 4-31 網頁發送流程

▲圖 4-34 網站檔案

128

一、選擇題

( )1.欲在 Nvu 中直接預覽網頁編輯情形，要使用何種檢視模式？ (A)超連結模 式 (B)HTML 標籤模式 (C)原始碼模式 (D)預覽模式。

( )2.發布網站時，必須向 ISP 或系統管理員取得下列何種資訊？ (A)網站伺服

器的位址與首頁名稱 (B)您的姓名 (C)居家地址 (D)電話號碼與傳真號

碼。

129

4-3 Nvu 進階實作

在進行網頁製作時，我們經常會利用框架、超連結、表單以及動態元作 等來設計網頁，以使網頁內容的呈現更富有變化。本節將介紹這些網頁製作 的進階技巧與方法。

4-2.1 網頁的製作—師長介紹

在網頁中加入圖片、表格、以及建立超連結，

是製作網頁時經常會用到的技巧，本小節將以圖 4-35 所示的「師長介紹」網頁為列，介紹加入表 格、圖片及建立超連結的方法。

表格的加入

表格可以用來彙整雜亂的資料，使文件內容整齊而易 於閱讀；因此我們經常會將網頁的內容以表格的方式呈 現，以方便瀏覽者閱讀。

<<操作實例 5 表格的插入

1. 選擇「插入」功能表的「表格」選項或按下功能圖示 。

2.

▲圖 4-37 插入表格設定窗

▲圖 4-36 插入表格選項

▲圖 4-35 「親愛的師長」

網頁完成圖

130

3. 之後即會出現所設定的表 格，圖 4-38 為 4x6 表格。

圖片的加入

在網頁中加入適當的圖片，可突顯網頁的主題，加深瀏覽者對網頁內容 的印象。我們可以使用合法取得的圖片，作為插入圖片的來源。圖 4-39 為 已經插入圖片的網頁。

<<操作實例 6 圖片的插入

1. 選擇「插入」功能表的「圖片」選項或按下按 下功能圖示 。

2. 這時會出現一個「圖片屬性」的對話視窗，按 下「選取檔案」鈕，可以選擇要在網頁上插入 的圖片。

3.

如果所插入的圖片是具有意義的圖片，必須在「替代 文字」選項下填入替代性文字。如果圖片只是單純的 用來排版、美化版面等美工用途，則必須選擇「不要

使用替代文字」選項。 ▲圖 4-41 顏色與背景設定窗

▲圖 4-39 插入圖片後的網頁

▲圖 4-40 插入圖片選項

▲圖 4-38 插入表格後畫面

131

超連結的建立

超連結是一種可以讓網頁迅速連結到其他目

的地網頁的功能；在製作網頁時，我們可以利用 超連結來連結和主題相關的其他網頁，讓瀏覽者 獲得更多的資訊。

超連結的種類可概分為 5 類：1. 網頁超連結、2. 書籤超連結、3. 網 站超連結、4. 檔案超連結、5. 電子郵件連結，如圖 4-42 所示。

▲圖 4-42 顏色與背景設定窗

Nvu

132

<<操作實例 7 設定超連結 1. 開啟檔案 “Ex04-3b\teacher.htm”，並

如圖選取導師的電子信箱。

2. 選取要建立超連結的文字，選擇「插入」功能表的

「鏈結」選項或按下功能圖示 。

3. 這時會出現一個「鏈結屬性」的 對話視窗，「鏈結文字」項目的內 容是要填入在網頁上顯示的超連 結文字內容，而「鏈結到」項目則 是要填入被連結的網頁，按下「選 取檔案」鈕，可以選擇要被連結的 網頁檔案。

4. 按下確定後導師電子信箱下方出現 鏈結底線。

▲圖 4-45 鏈結屬性設定窗

▲圖 4-43 選取老師電子信箱

▲圖 4-44 顏色與背景設定窗

▲圖 4-46 導師電子信箱設定鏈結

133

134 7

8

9

9 8

7

135

2.