1、精選優質文檔-傾情為你奉上 精彩的“陷阱”是成功的一半 網頁設計之div盒子的定位教學反思Div盒子模型是CSS控制頁面時一個十分重要的知識點，其定位方法則是重中之重。學生在掌握了盒子模型的概念、組成、作用等基本知識之后，就面臨著如何在頁面中為各盒子進行合理的排版，以實現豐富的頁面效果的實際需求。本節課圍繞該問題而展開，以任務驅動的形式帶領學生在不斷地發現問題，分析問題，解決問題的過程中，體驗兩種不同的定位法為div盒子排版所帶來的神奇變化。課程開始時，我便和學生一起，結合上次課某學生的課堂作品文件，對div盒子的基礎知識做簡要的回顧，同時引導大家在該“問題作品”文件中尋找不足，即所有盒子都是

2、按照標準流的方式，在瀏覽器窗口中由上而下依次排列。而實際上這種排列方式有其局限性，會導致網頁頁面效果“刻板”，且浪費頁面空間。此時，我再打開一份已經過合理定位后的同作品文件，讓學生注意觀察，該文件中各盒子的排列已經發生了巨大變化，整個頁面已變得十分美觀。通過這種導入方法，讓學生在發現自己的作品中存在問題的同時，又欣賞到了定位之后的文件效果，由此產生“改變現狀”的強烈愿望。至此，成功引入div盒子定位的概念。在接下來的教學活動中，我結合ppt與板書簡單介紹了何為盒子的定位，其定位的兩種方法：float與position。然后針對導入時利用的“問題作品”，演示如何利用float屬性解決其中一部分問

3、題，再將該“問題作品”源碼和包含任務說明、實現的效果、操作提示的“任務書”下發給每位學生，讓他們利用float知識解決現有問題，實現既定的效果文件。待學生基本完成該任務后，我再次拋出另一小任務：將左右兩個盒子的位置對調。當聽到該任務后，我發現有部分學生在竊喜，并且以非常快的速度完成了任務，然后紛紛讓我去檢查。其實此時他們已“成功”地掉入了我提前設計好的“陷阱”。我假裝十分嚴謹地檢查了幾個學生的作品后不做評價，并將全班的屏幕收回，讓其中某一位學生的作品呈現在所有人面前，同時提出問題：該同學是否真的實現了我要求的效果？此時討論聲起，大家各抒己見。我見機向全班演示了該操作過程，并將操作結果定格，提醒

4、大家注意：我們確實可以利用float屬性將左邊盒子定位到右邊，但這里所謂的右邊到底是指誰的右邊？它又是否是我們需要的右邊？此時同學們會發現，答案是否定的，左盒子這時在瀏覽器最右邊，與上邊的盒子無法對齊，需要在此基礎上，再向左側移動一定的距離。分析了問題所在與解決方案之后，我再次拋出了小任務：請大家按照剛才的分析思路，解決現在的問題，實現效果。這時全班都犯難了，幾乎聽不到敲擊鍵盤的聲音。我趁機裝作很“納悶”的樣子，反問大家，怎么都不動了？這時旁邊有聲音傳來，“老師，我們不知道怎么給左盒子移動一定的距離。”“哦，對了，我忘了告訴大家移動的方法了！”此時換成是我竊喜了，因為我再次將他們置身于知道問題

5、所在，卻沒辦法解決的境地。這時我便開始介紹position中相對定位的方法，并演示了具體的操作步驟后，將余下的任務交給全班，另外對學有余力的學生提出了更高的要求，即利用相對定位實現更為豐富、復雜的頁面效果，而絕大部分學生都非常成功地實現了既定的效果。這節課在一個個環環相扣的任務中完成，效果在總體上比較理想。但有眾多細節問題需要自己推敲反思。如，有極少部分學生因基礎差，跟不上“隊伍”，直到課程快結束時，仍在琢磨第一個任務如何完成。這跟我沒有全面考慮學生因素有關，我應做到“區別對待”，對不同級別的學生給與不同難度的學習任務，如此不但能防止某些學生因跟不上節奏而放棄學習，還能激發他們的學習興趣，獲得成就感。另外，對課程內容中的“相對定位方向的確定”這一知識點的解釋不夠到位，導致很多學生要么不會做，要么只是強行記憶。其實，該知識的介紹除了利用傳統的ppt和