Dreamweaver層的運(yùn)用教學(xué)案例張東升教材分析：《網(wǎng)頁(yè)制作》是計(jì)算機(jī)應(yīng)用專(zhuān)業(yè)的一門(mén)課程。教材側(cè)重知識(shí)點(diǎn)的講解，知識(shí)綜合運(yùn)用少、實(shí)例也少。為此，我根據(jù)教程，結(jié)合學(xué)生的實(shí)際情況，自編了一套實(shí)例用來(lái)充實(shí)教學(xué)內(nèi)容，對(duì)基于教材的教學(xué)是一個(gè)很好的延伸，《層的運(yùn)用》便是其中的一例?，F(xiàn)在的學(xué)生都已經(jīng)具備一定的計(jì)算機(jī)操作技能。在課前調(diào)查中得知，很多學(xué)生有制作自己個(gè)人主頁(yè)的愿望，并十分羨慕那些已經(jīng)擁有的個(gè)人主頁(yè)的網(wǎng)友。所以，我確定了一個(gè)長(zhǎng)期的任務(wù)——制作學(xué)生自己的個(gè)人主頁(yè)，貫穿整個(gè)學(xué)期的網(wǎng)頁(yè)制作課程教學(xué)。這一節(jié)課的教學(xué)是對(duì)上節(jié)課課本內(nèi)容——“創(chuàng)建和使用層”的一個(gè)延伸，其中還用到Photoshop對(duì)圖片進(jìn)行簡(jiǎn)單處理。下節(jié)課就開(kāi)始課本內(nèi)容——第九章“表單”的教學(xué)，這節(jié)課學(xué)習(xí)的“用圖層做小拼圖游戲”是本章知識(shí)點(diǎn)的一個(gè)綜合應(yīng)用。教學(xué)目標(biāo)：［知識(shí)目標(biāo)］在了解了如何創(chuàng)建和使用層的基礎(chǔ)上，進(jìn)一步熟悉層，運(yùn)用層做網(wǎng)頁(yè)。［能力目標(biāo)］恰到好處的在網(wǎng)頁(yè)中運(yùn)用層。［情感目標(biāo)］體會(huì)層在網(wǎng)頁(yè)制作中的神奇作用；提升興趣。教學(xué)重點(diǎn)：層的插入、層上圖片和表格的插入以及“行為”的添加。教學(xué)難點(diǎn)：拖動(dòng)層行為的運(yùn)用教學(xué)方法：任務(wù)驅(qū)動(dòng)法、實(shí)例教學(xué)法

教學(xué)思路：復(fù)習(xí)導(dǎo)入T設(shè)置疑問(wèn)T解答疑問(wèn)、學(xué)習(xí)新課T鞏固練習(xí)T擴(kuò)展練習(xí)T課堂討論f布置作業(yè)教學(xué)準(zhǔn)備：計(jì)算機(jī)多媒體一體化教室教學(xué)過(guò)程：教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)目的一、導(dǎo)入新課。1、前面我們學(xué)習(xí)了如何創(chuàng)建和使用層，請(qǐng)同學(xué)通過(guò)演示教們簡(jiǎn)單回憶一下；這節(jié)課我們通過(guò)一個(gè)例子進(jìn)一步師自己制作給同學(xué)們展示層的妙用。的網(wǎng)站，提高（引出本節(jié)課的任務(wù)）學(xué)生興趣。教師演示自己制作好的拼圖游戲網(wǎng)頁(yè)2、在本學(xué)期開(kāi)學(xué)的時(shí)候，老師就布置了一個(gè)總的學(xué)習(xí)任務(wù)就是學(xué)會(huì)網(wǎng)頁(yè)制作，讓大家能夠在網(wǎng)上擁有自己的個(gè)人主頁(yè)，那么有上網(wǎng)經(jīng)歷的同學(xué)就會(huì)發(fā)現(xiàn)一般個(gè)人主頁(yè)上都會(huì)有“娛樂(lè)休閑”版塊，我們今天的任務(wù)就是用“層”的知識(shí)做一個(gè)主頁(yè)的二級(jí)頁(yè)面“娛樂(lè)休閑之拼圖游戲”。設(shè)置疑問(wèn)，激3、設(shè)置疑問(wèn)發(fā)學(xué)生的求用瀏覽器打開(kāi)一個(gè)網(wǎng)頁(yè)（事先準(zhǔn)備好的拼圖），知欲。通過(guò)鼠標(biāo)拖動(dòng)改變圖片的位置，最后拼出完整的圖1、打開(kāi)老師下發(fā)的樣，為什么這些小圖可以拖動(dòng)放在一定區(qū)域的任意拼圖游戲網(wǎng)頁(yè)，試位置上呢？請(qǐng)同學(xué)們想一想用前面的知識(shí)能否實(shí)現(xiàn)著拖動(dòng)拼圖。呢？跟上節(jié)課說(shuō)的“層的使用”有何聯(lián)系呢？二、教學(xué)新課之層的妙用：1、圖片處理2、想一想這里為什在圖像處理軟件photoshop中打開(kāi)一幅風(fēng)景圖么要處理成三的整像，調(diào)整其大小到長(zhǎng)和寬均為三的整數(shù)倍，將其分?jǐn)?shù)倍呢？

解為大小相同的9個(gè)塊并分塊保存。2、制作網(wǎng)頁(yè)運(yùn)行DreamweaverMX2004,新建一個(gè)HTML文件，設(shè)置網(wǎng)頁(yè)標(biāo)題，保存網(wǎng)頁(yè)文件。在頁(yè)面上描繪9個(gè)與圖像大小相同的層，然后拖動(dòng)層，按照原圖像分別在9個(gè)層中插入并拼好圖像各部分。再描繪一個(gè)層，用于放置完整圖像效果圖，當(dāng)前頁(yè)面效果所示。(這里教師提醒學(xué)生注意層在網(wǎng)頁(yè)上的位置，最好為容易記憶和計(jì)算的整數(shù)，方便各層的精確對(duì)齊；請(qǐng)同學(xué)們用筆記下layerl的位置坐標(biāo)和整個(gè)圖象的大小以備后用)在頁(yè)面空白處單擊，確保沒(méi)有任何對(duì)象選中，打開(kāi)［行為］面板，單擊+按鈕，在下拉菜單中選擇［拖動(dòng)層］命令，彈出［拖動(dòng)層］對(duì)話(huà)框。(此處是本節(jié)課新增的內(nèi)容一一為各層添加行為，作為課本的一個(gè)補(bǔ)充)在對(duì)話(huà)框的［層］下拉列表中選擇“層Laryer1”，單擊［取得目前位置］按鈕，則對(duì)話(huà)框中的顯示，單擊［確定］按鈕。(教師解釋該對(duì)話(huà)框中“取得目前位置”的含義，請(qǐng)同學(xué)們想一想并回答“接近象素”后面的值表示什么意思？此處留下懸念暫時(shí)教師不給出答案，留到后面解釋。)再次選擇［行為］面板中的［拖動(dòng)層］命令，在對(duì)話(huà)框的［層］下拉列表中選擇“層Larye2”，單擊［取得目前位置］按鈕，對(duì)話(huà)框中的顯示所示，單擊［確定］按鈕返回。重復(fù)此操作，分別為層Layer3到層Layer93、記錄相關(guān)數(shù)據(jù)4、舉手回答問(wèn)題培養(yǎng)學(xué)生形成學(xué)會(huì)思考的習(xí)慣

設(shè)置［拖動(dòng)層］行為。此時(shí)，［行為］面板中的顯示所示。（g）再描繪一個(gè)層，讓層的左邊距和上邊距對(duì)準(zhǔn)Layerl的左邊距和上邊距，層的大小剛好為完整的9張圖大小。在層里面插入一個(gè)3行3列的表格,表格大小與層的大小一致，即每個(gè)單元格正好容納一張圖像。表格邊框?yàn)?，填充和間距均為0。（前面的數(shù)字記住了嗎？layerl的位置坐標(biāo)和整個(gè)圖的大?。╤）打亂頁(yè)面上各層的位置，保存文件并在IE瀏覽里瀏覽，此時(shí)頁(yè)面上除“參考圖”夕卜，其他各塊圖像都是可以移動(dòng)的。當(dāng)用戶(hù)將某一塊圖像移動(dòng)到距離正確位置50像素的范圍內(nèi)時(shí)，圖像將自動(dòng)找準(zhǔn)位置。（i）（此處的50px在前面哪里設(shè)置的，可還記得？正象前面同學(xué)們回答的一樣這里象素值表示當(dāng)用戶(hù)將某一塊圖像移動(dòng)到距離正確位置多少像素的范圍內(nèi)時(shí)，圖像將自動(dòng)找準(zhǔn)位置。前面你回答對(duì)了嗎？）三、課堂練習(xí)。（教師巡視，并查看學(xué)生的操作情況）在機(jī)子里搜索合適的圖片處理后，制作9塊的拼圖游戲網(wǎng)頁(yè)，并在自己的個(gè)人主頁(yè)里相應(yīng)位置添加鏈接到新做的拼圖游戲頁(yè)面。做完后同學(xué)之間可以相互拼圖，找到不足，發(fā)現(xiàn)問(wèn)題并討論解決。四、小結(jié)，擴(kuò)展練習(xí)。試試16塊的拼圖，做完后同學(xué)之間可以相互拼圖，找到不足，發(fā)現(xiàn)問(wèn)題并討論解決。培養(yǎng)學(xué)生之間協(xié)作發(fā)現(xiàn)并解決問(wèn)題的能力。豐富個(gè)人主頁(yè)內(nèi)容，讓學(xué)生有一種說(shuō)不出的成就咸O(píng)增加難度，不斷激勵(lì)，并提高學(xué)生的自學(xué)能力。教學(xué)感想：網(wǎng)頁(yè)制作是一門(mén)操作性很強(qiáng)的課程，學(xué)生動(dòng)手的時(shí)間越多，效果也就越好。在此之前，同學(xué)們已經(jīng)學(xué)習(xí)過(guò)“創(chuàng)建和使用層”并已經(jīng)通過(guò)上機(jī)實(shí)例操作對(duì)層的創(chuàng)建很熟悉了，所以為了讓同學(xué)們進(jìn)一步體會(huì)“層的妙用”，我安排了這次拼圖游戲課。這節(jié)課的內(nèi)容可以作為書(shū)本知識(shí)的一個(gè)補(bǔ)充，同時(shí)也讓學(xué)生對(duì)行為有了第一次的親密接觸，對(duì)后續(xù)的學(xué)習(xí)是一個(gè)鋪墊，事實(shí)證明同學(xué)們興