資源描述：
《制作網(wǎng)頁高級特效 教案》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。
1、第一章 制作菜單類特效本章任務(wù)?制作橫向?qū)Ш讲藛?制作縱向?qū)Ш讲藛?制作樹形菜單本章目標(biāo)?會使用層DIV的display屬性實現(xiàn)隱藏或顯示?會使用鼠標(biāo)事件實現(xiàn)菜單背景的切換?會使用CSS+DIV層制作各種菜單效果重點和難點本章重點?如何實現(xiàn)不同風(fēng)格樣式的導(dǎo)航菜單?通過id獲取對象的語法本章難點?CSS+DIV層實現(xiàn)不同風(fēng)格樣式的菜單效果章節(jié)思路1.簡介2.制作演示案例1?——簡單的一級導(dǎo)航菜單1）案例分析2）相關(guān)理論回顧：頁面布局、JavaScript事件、相關(guān)的背景樣式3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)3.制作演示案例2?——帶有二級菜單的導(dǎo)航菜單1）案例分析2）
2、相關(guān)理論回顧：有樣式的DIV層和無樣式的DIV層3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)4.制作演示案例3?——制作橫向菜單1）案例分析2）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)5.制作演示案例4?——制作豎向菜單1）案例分析2）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)24上機(jī)訓(xùn)練重點?制作制作二級菜單?制作橫向菜單?制作縱向菜單?制作樹形菜單講授方式PPT講授+現(xiàn)場演示小結(jié)本節(jié)主要學(xué)習(xí)了1.如何使用CSS+DIV層制作菜單特效？2.如何改變菜單的顯示樣式？3.如何獲取通過ID獲取頁面元素？4.如何控制層的顯示和隱藏?作業(yè)1.如何控制列表的顯示效果？2.簡述
3、鼠標(biāo)事件的內(nèi)容。第二章 制作廣告類特效本章任務(wù)?制作隨主頁打開的彈出廣告?制作對聯(lián)廣告?制作橫幅廣告?制作漂浮廣告本章目標(biāo)?會使用CSS+DIV層制作廣告?會使用window.open方法制作彈出廣告?會使用setTimeout函數(shù)實現(xiàn)圖像的交替顯示?會使用樣式屬性制作浮動廣告重點和難點本章重點?如何使用setTimout()制作定時器?如何通過樣式屬性實現(xiàn)廣告的動態(tài)移動效果本章難點?setTimeout()方法的應(yīng)用?如何使用樣式屬性控制廣告的移動24章節(jié)思路1.簡介2.制作演示案例1?——隨主頁彈出的廣告1）案例分析2）相關(guān)理論回顧：window對象的open（）方法3）操作步
4、驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)3.制作演示案例2?——可關(guān)閉的左側(cè)廣告1）案例分析2）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)4.制作演示案例3?——可關(guān)閉的隨頁面滾動的廣告1）案例分析2）相關(guān)理論：onscroll事件、pixelTop屬性與scrollTop屬性3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)5.制作演示案例4?——無數(shù)字導(dǎo)航的橫幅廣告1）案例分析2）相關(guān)理論：setTimeout（）方法的使用3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)6.制作演示案例5?——帶數(shù)字導(dǎo)航的橫幅廣告1）案例分析2）相關(guān)理論：clearTimeout（）方法
5、的使用3）操作步驟：如何根據(jù)提供的素材頁面，修改代碼實現(xiàn)7.制作演示案例5?——頁面漂浮廣告1）案例分析2）相關(guān)理論：offsetWidth屬性和offsetHeight屬性3）操作步驟：如何根據(jù)提供的素材頁面，修改代碼實現(xiàn)1）案例分析2）相關(guān)理論：clearTimeout（）方法的使用3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)24上機(jī)訓(xùn)練重點?制作彈出廣告?制作隨鼠標(biāo)滾動的對聯(lián)廣告?制作無數(shù)字的橫幅廣告?制作帶數(shù)字導(dǎo)航的橫幅廣告?制作漂浮廣告講授方式PPT講解+現(xiàn)場演示小結(jié)1.可以實現(xiàn)隨主頁彈出的窗口的方法。2.pixelTop和scrollTop屬性的含義。3.offs
6、etWidth、offsetHeight、left和top屬性的含義。作業(yè)1.簡述setTimeout()和clearTimeout()的使用方法。2.如何實現(xiàn)自動交替顯示的橫幅廣告？3.制作帶有數(shù)字導(dǎo)航的橫幅廣告？24第三章 制作層切換和層提示特效本章任務(wù)?制作層信息提示特效?制作彈出隱藏層特效?制作左側(cè)導(dǎo)航切換特效?制作上方導(dǎo)航切換特效本章目標(biāo)?會使用CSS+DIV層進(jìn)行頁面布局?會使用表格+DIV層進(jìn)行頁面布局?會使用innerText動態(tài)改變文本顯示?會使用display屬性控制層的顯示和隱藏重點和難點本章重點?如何使用通過鼠標(biāo)事件以及display屬性實現(xiàn)切換導(dǎo)航效果?如
7、何通過innerText屬性動態(tài)改變文本顯示本章難點?innerText屬性的應(yīng)用章節(jié)思路1.簡介2.制作演示案例1?——層信息提示1）案例分析2）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)3.制作演示案例2?——彈出隱藏層1）案例分析2）相關(guān)理論：innerText屬性3）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)4.制作演示案例3?——左側(cè)導(dǎo)航切換1）案例分析2）操作步驟：如何根據(jù)提供的素材頁面，編寫代碼實現(xiàn)5.制作演示案例4?——上方導(dǎo)航切換1）案例分析
