網(wǎng)頁設(shè)計(jì)課程的教學(xué)反思

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

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

3、題，再將該“問題作品”源碼和包含任務(wù)說明、實(shí)現(xiàn)的效果、操作提示的“任務(wù)書”下發(fā)給每位學(xué)生，讓他們利用float知識(shí)解決現(xiàn)有問題，實(shí)現(xiàn)既定的效果文件。待學(xué)生基本完成該任務(wù)后，我再次拋出另一小任務(wù)：將左右兩個(gè)盒子的位置對(duì)調(diào)。當(dāng)聽到該任務(wù)后，我發(fā)現(xiàn)有部分學(xué)生在竊喜，并且以非?？斓乃俣韧瓿闪巳蝿?wù)，然后紛紛讓我去檢查。其實(shí)此時(shí)他們已“成功”地掉入了我提前設(shè)計(jì)好的“陷阱”。我假裝十分嚴(yán)謹(jǐn)?shù)貦z查了幾個(gè)學(xué)生的作品后不做評(píng)價(jià)，并將全班的屏幕收回，讓其中某一位學(xué)生的作品呈現(xiàn)在所有人面前，同時(shí)提出問題：該同學(xué)是否真的實(shí)現(xiàn)了我要求的效果？此時(shí)討論聲起，大家各抒己見。我見機(jī)向全班演示了該操作過程，并將操作結(jié)果定格，提醒

4、大家注意：我們確實(shí)可以利用float屬性將左邊盒子定位到右邊，但這里所謂的右邊到底是指誰的右邊？它又是否是我們需要的右邊？此時(shí)同學(xué)們會(huì)發(fā)現(xiàn)，答案是否定的，左盒子這時(shí)在瀏覽器最右邊，與上邊的盒子無法對(duì)齊，需要在此基礎(chǔ)上，再向左側(cè)移動(dòng)一定的距離。分析了問題所在與解決方案之后，我再次拋出了小任務(wù)：請(qǐng)大家按照剛才的分析思路，解決現(xiàn)在的問題，實(shí)現(xiàn)效果。這時(shí)全班都犯難了，幾乎聽不到敲擊鍵盤的聲音。我趁機(jī)裝作很“納悶”的樣子，反問大家，怎么都不動(dòng)了？這時(shí)旁邊有聲音傳來，“老師，我們不知道怎么給左盒子移動(dòng)一定的距離?！薄芭叮瑢?duì)了，我忘了告訴大家移動(dòng)的方法了！”此時(shí)換成是我竊喜了，因?yàn)槲以俅螌⑺麄冎蒙碛谥绬栴}

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