案例 Dreamweaver層的運用

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

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

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

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