制作頁(yè)面動(dòng)態(tài)效果.doc

《制作頁(yè)面動(dòng)態(tài)效果.doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第五單元制作“家鄉(xiāng)山水”網(wǎng)頁(yè)任務(wù)三制作頁(yè)面動(dòng)態(tài)效果一、提出任務(wù)1．任務(wù)目標(biāo)為“家鄉(xiāng)山水”網(wǎng)頁(yè)添加動(dòng)態(tài)效果。2.解決的問題通過為網(wǎng)頁(yè)元素添加動(dòng)態(tài)效果，學(xué)習(xí)在網(wǎng)頁(yè)中添加層行為以及修改刪除層行為操作。3.本任務(wù)所涉及原有知識(shí)要點(diǎn)完成本任務(wù)所涉及原有知識(shí)要點(diǎn)有：在網(wǎng)頁(yè)中添加熱點(diǎn)、設(shè)置熱點(diǎn)屬性，添加層、設(shè)置層屬性。二、教學(xué)目標(biāo)1.知識(shí)目標(biāo)⑴了解行為的原理。⑵掌握“行為”面板的使用。⑶為頁(yè)面的熱點(diǎn)添加“顯示-隱藏元素”行為。⑷為頁(yè)面的熱點(diǎn)添加“設(shè)置容器的文本”行為。⑸掌握修改添加的行為的方法。⑹掌握刪除添加的行為的方法。2.能力目標(biāo)通過完成本任務(wù)使學(xué)生掌握在網(wǎng)頁(yè)中添加、修

2、改以及刪除層的行為，學(xué)會(huì)制作動(dòng)態(tài)效果網(wǎng)頁(yè)。3.情感目標(biāo)培養(yǎng)學(xué)生耐心、踏實(shí)的學(xué)習(xí)態(tài)度；給學(xué)生以成功的體驗(yàn)，提高學(xué)習(xí)網(wǎng)頁(yè)知識(shí)的積極性。三、教學(xué)分析與準(zhǔn)備1.教學(xué)重點(diǎn)⑴為頁(yè)面的熱點(diǎn)添加“顯示-隱藏元素”行為。⑵為頁(yè)面的熱點(diǎn)添加“設(shè)置容器的文本”行為。(3)修改層行為。(4)刪除層行為。2．教學(xué)難點(diǎn)層行為的原理。3.教學(xué)方法任務(wù)引領(lǐng)學(xué)習(xí)、任務(wù)驅(qū)動(dòng)學(xué)習(xí)、協(xié)作學(xué)習(xí)和探究拓展學(xué)習(xí)相結(jié)合。4.課時(shí)安排4課時(shí)。5.教學(xué)環(huán)境多媒體網(wǎng)絡(luò)教室。四、學(xué)習(xí)過程（組織課堂、復(fù)習(xí)知識(shí)、教師引領(lǐng)完成任務(wù)占2學(xué)時(shí)；舉一反三占2學(xué)時(shí)。）教學(xué)環(huán)節(jié)及手段教學(xué)內(nèi)容備注組織課堂復(fù)習(xí)提問集中學(xué)生注意力，準(zhǔn)備

3、上課。通過提問考察學(xué)生對(duì)添加層、使用層的掌握情況和上節(jié)課作業(yè)的完成情況。1．總結(jié)層的添加與操作的方法。學(xué)生回答，教師任務(wù)流程導(dǎo)入任務(wù)分析任務(wù)完成任務(wù)2．談?wù)勛约簩?duì)層及熱點(diǎn)的理解，其他同學(xué)可以進(jìn)行評(píng)論。為網(wǎng)頁(yè)添加好層、設(shè)置好熱點(diǎn)以后，就可以為熱點(diǎn)添加行為了，本任務(wù)就是在上一任務(wù)完成的熱點(diǎn)上添加層行為，為網(wǎng)頁(yè)創(chuàng)建動(dòng)態(tài)效果。提出任務(wù)：為網(wǎng)頁(yè)創(chuàng)建動(dòng)態(tài)效果。任務(wù)二已完成“家鄉(xiāng)山水”頁(yè)面層的添加，頁(yè)面布局部分已經(jīng)完成，本任務(wù)需要將準(zhǔn)備好的內(nèi)容添加進(jìn)去，并設(shè)置其行為。1．為“金華山景區(qū)”熱點(diǎn)添加“顯示-隱藏元素”行為。在“文件”面板中雙擊“travel.html”文件，打開

4、“家鄉(xiāng)山水”頁(yè)面，勾選“窗口”菜單中的“行為”選項(xiàng)，或者按下鍵盤的Shift+F4鍵打開“行為”面板。選中景區(qū)地圖“map.jpg”中覆蓋“金華山景區(qū)”的熱點(diǎn)，單擊“行為”面板上的“添加行為”按鈕，在下拉菜單中選擇“顯示-隱藏元素”選項(xiàng)，彈出“顯示-隱藏元素”對(duì)話框，設(shè)置“div“apDiv2””（“金華山景區(qū)”圖像所在層）和“div“apDiv8””（顯示文本的AP元素）為“顯示”，其他div設(shè)置為“隱藏”，其他元素保持默認(rèn)，單擊“確定”按鈕。在“行為”面板的事件欄中，選擇該行為的事件為“onMouseOver”至此，為“金華山景區(qū)”熱點(diǎn)添加了一個(gè)行為，預(yù)覽

5、“家鄉(xiāng)山水”頁(yè)面時(shí)，鼠標(biāo)移上“金華山景區(qū)”熱點(diǎn)，層“apDiv2”和“apDiv8”顯示，其他層都隱藏。2.為“金華山景區(qū)”熱點(diǎn)添加“設(shè)置容器的文本”行為。選中“金華山景區(qū)”熱點(diǎn)，在“行為”面板中，選擇“添加行為”按鈕，在彈出的下拉菜單中選擇菜單欄“設(shè)置文本”→“設(shè)置容器的文本”選項(xiàng)，彈出“設(shè)置容器的文本”對(duì)話框，在“層”中選擇層“div“apDiv8””，在“新建HTML”中輸入對(duì)該景區(qū)的簡(jiǎn)單介紹，然后單擊“確定”按鈕。在“行為”面板的事件欄中，選擇“onMouseOver”。3.為其他熱點(diǎn)設(shè)置行為。給予提示、補(bǔ)充歸納。教師引導(dǎo)學(xué)生動(dòng)手完成任務(wù)。完成的給予鼓

6、勵(lì)，完不成的一定要給予其提示使用與上面相同的方法，參照教材表5-1為其他熱點(diǎn)設(shè)置“顯示-隱藏元素”行為。注意在設(shè)置某一景區(qū)熱點(diǎn)的行為時(shí)，將該景區(qū)圖像所在層和用于顯示文本的“apDiv8”層設(shè)置為“顯示”，其他層設(shè)置為“隱藏”。使用與上面相同的方法，參照教材表5-7為相應(yīng)熱點(diǎn)添加“設(shè)置容器的文本”行為，輸入熱點(diǎn)相對(duì)應(yīng)的景區(qū)介紹文字。至此，“家鄉(xiāng)山水”欄目的制作全部完成，保存并預(yù)覽檢查效果。思考：?jiǎn)卧裨O(shè)置背景圖像和插入圖像有什么區(qū)別呢？你能區(qū)別開嗎？單元格背景圖像的大小對(duì)單元格的顯示又什么影響呢？4．知識(shí)講解：行為和事件類型。行為是Dreamweaver8預(yù)置的

7、JavaScript程序庫(kù)。每個(gè)行為由一個(gè)動(dòng)作和一個(gè)事件組成。其中，事件是指行為發(fā)生的條件，即觸發(fā)動(dòng)態(tài)效果的原因，如鼠標(biāo)指向、單擊等；動(dòng)作是指事件發(fā)生后所作出的反應(yīng)，即最終完成的動(dòng)態(tài)效果，比如交換圖像、彈出信息、播放聲音等?？梢蕴砑有袨榈膶?duì)象有圖像、熱點(diǎn)、超級(jí)鏈接文本、多媒體文件或者網(wǎng)頁(yè)本身等。⑴常用事件有：事件說明onClick鼠標(biāo)單擊時(shí)觸發(fā)onDblClick鼠標(biāo)雙擊時(shí)觸發(fā)onMouseDown按下鼠標(biāo)左鍵時(shí)觸發(fā)onMouseUp鼠標(biāo)左鍵按下后松開時(shí)觸發(fā)onMouseOver當(dāng)鼠標(biāo)指針移上某對(duì)象時(shí)觸發(fā)onMouseMove當(dāng)鼠標(biāo)移動(dòng)時(shí)觸發(fā)onMouseOu

8、t當(dāng)鼠標(biāo)離開某對(duì)象時(shí)觸發(fā)onKeyPr