FrontPage网页设计教学教案
没有情人的情人节歌词-有关幸福的名言
教學觀摩網頁設計
李蕙琳編輯
FrontPage網頁設計教學教案
單元名稱 建立分割式框架網頁 班
級 資處213 人 數 52人
快快樂樂學FrontPage2003使用技巧，網頁設計相關網
教材來源 編表者
站
參考書目 FrontPage學習範本，PhotoImpact11快易通
學生的起點行為：
李蕙琳 時 間 40分
熟悉電腦之基本操作，例如啟動電腦、開啟與關閉檔案，使用滑鼠等。
熟悉FrontPag
e2003軟體的基本操作，如啟動軟體，開啟與關閉檔案，拖曳與按點滑鼠兩
下等。
學生學習
條件之分
析
瞭解PhotoImpac
t11工具列與屬性工具列的位置，並已會存檔與使用文字輸入工具及百寶
箱的基本操作。
教學資源 白板，廣播教學系統，PowerPoint投影片，講義
教學方法
講述法，練習法(上機實作)，問答法，示範法
教學目標 單元目標 具體目標
第1頁
教學觀摩網頁設計
李蕙琳編輯
一、認知方面
1. 認識FrontPage2003的基本操作。
1-1能說出正確開啟網站的方法。
2.認識建立分割式框架網頁製作方法。
2-1能瞭解建立「橫幅和目錄」框架頁的使用方法
3.瞭解套用佈景主題的應用。
3-1能描述佈景主題套用的方法。
4.認識PhotoImpact11元件設計師的使4-1能說明網路元件設計師的使用方法。
用。
5.瞭解跑馬燈的製作步驟。
6.認識互動式按鈕的設定。
二、技能方面
7.學會FrontPage2003的基本操作。
8學會範例作品的製作方法。
4-2能描述插入圖片的設定方式。
4-3能瞭解圖片設定為透明色彩的方法。
5-1能說明跑馬燈功能的設定。
6-1能描述互動式按鈕製作的方法。
6-2能描述按鈕超連結設定的方法。
7-1熟練FrontPage2003的操作介面。
7-2熟練PhotoImpact11的元件製作。
8-1熟練使用FrontPage2003創作網頁。
第2頁
教學觀摩網頁設計
李蕙琳編輯
三、情意方面
9.增進學習使用網頁設計軟體的樂趣。
9-1體驗從「做中學」的樂趣。
9-2能主動參與學習活動並樂於發言討論。
10.在團體之中發揮同學愛，並彼此關懷10-1擔任小老師協助同學，在團體中表現同學愛。
相互協助。
第3頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
教 師 活 動
壹、準備活動
一、課前活動
1.教師課前準備教材內容。
2.擬定單元目標以及行為目標。
3.製作教具、講義。
4.請學生預習本次上課單元內容。
二、引發動機
學 生 活 動
學活動
教 具 時間
事先設定網頁主題，並上PowerPoint
網搜尋圖片。
預習本章內容。
投影片
1.教師事先蒐集相關之網頁，解說其所引思考並回應老師所提的問廣播教學系統 3分
發之討論及社會關懷作用，激發學生自題。
由創造的學習興趣。
貳、發展活動
教師講解
一、建立資料夾
廣播教學系統 3分
按「我的電腦／（Ｃ：）／按右鍵／新認真聽講，並適時發問。
PowerPoint
増／資料夾」，輸入：班級-座號姓名 投影片
第4頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
時間
1-1
2-1
二、開啟網站
5分
1.
執行FrontPage程式：按「開始／程依老師指定範例建立新網
式集／ Microsoft
Office／Microsoft 站。
FrontPage」
2.
開啟網站：按「檔案／開啟網站」
講義
3. 指定網站資料夾：「C:／個人資料夾」
4.
隨即在左側出現其網站(Web)架構
圖，稱為「資料夾清單」（若不小心關
閉，可按「檢視／資料夾清單」開啟）
三、建立空白網頁
1.
按「檔案／開新檔案」，右邊出現「開注意觀察老師的操作程
新檔案」窗格
2.
點選「其它網頁範本」
序，建立首頁並存檔。
3. (或按工具列「建立新的網頁／網頁」)
4.
點選「框架頁」標籤，再點選「橫幅
和目錄」後按「確定」
5.
出現框架，點選三個「新增網頁」鈕；
第5頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
時間
3-1
4-1
表示新增三個空白網頁
講義
2分
6. 將三個空白網頁分別存檔：按工具列
「儲存檔案」鈕，儲存位置：「C:／個
人資料夾」上面存、左邊存
、右邊存
7. 最後將首頁以為檔名存入
四、套用佈景主題
1.
按「格式／佈景主題／選取佈景主題依需求選取佈景主題樣
／套用為預設的佈景主題」按「是」 式。
五、製作網頁
1. 製作橫幅元件
廣播教學系統 5分
執行PhotoImpact程式：點選「我
注意觀察老師的操作程
的工作區／完整功整」按「是／正序，創作橫幅元件。
確」
按「網路／元件設計師」：點選「橫
幅」樣式，按「下一步」，設定「色
彩」及「標題／文字」，輸入如：「三
第6頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
5分
時間
4-2
4-3
6-1
信家商資處科 二年13組10號 周
杰倫」，勾取「文字改變時，同時
改變形狀」 將所設計橫幅元件存檔。
講義
按「匯出／作為個別物件」，按「儲
存」，儲存於：「C:／個人資料夾／
images」，輸入檔名：「title」，存檔
類型：「GIF」
2. 插入橫幅元件
將元件插入網頁。
回FrontPage畫面，打開images
資料夾，將拖曳至網頁中，
點選圖，按右鍵／顯示圖片工具
列，按「設定透明色彩」，點選橫幅
背景，設為透明
六、製作網頁
1. 製作按鈕
注意觀察老師的操作程
按「插入／Web元件／互動式按鈕
序，建立所需按鈕。
／完成」，點選「按鈕」標籤，再點
第7頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
時間
5-1
選「按鈕樣式」，輸入文字：「自我
介紹」
點選「字型」標籤，再設定「原始
字型色彩」、「停留時字型色彩」、「按
下時字型色彩」
點選「圖像」標籤，圈選「將按
鈕製成GIF圖像並使用透明背景」
2. 複製按鈕 依範例修改按鈕文字。
點選「自我介紹」按鈕，按複製＋
貼上複製四個，利用「按右鍵／按
鈕屬性」，分別更改四個按鈕文字
為：「成長歷程、好站連結、相片藝
廊、與我聯絡」
七、製作網頁
依步驟製作跑馬燈。
廣播教學系統 5分
1. 插入跑馬燈：按「插入／Web元件／
跑馬燈／完成」，輸入歡迎文字
2. 輸入網站名稱：按「插入／圖片／文
第8頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
講義
5分
時間
6-2
7-1
7-2
8-1
9-1
字藝術師」，幫自己的網站取超炫名字
3. 插入自製GIF動畫
八、按鈕超連結設定
1.
按「新增頁面」，新增、
、、並輸入標
題，按儲存
設定五個按鈕的超連結。
2.
點選「自我介紹」按鈕，「按右鍵／超
連結」，點選「」網頁，目標框
架：點選「右邊」
3. 同上方法，成長歷程（）、好站
連結（）、相片藝廊（）
4.
點選「與我聯絡」按鈕，「按右鍵／超
連結」，點選「電子郵件地址」，輸入
E-Mail信箱，如：
「johin@」
學生實作
廣播教學系統
5分
依老師的講解上機實作。 講義
將個人網站壓縮，上傳至
老師主機。
1.
教師依步驟帶領學生實作練習，並做行
第9頁
教學觀摩網頁設計
李蕙琳編輯
教
教學目標
學
教 師 活 動
活動
教 具
學 生 活 動
2分
時間
9-2
10-1
間巡視，瞭解學生的學習狀況並解答問
答。
2.
教師隨時觀看學生的作品，並作評量，
註記具創意的作品。
參、綜合活動
一、作成本單元結論。
二、檢討自我評量。
三、指定課後作業。
四、預告下次上課單元。
提出問題。
複習本節上課內容。
預習下次上課內容。
第10頁