資源簡介

第2節 制作網站——給網頁增加動感效果
【教學目標】
知識與技能目標
（1）了解動態網頁與網頁動態效果的區別。
（2）掌握網頁動態效果的的制作。
（3）掌握“插入”菜單中“標簽”、“圖像對象”和“媒體”的使用方法，給網頁增添動態效果。
過程與方法
通過比較，體會網頁動態效果的設置價值；通過任務式驅動，提供圖文或視頻等充足的幫助資料，引導學生自主學習，掌握網頁動態效果的制作方法和注意事項。
情感態度與價值觀
通過網頁動態效果的制作，進一步激發學生設計網頁、制作網頁學習的興趣，培養探究意識和創新能力。
【教學重點】
滾動字幕、交替顯示的圖像、Flash動畫的插入。
【教學難點】
標簽選擇器的使用及各種效果對象的屬性設置。
【教學方法】
自主探究式學習；任務驅動式教學。
【課時安排】
1課時
【教學過程】
教學環節 教師活動 學生活動 設計意圖
一、導入 比較：分別呈現靜態效果網頁和有動態效果的網頁，請學生比較它們給瀏覽者的不同感受。 ——引入本課內容 觀察，比較，進入主題。 開門見山。
二、新授 注意：以下網頁動態效果需要在預覽模式下方可看到效果！ （一）任務一：添加滾動字幕（第1組） 1、呈現作品效果 2、請學生參考“視頻演示”文件自主學習操作 關鍵點： ◆文本的大小、字體、顏色等 （在屬性面板中進行設置） ◆運動方向 (direction) （二）任務二：制作交替顯示的圖像（第2組） 1、呈現作品效果 2、請學生參考課本P80“實踐學習”自學探究 關鍵點： ◆單擊“插入——>圖像對象——>鼠標經過圖像”命令 ◆選項設置： “原始圖像”，“鼠標經過圖像”，以及“按下時，前往的URL”等，最后單擊“確定”按鈕 （三）任務三：插入Flash動畫（第3組） 1、呈現作品效果 2、請學生參考課本P81相關說明文字自主探究操作 關鍵點： ◆插入——>媒體——>Flash ◆Flash顯示窗口的大小調整 三個實踐任務均先請學生觀看動態效果，再請其分組探究，后由小組代表演示匯報，師適時糾錯補充并強調關鍵點，最后組間共享，集體完成或完善操作。 整個新授部分仍然采用任務驅動的模式，在學生分組探究完成具體任務的過程中學習協作，感受效果，學會操作。 師適當提點可以運用Flash軟件制作動感更強的交替顯示的圖像效果。
三、探究 任務四：利用Dreamweaver交替顯示圖像的功能，給網頁制作一組交替顯示的圖像按鈕，如上圖所示。（圖示見學案文件） 步驟提示： （1）制作原“圖像按鈕”和鼠標經過的“圖像按鈕”（有所不同的圖像，見素材文件夾)。 （2）用這兩個圖像制作交替顯示的圖像。 （3）設置“圖像按鈕”超鏈接到一個網頁，就可實現交互式按鈕的功能。 在師的提點下，學生自學仿照“交替顯示的圖像”制作方法，嘗試完成操作。 探究操作是任務，也是本課新知識的及時運用。 時間關系，可以提供半成品，即事先做好幾個按鈕，其余讓學生完成。
四、展評與小結 師生給予評價 本課知識點小結 學生作品展示 感受成果，及時歸納。
五、拓展 上網搜索，了解“動態網頁”和“網頁動態效果”的區別。 學有余力，自學了解。 給學有余力的學生指明拓展的方向。
教學后記

展開更多......

收起↑