FrontPage网页设计教学教案

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

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

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

4、定網頁主題，並上PowerPoi nt 投2. 擬定單元目標以及行為目標。3. 製作教具、講義。4請學生預習本次上課單元內容。二、引發動機網搜尋圖片。 預習本章內容。影片1.教師事先蒐集相關之網頁，解說其所引 發之討論及社會關懷作用，激發學生自 由創造的學習興趣。貳、發展活動教師講解思考並回應老師所提的問 題。廣播教學系統3分一、建立資料夾廣播教學系統3分1-1按我的電腦/（C:）/按右鍵/新増/資料夾，輸入：班級-座號姓名 二、開啟網站1. 執行FrontPage程式：按開始/程式 集/ Microsoft Office/Microsoft Fron tPageJ2. 開啟網站：按檔案/開啟

5、網站3. 指定網站資料夾：C:/個人資料夾4. 隨即在左側出現其網站（Web）架構圖，稱為資料夾清單（若不小心關 閉，可按檢視/資料夾清單開啟）認真聽講，並適時發問。依老師指疋範例建立新網 站。PowerPoi nt 投 影片2-1三、建立空白網頁1. 按檔案/開新檔案，右邊出現開 新檔案窗格2. 點選其它網頁範本3. （或按工具列建立新的網頁/網頁）4. 點選框架頁標籤，再點選橫幅 和目錄後按確定5. 出現框架，點選三個新增網頁鈕； 表示新增三個空白網頁6. 將三個空白網頁分別存檔：按工具列儲存檔案鈕，儲存位置：C:/個 人資料夾上面存、左邊存、右邊存注意觀察老師的操作程 序，建立首頁並存檔

6、。講義5分教學目標教學活動教具時間教師活動學生活動7.最後將首頁以為檔名存入 四、套用佈景主題1.按格式/佈景主題/選取佈景主題講義2分3-1/套用為預設的佈景主題按是依需求選取佈景主題樣五、製作網頁式。1.製作橫幅元件執行PhotoImpact程式：點選我廣播教學系統5分4-1的工作區/完整功整按是/正注意觀察老師的操作程確按網路/元件設計師：點選橫 幅樣式，按下一步，設定色序，創作橫幅元件。彩及標題/文字,輸入如：三 信家商資處科二年13組10號周 杰倫,勾取文字改變時，同時 改變形狀按匯出/作為個別物件，按儲 存，儲存於：C:/個人資料夾/ images，輸入檔名：title，存檔 類型

7、：GIF將所設計橫幅兀件存檔。2.插入橫幅元件4-2回FrontPage畫面，打開images資料夾，將拖曳至網頁中，點選圖，將兀件插入網頁。4-3按右鍵/顯示圖片工具列，按設 定透明色彩，點選橫幅背景，設為 透明六、製作網頁講義5分1.製作按鈕6-1按插入/ Web元件/互動式按鈕注意觀察老師的操作程/完成，點選按鈕標籤，再點 選按鈕樣式，輸入文字：自我 介紹點選字型標籤，再設定原始 字型色彩、停留時字型色彩、按 下時字型色彩點選圖像標籤，圈選將按鈕製成GIF圖像並使用透明背景序，建立所需按鈕。2.複製按鈕點選自我介紹按鈕，按複製+依範例修改按鈕文字。教學目標教學活動教具時間教師活動學生活動

8、貼上複製四個，利用按右鍵/按 鈕屬性，分別更改四個按鈕文字 為：成長歷程、好站連結、相片藝 廊、與我聯絡七、製作網頁廣播教學系統5分5-1八、1.插入跑馬燈：按插入/ Web元件/ 跑馬燈/完成，輸入歡迎文字2輸入網站名稱：按插入/圖片/文 字藝術師，幫自己的網站取超炫名字3.插入自製GIF動畫按鈕超連結設定依步驟製作跑馬燈。講義5分6-21. 按新增頁面，新增、並輸入標 題，按儲存2. 點選自我介紹按鈕，按右鍵/超設定五個按鈕的超連結。連結，點選網頁，目標框架：點 選右邊3. 同上方法，成長歷程（）、好站連結（）、 相片藝廊（）4. 點選與我聯絡按鈕，按右鍵/超連結，點選電子郵件地址，輸入E-Mai 1信箱，如學生實作廣播教學系統5分7-11.教師依步驟帶領學生實作練習，並做行依老師的講解上機實作。講義7-2間巡視，瞭解學生的學習狀況並