教育部學產基金 辦理 99...

123
教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」 結案報告 申請單位:德霖技術學院 資訊工程系 執行期間:99 7 12 日至 99 7 23 日止 人:張遵偉 副教授 99 7 31

Upload: others

Post on 18-Oct-2019

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

教育部學產基金

辦理 99 年度「縮短中小學城鄉數位落差研習計畫」

結案報告

申請單位德霖技術學院 資訊工程系

執行期間99 年 7 月 12 日至 99 年 7 月 23 日止

主 持 人張遵偉 副教授

中 華 民 國 99 年 7 月 31 日

目錄

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 1 頁 共 123 頁

壹 活動目的

一活動背景與理念

「縮短中小學城鄉數位落差」活動是落實政府照顧弱勢族群之

政策主要目標為提升中小學弱勢學生電腦資訊能力並提供大專院

校及高中職學校學生優質的暑期工讀機會

隨著知識經濟的興起資訊與通訊科技更為普遍應用於社會中

在數位時代的衝激下資訊科技與數位知識的應用是改變工作生

活與學習方式的一項關鍵驅動要素資策會的一份報告中指出近年

經由網路獲得政府服務的民眾只佔 10落後於美國 20日本 14

新加坡 15面對知識經濟的全球化潮流資訊落差所形成的新階級

社會將是台灣未來發展的潛藏不穩定因素

數位落差問題已廣受國際間的重視我國近年亦不斷提出因應措

失包含「挑戰 2008 縮短數位落差推動計畫」「加強偏遠地區中小

學資訊教育計畫」「減少數位落差推動計畫」等無不著眼於降低未

來資訊化後資訊階級間的差異與不公平現象但由於資訊接觸資

源分配的不均資訊與通訊教育的尚未全面普及適應不同族群的數

位教材缺乏資訊弱勢族群依舊居相對劣勢

在我國近年因人口結構改變每年由東南亞地區移入的外籍配

偶以及他們所生的新生兒的人數逐年攀高目前外籍配偶子女已進入

中小學就讀這群外籍媽媽因為語言的隔閡工作等因素導致她們

在子女的課業上缺乏能力指導影響到照顧與養育下一代的品質針

對單親家庭原住民家庭外籍配偶家庭等鑑於經濟因素有較高

的學習資訊科技障礙長期成為資訊時代的弱勢族群本校(德霖技術

學院)資訊工程系將推動「歡喜 e 起來e 身好功夫」關懷與輔導中小

學弱勢資訊學生推動資訊弱勢族群的再學習機會以期能解決未來

台灣社會將面臨的資訊新階級問題

二活動特色

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 2 頁 共 123 頁

本計畫含蓋課程學習與夏令大地活動兩個面相在課程學習面將

以資訊技能學習為主軸規劃輔導資訊弱勢中小學生提升資訊技能具

體可行方案縮短城鄉數位差距確保資訊弱勢中小學生具有平等學

習的機會是本計畫主要精神藉由學習的過程教導資訊弱勢中小

學生具有與時俱進資訊科技知識與能力是本計畫終極目標本計

畫除了協助這些小學生學習各項資訊工具更於學習中帶入夏令大地

活動讓這群學童亦能享有一個歡樂的暑期生活同時將活動成果與

心得與國內各學術研究單位分享以作為輔助國內其餘資訊弱勢族

群的依據

本計畫將以網路學習為主軸提出輔助資訊弱勢族群之具體可行

之方案確保資訊弱勢族群具有平等學習的機會並具有使用資訊與

通訊科技設備及其所需的技能是本計畫主要精神教導該族群具有

與時俱進的更新科技知識與能力是本計畫終極目標我們將以單親家

庭原住民家庭外籍配偶家庭等為主要輔助對象除了協助其子女

參與各項資訊工具應用輔導課程外也會引導他們參與資訊技術學習

課程

三活動目的

初期目標設定消弭資訊學習落差確保人人均有使用數位科技的

機會與能力並能充分運用現代資訊工具建立適性化的分級學習數

位內容與教學平台以達資源共享之目標初期目標招募具有熱忱的

志工以輔導並提昇偏遠地區之外籍配偶家庭英語基本能力以方便

使用資訊工具藉以提昇資訊科技使用能力中期目標以『資訊志工』

形式推行教學相長提升能力關懷弱勢服務人群讓有能力的同

學在學校或社區定點利用已身之資訊技能服務社會在網路社群經

營以同儕的熱心教導協助這群中小學生資訊技術進而提升全國資

訊能力也藉教學相長增進自己的經驗及能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 3 頁 共 123 頁

貳 活動規劃概況

一主辦單位

德霖技術學院資訊工程系

236 台北縣土城市青雲路 380 巷 1 號

二活動日期

中華民國 99 年 7 月 12 日(星期一)至中華民國 99 年 7 月 23 日(星期五)

三活動地點

德霖技術學院資訊工程系 系館

236 台北縣土城市青雲路 380 巷 1 號

參 活動執行概況

一課程安排內容

志工團隊招訓輔教

(1) 甄選具有乙丙級國際證照或具有服務熱忱的同學教導服務與

學習的觀念並讓他們知道了解資訊弱勢族群是應該被關懷並

成立資訊志工團

(2) 舉辦志工訓練營及志工工座談會討論輔導方案及實施情況並

結合新秀志工做認知訓練強化志工素質

(3) 以小團體模式執行課業加強個別輔導方案

(4) 結合本校不同領域學生以垂直整合模式瞭解資訊弱勢家庭對

資訊能力與資訊科技使用能力的現況與反應

(5) 分析這些家庭的數位學習行為模式

二課程規劃

本課程規劃結合網路資源使用與網站設計教導學生自網路概念

網路資源使用網路架構電腦安裝Flash 設計網頁設計網站架設

網站空間申請整體規劃可配合國家數位產業發展政策搭配網路商機

以培養中小學生先進多媒體動畫網頁設計之概念從動手做到解決面臨

問題可全面提升弱勢中小學生競爭力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 2: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

目錄

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 1 頁 共 123 頁

壹 活動目的

一活動背景與理念

「縮短中小學城鄉數位落差」活動是落實政府照顧弱勢族群之

政策主要目標為提升中小學弱勢學生電腦資訊能力並提供大專院

校及高中職學校學生優質的暑期工讀機會

隨著知識經濟的興起資訊與通訊科技更為普遍應用於社會中

在數位時代的衝激下資訊科技與數位知識的應用是改變工作生

活與學習方式的一項關鍵驅動要素資策會的一份報告中指出近年

經由網路獲得政府服務的民眾只佔 10落後於美國 20日本 14

新加坡 15面對知識經濟的全球化潮流資訊落差所形成的新階級

社會將是台灣未來發展的潛藏不穩定因素

數位落差問題已廣受國際間的重視我國近年亦不斷提出因應措

失包含「挑戰 2008 縮短數位落差推動計畫」「加強偏遠地區中小

學資訊教育計畫」「減少數位落差推動計畫」等無不著眼於降低未

來資訊化後資訊階級間的差異與不公平現象但由於資訊接觸資

源分配的不均資訊與通訊教育的尚未全面普及適應不同族群的數

位教材缺乏資訊弱勢族群依舊居相對劣勢

在我國近年因人口結構改變每年由東南亞地區移入的外籍配

偶以及他們所生的新生兒的人數逐年攀高目前外籍配偶子女已進入

中小學就讀這群外籍媽媽因為語言的隔閡工作等因素導致她們

在子女的課業上缺乏能力指導影響到照顧與養育下一代的品質針

對單親家庭原住民家庭外籍配偶家庭等鑑於經濟因素有較高

的學習資訊科技障礙長期成為資訊時代的弱勢族群本校(德霖技術

學院)資訊工程系將推動「歡喜 e 起來e 身好功夫」關懷與輔導中小

學弱勢資訊學生推動資訊弱勢族群的再學習機會以期能解決未來

台灣社會將面臨的資訊新階級問題

二活動特色

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 2 頁 共 123 頁

本計畫含蓋課程學習與夏令大地活動兩個面相在課程學習面將

以資訊技能學習為主軸規劃輔導資訊弱勢中小學生提升資訊技能具

體可行方案縮短城鄉數位差距確保資訊弱勢中小學生具有平等學

習的機會是本計畫主要精神藉由學習的過程教導資訊弱勢中小

學生具有與時俱進資訊科技知識與能力是本計畫終極目標本計

畫除了協助這些小學生學習各項資訊工具更於學習中帶入夏令大地

活動讓這群學童亦能享有一個歡樂的暑期生活同時將活動成果與

心得與國內各學術研究單位分享以作為輔助國內其餘資訊弱勢族

群的依據

本計畫將以網路學習為主軸提出輔助資訊弱勢族群之具體可行

之方案確保資訊弱勢族群具有平等學習的機會並具有使用資訊與

通訊科技設備及其所需的技能是本計畫主要精神教導該族群具有

與時俱進的更新科技知識與能力是本計畫終極目標我們將以單親家

庭原住民家庭外籍配偶家庭等為主要輔助對象除了協助其子女

參與各項資訊工具應用輔導課程外也會引導他們參與資訊技術學習

課程

三活動目的

初期目標設定消弭資訊學習落差確保人人均有使用數位科技的

機會與能力並能充分運用現代資訊工具建立適性化的分級學習數

位內容與教學平台以達資源共享之目標初期目標招募具有熱忱的

志工以輔導並提昇偏遠地區之外籍配偶家庭英語基本能力以方便

使用資訊工具藉以提昇資訊科技使用能力中期目標以『資訊志工』

形式推行教學相長提升能力關懷弱勢服務人群讓有能力的同

學在學校或社區定點利用已身之資訊技能服務社會在網路社群經

營以同儕的熱心教導協助這群中小學生資訊技術進而提升全國資

訊能力也藉教學相長增進自己的經驗及能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 3 頁 共 123 頁

貳 活動規劃概況

一主辦單位

德霖技術學院資訊工程系

236 台北縣土城市青雲路 380 巷 1 號

二活動日期

中華民國 99 年 7 月 12 日(星期一)至中華民國 99 年 7 月 23 日(星期五)

三活動地點

德霖技術學院資訊工程系 系館

236 台北縣土城市青雲路 380 巷 1 號

參 活動執行概況

一課程安排內容

志工團隊招訓輔教

(1) 甄選具有乙丙級國際證照或具有服務熱忱的同學教導服務與

學習的觀念並讓他們知道了解資訊弱勢族群是應該被關懷並

成立資訊志工團

(2) 舉辦志工訓練營及志工工座談會討論輔導方案及實施情況並

結合新秀志工做認知訓練強化志工素質

(3) 以小團體模式執行課業加強個別輔導方案

(4) 結合本校不同領域學生以垂直整合模式瞭解資訊弱勢家庭對

資訊能力與資訊科技使用能力的現況與反應

(5) 分析這些家庭的數位學習行為模式

二課程規劃

本課程規劃結合網路資源使用與網站設計教導學生自網路概念

網路資源使用網路架構電腦安裝Flash 設計網頁設計網站架設

網站空間申請整體規劃可配合國家數位產業發展政策搭配網路商機

以培養中小學生先進多媒體動畫網頁設計之概念從動手做到解決面臨

問題可全面提升弱勢中小學生競爭力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 3: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 1 頁 共 123 頁

壹 活動目的

一活動背景與理念

「縮短中小學城鄉數位落差」活動是落實政府照顧弱勢族群之

政策主要目標為提升中小學弱勢學生電腦資訊能力並提供大專院

校及高中職學校學生優質的暑期工讀機會

隨著知識經濟的興起資訊與通訊科技更為普遍應用於社會中

在數位時代的衝激下資訊科技與數位知識的應用是改變工作生

活與學習方式的一項關鍵驅動要素資策會的一份報告中指出近年

經由網路獲得政府服務的民眾只佔 10落後於美國 20日本 14

新加坡 15面對知識經濟的全球化潮流資訊落差所形成的新階級

社會將是台灣未來發展的潛藏不穩定因素

數位落差問題已廣受國際間的重視我國近年亦不斷提出因應措

失包含「挑戰 2008 縮短數位落差推動計畫」「加強偏遠地區中小

學資訊教育計畫」「減少數位落差推動計畫」等無不著眼於降低未

來資訊化後資訊階級間的差異與不公平現象但由於資訊接觸資

源分配的不均資訊與通訊教育的尚未全面普及適應不同族群的數

位教材缺乏資訊弱勢族群依舊居相對劣勢

在我國近年因人口結構改變每年由東南亞地區移入的外籍配

偶以及他們所生的新生兒的人數逐年攀高目前外籍配偶子女已進入

中小學就讀這群外籍媽媽因為語言的隔閡工作等因素導致她們

在子女的課業上缺乏能力指導影響到照顧與養育下一代的品質針

對單親家庭原住民家庭外籍配偶家庭等鑑於經濟因素有較高

的學習資訊科技障礙長期成為資訊時代的弱勢族群本校(德霖技術

學院)資訊工程系將推動「歡喜 e 起來e 身好功夫」關懷與輔導中小

學弱勢資訊學生推動資訊弱勢族群的再學習機會以期能解決未來

台灣社會將面臨的資訊新階級問題

二活動特色

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 2 頁 共 123 頁

本計畫含蓋課程學習與夏令大地活動兩個面相在課程學習面將

以資訊技能學習為主軸規劃輔導資訊弱勢中小學生提升資訊技能具

體可行方案縮短城鄉數位差距確保資訊弱勢中小學生具有平等學

習的機會是本計畫主要精神藉由學習的過程教導資訊弱勢中小

學生具有與時俱進資訊科技知識與能力是本計畫終極目標本計

畫除了協助這些小學生學習各項資訊工具更於學習中帶入夏令大地

活動讓這群學童亦能享有一個歡樂的暑期生活同時將活動成果與

心得與國內各學術研究單位分享以作為輔助國內其餘資訊弱勢族

群的依據

本計畫將以網路學習為主軸提出輔助資訊弱勢族群之具體可行

之方案確保資訊弱勢族群具有平等學習的機會並具有使用資訊與

通訊科技設備及其所需的技能是本計畫主要精神教導該族群具有

與時俱進的更新科技知識與能力是本計畫終極目標我們將以單親家

庭原住民家庭外籍配偶家庭等為主要輔助對象除了協助其子女

參與各項資訊工具應用輔導課程外也會引導他們參與資訊技術學習

課程

三活動目的

初期目標設定消弭資訊學習落差確保人人均有使用數位科技的

機會與能力並能充分運用現代資訊工具建立適性化的分級學習數

位內容與教學平台以達資源共享之目標初期目標招募具有熱忱的

志工以輔導並提昇偏遠地區之外籍配偶家庭英語基本能力以方便

使用資訊工具藉以提昇資訊科技使用能力中期目標以『資訊志工』

形式推行教學相長提升能力關懷弱勢服務人群讓有能力的同

學在學校或社區定點利用已身之資訊技能服務社會在網路社群經

營以同儕的熱心教導協助這群中小學生資訊技術進而提升全國資

訊能力也藉教學相長增進自己的經驗及能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 3 頁 共 123 頁

貳 活動規劃概況

一主辦單位

德霖技術學院資訊工程系

236 台北縣土城市青雲路 380 巷 1 號

二活動日期

中華民國 99 年 7 月 12 日(星期一)至中華民國 99 年 7 月 23 日(星期五)

三活動地點

德霖技術學院資訊工程系 系館

236 台北縣土城市青雲路 380 巷 1 號

參 活動執行概況

一課程安排內容

志工團隊招訓輔教

(1) 甄選具有乙丙級國際證照或具有服務熱忱的同學教導服務與

學習的觀念並讓他們知道了解資訊弱勢族群是應該被關懷並

成立資訊志工團

(2) 舉辦志工訓練營及志工工座談會討論輔導方案及實施情況並

結合新秀志工做認知訓練強化志工素質

(3) 以小團體模式執行課業加強個別輔導方案

(4) 結合本校不同領域學生以垂直整合模式瞭解資訊弱勢家庭對

資訊能力與資訊科技使用能力的現況與反應

(5) 分析這些家庭的數位學習行為模式

二課程規劃

本課程規劃結合網路資源使用與網站設計教導學生自網路概念

網路資源使用網路架構電腦安裝Flash 設計網頁設計網站架設

網站空間申請整體規劃可配合國家數位產業發展政策搭配網路商機

以培養中小學生先進多媒體動畫網頁設計之概念從動手做到解決面臨

問題可全面提升弱勢中小學生競爭力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 4: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 2 頁 共 123 頁

本計畫含蓋課程學習與夏令大地活動兩個面相在課程學習面將

以資訊技能學習為主軸規劃輔導資訊弱勢中小學生提升資訊技能具

體可行方案縮短城鄉數位差距確保資訊弱勢中小學生具有平等學

習的機會是本計畫主要精神藉由學習的過程教導資訊弱勢中小

學生具有與時俱進資訊科技知識與能力是本計畫終極目標本計

畫除了協助這些小學生學習各項資訊工具更於學習中帶入夏令大地

活動讓這群學童亦能享有一個歡樂的暑期生活同時將活動成果與

心得與國內各學術研究單位分享以作為輔助國內其餘資訊弱勢族

群的依據

本計畫將以網路學習為主軸提出輔助資訊弱勢族群之具體可行

之方案確保資訊弱勢族群具有平等學習的機會並具有使用資訊與

通訊科技設備及其所需的技能是本計畫主要精神教導該族群具有

與時俱進的更新科技知識與能力是本計畫終極目標我們將以單親家

庭原住民家庭外籍配偶家庭等為主要輔助對象除了協助其子女

參與各項資訊工具應用輔導課程外也會引導他們參與資訊技術學習

課程

三活動目的

初期目標設定消弭資訊學習落差確保人人均有使用數位科技的

機會與能力並能充分運用現代資訊工具建立適性化的分級學習數

位內容與教學平台以達資源共享之目標初期目標招募具有熱忱的

志工以輔導並提昇偏遠地區之外籍配偶家庭英語基本能力以方便

使用資訊工具藉以提昇資訊科技使用能力中期目標以『資訊志工』

形式推行教學相長提升能力關懷弱勢服務人群讓有能力的同

學在學校或社區定點利用已身之資訊技能服務社會在網路社群經

營以同儕的熱心教導協助這群中小學生資訊技術進而提升全國資

訊能力也藉教學相長增進自己的經驗及能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 3 頁 共 123 頁

貳 活動規劃概況

一主辦單位

德霖技術學院資訊工程系

236 台北縣土城市青雲路 380 巷 1 號

二活動日期

中華民國 99 年 7 月 12 日(星期一)至中華民國 99 年 7 月 23 日(星期五)

三活動地點

德霖技術學院資訊工程系 系館

236 台北縣土城市青雲路 380 巷 1 號

參 活動執行概況

一課程安排內容

志工團隊招訓輔教

(1) 甄選具有乙丙級國際證照或具有服務熱忱的同學教導服務與

學習的觀念並讓他們知道了解資訊弱勢族群是應該被關懷並

成立資訊志工團

(2) 舉辦志工訓練營及志工工座談會討論輔導方案及實施情況並

結合新秀志工做認知訓練強化志工素質

(3) 以小團體模式執行課業加強個別輔導方案

(4) 結合本校不同領域學生以垂直整合模式瞭解資訊弱勢家庭對

資訊能力與資訊科技使用能力的現況與反應

(5) 分析這些家庭的數位學習行為模式

二課程規劃

本課程規劃結合網路資源使用與網站設計教導學生自網路概念

網路資源使用網路架構電腦安裝Flash 設計網頁設計網站架設

網站空間申請整體規劃可配合國家數位產業發展政策搭配網路商機

以培養中小學生先進多媒體動畫網頁設計之概念從動手做到解決面臨

問題可全面提升弱勢中小學生競爭力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 5: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 3 頁 共 123 頁

貳 活動規劃概況

一主辦單位

德霖技術學院資訊工程系

236 台北縣土城市青雲路 380 巷 1 號

二活動日期

中華民國 99 年 7 月 12 日(星期一)至中華民國 99 年 7 月 23 日(星期五)

三活動地點

德霖技術學院資訊工程系 系館

236 台北縣土城市青雲路 380 巷 1 號

參 活動執行概況

一課程安排內容

志工團隊招訓輔教

(1) 甄選具有乙丙級國際證照或具有服務熱忱的同學教導服務與

學習的觀念並讓他們知道了解資訊弱勢族群是應該被關懷並

成立資訊志工團

(2) 舉辦志工訓練營及志工工座談會討論輔導方案及實施情況並

結合新秀志工做認知訓練強化志工素質

(3) 以小團體模式執行課業加強個別輔導方案

(4) 結合本校不同領域學生以垂直整合模式瞭解資訊弱勢家庭對

資訊能力與資訊科技使用能力的現況與反應

(5) 分析這些家庭的數位學習行為模式

二課程規劃

本課程規劃結合網路資源使用與網站設計教導學生自網路概念

網路資源使用網路架構電腦安裝Flash 設計網頁設計網站架設

網站空間申請整體規劃可配合國家數位產業發展政策搭配網路商機

以培養中小學生先進多媒體動畫網頁設計之概念從動手做到解決面臨

問題可全面提升弱勢中小學生競爭力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 6: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 4 頁 共 123 頁

表 1活動行程規劃表

授課內容 日 期 上午

830~1200

1200|

1300

下午 1300~1630

第 1 天 712

星期一

學員報到 自我介紹認識校園 小隊時間

電腦肢解 電腦概論軟體與硬體

第 2 天 713

星期二

網路我最會 網路資源概論網路與常

用資源 【IE搜尋引擎部落格

臉書hellip】

用它稿定報告 Office 系列 【Word(一)】

第 3 天 714

星期三

用它稿定報告 Office 系列 【Word(二)】

強又有力的簡介 Office 系列 【PowerPoint(一)】

第 4 天 715

星期四

強又有力的簡介 Office 系列 【PowerPoint(二)】

樂高機器人設計 【實作(一)】

第 5 天 716

星期五

樂高機器人設計 【實作(二)】

大地遊戲

第 6 天 719

星期一

網頁設計 So Easy 【網頁設計實作(一)】

網頁設計 So Easy 【網頁設計實作(二)】

第 7 天 720

星期二

網頁變化真有趣 【Flash 實作(一)】

網頁變化真有趣 【Flash 實作(二)】

第 8 天 721

星期三

網頁變化真有趣 【Flash 實作(三)】

樂活在德霖 團體康樂活動

第 9 天 722

星期四

我的網站 Show 我自己 【網站實作(一)】

我的網站 Show 我自己 【網站實作(二)】

第 10 天 網頁上傳

中 午 用 餐 及 午 休

學習成果展與頒獎

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 7: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 5 頁 共 123 頁

723 星期五

成果展示作業準備

本課程共計 8 門課程包含專業理論實務操作分別將訓練內容

實施方式教學資源創新部份組合關聯性說明於下

1 課程概述

(1) 電腦概論

(2) 網路資源概論

(3) Office 系列mdashWord 使用

(4) Office 系列mdashPower Point 使用

(5) 樂高機器人設計

(6) 網頁設計

(7) Flash

(8) 網頁與作業上傳架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 8: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 6 頁 共 123 頁

表 299 年度「縮短中小學城鄉數位落差」課程教學內容綜合彙整表

電腦概論 網路資源概論 Office 系列概論 (Word 與 Power

Point) 一 電腦發展史

1 電腦特色

2 電腦的功能

3 電腦的應用

二 電腦組裝

1 電腦的種類

2 認識個人電腦

3 電腦軟體簡介

三認識作業系統

1 作業系統的功能

2 常見的作業系統

一 網路資簡介

1 網路檔案傳輸

2 網路搜尋引擎

3 網路的種類

4 傳輸距離分類

二 認識 Internet

1 何謂 Internet

2 連上 Internet 各種方

3 上網所需配備-硬

4 Internet 提供的服務

三 連上 Internet

1 上網準備流程

2 何謂頻寬

一 Word

1 Word 入門

2 表格

3 插入與繪製圖形

二 PowerPoint

1 PowerPoint 入門

2 文字與版面編輯

3 搬移及複製投影片

樂高機器人設計 網頁設計 Flash 動態設計 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

1 建立網站與網頁

2 加入文字圖片與超連

3 使用表格

4 使用頁框分割網頁

5 使用佈景主題精靈與

範本動態顯示按鈕與

跑馬燈網頁插入 Flash

動畫

1 熟悉 Flash 操作環境

2 動畫製作基本概念

3 繪製圖形排列圖形動

畫中插入文字將圖

片聲音影片匯入動

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 9: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 7 頁 共 123 頁

三教材規劃狀況

1 教材內容簡介

課程名稱 1 電腦概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹電腦的軟硬體組態教

導學生瞭解電腦內部各單元包含輸出輸入

單元電腦的組織架構訓練學生基礎電腦知

識主要授課目標為 1 簡介簡測電腦工具 2 認識電腦各單元 3 瞭解電腦軟硬體組裝過程

課程大綱 1 電腦概論 2 電腦五大單元 3 電腦軟硬體組裝

課程名稱 2 網路資源概論

課程時數 3 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹網路概念常用的網路

資源與工具訓練學生基礎網路知識主要授

課目標為 1 簡介網際網路常用的工具 2 認識網路相關技術的發展 3 瞭解網路對日常生活的影響與應用

課程大綱 1 網路資源簡介 2 網路檔案傳輸 3 搜索引擎介紹 4 臉書簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 10: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 8 頁 共 123 頁

課程名稱 3 Office 系列mdashWord 使用 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Word除了介紹 Word 主要的部份外

同時會提及 Window 一些常用的技巧在課程

內容的編排上會以課本為主並輔以一些補

充講義以幫助學生在最短的時間內能掌握

學習的重點儘快進入 Office 的世界中 課程大綱 1 Word 基本介紹操作常用的技巧

2 Word 文件的建立編輯格式化 3 Word 表格製作 4 Word 圖形工具版面設計 5 郵遞標籤列印等

課程名稱 4 Office 系列mdashPower Point 使用

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹微軟公司 (Microsoft

Co)的 Power Point在學習的過程中除了課

堂中的講解實例操作練習及課後作業外

希望在課堂上學生若有任何問題可隨時提

出發問我們採取的是一種老師與學生學生

與學生的互動方式期望大家在愉快的環境

下彼此切搓教學相長相信在課程結束時

大家都能更上一層樓 課程大綱 1 基本畫面功能表

2 簡報範本製作投影片 3 簡報範本設計自定格式投影片文字處

理編排 4 變化圖表繪圖工具

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 11: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 9 頁 共 123 頁

課程名稱 5 樂高機器人設計

專業課程時數 6 小時 教學方式 課堂授課上機實習 內容摘要 本門課程旨在介紹樂高機器人的基本觀

念各式零組件特別是人機介面的設計操

作儀器設定並會介紹簡單的智慧型機器人之

程式設計 課程大綱 1 樂高入門

2 樂高組裝

3 動作原理

4 程式設計畫面

5 調整與測試

課程名稱 6 網頁設計 專業課程時數 6 小時

教學方式 課堂授課上機實習 內容摘要 隨著科技的進步除了傳統的媒體廣告及

銷售方式網路成為最容易建立且最不花成本

的宣傳方式及電子商務平台如何快速的建立

一個又酷又炫的網頁呢本課程將利用微軟

的 FrontPage 網頁編輯軟體教初學者快速的

製作出屬於自己設計風格之動態網頁

FrontPage 簡易的操作介面與 Word 相當類

似可直接編排撰文或排版圖案所以很適合

一般的初學者使用無需花費太多的時間去適

應此外 FrontPage 還提供了網站總管的功

能讓使用者可以輕輕鬆鬆的管理一個專業的

網站 除此之外WEB 20 是現在網站發展的趨

勢在本課程中將介紹製作簡易留言板的方

法讓網站能提供雙向溝通的功能最後將

FLASHFrontPage 網頁及留言版整合成一完

整的網站

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 12: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 10 頁 共 123 頁

課程大綱 授課時數 內容簡介

網頁設計基礎 1

1 認識網站架構 2 文字工具介紹 3 表格製作與運用 4 加入超連結 5 書籤的使用 6 框架的應用

圖片編輯 1

1 基本影像處理技巧 2 動態圖片製作 3 加入圖片與圖片超連結 4 影像地圖

元件的運用與網頁的

動態效果 1

1 背景音效 2 加入影片 3 加入跑馬燈計數器及其他元

件 4 動態顯示按鈕 5 動態 HTML 效果

留言板製作 1 1 表單製作 2 留言版資料庫建置 3 簡易留言板製作

網站整合 2 1 將 FlashFrontPage 網頁留

言板整合於一網站

課程名稱 7 FLASH 專業課程時數 12 小時

教學方式 課堂授課上機實習 內容摘要 Flash 動畫在網路上的應用已越來越廣

泛許多網站的首頁都以精彩生動的 Flash 動

畫來呈現甚至有的網站全部以 Flash 來架

構再加上 Flash 可以搭配 Actionscript 語言

呈現更多功能強大的效果因此 Flash 已成為

今日網站不可或缺的一部分了 本課程從最基礎的 Flash 軟體使用開始

採深入淺出教學方式介紹 flash 的功能及使

用方法並將各項功能應用在動畫與網站製作

上利用 Flash 設計製作受人歡迎的網頁動

畫希望透過本課程的學習使 Flash 初學者

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 13: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 11 頁 共 123 頁

能建立正確的基礎觀念以及熟悉各項功能的

使用可以在短短的 14 小時課程中體驗

Flash 的各種動畫功能完成一個簡單的網頁

Flash 作品 課程大綱 授課時數 內容簡介

繪圖基礎 2

1 認識 Flash 2 使用繪圖工具 3 使用文字工具 4 使用變形工具 5 圖像編輯與圖層設定

基礎動畫 2

1 認識影格及時間軸 2 逐格動畫 3 製作「移動」補間動畫 4 製作「形狀」補間動畫

進階動畫 2 1 元件製作 2 製作路徑動畫 3 遮色片動畫技法

音效整合 3 1 編輯音效 2 加入音效

互動式按鈕 3 1 製作按鈕元件 2 利用按鈕控制動畫播放

2 大地活動內容簡介

因小朋友參加本次輔導活動是來自不同學校各年級他們對自己隊

上的夥伴可能根本就不認識為了讓他們對彼此熟悉更加了解也為了

使其在未來幾天能互相配合適應團體生活此一課程的安排讓他們彼

此不再陌生增加小隊成員間之默契

表 3大地團康活動規劃表

活動名稱 活動 日期

活動地點 服務特色 服務項目 服務對象 受服務

人數 志工

人數

相見歡 990714 德霖學院 讓小朋友認識大哥哥

大姊姊 以表演方式

讓彼此認識

海山廣福

國小小朋

友 44 15

大地遊戲 970714 德霖學院 以闖關遊戲增進小朋

友團結的精神 小隊輔帶隊

跑關

海山廣福

國小小朋

44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 14: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 12 頁 共 123 頁

水火箭桶

比賽 970714 德霖學院

讓小朋友知道民俗童

玩的來源和DIY的樂

射程距離比

海山廣福

國小小朋

44 15

才藝教學 970714 德霖學院 以夥伴和小朋友的表

演讓鄉親寓教於樂

摺紙(螳螂

船 蓮 花

等) 摺 吸 管 ( 瞎子) 摺 氣 球 教

海山廣福

國小小朋

友 44 15

團康活動 970723 德霖學院 帶動團體活動讓全

員感情更加融洽 戶外大地遊

海山廣福

國小小朋

44 15

製作竹筷

槍比賽 970723 德霖學院

本課程除了較傳統的

童玩和釣飾如跳跳

球紙風車和章魚

讓小朋友從一些簡易

的東西創造有趣的

物品並從製作過程

中得到自信及滿足感

單發連發射

靶心

海山廣福

國小小朋

友 44 15

終極體智

能測驗 970723 德霖學院

戶外體能活動帶出

學生活力熱情

跳繩坐氣

球運算數學

(+ - )轉

圈杯子取水

海山廣福

國小小朋

友 44 15

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 15: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 13 頁 共 123 頁

三學習成果展示如成果展或結業式內容安排

1問卷回饋

活 動 滿 意 度

活動主題暑期電腦營

施測時間99年7月23日

施測單位德霖技術學院資工系

我在參暑期電腦營活動之後 很

滿

滿 意

尚 可

不 滿

滿

1我很滿意此次活動中所傳達的知識課程

2我滿意此次活動中所帶動的團康活動

3我滿意此次活動中所提供的餐點飲料

4我滿意此次活動中所服務的德霖哥姐

5我滿意此次活動中所輔導的電腦作業

6我滿意此次活動中所溢注的各式資源

7整體而言我滿意此次德霖技術學院這次所提供的暑假營

隊活動

8如果下回有類似的活動我一定會再參加

9請寫出您參與本次營隊活動的寶貴心得(建議)

各位師長同學您好

感謝您撥冗參與本次活動希望本次活動能讓您有所收穫或達到意見交流的目

的為了使日後舉辦活動能更臻完美在此請您給予我門寶貴意見以作為日後活動之

參考再次感謝您的參與及意見

恭祝 健康平安萬事如意 [填卷完畢請擲交工作人員]

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 16: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 14 頁 共 123 頁

整體而言此次活動共有 35 位小朋友回答問卷分析如下

1 對本活動讓小朋友在獲得課程知識感到滿意與很滿意佔 91

2 對本活動所設計的團康活動感到滿意與很滿意佔 80

3 度本項活動提供的餐點飲料感到滿意與很滿意達 80

4 對資工系德霖大哥哥與大姐姐感到滿意與很滿意達 91

5 對資工系所輔導的電腦作業感到滿意與很滿意達 97

6 對資工系所提供的各式資源感到滿意與很滿意達 89

7 小朋友對此次所安排的整體活動感到滿意與很滿意達 91

8 如果下回還有類似的活動表達一定會再參加的小朋友高達 80

其中對本次活動的整體滿意度感到很滿意的佔 71覺得滿

意與很滿意的小朋友合計佔 91特別是高達 80的小朋友表示下次

若還有類似的活動仍會繼續參加

圖 1活動後滿意度與意見調查分析

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 17: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 15 頁 共 123 頁

肆 活動成果檢討與建議

一優缺點分析與討論

1質性成效

本次所辦理之『暑期電腦營活動』強調將資訊技術與日常生活的

科學知識相結合透過設計的課程與戶外教學活動結合樂高機器人設

計電腦基本概念Word 使用Power Point 使用Flas 使用網站使

用電腦程式設計控制以樂高積木所創造的實體模型訓練小學生從

實際動手做的過程中學習到機械原理電腦控制和程式邏輯等科學知

識並從生活化具體化活潑化的引導方式中學習邏輯推理與思考

問題解決創造發明團隊合作以啟發學童「多元智能」的發展

本次暑期電腦營隊活動自大地遊戲設計到教材規劃與設計撰

寫內容均由同學們討論全權決定同學們透過多次彼此討論相互

修正對他們而言是一項難得學習的機會大專學生透過帶領活動過

程學習將知識融入服務與學習參與者可有以下收獲

1 培養團隊合作的精神

2 培養小朋友們創意注意力想像力學習力

3 培養小學生邏輯推論能力以提升思考能力

4 培養設計的能力

5 培養學習數學物理機械電子程式邏輯等科技知識的興趣

為未來進入高階科學研究打下根基

6 提昇大專生服務與學習關懷社會服務人群的理念

7 加重大專學生對社會的責任感

8 擴大大專生在學時的參與層面

9 提昇服務學校學生的資訊能力

10 提昇偏遠地區資訊時代的資訊技術弱勢族群學習資訊技術的能力

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 18: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 16 頁 共 123 頁

二未來改進方向與建議事項

對同學而言多數僅有唸書經驗經過此次活動發現教學真的是一

門不簡單的工作必須以小朋友的角色來思考講義內容的妥切性課程設

計的活潑性大地遊的吸引力在知識傳授的過程不僅要著重知識的傳

達更要以導引的方式帶領他們跨過門檻課堂的實際演練成品的分

享培養小朋友的興趣都是一件困難的事但是與小朋友建力良好的

關係後並以鼓勵的方式培養出興趣對小朋友而言鼓勵是最大的進

步動力小朋友可以獲得更多信心而願意多嘗試同學們經過這一次的活

活動後都覺得很充實

(一)未來改進方向

1 部份小朋友在學習時仍受不了網路誘惑會不斷的想要上網

本系同學只好先將網路斷線下次再有類似活動必需事先告知

參與的小朋友上課應遵守的原則

2 東方人個性較為保守故部份小朋友比較內向或害羞不太敢與

其他的小朋友或大哥哥大姐互動這個部份仍有待加強如何能

加強小朋友的互動性是同學值得學習的部份

3 部份小朋友學習意願有待加強如何強化同學帶領小朋友學習意

願以提高他們的興趣是值得同學學習

4 有少數的小朋友無法約束自己不時的吵鬧或會影響其他小

朋友學習的狀況也希望能有一些機制能制止或約束這些小朋

(二)建議事項

1 電腦營隊的心得分享可以促進彼此學習提升日後辦理類似活

動的品質同時經驗交流更可協助辦理單位檢視自己的缺失

2 教材與講議內容分享應可促進全國電腦營隊的進步

3 對於曾帶領電腦營隊的同學由主辦單位頒給統一格式的榮譽

卡以增加大家的榮譽感

4 「服務在地化」「服務社區化」應該更可以擴大服務的範圍因

此若能針對各校鄰近區域提供相關資源讓各校服務鄰近社

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 19: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 17 頁 共 123 頁

區當可增進里民福祉

伍 結論

參加這次活動雖然辛苦但對老師和同學們來說仍然有非常大的

收穫

一 我們看到了本系同學並不比他校同學差由於活動是在期末考一結束

就開始之前同學們忙著準備期末考並沒有太多時間可以全心準

備這次的活動然而以本系同學整體表現而言及由活動後的結案

報告來檢視完全不輸任何學校在這次活動中我們除了看到平日

教學的成效也看到了同學的努力與潛能更讓我們看到同學平日課

業之外的另一面也增加了我們對同學的信心只要有更充足的準

備用心去做相信會得到更多的掌聲第二不管對老師或同學

參加活動都是一種吸取經驗更上層樓的最好機會雖然有些同學在

活動中有所遲疑但在整體過程中因同儕的影響帶動了所有參加

活動的同學最後一天大家仍是活力十足彼此互相學習互相幫

忙讓整個活動順利進行而同學也可以互相研究探討別人成功的原

因例如某些同學較受小朋友的歡迎某些同學可能因個性較內向

與小朋友的互動性不高這些都是同學可以學習之處第三經過這

次活動大部份的同學受益良多學習如何與別人合作如何利用自

己所學到到的知識幫助別人學習一起成長在整個教與學的過程

不只增強了同學的自信心也獲得了很多寶貴的經驗可以作為未來

改進的參考我們相信藉由這些經驗的累積同學們在未來的表現

一定會愈來愈好

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 20: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 18 頁 共 123 頁

陸 附件

一教材

(一) 電腦概論

單元1 電腦基本概論 1-1 電腦簡介

1 電腦定義 電腦(Computer)是一種電子設備將繁複的人工計算予以機械化

自動化的一種電子機械裝置其可接受使用者輸入的資訊並將輸入的資

訊經由數學(Arithmetically)和邏輯(Logically) 處理後儲存於記憶體中

電腦發展至今已與我們的生活密不可分文明科技一日千里電腦改

變的不僅是人們的生活習慣甚至包含人類的思想觀念以及社會組織架

2 電腦能做什麼 在我們的日常生活中隨處都可看到電腦的蹤影其應用非常廣

範諸如統計報表學生成績公司銷售績效自動提款機工廠的自

動物流管制辦公室自動化捷運系統的電腦控制甚至國防作戰太

空氣象等都必須依賴電腦而目前在台灣電腦的普及率約10也就是

約每十個家庭中就有一部電腦而在未來電腦的成長將更為快速

3 資料與資訊 在我們生活社會中每天都會產生龐大的〝資料〞若這些龐大

的資料不使用電腦加以處理則資訊的產生將耗時且昂貴未經處理的

事實稱之為資料 (DATA)包含原始數字(Numbers)文字(Letters)或符號(Token)處理後稱之為資訊(Information)可以成為決策和行動

的則依據而處理的過程稱之為資料處理(Data Processing DP)若使

用電腦來完成資料的處理則稱之為電子資料處理(Electronic Data Processing EDP)對某些人有用的資訊可能是另一些人的資料資

料或資訊視其對使用者的用處而定

1-2 電腦的功能

1 資訊處理週期 一般電腦執行的步驟分為四步驟 1輸入2處理3輸出4

儲存

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 21: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 19 頁 共 123 頁

這四個步驟稱之為資訊處理週期(Information Processing Cycle)

如前所敘資訊處理的過程包括了輸入處理輸出儲存此即為電

腦系統的作業處理流程輸入輸出處理為將資料處理為資訊的過程

而儲存為將處理的結果儲存在電腦設備中以備日後重覆加以使用操

作電腦的人員稱之為電腦使用者(Computer User) 或使用者(User)

輸入 鍵盤光筆讀卡機掃描器hellip等

darr 處理 微處理機 (CPU)

darr darr 輸出 螢幕印表機等 儲存 磁碟磁帶硬碟等

EDP 資 料 (DATA) 資 訊

(INFORAMTION)

1-3 電腦分類

一依電腦處理資料型態分類 1 數位計算機(Digital Computer)一般科學工程商業等資料

處理輸出輸入均以數位資料表示不是連續的資料 2 類比計算機(Analog Computer)處理連續的資料例如電壓

電流速度再以連續的資料輸出 3 混合式計算機(Hybrid Computer)兼有數位計算機與類比計算機

之功能能接受連續的類比資料處理後輸出不連續的數位資

料 二依電腦用途分類

1 一般用途(General Purpose)適用於一般科學工程商業等 2 特殊用途(Special Purpose)為某種特定的目的而設計如飛機

的自動控制飛彈導航等 三依電腦的功能分類

1 微電腦(Microcomputer)又稱之為個人電腦(Personal Computer) 2 迷你電腦(Minicomputer) 3 大型電腦(Mainframe Computer) 4 超級電腦(Supercomputer)

1-4 電腦發展史

人類自最早期以手指計數其後以樹枝或小石頭而算盤(Abacus)的發明使人類可以做加減乘除可算是人類最早的正式計算工

具西方的早期計算機的發展可以分成幾個階段列表如下

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 22: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 20 頁 共 123 頁

早 期 電 腦 發 展

1642 年 法人巴斯卡 (Blaise Pascal)加法器是為機械期的開始

1673 年 德人雷布尼茲 (Gottfried Van Leibniz)改良加法器可做乘

1801 年 法人傑夸德 (Joseph Marie Jacquard)打孔卡片自動織布機

1820 年 法人湯姆斯 (Charles Xavier Thomas)改良雷布尼茲加器 1833 年 法人巴貝基 (Charles Babbage)差分機 (Difference Engine)

之後又完成的分析機 (Analytical Engine) 1890 年 美人何禮樂 (Herman Hollerith)打孔卡片完成人口普察

1894 年 何禮樂設計 80 欄卡片

1896 年 何禮樂成立列表公司 (Tabulating Machine Company)為現

IBM(International Business Machine)

1944 年 艾肯 (Howard Aiken)Mark I 計算機

1946 年 毛琪利 (John Mauchly)艾克特 (JPresper Eckert)完成第一部

電子電子數位計算機ENIAC(Electronic Numeric Integration And Calculator)范紐曼 (John Von Neumann)提出內儲程式

(Stored Program)

近 代 電 腦 發 展

19511958 第一代電腦真空管 (Vacuum Tubes)UNIVAC I

19591964 第二代電腦電晶體 (Transistors) 19651970 第三代電腦積體電路 (Integrated Circuit IC)

1971目前 第四代電腦超大型積體電路 (Very Large Integrated Circuit VLSI)

未來 第五代電腦人工智慧 (Artifical Language AI)

1-5 電腦組成基本元件

中央處理單元

輸出單元 輸入單元

控制單元

記憶單元

算術邏輯單元

資料流向 信號流向

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 23: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 21 頁 共 123 頁

一輸入單元(Input Unit)

1鍵盤(Keyboard) 2終端機(Terminal) 3螢幕(Screen) 4其它輸入設備 5特殊輸入設備

二中央處理單元(Central Process Unit -CPU) (一)算術邏輯單元(Arithmetic And Logic Unit ALU)

算術邏輯單元包含一些邏輯電路加法器(Adder)和一

些暫存器(Register )再配合各種控制訊號來執行加減乘

除等的算術計算及比較判斷的邏輯運算算術邏輯單元是

CPU 中的執行者 (二)控制單元(Control Unit CU)

控制單元是由一些暫存器解碼器(Decoder)程式計數

器(Program Counter - PC)指令暫存器(Instruction Register - IR)以及邏輯線路組合而成控制單元不斷的重覆這四個動

做擷取(Fetch)解碼 (Encoding) 執行(Executing)儲存

(Storing)這四個步驟合稱為機器週期( Machine Cycle) (三)記憶體單元(Memory Unit MU)

1 主記憶體 (Main Memory) 或稱為內部記憶體 (Internal Memory)

2 唯讀記憶體(Read Only Memory - ROM) (a) 罩型式唯讀記憶體(Masked ROM) (b) 可程式化唯讀記憶體(Programmable ROM - PROM) (c) 可消除式唯讀記憶體(Erasable Programmable ROM -

EPROM) a 紫外線照射方式去消除內部資料稱之為 UV

EPROM(Ultraviolet PROM) b 電氣方式(約 20V 電壓)消除內部部份或全部資

料稱之為 EA EPROM(Electricaliy Alterable PROM)或 EE PROM(Electricaliy Erasable PROM)

3 記憶體元件 (a) 靜態隨機存取記憶體(Static RAM) (b) 動態隨機存取記憶體(Dynamic RAM)

4 記憶體位址

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 24: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 22 頁 共 123 頁

5 記憶體容量 6 記憶體類別

(a) 暫存器(Register) a主記憶體位址暫存器(Memory Address Register -

MAR) b主記憶體緩衝輯暫存器(Memory Buffer Register -

MBR) c資料暫存器(Memory Data Register - MDR)

(b) 快速存取記憶體(Cache Memory) (c) 虛擬記憶體(Virtual Memory - VM)

三輸出單元(Output Unit)

(一) 輸出型態 1 報表 2 圖形

(二) 輸出設備 1印表機(Printer) 2繪圖機(Plotter) 3微縮影片(Computer Output MicrofilmCOM) 4語音輸出(Voice Output)

四輔助儲存體

(1) 主記憶體(Main Memory)和輔助儲存記體(Auxiliary Storage)主

記憶 (2) 軟式磁碟片(Diskette 或 Floppy Disk) (3) 碟機(Hard Disk Driver)可移動式磁碟匣光碟(Compact Disk) (4) 磁帶 (5) 其它的輔助儲存體

1-6 系統軟體作業系統 ( Operating System - OS ) 一 1監督程式( Supervisor 或稱 Monitor)

2工作控制程式(Job Program) 3定序程式( Schcduler ) 4中斷處理程式(Interrupt Handler) 5設備驅動程式( Drivers )來處理此類事情

二語言翻譯程式(Translator) 三編譯程式(Compiler)

其轉譯的過程有四個步驟依序為

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 25: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 23 頁 共 123 頁

1 語句分析( LexicalSyntaxSemantical) 2 碼的產生(Code Generate) 3 碼的完美化(最佳化) (Optimitize) 4 組合處理產生目的碼 四直釋程式(Interpreter) 五組譯程式(Assembler) 六連結載入程式( LinkLoader ) 七公用程式(Utility Programs) 1-7 應用軟體 一軟體分類

1文書處理軟體(Word Processing Software) 2電子試算表軟體(Electronic Spreadsheet Software) 3資料庫軟體(Database Software) 4繪圖應用軟體(Graphics Application Software)

(1)圓形圖 (Pie Chart) (2)長條圖(Bar Chart) (3)折線圖(Line Chart)

5其它的軟體一為資料通訊另一為桌上文書排版當作通訊管道

經電訊 6整合性軟體套裝軟體(Package Software)

二人機介面 1功能鍵(Function Key) 2詢問式(Ask_and_Answer) 3下拉式選單(Pull Down Menu) 4圖像介面(Icon)

三如何決定適何之軟體 1有些軟體分學習版(Student Version)商業版(commerical Version)及

發展版 2考慮電腦的相容性 3是否有足夠的說明文件(Document)以協助使用者操作軟體 4是否有原版使用執照(Lince) 5並非高價軟體即為最適合之軟體

四幫助學習之軟體 1教學指引(Tutorial) 2線上求助(On_Line_Help) 3指導手冊(Trade Book) 4功能鍵(Funnction Key)或熱鍵(Hot Key)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 26: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 24 頁 共 123 頁

1-8 計算機處理系統的作業方式 一交談式處理 二批次式處理(Batch) 三多元程式作業(Multiprogramming)又稱之為多工(Multitasking)作業系統 四分時作業(Time Sharing) 五多元處理(Multiprocessing)

1雙處理機(Dual Processor)具有容錯功能 (Fault Tolerance) 六連線作業(On Line Processing) 七分散式資料處理(DiStribUted Data PrOCeSSing - DDP) 1-9 使用計算機處理資訊的原因

1增快作業速度提供及時資訊 2儲存容量大彈性佳安全性高 3減少錯誤的發生提高資訊的植正確性 4減輕人力負擔提高人的工作價值 5降低作業成本提高企業競爭能力

1-10 辦公室自動化 (Office Automation OA)

1資料處理 (Data Processing DP) 2文書處理 (Word Processing WP) 3音訊處理 (Audio Processing) 4影像處理 (Image Processing) 5通訊網路 (Network)

1-11 資訊系統的元素

資訊系統除了電腦硬體設備和軟體外還包括了其它部份

總括來說資訊系統應包含六個基本元素設備軟體資料

工作人員使用者和文件化的作業程序

(二)網路資源概論 Internet 與 WWW

一 名詞解釋 (一)IP 位址(Internet Protocol Address) (二)WWW(World Wide Web) (三)URL(Universal Resource Location) (四)Web 位址(Web Address)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 27: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 25 頁 共 123 頁

主機名稱加上網域名稱例如松崗電腦 wwwunaliscomtw (五)延伸名稱

com 商業組織

edu 教育學術研究單位

gov 政府組織及組織

int 國際組織

mil 國防部機構及組織

net Internet 上的管理網路單位機構及

組織 org 研究單位及非營利組織

(六)國別碼

au 澳大利亞 nz 紐西蘭

ca 加拿大 sg 新加坡

cn 中國大陸 tw 台灣

hk 香港 uk 英國

jp 日本 us 美國

my 馬來西亞

二 啟動 IE 1點選桌面上的 圖示

2點選快速列上的 圖示 3點選「開始程式集Internet ExplorerInternet Explorer」

三 IE 的工作環境

1 標題視窗列 2 功能表 3 工具列 4 位址列

四切換網站1 在位址列中輸入新的 Web 位址按下 Enter 鍵 2 點選「檔案開啟舊檔」在『開啟』的地方輸入新的 Web

位址按下 Enter 鍵或點選『確定』 3 點選位址列右方向下的箭號 在位址列中選取新的

Web 位址按下 Enter 鍵 4 點選「檔案」在檔案中會保留最近拜訪過的 7 個 Web

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 28: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 26 頁 共 123 頁

位址點選其中一個 5 點選「檢視瀏覽器列記錄」將記錄工具列叫出直接

在記錄中點選 Web 位址

6 工具列上的 點選前一個或下一個 Web 畫

面 7 利用各 ISP 網路服務提供者所提供的一些網站

五我的最愛 對一些常去的網站可以將其加入的我的最愛

(一) 顯示我的最愛

點選「檢視瀏覽器列我的最愛」 (二) 建立我的最愛點選「我的最愛加到我的最愛」

1 否(O)只將畫面加到我的最愛只將網站加入我的最愛但網站

內容改變時不希望被通知也不希望

下載 2 是(Y)但告訴我這畫面的更新時間指定 IE 定時檢查網站內容

若有改變則即時通知你 3 是(D)有更新時通知我同時下載畫面供離線閱讀IE 會定時檢查

網站若有變更則會

通知並依指定時間下載

網頁 4 名稱此網站的名稱 5 其目錄存在〝CWindowsFavorites〞下

(三) 執行我的最愛 1 點選「我的最愛」 2 點選「開始我的最愛」 3 在 IE 瀏覽器中將我的最愛顯示出點選「我的最愛」中的

頻道 (四) 刪除我的最愛

1點選「我的最愛組織我的最愛」選定一個項目再點選『刪除』

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 29: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 27 頁 共 123 頁

六查尋一些網路資源 1 番薯藤『httpwwwyamorgtw』 2 GAIS『httpgaiscsccuedutwcgaishtml』 3 蓋世引擎『httpsunsiteccuedutw』 4 中華電信『httpwwwhinetnet』 5 台灣地區網路服務資源『httposilcsientuedutw』 6 高提耶服飾『httpwwwgaleriegaultiercom』 7 保羅史密司『httpwwwpaulsmithcouk』 8 『httpwwwagnesbfrflash3contenthtml』 9 GAP『httpwwwgapcomonlinestoregap』 10 香蕉共和國『httpwwwbananarepubliccomhomehtm』 11 Guess『httpwwwguesscom』 12 Nike『httpwwwnikecomstoreindexshtml』 13 雅虎『httpshoppingyahoocomapparel』 14 亞馬遜『httpwwwamazoncom』 15 電子海灣『httpwwwebaycom』 16 『httpwwwdesigneroutletcom』 17 『httpwwwsavishoppercom』 18 『httpashfordcom』 19 IE 的搜尋點選『移至搜尋 Web』 20 在位址列輸入「find」或「go」然後空一格再輸入欲查詢的關鍵

字輸入完畢後按下 Enter 鍵例如 find NetScape Enter 七離線瀏覽先下載網頁再以離線的方式慢慢瀏覽網頁

點選「檔案離線工作」即中斷連線

八全螢幕瀏覽點選「檢視全螢幕」或點選工具列上的 鈕再點

一次「全螢幕」鈕恢復到原始狀態 九設定起始畫面啟動 IE 時的載入的第一個畫面

1 點選「檢視Internet 選項」在『一般』的頁籤選項下

於「位址(R)」內輸入一個站名按下〝確定〞鈕 2 在瀏覽某一個網站時將位址列中的位址做標示記號

(Mark)按下滑鼠左鍵拖曳到「首頁」鈕中再點選〝是〞 十設定連結站台的內容

(一)點選「檢視工具列」將連結叫出 (二)調整位置選到某一個項目按住滑鼠左鍵移動 (三)新增連結鈕

(1)先切換到欲新增的畫面 (2)點選「我的最愛加到我的最愛」選擇『只將畫面加

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 30: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 28 頁 共 123 頁

到我的最愛』 (3)在『名稱』的地方輸入一個名稱 (4)點選「建立(C) gtgt」鈕 (5)出現「新增我的最愛」畫面選擇『連結』資料夾

表示將其送到『連結』資料夾中 (6)或直接在位址列上按住滑鼠左鍵將其拖到『連結列』

(四)刪除連結鈕 (1)將滑鼠移到欲刪除的連結選項上按下滑鼠右鍵選

『刪除』 (五)編修連結鈕

(1)將滑鼠移到欲編修的連結選項上按下滑鼠右鍵選

『內容』在『Internet 捷徑』的頁籤下於〝目標 URL〞處輸入新站台即可

(六)修改連結按鈕的名稱 (1)點選「我的最愛組織我的最愛(O)hellip」將滑鼠移到

『連結』上快點滑鼠左鍵兩下選擇欲更改的項目

再點選『重新命名(M)』再點選『關閉(C)』 十一顯示隱藏圖片切換網頁時先不下載圖片以增快速度

1 點選「檢視Internet 選項(O)hellip」在『進階』頁籤下將〝顯示圖

片〞前的勾號取消 2欲看某一張圖片時可以將滑鼠移到某一張圖片的圖示上按下滑

鼠的右鍵再點選『顯示圖片(H)』 十二變更字型大小

1 點選「檢視字型(N)hellip」共有五種大小字型可供選擇 2亦可以點選「檢視工具列」將『文字標籤』鈕取消再到螢幕上

以滑鼠點 鈕 十二變更字型及其顏色

1 點選「檢視Internet 選項(O)hellip」在『一般』頁籤下 (1) 點選『色彩』將〝使用 Windows 色彩(W)〞前的勾號取消

再到色彩項目下選擇『文字(T)』『背景(B)』按鈕以設定再

到連結項目下選擇『已查閱(T)』『未查閱(N)』按鈕以設定 (2)點選『字型』點選所要的字型

十三新增視窗欲使用新的視窗再開啟另一個站台 1 點選「檔案(F)新增(N)視窗(W)」即可在新視窗中另開一個站

台 2各視窗可以有各視窗的設定互不影響

十四篩選不適當的畫面 1 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 31: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 29 頁 共 123 頁

『啟動』輸入密碼後會進入分級設定 2 在『分級』的頁籤下在分級中以按住滑鼠左鍵不放拖

曳滑鼠設定 3 點選「檢視Internet 選項(O)hellip」在『內容』頁籤下點選

『設定值』輸入密碼後到『一般』頁籤下點選『變更密碼』以

更改密碼不輸入密碼代表取消密碼 十五複製文字

(一)複製部份文字 1 按住滑鼠的左鍵拖曳出欲複製的文字點選「編輯複

製」 2 將滑鼠移到目的地點選「編輯貼上」

(二)複製全部文字 1 點選「編輯全選」或按下滑鼠右鍵出現快顯功能表點

選「全選」以選定所有文字 2 將滑鼠移到目的地點選「編輯貼上」

十六複製圖片 (一) 複製整個螢幕

1 選到來源的畫面點按 Print Screen 2 轉到欲複製的目的地點按「編輯貼上」

(二) 複製使用中視窗的內容 1選到來源的畫面點按 Alt + Print Screen 2轉到欲複製的目的地點按「編輯貼上」

(三) 複製單一圖片 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「複製」 2轉到欲複製的目的地點按「編輯貼上」

(四) 將單一圖片存檔 1選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出現快顯

功能表點選「另存圖片(S)」 (五) 將圖片設為桌面背景圖案

1 選到來源的畫面將滑鼠移到圖片上點按滑鼠右鍵出

現快顯功能表點選「設成桌面底色圖案(W)」 2 該圖片將會被存成〝CWindowsInternet Explorer

Wallpaperbmp〞 十七複製背景圖案

1 欲將所喜愛的網站所使用的背景圖案當成自己的桌面上

的背景圖案先選到來源的畫面將滑鼠移到背景上點按滑鼠右

鍵出現快顯功能表點選

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 32: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 30 頁 共 123 頁

(1)「設成桌面底色圖案(W)」再進入『顯示器內容』之『背景』

頁籤將其顯示方示設為『並列顯示』 (2)「另存背景(S)」 (3)「複製背景(C)」

十八複製捷徑 1 選到來源的畫面將滑鼠移到有連結的項目上點按滑鼠

右鍵出現快顯功能表點選「複製捷徑(T)」 2 若滑鼠的位址並非可以連結到其它站台欲為其建立一個

連結則在該項目上按下滑鼠的右鍵後點選「建立捷徑(T)」以

為該網頁設立一個捷徑置於桌面回到桌面上將滑鼠移到該項

目按下滑屬右鍵點選「內容(R)」在「目標 URL(T)」中輸入一

個網站的位址

3 亦可使用拖曳的方式將該網頁拖至 設成開始的功

能或將該網頁拖至工作列上的快速啟動列中 (三) Word 使用手冊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 33: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 31 頁 共 123 頁

1 啟動 Word (開始-gt所有程式-gtMicrosoft Office-gtMicrosoft Office Word 2003)

圖示

2 Word 的工作環境介紹

3 關閉 Word

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 34: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 32 頁 共 123 頁

有兩種方法可以關閉 Word 2003 方法一按功能表列 (檔案-gt結束)

方法二Word 視窗右上角的

儲存檔案重要提示 若是檔案為儲存工作或儲存之後又做更

改當選按 關閉視窗按鈕時會出現佑圖

提示對話方塊選按 是 紐會自動儲存動

作在關閉檔案選按 否 扭會直接關閉該

檔案不做儲存動作選按 取消 紐會重

回檔案之中

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 35: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 33 頁 共 123 頁

標題 (加入文字藝術師) 方法插入->圖片->文字藝術師

選擇你要的樣式在按確定

輸入你要的文字

更改字形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 36: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 34 頁 共 123 頁

4-1 文字編輯

( ) ()插入方法插入-gt特殊符號

1置中

1要的項目先打好

3圖案形狀

2()轉全形

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 37: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 35 頁 共 123 頁

4-2 插入表格 (表格-gt插入-gt表格)

選起來

(格式-gt自型)

字型樣本

自訂效果

大小 18

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 38: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 36 頁 共 123 頁

4 欄 5 列

選取

拖曳

改變位置

選取靠右

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 39: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 37 頁 共 123 頁

合併儲存格

4-3 限制圖片大小

先拉出一個框

表格-gt合併儲存格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 40: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 38 頁 共 123 頁

點兩下以後色彩及框線標籤

填滿效果圖片標籤按選取圖片

選擇你要的圖片

快點圖片兩下 快取檔案格式-gt配置標籤-gt與文字排列

4-4 插入圖片

1色彩

2填滿效果

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 41: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 39 頁 共 123 頁

(插入-gt圖片-gt從檔案) 選擇你要的圖片按插入

(插入-gt圖片-gt美工圖案) 按搜尋

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 42: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 40 頁 共 123 頁

4-5 框線透明化 (格式-gt框線及網底)

頁面框線 (格式-gt框線及網底)

表格全選 滑鼠右鍵 對齊儲存格

選擇無-gt確定

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 43: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 41 頁 共 123 頁

4-6 插入背景

1樣式

2色彩

3方框

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 44: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 42 頁 共 123 頁

檢視-gt背景-gt填滿效果 填滿效果材質標籤-gt其他材質

4-7 完成

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 45: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 43 頁 共 123 頁

月曆製作 1 先打出下列表格及內容

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

2 複製七月表格改成八月

七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 46: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 44 頁 共 123 頁

製作七月~十月 七月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

八月

日 一 二 三 四 五 六

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

29 30 31 九月

日 一 二 三 四 五 六

1 2 3 4

5 6 7 8 9 10 11

12 13 14 15 16 17 18

19 20 21 22 23 24 25

26 27 28 29 30

十月

日 一 二 三 四 五 六

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

利用 tab 鍵

會自動換行

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 47: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 45 頁 共 123 頁

3 開新 Word 4 插入 1 欄 5 列的表格

5 選取下面四格(表格-gt表格內容)

指定高度7cm 慣用寬度12cm

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 48: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 46 頁 共 123 頁

滑鼠向變向下箭號點下去

6 插入左方列

7 一欄二列跟一欄三列合併 一欄三列跟一欄四列合併

插入圖

片及複製表格

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 49: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 47 頁 共 123 頁

8 合併一欄一列

9 設計年框

1複製月份貼上

2拉大表格

插入喜歡的圖片

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 50: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 48 頁 共 123 頁

10 選取年框-gt表格-gt跨頁標題重複

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 51: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 49 頁 共 123 頁

14 完成(參考完成檔月曆完成)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 52: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 50 頁 共 123 頁

合併列印 1 合併列印練習

1-1 啟動 Excel

1-2 輸入下列資料

座號 姓名 國語 數學 社會 自然 總分

1 小毛 10 20 30 40 100 2 阿花 80 87 88 66 321 3 小綠 44 33 22 33 132 4 貝貝 55 66 77 88 286 5 琪琪 34 45 56 99 234 6 阿水 34 45 45 56 180 7 小威 45 67 78 78 268 8 小金 34 56 98 54 242 9 雷雷 45 45 78 78 246

總分=各個分數加起來

打完之後儲存

工作窗格

資料編輯列

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 53: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 51 頁 共 123 頁

開啟 Word

1-3 合併列印 方法首先在 (檢視-gt工具列-gt合併列印) 需要打勾

1-4 主文件設定

2按確定紐

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 54: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 52 頁 共 123 頁

標籤名稱可以自己定 上邊界 2 cm 側邊界 2 cm

標籤高度 27 cm 標籤寬度8 cm 垂直點數 32 cm 水平點數 85 cm

橫向數目 2 縱向數目 8 頁面大小 A4

設定完成 按 確定 紐

確定是不是自訂的檔名按 確定

1-5 開啟資料來源

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 55: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 53 頁 共 123 頁

我的姓名叫作 laquo姓名raquo 我的座號是laquo座號raquo 我的全部加起來的分數是laquo總分raquo

1-6 按 散佈標籤

完成之後對照 Excel 內容

laquo raquo是標籤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 56: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 54 頁 共 123 頁

座號 姓名 國語 數學 社會 自然 總分 1 A 10 20 30 40 100 2 B 80 87 88 66 321 3 C 44 33 22 11 110 4 D 55 66 77 88 286 5 E 34 45 56 99 234 6 F 34 45 45 56 180 7 G 45 67 78 78 268 8 H 34 56 98 54 242 9 I 45 45 78 78 246

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 57: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 55 頁 共 123 頁

合併列印範例

我的姓名叫作 小毛 我的座號是1 我的全部加起來的分數是100

我的姓名叫作 阿花 我的座號是2 我的全部加起來的分數是321

我的姓名叫作 小綠 我的座號是3 我的全部加起來的分數是132

我的姓名叫作 貝貝 我的座號是4 我的全部加起來的分數是286

我的姓名叫作 琪琪 我的座號是5 我的全部加起來的分數是234

我的姓名叫作 阿水 我的座號是6 我的全部加起來的分數是180

我的姓名叫作 小威 我的座號是7 我的全部加起來的分數是268

我的姓名叫作 小金 我的座號是8 我的全部加起來的分數是242

我的姓名叫作 雷雷 我的座號是9 我的全部加起來的分數是246

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 58: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 56 頁 共 123 頁

我的姓名叫作 我的座號是 我的全部加起來的分數是

我的姓名叫作 我的座號是 我的全部加起來的分數是

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 59: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 57 頁 共 123 頁

(四)Power Point 設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 60: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 58 頁 共 123 頁

5

6

7 8

9 10

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 61: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 59 頁 共 123 頁

11

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 62: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 60 頁 共 123 頁

(五) 樂高機器人程式設計

1

2

3

4

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 63: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 61 頁 共 123 頁

5

(六) 網頁設計

網頁設計概論 (一)建立資料夾

1在 D磁碟下建立「WEBXXX」資料夾(XXX 為自己的姓名) 2在「WEBXXX」資料夾下建立「homepage」資料夾存放 titlehtm

menuhtmmainhtm 這三個檔案 3在「WEBXXX」資料夾下建立「images」資料夾將所有使用的圖形

黨均放置在 images」資料夾中 4在「WEBXXX」資料夾下建立「guitar」資料夾存放 guitar_RCXhtm

guitar_ Wordhtmguitar_PowerPointhtmguitar_Flashhtm 這四個檔

案 (二)建立框架

1設計首頁檔名 indexhtm置於網站的根目錄 (DWEBXXX)下

2首頁標題為「歡迎來到 XXX 的屋子」 3 首頁需設定為框架式網頁選擇框架頁裡的rdquo橫幅和目錄rdquo分割為三

個框架(有框線)分別連結到三個子網頁檔案名稱及框架頁名稱規

定如下表

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 64: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 62 頁 共 123 頁

編號 檔案名稱 框架頁 說明

1 titlehtm title 標題頁

2 menuhtm menu 選單頁(框架寬度為 30)

3 mainhtm main 主網頁

格式

titlehtm

menuhtm mainhtm

(三) titlehtm 網頁需函下面的資訊

1 網頁內容裡〝進階〞上邊界與左邊界均為 0 像素 〝設定格式〞背景顏色變更成喜愛顏色 2當開啟rsquo網頁時文字須以動態效果呈現水平置中對齊垂直置中

對齊(插入rarrWeb 元件rarr跑馬燈) (四) menuhtm 網頁需函下面的資訊

1網頁背景顏色為黃色 2網頁內製作一個(5 列 1 欄)表格框線 0 像素水平置中對齊 3表格第一列輸入文字「成果展」顏色為綠色水平置中對齊 4表格第二列輸入文字「樂高」顏色為綠色水平置中對齊並設定

超連結到 guitar_RCXhtm 網頁且在 main 框架頁中開啟 (右鍵rarr

超連結內容rarr目標框架rarrmain 框架頁) 5表格第三列輸入文字「Word」顏色為綠色水平置中對齊並設定

超連結到 guitar_ Wordhtm 網頁且在 main 框架頁中開啟 6表格第四列輸入文字「PowerPoint」顏色為綠色水平置中對齊並

設定超連結到 guitar_PowerPointhtm 網頁且在 main 框架頁中開啟 7表格第五列輸入文字「Flash」顏色為綠色水平置中對齊並設定

超連結到 guitar_Flashhtm 網頁且在 main 框架頁中開啟 8表格下方輸入文字「最近更新日期 yyyymmdd」顏色為藍色水平

置中對齊(yyyy西元年mm月份dd日期)

單元1 HTML的基本觀念 壹HTML 的基礎

一 網頁的一些基本語言 1 HTML(HyperText Markup Language)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 65: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 63 頁 共 123 頁

網頁編輯的最基本語言是超文字標示語言它是編輯網頁

的基礎從這個基礎衍生出許多的新技術但這些技術依然是

建構在HTML的架構下目前對HTML的編輯軟體已越來越

多對使用者而言是一大福音但不管使用者選擇那一種軟體

編輯都應該對HTML的基本語法有一個基本的認識 起源於日內瓦的歐洲高能粒子物理實驗室(CERN)當初僅

想利用網路傳輸一些文字與圖片以交換資訊此一發展成為

現在的HTML又被視為靜態的HTML(Static HTML) 2 Dynamic HTML

HTML並不算是一種程式語言它只挶限於如何將文字做

一種表現或將其與圖片文件等之間做一個連結因HTML並不算是一種程式語言因此其只能做一些靜態的表現若要

在網頁上做一些動態的表現就必須加入一些程式碼 3 Java Script VB Script

IE支援 NC支援 Java

Java Script VB Script

Active X元

Java Script及VBScript所能執行的程式是一段在瀏覽器上解譯

而將結果呈現的腳本(Script) 4 CGI

共通閘道介面(Common Gateway Interface-CGI)在觀念上

類似UNIX與DOS的Shell使用者利用鍵盤輸入指令然後交

由Shell來處理解譯這些指令並啟動相對應的程式對CGI而言指令來自瀏覽器以CGI的介面傳送到Server後由Server解譯並啟動相對應的程式

對Shell指令而言可能會帶有參數當程式被Shell啟動

後透過Shell的介面取得參數對Server端而言則透CGI介面取得指令的參數

Shell啟動程式執行後的結果是輸出到螢幕上而CGI啟動

程式執行後的結果是輸出到網路也就是瀏覽器 這些CGI的程式都是使用其他的程式語言所編寫的獨立檔

案並非直接嵌入HTML中因此顯的較為複雜 Web Server提供的CGI的介面程式有source codeobject

codelibrarylinking library等 (1) 同樣的作業系統會因Web Server不同CGI的介面程式就

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 66: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 64 頁 共 123 頁

不相同例如Web Server由Web Server改成IIS後CGI的介

面就不相同 (2) 對提供虛擬主機的ISP而言通常不允許使用者使用自己所

熟悉的語言撰寫程式以UNIX的ISP而言只允許使用者

使用Perl (3) 存取資料的資料庫程式撰寫不易

5 ASP ASP程式可以說是CGI程式的改良版在Server端執行

ASP並不會將原始的程式碼傳給使用者的瀏覽器而是將這些

程式碼轉成HTML再送到使用者的瀏覽器上顯示 (1) ASP搜集網頁資料後解析瀏覽器上傳的資料並轉換成

為物件供Script語言讀取 (2) ASP可以使用Windows環境下的ActiveX物件因此也可以

使用ADO(ActiveX Data Object)物件來存取Web資料庫 (3) 要執行ASP在NT下必須安裝 IIS(Internet Information

Server) 或 是 在 NT WorkStationWin95Win98 下 安 裝

PWS(Personal Web Server) (4) 編寫ASP程式最好不要使用FrontPage等網頁編輯器因這

些工具會在ASP的網頁程式中加入一些額外的資料造成

網頁運作的困擾因此最好使用NotePade(小作家)編輯 二 HTML的基本語法

1標籤以 ldquoltrdquo 和 ldquogtrdquo 符號標記 2副檔名 htm(或是 html) 3網頁檔案HTML (Hyper Text Marketup Language) 4標籤為英文文字無大小寫之分 5標籤分為兩類 (1)前後包夾型成對出現

ltBODYgthelliphelliphellipltBODYgt BODY BR HR helliphellip等 在 HTML 中稱為元素

(element)前面標籤稱為起始標籤(STARTTAG)後面的標籤

稱為結束標籤(ENDTAG) (2)單槍匹馬型只出現一次

ltBRgtltHRgt等 三 基本架構

(一)ltHTMLgthelliphelliphellipltHTMLgt文件開始與結束 (二)ltHEADgthelliphelliphellipltHEADgt標示文件資訊 (三)ltBODYgthelliphelliphellipltBODYgt標示本文 (四)ltTITLEgthelliphelliphellipltTITLEgt文件標題

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 67: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 65 頁 共 123 頁

範例 ltHTMLgt ltHEADgt HTML 網頁講義 ltHEADgt ltTITLEgt 四海資訊網 ltTITLEgt ltBODYgt 第一個網頁 ltBODYgt ltHTMLgt

四 簡單格式變化 (一) 空格與換行

網頁內文件自行加入的換行與空格無效必須使用控制標

籤 (1)

ltBODYgt 四海資訊公司 ltBODYgt

(2) ltBODYgt 四海 資訊 公司 ltBODYgt

(3) ltBODYgt 四 海 資訊 公司 ltBODYgt

上面這三種寫法都會產生相同的結果如下所示 四海資訊公司

(二) ltBRgt 換行 四海ltBRgt資訊公司ltBRgt 四海ltBRgt 工商專校ltBRgt PS文字到達右邊界時遇到空格也會自動換行(wrap)但

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 68: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 66 頁 共 123 頁

因一般中文字之間通常不會留空白因此不會自動換

行但新版本的 IENC 均已改善此一問題 (三) ltPgt 分段

除了換行之外會多加一行空白行 四海資訊公司ltPgt 研發部ltPgt PS加上ltPgt可加快 IE5 速度

(四) ltPREgt 使用原有排列 依照原始排列方式瀏覽文件 ltPREgt 四 海 資 訊 公 司 研 發 部 ltPREgt

(五) ltHRgt 加上分隔線 網頁內不同段落間可加上分隔線 ltBODYgt 四海資訊公司 ltHRgt 研 發 部 ltBRgt 第 一 組 ltBRgt ltHRgt 聯絡電話 ltBRgt ltBODYgt

(六) ltHgt 文字標籤 H1 H2 helliphelliphellipH6 共 6 種 數字愈大顯示的文字愈小 ltH1gt床前明月光ltH1gt ltH2gt疑是地上霜ltH2gt ltH3gt舉頭望明月ltH3gt ltH4gt低頭思故鄉ltH4gt PS使用ltHgt即可不用ltBRgt標籤會自動換行

(七)ltALIGNgt 文字對齊 (1)lt標籤名稱 屬性 1=值 1 屬性 2=值 2helliphelliphellipgt

ltP ALIGN= 屬性gt 屬性可以是LEFT(向左對齊) CENTER(置中對齊) RIGHT(向右對齊) 如果遇到ltHRgt ltHgt 代表獨立段落時 回復預設

值即向左對齊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 69: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 67 頁 共 123 頁

(2)ltCENTERgt可直接使用而不需加上 P ALIGN = gt ltCENTERgt 本公司helliphelliphellip ltCENTERgt

(八) ltHRgt 變化 ltSIZE=10gt ltHR ALIGN=CENTER WIDTH=100gtltBRgt ltHR ALIGN=LEFT WIDTH=50gtltBRgt ltHR ALIGN=RIGHT WIDTH=50gtltBRgt

(九)範例 ltHTMLgt ltHEADgt四海資訊公司製作ltHEADgt ltTITLEgt四海全球資訊網ltTITLEgt ltBODYgt ltH1gt2000 年新產品介紹ltH1gt ltHRgt ltH2gtInternet 網頁製作ltH2gt HTML 語法系列ltBRgt JavaScript 系列ltBRgt Java 系列ltBRgt VBScript 系列ltBRgt ltHRgt ltP ALIGN=CENTERgt 四海新產品資料 目前已在四海網站每月更新 要獲得ltBRgt 最新的消息 請每月月初參觀四海網站如果您有

甚麼建ltBRgt 議或問題 可以利用訪客留言 或是四海熱線您的

意見ltBRgt 就是我們進步的動力 ltBODYgt ltHTMLgt

貳 URL 一超文字的連結

(1) ltAgt標籤 ltAnchorgt連結到外面世界 lt A HREF=httpwwwhinetcomtwgt四海公司ltAgt

(2) 本地檔案連結 ltA HREF=submhtmgt 連到 mhtm 這個檔案 ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 70: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 68 頁 共 123 頁

(3) FTP 站台 ltA HREF=ftpftphinetnetgt中華 FTPltAgt

(4) FTP 站台下載檔案 ltA HREF=ftpftphinetnetwindowswindows95simtelnetinetws-ftp32zipgt 下載檔案

(5)Gopher ltA HREF=gophergopherntuedutwgt台大 Gopher ltAgt

(6)News 新聞討論群組-在瀏覽器中須先設好預設的 News如 NC 中

在「編輯功能設定」 ltA HREF=newstwbbscomphardware|gt進入討論群組ltAgt

(7)E_Mail ltA HREF=mailtoserviceflagcomtwgt四海信箱ltAgt PS連結檔案名稱因機器有大小寫不同

參第一個 Home Page 一 首頁檔案名稱

(1) indexhtm (2) indexhtml (3) 或因機器不同有不同設定一般為小寫 (4) 首頁設定完成可以使用 httpwwwxxxxxxxx~目錄名稱」

以連結 ltHTMLgt ltHEADgt ltTITLEgt四海公司網站ltTITLEgt ltHEADgt ltBODYgt ltA HREF=httpwwwshucomtwgtltH2gt四海公司網站

ltH2gtltAgt 歡迎來到四海網站為了讓四海網站有更豐富的內涵讓

網友讀者能 從網站上得到更多有用的資訊我們投注了相當大的心

血您除了可以在這裡找到有關於四海的各項訊息還可

以從這裡出發展開 Internet精緻之旅 ltHRgt ltA HREF=httpwwwshucomtwgt技術通訊ltAgtltBRgt ltA HREF=httpwwwshucomtwgt硬體專區ltAgtltBRgt ltA HREF=httpwwwshucomtwgt交流天地ltAgt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 71: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 69 頁 共 123 頁

ltHRgt ltA

HREF=httphomenetscapecomdownloadindexhtmlgt

這是 Netscape 的老家 可以抓到最新正式版的軟體ltAgt ltHRgt ltA HREF=mailtoservicemailshucomtwgt 四海資訊股份有限公司ltAgt -- 四海讀者信箱竭誠歡迎您的批評與指教ltBRgt ltH2gt民營INTERNET服務業者介紹ltH2gt ltA HREF=httpwwwseednettwgt資策會 -- Seed

NetltAgtltBRgt ltA HREF=httpwwwwownettwgt冠輝資訊 --

WOWNETltAgtltBRgt ltA HREF=httpwwwdjnettwgt大至網路 -- DJ

NetltAgtltBRgt ltBODYgt ltHTMLgt

二 FTP 傳檔 (1)可使用一般的 FTP 上傳檔案到伺服器內

三 使用 WS_FTP 可以使用 WS_FTP 上傳檔案到伺服器內

四 檢查檔案名稱

五 連結測試 例如自己的帳號為 TEST可以使用(1)和(2)連結 (1) httpwwwhinetnet~TEST (2) httpwwwhinetnet~TESTindexhtm (3) 若自己有申請主機則以 httpwwwxxxxxxxx 連結

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 72: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 70 頁 共 123 頁

單元 2 HTML的圖片 壹加入圖片

一 ltIMG SRCgt 語法ltIMG SRC=圖片檔的 URLgt 範例 1ltIMG SRC=SunjpggtltBRgt 範例 2

ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltIMG SRC=Sunset1jpggt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

二 瀏覽器支援的圖檔 (一) JPEG (副檔名為 jpg 或 jepg)

採支援全彩的影像 (二) GIF(副檔名為 gif)

採不會破壞圖形效果的壓縮方式並支援動畫的效果 (三) 其他圖檔如 BMP須先以繪圖或影像軟體轉成瀏覽器

支援的圖檔 (四) PNG檔 (Portable Network Graphics-1996-10由W3C推

薦) (1) 採比 GIF 檔更高效率非破壞的壓縮 (2) 存檔格式採灰階有 16 Bit 全彩達 48 Bit (RGB 三色各

做 16Bit 的取樣) (3) 有 GAMMA 校正不同平台均能有一致的顯示效果 (4) 支援 alpha channel 可做透明階層效果可達 65536 層透

明效果 (5) IE40NC404 非完整的支援 (6) 測試自己的瀏覽器

httpwwww3orgGraphicsPNG 三 ltBORDERgt 加表框

語法ltIMG SRC=圖檔的 URL BORDER=邊框的大小gt 範例ltIMG SRC=Sourcejpg BORDER=10 gt

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 73: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 71 頁 共 123 頁

邊框的大小是一個數字表框寬度是可被修改而邊框的大小度

量是以圖點(Pixels)為單位 四 使用圖片串接超鏈結

語法ltA HREF=URLgtltIMG SRC=圖檔的 URLgtltAgt 範例 1

ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=sunjpggtltAgt ltBRgt

範例 2 ltHTMLgt ltHEADgt ltTITLEgt世界風景介紹ltTITLEgt ltHEADgt ltCENTERgt ltH1gt紐約的黃昏ltH1gt 炎紅的黯黯霞光佈滿整個天空 ltA HREF=httpwwwmediabridagecomnycgt ltIMG SRC=Sunset1jpggt原來的文字換成

一張圖片 ltAgt ltBRgt 高塔的背後對著我卻照不到陽光 ltCENTERgt ltHTMLgt

當滑鼠移到 Sunset1jpg 圖片上後滑鼠會變成手掌狀表

示此處有超連結在點下滑鼠右鍵後會連結到指定的網

址 五 文字及圖片有超鏈結會出現底線和邊框

在網頁中的一般文字是沒有底線但如果此部份的文字有超連

結則在其底下會產生一條底線同樣的當一張圖片具有超連

結時在其外部會產生外框若不想讓圖片產生外框則可以加

上 BORDER=0 範例

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0gtltAgt ltBRgt

六 設定圖片大小 WIDTH 和 HEIGHT 一般在傳輸圖片資料時會讓傳遞速度降慢而電腦亦不知圖檔

有多大必須放在螢幕的那一個位置因此在顯示圖片時有幾

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 74: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 72 頁 共 123 頁

種做法 (一) 停滯不前型主機

圖片未傳輸完畢前不顯示圖片以後的文字 (二) 機動調整型

暫以內定預設的小圖示顯示等傳輸完畢後再更新畫面 (三) ltIMG SRC=URL BORDER=值 WIDTH=值

HEIGHT=值gtltAgt 圖檔可以使用 WIDTH 和 HEIGHT 兩個屬性值告訴瀏覽

器預留版面的位置 範例 1

ltA HREF=httpwwwmediabridgecomnycgt ltIMG SRC=Sunjpg BORDER=0 WIDTH=320 HEIGHT=112gt ltAgt ltBRgt

(四) 設定圖片邊界與文字間的間隔 VSPACE 和 HSPACE (1) VSPACE 水平寬度 (2) HSPAC 垂直寬度

範例 1 ltIMG SRC=rdquoBridgejpgrdquo BORDER=1 VSPACE=20 HSPACE=10gt 範例 2 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT VSPACE=20gt 圖片與上下的文字之間各留 20 點的空間 範例 3 ltIMG SRC=Bridgejpg BORDER=1 ALIGN=LEFT HSPACE=20gt 圖片與左右的文字之間各留 20 點的空間

貳IMG 的使用 一 ALT 為圖片加註解

當滑鼠遇到圖片時滑鼠下方出現一個說明小圖示可以讓使用

者瞭解此張圖片是否有超連結或此張圖片是何種內容特別在

一些瀏覽器中如果不顯示圖片或尚未顯示圖片之前當滑鼠移

到此張圖片時使用者可以事先了解 語法ltIMG SRC=圖片 URL ALT=說明訊息gt 範例ltIMG SRC=Sunjpg ALT=太陽gt

二 LOWSRC 預載圖片 若使用者沒有耐心等待一張大形圖片的傳輸設計者可以先安排

一張比較小的圖片下載到使用者的瀏覽器中以免使用者的瀏覽

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 75: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 73 頁 共 123 頁

器內有一陣是空白但若網路傳輸相當快可能看不到預載圖

檔使用 LOWSRC 最好將兩張圖片設為一致的大小只是其中

一張可能較不清析 1ltIMG SRC=Sun1jpg LOWSRC=Sun2jpggt 2以 LOWSRC 製作動畫 效果不佳因僅有兩張圖片要重看必須按下 Reload 鍵

參 一 ALIGN 調整圖片影像位置

ltIMG SRC=LOGOGIFgt ltCENTERgt 本企業主持人hellip ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會因ltCENTERgt的影響而置中顯示 ltH1gt四海股份有限公司ltH1gt 本企業主持人helliphelliphellip ltIMG SRC=LOGOGIFgt helliphelliphellip服務 ltH3gt四海資訊有限公司ltH3gt

圖片 LOGOGIF 會和文字結合為一造成圖文的美觀 此時可以使用 ALIGN 改變其位置 (一)ALIGN=LEFT RIGHT BASELINE BOTTOM

ABSBOTTOMTOPTEXTTOP MIDDLE ABSMIDDLE 1靠左

ltIMG SRC=Logogif ALIGN=LEFTgt 2RIGHT 靠右

ltIMG SRC=Logogif ALIGN=RIGHTgt 3當圖片和文字夾雜出現時微調圖片與文字出現的位置

(a) BASELINE 或 BOTTOM 對齊文字底線

(b) ABSBOTTOM 對齊整行(區塊)最底端會低於文字底線(BASELINE因在英文字中英文字的底線和最低端是不一樣小寫

的最底端會比文字底線要低) 如下所示 qTEST q的下方為最底端(ABSBOTTOM)而TEST的下端為

文字底線(BASELINE 或 BOTTOM)

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 76: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 74 頁 共 123 頁

(c) TOP 對齊一行的最頂端

(d) TEXTTOP 對齊文字的最頂端 qTEST

(e) MIDDLE 對齊中間但 IE 和 NC 顯示的效果不同IE 中圖片的的

中間線是對齊本行中最高圖形的中間線而 NC 是將圖

片的的中間線是對齊本行中文字的底線 (f) ABSMIDDLE

圖片間線對齊整行的中間線

文字最頂端

一行最頂端

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 77: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 75 頁 共 123 頁

(七) Flash 設計

1 介面介紹

2圖層的使用

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 78: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 76 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 79: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 77 頁 共 123 頁

3 時間軸面板簡介

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 80: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 78 頁 共 123 頁

4 關鍵影格的觀念

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 81: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 79 頁 共 123 頁

5 形狀捕間動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 82: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 80 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 83: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 81 頁 共 123 頁

6 路徑移動動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 84: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 82 頁 共 123 頁

7 遮色片動畫

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 85: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 83 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 86: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 84 頁 共 123 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 87: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 85 頁 共 123 頁

(八) 網站架設

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 88: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 86 頁 共 123 頁

二學生學習成果優選 本次活動我們為小朋友建立了一個網站讓他們可以上傳作品網

址如下httpwwwcsedlitedutwsummer_campus 進入該網站後的畫面如下所示

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 89: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 87 頁 共 123 頁

圖 2德霖技術學院資訊工程系舉辦 99 年度「縮短中小學城鄉數位落差研

習計畫」成果首頁

所有小朋友的作品都以超連結的方式呈現小朋友將這兩週的電腦

營隊的成品均上傳到網站日後他們在家中學校或親戚家都可連線

當本網站觀賞並將作業心得與朋友分享以曾彥儒小朋友的個人網站

只需將滑鼠移到〝曾彥儒〞名字上點下滑鼠左鍵即可出現〝曾彥儒〞

的個人網站下圖所示其中包含曾彥儒的個人簡介照片以及這兩週

的成果如樂高機器人Word 製作Power Point 製作Flash 等

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 90: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 88 頁 共 123 頁

曾彥儒的首頁

曾彥儒的機器人設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 91: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 89 頁 共 123 頁

曾彥儒的 Word 作業

曾彥儒的 Power Point 的作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 92: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 90 頁 共 123 頁

曾彥儒的 Flash 作業

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 93: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 91 頁 共 123 頁

三活動剪影(10-20 張)含活動照片說明如活動地點時間及內容

小老師們正認真的討論教材與教

學生們與小老師共同討論

小老師任真熱心的教導小朋友

小老師與小朋友共同討論教授課程

內容

小朋友對習作內容有疑問請教小

老師

小老師親自示範作業方式與流程

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 94: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 92 頁 共 123 頁

來來大哥哥大姐姐親自示範給

你們看 要怎樣才能加快速度請小老師提

供意見

中午用餐了小朋友真開心

這是我們同心協力完成的作品

我與我的成果之一

我的成果是不是比較酷

我認為我的作品比較好老師們

您們也這樣覺得吧

辛苦的媽媽一直陪伴我看到我的

成品她也覺得很開心

看一看不同的作品成果

我的兩份成果作品我自己也覺的

很滿意

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 95: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 93 頁 共 123 頁

這是我的作品請大家欣賞

精心完成的成果我好開心

四參與人員名單含領隊教師團隊成員各小隊名單 學校名稱德霖技術學院 領隊教師基本資料 領隊姓名張遵偉 任教科系資訊工程系 職稱副教授兼系主任 聯絡電話(02)22734421356 行動電話0933735054 傳真號碼(02)22734421359 電子郵件alan1107dlitedutw 團隊成員基本資料

姓 名 身分 學校名稱 系(所)名稱 團隊中任務 資訊相關專長及能力說明

張遵偉 教師 德霖技術學院 資訊工程系

指導學生規劃行

程規劃行程課

程教學方法編

輯講義

資料庫系統與應用多媒體應

用資料庫系統系統分析設

計資料探勘

黃竣鍵 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

張榮顯 學生 德霖技術學院 資訊工程系 講解網路資源使

用 圖控軟體套裝軟體應用C++程式設計網頁設計

潘泓嘉 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

賴俊銘 學生 德霖技術學院 資訊工程系 講 解 網 頁 基 礎

Front Page 圖控軟體套裝軟體應用C++程式設計網頁設計

劉晏如 學生 德霖技術學院 資訊工程系 講解網頁設計進

階 Flash 圖控軟體套裝軟體應用

Flash網頁設計

杜鎧戎 學生 德霖技術學院 資訊工程系 系學會會長大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網站設計

王嘉豪 學生 德霖技術學院 資訊工程系 系學會副會長大

地活動設計帶領

團康

圖控軟體套裝軟體應用

Flash網頁設計

許家福 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

陳信廷 學生 德霖技術學院 資訊工程系 活動拍照大地活

動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 96: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 94 頁 共 123 頁

陳致傑 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

張正義 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

溫士葦 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

周宜冬 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

彭彥璋 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

凌楷 學生 德霖技術學院 資訊工程系 課堂小老師大地

活動設計帶領團

圖控軟體套裝軟體應用

Flash網頁設計

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 97: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 95 頁 共 122 頁

五經費收支結算表

附表

教育部補助委辦 經費收支結算表

機關名稱德霖技術學院 資訊工程系

所屬年度99

計畫名稱教育部學產基金辦理 99 年縮短中小學城鄉數位落差暑期研習 計畫主持人張遵偉

教育部核定函日期文號教中(學)字第 0990512215B 號

計畫期程99 年 07 月 12 日至 99 年 07 月 23 日 單位新台幣元

經費項目

(或各受補助

學校名稱)

教育部核

計畫金額

(A)

教育部核

定補助金

(B)

教育部

撥付金額

(C)

教育部

補助比

(D=BA)

實支金

(E)

計畫結餘

(F=A-E)

應繳回

教育部結

餘款

(G=F)

憑證號碼 財產

編號

工讀費 76000 76000 76000 100 76000 0 0

伙食費 48800 48800 48800 100 41600 7200 7200 請勾選

書藉教材費 22800 22800 22800 100 19380 3420 3420 經常門

交通補助費 5000 5000 5000 100 5000 0 0 資本門

輔導教師費 4000 4000 4000 100 4000 0 0 餘絀數繳回教育部

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 98: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 96 頁 共 122 頁

保險費 9000 9000 9000 100 3690 5310 5310 餘絀數納入校務基金

雜支 9936 9936 9936 100 9936 0 0 全額補助

部分補助

(請列舉各分攤單位與金額)

教育部175536 元

合計 175536 175536 175536 100 159606 15930 15930

業務(執行)單位 會計單位 機關首長

備註

一本表請隨函檢送三份

二本表「教育部核定計畫金額」係計畫金額經本部審核調整後之金額若未調整則填原提計畫金額

三本表「教育部核定計畫金額」及「實支金額」請填寫該項目之總額(含自籌款教育部及其他單位分攤款)

四本表「應繳回教育部結餘款」有指定項目者以各指定項目計算餘款未指定項目者以全案合計數計算

五受捐助之民間團體如接受二個以上政府機關補助者應列明各機關補助項目及金額

(依據行政院 91 年 5 月 29 日院授主忠字第 091003820 號函頒對民間團體捐助之規定辦理)

六本表「各受補助學校名稱」為供各縣市政府填寫各受補助學校名稱

七本表「憑證號碼」及「財產編號」均應填寫完整

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 99: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 97 頁 共 122 頁

六學員基本資料表及身分證明文件 (一)廣福國民小學

1洪麒勝

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 100: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 98 頁 共 122 頁

2江姿儀

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 101: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 99 頁 共 122 頁

3鄭炳麟

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 102: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 100 頁 共 122 頁

4謝卓恩

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 103: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 101 頁 共 122 頁

5李建明

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 104: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 102 頁 共 122 頁

6黃聖凱

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 105: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 103 頁 共 122 頁

7林冠妤

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 106: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 104 頁 共 122 頁

8李岳融

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 107: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 105 頁 共 122 頁

9 許卉芯

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 108: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 106 頁 共 122 頁

10蔡嘉修

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 109: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 107 頁 共 122 頁

11楊依真

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 110: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 108 頁 共 122 頁

12蔡佩珊

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 111: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 109 頁 共 122 頁

(二)海山國民小學 1陳佳慧

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 112: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 110 頁 共 122 頁

2

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 113: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 111 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 114: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 112 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 115: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 113 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 116: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 114 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 117: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 115 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 118: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 116 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 119: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 117 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 120: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 118 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 121: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 119 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 122: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 120 頁 共 122 頁

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁

Page 123: 教育部學產基金 辦理 99 年度「縮短中小學城鄉數位落差研習計畫」personnel.dlit.edu.tw/ezcatfiles/b009/img/img/578/768068226.pdf · 教育部學產基金 辦理99

99 年度縮短中小學城鄉數位落差研習計畫 德霖技術學院資訊工程系 第 121 頁 共 122 頁