ｒrontPage网页设计教学教学教案

1、PAGE5PAGE5FrontPage網頁設計教學教案單元名稱建立分割式框架網頁班 級資處213人 數52人教材來源快快樂樂學FrontPage2003使用技巧，網頁設計相關網站編表者李蕙琳時 間40分參考書目FrontPage學習範本，PhotoImpact11快易通學生學習條件之分析學生的起點行為：熟悉電腦之基本操作，例如啟動電腦、開啟與關閉檔案，使用滑鼠等。熟悉FrontPage2003軟體的基本操作，如啟動軟體，開啟與關閉檔案，拖曳與按點滑鼠兩下等。瞭解PhotoImpact11工具列與屬性工具列的位置，並已會存檔與使用文字輸入工具及百寶箱的基本操作。教學資源白板，廣播教學系統，Pow

2、erPoint投影片，講義教學方法講述法，練習法(上機實作)，問答法，示範法教學目標單元目標具體目標認知方面認識FrontPage2003的基本操作。2.認識建立分割式框架網頁製作方法。3.瞭解套用佈景主題的應用。4.認識PhotoImpact11元件設計師的使用。5.瞭解跑馬燈的製作步驟。6.認識互動式按鈕的設定。1-1能說出正確開啟網站的方法。2-1能瞭解建立橫幅和目錄框架頁的使用方法3-1能描述佈景主題套用的方法。4-1能說明網路元件設計師的使用方法。4-2能描述插入圖片的設定方式。4-3能瞭解圖片設定為透明色彩的方法。5-1能說明跑馬燈功能的設定。6-1能描述互動式按鈕製作的方法。6-

3、2能描述按鈕超連結設定的方法。技能方面7.學會FrontPage2003的基本操作。8學會範例作品的製作方法。7-1熟練FrontPage2003的操作介面。7-2熟練PhotoImpact11的元件製作。8-1熟練使用FrontPage2003創作網頁。三、情意方面9.增進學習使用網頁設計軟體的樂趣。10.在團體之中發揮同學愛，並彼此關懷相互協助。9-1體驗從做中學的樂趣。9-2能主動參與學習活動並樂於發言討論。10-1擔任小老師協助同學，在團體中表現同學愛。教學目標教學活動教 具時間教 師 活 動學 生 活 動壹、準備活動一、課前活動1.教師課前準備教材內容。2.擬定單元目標以及行為目標。

4、3.製作教具、講義。4.請學生預習本次上課單元內容。二、引發動機1.教師事先蒐集相關之網頁，解說其所引發之討論及社會關懷作用，激發學生自由創造的學習興趣。事先設定網頁主題，並上網搜尋圖片。預習本章內容。思考並回應老師所提的問題。PowerPoint投影片廣播教學系統3分1-12-13-14-14-24-36-15-16-27-17-28-19-19-210-1貳、發展活動教師講解建立資料夾按我的電腦（：）按右鍵新増資料夾，輸入：班級-座號姓名開啟網站執行FrontPage程式：按開始程式集 Microsoft OfficeMicrosoft FrontPage開啟網站：按檔案開啟網站指定網站資

5、料夾：C:個人資料夾隨即在左側出現其網站(Web)架構圖，稱為資料夾清單（若不小心關閉，可按檢視資料夾清單開啟）建立空白網頁按檔案開新檔案，右邊出現開新檔案窗格點選其它網頁範本(或按工具列建立新的網頁網頁)點選框架頁標籤，再點選橫幅和目錄後按確定出現框架，點選三個新增網頁鈕；表示新增三個空白網頁將三個空白網頁分別存檔：按工具列儲存檔案鈕，儲存位置：C:個人資料夾上面存title.htm、左邊存menu.htm、右邊存main.htm最後將首頁以index.htm為檔名存入套用佈景主題按格式佈景主題選取佈景主題套用為預設的佈景主題按是製作title.htm網頁製作橫幅元件執行PhotoImpac

6、t程式：點選我的工作區完整功整按是正確按網路元件設計師：點選橫幅樣式，按下一步，設定色彩及標題文字，輸入如：三信家商資處科 二年13組10號 周杰倫，勾取文字改變時，同時改變形狀按匯出作為個別物件，按儲存，儲存於：C:個人資料夾images，輸入檔名：title，存檔類型：GIF插入橫幅元件回FrontPage畫面，打開images資料夾，將title.gif拖曳至網頁中，點選圖，按右鍵顯示圖片工具列，按設定透明色彩，點選橫幅背景，設為透明製作menu.htm網頁製作按鈕按插入Web元件互動式按鈕完成，點選按鈕標籤，再點選按鈕樣式，輸入文字：自我介紹點選字型標籤，再設定原始字型色彩、停留時字型

7、色彩、按下時字型色彩點選圖像標籤，圈選將按鈕製成GIF圖像並使用透明背景複製按鈕點選自我介紹按鈕，按複製貼上複製四個，利用按右鍵按鈕屬性，分別更改四個按鈕文字為：成長歷程、好站連結、相片藝廊、與我聯絡製作main.htm網頁插入跑馬燈：按插入Web元件跑馬燈完成，輸入歡迎文字輸入網站名稱：按插入圖片文字藝術師，幫自己的網站取超炫名字插入自製GIF動畫按鈕超連結設定按新增頁面，新增01.htm、02.htm、03.htm、04.htm並輸入標題，按儲存點選自我介紹按鈕，按右鍵超連結，點選01.htm網頁，目標框架：點選右邊同上方法，成長歷程（02.htm）、好站連結（03.htm）、相片藝廊（04.htm）點選與我聯絡按鈕，按右鍵超連結，點選電子郵件地址，輸入E-Mail信箱，如學生實作教師依步驟帶領學生實作練習，並做行間巡視，瞭解學生的學習狀況並解答問答。教師隨時觀看學生的作品，並作評量，註記具創意的作品。參、綜合活動作成本單元結論。檢討自我評量。三、指定課後作業。四、預告下次上課單元。認真聽講，並適時發問。依老師指定範例建立新網站。注意觀察老師的操作程序，建立首頁並存檔。依需求選取佈景主題樣式。注意觀察老師的操作程序，創作橫幅元件。將所設計橫幅元件存檔。將元件插入網頁。注意觀察老師的操作程序，建立所需按鈕。依範例修改按鈕文字。依步驟製作跑馬燈。設