課程發展與設計

資訊科教學活動設計

單元名稱 個人網頁設計

教師 鄭佳榮

2023/03/09(四)9:10-12:00
教學對象 雲科師培生 學程二分科教學實習 教學時間
150 分鐘(三節)
□ 一般課程 □ 部定必修
□ 專業課程 □ 校訂必修
課程類型 課程實施
□ 實習課程 □ 校訂選修
 技能領域課程  彈性學習課程/時間
教材來源 Weebly 免費線上網站、自編教材

教學資源 Weebly 線上網站、電腦設備 、簡報、黑/白板書寫

學生條件 具備基本電腦操作能力。
分析 具備簡單排版、設計基礎概念。
教學 電腦設備、講義、教具
準備 網頁範例展示、網頁應用舉例(引起動機)
A2.系統思考與問題解決
總綱
B2.科技資訊與媒體素養
核心素養
C2.人際關係與團隊合作
電電-技-電腦-I-2
學習 具備物件導向設計能力，以系統
表現 思考、規劃執行，科技資訊運用，
進行專業上的問題解決。
電電-技-電腦Ⅰ-B-b
領
開發環境及工具 一、具備電機與電子相關專業領
學 綱
電電-技-電腦Ⅰ-B-c 域的系統思考、科技資訊運用及
習 核
開發平台應用 符號辨識的能力，積極面
重 心
電電-技-電腦Ⅰ-D-d 對與解決職場各種問題，並能掌
點 學習 素
自訂佈局樣版 握電機與電子國內外發展趨勢。
內容 養
電電-技-電腦Ⅰ-K-a
拍照及顯示相片應用
電電-技-電腦Ⅰ-K-d
網頁顯示應用
 單 元 目 標 具 體 目 標
一、認知目標
1-1 認識網頁設計 1-1-1 能說出網頁設計的概念
1-1-2 能舉出網頁設計的元素
1-1-3 能說出響應式網頁的特性
1-1-4 能說明響應式網頁的用途

1-2 認識網站與網頁的關係 1-2-1 能說出網站與網頁的差異

1-2-2 能解釋 IP 位址的意義
1-2-3 能說明網域名稱的用途
1-2-4 能解釋網域名稱與網址的差異
二、技能目標
2-1 線上註冊 Weebly 帳號 2-1-1 線上填寫基本資料
2-1-2 點選欲架設的網站種類
2-1-3 點選喜好的網站版型
2-1-4 鍵盤輸入網域名稱
學習目標
2-2 能操作 Weebly 設定網頁元素 2-2-1 鍵盤輸入網站主題
2-2-2 點選字體字型
2-2-3 能新增網站中的網頁數
2-2-4 能匯入圖片更換網頁背景

2-3 能操作 Weebly 工具列 2-3-1 拖移「文字物件」進行編輯

2-3-2 拖移「區塊物件」規劃排版
2-3-3 匯入文件至「檔案物件」中
2-3-4 匯入照片至「圖像物件」中
2-3-5 插入「地圖物件」標示聯絡地
2-3-6 插入「按鈕物件」建立連結
2-3-7 插入「幻燈片物件」製作動畫
三、情意目標
3-1-1 能舉出網頁於生活中的應用(購
3-1 學生學會用網頁設計來架設個人網
物平台、各校官網、作品集的呈現)
站，並獲得成就感。

3-1-2 學生上台互相分享各自設計的
網站。
 學習目 教學時
教學歷程 檢核 備註
標代號 間
壹、準備活動
一、課前準備
1.教師：製作簡報、建立個人網站
2.學生：準備電腦、個人照、小作品集
二、課間準備[1]

1-1-1 1-1 引起動機：列舉購物網站， 告知學生 10 分鐘 [1]多數學

1-1-2 生活中有很多動作都以網頁為媒介去完成 生眼神能

1-1-3 的。 專注在教
師或是簡
1-1-4 1-2 告知學習目標：解說網頁設計的概念、
報上
應用層面、透過 Weebly 設計個人網頁。
1-3 先備知識回憶：讓學生回想平常用手機
和電腦開啟瀏覽器上網時，所點選的介面就
是透過各個網頁所組合而成的。

貳、發展活動
[2]多數學
1-2-1 網頁與網站教學介紹[2] 10 分鐘
生能說出
1-2-2 網頁與網
1-1 以簡報介紹網頁概念 【附件(一)】
1-2-3 站的差異
1-2 以簡報介紹網站概念 【附件(二)】
1-2-4 性

網頁設計(教師示範)[3]
2-1-1 30 分鐘 [3]多數學
2-1 以簡報介紹 Weebly 的如何註冊、選擇版 生眼神能
2-1-2
2-1-3 型、設定網域名稱 【附件(三)】 專注在教
師或是簡
2-1-4 2-2 以網站示範 Weebly 的基本操作、編排方
報上
式 【附件(四)】
2-2-1 2-3 以網站示範 Weebly 進階操作工具列中所
[4]多數學
2-2-2 有物件
生能完成
2-2-3 註冊階段
2-2-4 的所有動
網頁設計(學生練習) 【附件(三、四)】
2-3-1 80 分鐘 作
2-3-2 3-1 學生完成註冊與網站設定[4] [5]多數學
2-3-3 3-2 學生練習 Weebly 基本功能[5] 生能熟悉
2-3-4 3-3 學生練習 Weebly 工具列的進階功能[5] Weebly 的
2-3-5 3-4 學生自行設計個人網頁[6] 【附件(五)】 基本與進
階操作
2-3-6 修正為：教師給予的回饋
[6]多數學
2-3-7 15 分鐘
生能活用
個人網頁分享與回饋[7] 【附件(六)】
Weebly
3-1-1 4-1 學生將個人設計的網頁與大家介紹分享 產出個人
3-1-2 網站
參、綜合活動 5 分鐘

1.網頁設計重點操作【附件(七)、(八)】 [7]多數學
生眼神能
專注在上
2.由同學於上課中的實務操作來掌握學生學 台分享的
習狀況，瞭解問題 同學上

3.交代回家作業，並請同學將本學期的學習
檔案依序建置到個人網頁上

參考
自編教材
資料
【附件(一)】

【附件(二)】
【附件(三)】

【附件(四)】
【附件(五)】

【附件(六)】
【附件(七)】
【附件(八)】