FrontPage网页设计教学教案.doc

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