Namo WebEditor 5.5五下資訊教學計畫：虛擬地球村與網站製作

1~2

2/14

~

2/25

虛擬地球村

1-2-1

2-2-2

3-3-6

4-3-1

(1) 資訊科技的認知

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 認識網路

2. 網站規劃流程

3. Namo WebEditor 基本認識

• 教師簡單說明全球資訊網和HTML的基本觀念。

• 網站製作過程是否順利；日後的經營和表現是否符合自己的要求，端視網站規劃的嚴謹程度，教師宜詳細說明之。

• 按照教材內容實際練習軟體的基本操作。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

自然與生活科技

社會

環境教育

生涯發展教育

家政教育

3~4

2/28

~

3/11

神奇的網站精靈

2-2-2

3-3-6

4-3-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

1. 使用網站精靈

2. 套用佈景主題

3. 更換網頁背景

• 最初製作網站時往往不知道從何處著手，藉由網站精靈的協助不只能快速製作網站，也能訓練學生思考網站架構。

• 佈景主題可以說是整體網站的視覺設計，藉由套用現成範本，可以訓練學生整體的視覺設計概念。

• 網頁背景最不顯眼但卻是表現網頁素材的最佳舞台，可簡單說明其重要性。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

環境教育

生涯發展教育

家政教育

5~6

3/14

~

3/25

文字的運用

2-2-2

3-2-1

4-3-4

2-4-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 文字的輸入

2. 改變文字屬性

3. 文章段落編排

• 在網頁中輸入的文字比之文書處理軟體有更多的限制，必須要了解它的限制，才能運用自如。

• 文章的版面以容易閱讀為上，因此要注意行距，而且段落要分明，可事先準備不同版面而以文字為主的印刷品讓學生挑選，並讓學生說明認為容易閱讀的理由。

2

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

語文

環境教育

生涯發展教育

家政教育

7~8

3/28

~

4/8

表格與圖表

2-2-2

3-2-1

4-3-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 表格的使用

2. 佈置表格的運用

3. 繪製圖表

• 表格是組織資料的利器，然而運用在網頁設計上，是以版面安排為主，主因就是HTML並不允許任意編排版面。

• 由表格所延伸出來的佈置表格，在版面的安排上更具彈性。

• 圖表可說是表格的圖案化，讓閱讀的人更容易了解其間的差異性和和關聯性，再講求速度和容易閱讀的網路習慣，圖表是一個不錯的選擇。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

生涯發展教育

家政教育

9~10

4/11

~

4/22

影像，變！

2-2-2

3-2-1

3-2-2

3-3-6

4-3-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 加入影像

2. 簡易影像處理

3. 製作電子相簿

• 影像傳達的訊息比文字多的多，同時也有美化版面的效果。適當的加入影像，讓網頁更具有可看性。

• 多數的網頁需要的只是配合版面安排的影像效果，因此網站編輯軟體只提供最基本的影像處理功能，無特殊需求，在此處理可省去部分製作上的不便。

• 利用電子相簿分享大量的影像不但檢索容易，而且也能檢視原尺寸圖檔，相當方便。教師可事先讓學生攜帶傳統相簿來比較。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

生涯發展教育

家政教育

11~12

4/25

~

5/6

超連結的魔法

2-2-2

3-2-1

3-3-6

4-3-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 超連結設定

2. 插入書籤

3. 導覽列與Flash按鈕

• 超連結為一抽象的概念，教師可以閱讀書籍和閱讀網頁作比較，讓學生由實際經驗來體會超連結的優點。

• 書籤也是超連結的一種，差別僅是用途不同而已。

• 導覽列是瀏覽網站重要的引導，為了方便瀏覽網頁，通常同一網站內的導覽列會固定在相同的位置，並且有一致的風格。

• 動態的Flash按鈕會讓導覽列更加的生動活潑，此一部分可讓學生自由發揮。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

環境教育

生涯發展教育

家政教育

13~14

5/9

~

5/20

圖層和時間軸

2-2-2

3-2-1

3-3-6

4-3-4

2-4-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 圖層的運用

2. 利用時間軸與圖層製作動畫

• 教師可事先要求學生準備透明度高的塑膠袋數個，剪裁成紙張樣，分別在其上作畫，最後合併成完整構圖，藉此說明圖層的優點。在網站編輯軟體中，圖層也擁有任意編排版面的優點，進行版面設計時，可考慮使用圖層。

• 要求學生準備一筆記本，然後在筆記本每一頁的角落畫一簡單人物連續奔跑的分解動作，繪製完再快速翻閱，就是一簡易動畫。時間軸就好像是筆記本，每一頁就是一個影格，藉此建立學生時間軸的概念。

• 圖層和時間軸的互相搭配就能設計內容豐富的動畫。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

環境教育

生涯發展教育

家政教育

15~16

5/23

~

6/3

頁框與影像地圖

2-2-2

3-2-1

4-3-4

2-4-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

1. 頁框的建立

2. 製作影像地圖

• 頁框等於將同一網頁分成數個各自獨立的區域，而這些區域本身就是網頁，優點是相同的部分只需作一次即可，故有些網站將頁框運用在首頁上。

• 框架網頁看起來就像是單一網頁一樣，但是實際上是由至少三個以上的網頁組成的，因此儲存時和一般網頁不同，教師宜特別提醒學生。

• 影像化的網站引導，比之純文字的引導容易理解和使用，如果主題合適時，可考慮使用。

• 如若要製作組織圖式的網站地圖，建議使用圖層來設計比較有修改的彈性。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

社會

環境教育

生涯發展教育

家政教育

17~18

6/6

~

6/17

讓網頁更活潑

2-2-2

3-2-1

3-3-6

4-3-4

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

( 4 ) 表達、溝通與分享

( 8 ) 運用科技與資訊

1. 加入多媒體

2. 事件和動作

3. Script精靈

• 全球資訊網最大的特色就是能同時表現多媒體物件，網站設計時應當按照自己的主題適當的加入多媒體的資料，以求豐富網站。

• 事件和動作可引導瀏覽者在網站上的瀏覽行為，適當的運用會讓瀏覽者更有系統的瀏覽網站。

• HTML中並無動態效果，因此要讓網頁有動態效果就得依賴Script。在網頁上常見的Script有Java Script 和VB Script。由於牽涉到語言的撰寫，因此只要讓學生了解有這種效果和簡單的套用即可。

2

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

歷程檔案

自然與生活科技

藝術與人文

環境教育

生涯發展教育

家政教育

19~20

6/20

~

6/30

網站開張囉！

2-2-2

3-3-6

5-3-1

(2) 資訊科技的使用與概念

(3) 資料的處理、分析

(4) 資訊的溝通

( 4 ) 表達、溝通與分享

( 6 ) 文化學習與國際瞭解

( 8 ) 運用科技與資訊

( 9 ) 主動探索與研究

網站檢查

網站上傳

網站的宣傳

• 網站編輯完成後，就是準備要上傳，上傳之前的檢查非常重要，如果有任何的錯誤，將會影響瀏覽者的觀感。檢查必須從文字、圖片有無錯誤開始，其次是版面安排是否適當等，最後才是利用軟體檢查超連結等等。

• 網站上傳之前最好先看看提供網頁空間的網站，看看對於上傳的相關規定後再依教材內的步驟完成上傳。

• 網站宣傳是網站經營的一部分，此一部分可要求學生自行設計宣傳的方法和活動，請她們宣傳班級或個人網站等。

3

電子版教學指引

範例光碟

口頭評量

隨堂實作評量

實際上傳並瀏覽網站

自然與生活科技

環境教育

生涯發展教育

家政教育