浮動(dòng)與定位教案

1、哈爾濱市第一職業(yè)高級(jí)中學(xué)校哈一職教案設(shè)計(jì)案例 課 題第六章 浮動(dòng)與定位授課時(shí)間2012年10月22日授課類型新授課學(xué)時(shí)1教學(xué)目標(biāo)知識(shí)與技能會(huì)使用float屬性設(shè)置浮動(dòng)。過(guò)程與方法回顧檢查情景模擬知識(shí)鞏固總結(jié)作業(yè)情感、態(tài)度與價(jià)值觀樹立積極探究新知的觀念，培養(yǎng)學(xué)生勇于創(chuàng)新能力。教學(xué)重點(diǎn)掌握Float屬性。教學(xué)難點(diǎn)Float屬性的應(yīng)用。教學(xué)方法情景模擬教學(xué)法、引導(dǎo)文教學(xué)法教具準(zhǔn)備課件教 學(xué) 過(guò) 程教學(xué)內(nèi)容教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖【組織教學(xué)】【回顧檢查】【情景模擬】青鳥網(wǎng)頁(yè)布局公司情況：角色：老師：青鳥網(wǎng)頁(yè)布局公司的老板和技術(shù)顧問(wèn)。同學(xué)：青鳥網(wǎng)頁(yè)布局公司的員工，我們有四個(gè)研發(fā)部門，部門經(jīng)理分別為：&#

2、215;××。青鳥網(wǎng)頁(yè)布局公司背景：青鳥網(wǎng)頁(yè)布局公司剛剛成立，由于資金有限，我們現(xiàn)在的條件待遇一般，但是我們要相信，通過(guò)我們的努力，面包我們會(huì)有的。引出項(xiàng)目：告訴各位員工一個(gè)好消息，我剛剛與哈一職網(wǎng)站設(shè)計(jì)部門負(fù)責(zé)人李主任簽訂了一份設(shè)計(jì)合約，我們將為哈一職網(wǎng)站的兩個(gè)版塊進(jìn)行網(wǎng)頁(yè)布局，各位員工，讓我們共同努力，爭(zhēng)取賺到我們的第一桶金。項(xiàng)目一：“哈一職志愿者服務(wù)隊(duì)”活動(dòng)網(wǎng)頁(yè)布局效果項(xiàng)目2：“哈一職禮儀隊(duì)”活動(dòng)網(wǎng)頁(yè)布局效果圖圖技術(shù)要點(diǎn)：作為公司的技術(shù)顧問(wèn)，我先把我們要完成的兩個(gè)項(xiàng)目的技術(shù)要點(diǎn)介紹給大家。我們要完成的這兩個(gè)網(wǎng)站版塊的布局主要涉及到得知識(shí)點(diǎn)是：浮動(dòng)。浮動(dòng)1、浮動(dòng)的應(yīng)用。

3、（1）定位網(wǎng)頁(yè)元素（2）建立橫向多列布局（3）建立混合多列布局2、float屬性（1）用于定義元素的浮動(dòng)方向（2）語(yǔ)法規(guī)則： 左浮動(dòng)語(yǔ)法規(guī)則：float:left;右浮動(dòng)語(yǔ)法規(guī)則：float:right;實(shí)驗(yàn)過(guò)程：實(shí)驗(yàn)1：未設(shè)置浮動(dòng)盒子具有的性質(zhì)實(shí)驗(yàn)2設(shè)置“釣”所在的盒子為左浮動(dòng)實(shí)驗(yàn)3設(shè)置“魚”所在的盒子為左浮動(dòng)實(shí)驗(yàn)4設(shè)置“島”所在的盒子為左浮動(dòng)實(shí)驗(yàn)5 1、設(shè)置“島”所在的盒子為右浮動(dòng)2、“島”所在的盒子右浮動(dòng)時(shí)，瀏覽器窗口變窄的網(wǎng)頁(yè)情況。實(shí)驗(yàn)61、設(shè)置“魚”所在的盒子為右浮動(dòng)，同時(shí)設(shè)置“島”所在的盒子為左浮動(dòng)2、瀏覽器窗口變窄時(shí)，網(wǎng)頁(yè)的情況。實(shí)驗(yàn)71、全部向左浮動(dòng)2、瀏覽器窗口變窄時(shí)，網(wǎng)頁(yè)的

4、情況。3、float屬性小結(jié)n float屬性作用：1) 定位網(wǎng)頁(yè)元素。2) 實(shí)現(xiàn)一行多列或混合多列的布局。n float屬性使用時(shí)注意事項(xiàng)：1）在代碼窗口中，使用英文狀態(tài)下輸入法進(jìn)行輸入，否則無(wú)法出現(xiàn)正確的運(yùn)行結(jié)果。2）設(shè)置之后的CSS樣式，要使用“套用”才能實(shí)現(xiàn)網(wǎng)頁(yè)布局的效果。項(xiàng)目設(shè)計(jì)：作為技術(shù)顧問(wèn)，我已經(jīng)把我們公司要完成的2個(gè)項(xiàng)目的主要技能要點(diǎn)和大家溝通完了，接下來(lái)我們要開始進(jìn)行項(xiàng)目設(shè)計(jì)，我們分成兩個(gè)項(xiàng)目組，比一比哪個(gè)項(xiàng)目組開發(fā)設(shè)計(jì)的快，希望大家能夠加班加點(diǎn)，為公司的發(fā)展而努力！項(xiàng)目設(shè)計(jì)講述：請(qǐng)項(xiàng)目研發(fā)部門經(jīng)理講述設(shè)計(jì)項(xiàng)目的過(guò)程?！局R(shí)鞏固】【總 結(jié)】教師：“上課！”提出2個(gè)問(wèn)題。教師布

5、置角色并介紹公司背景引出本節(jié)課的兩個(gè)項(xiàng)目。講解浮動(dòng)的知識(shí)。演示實(shí)驗(yàn)一提出問(wèn)題：網(wǎng)頁(yè)布局是什么樣的？演示實(shí)驗(yàn)二提出問(wèn)題：當(dāng)將“釣”所在盒子設(shè)置為左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化。演示實(shí)驗(yàn)三提出問(wèn)題：當(dāng)“釣”和“魚”所在的盒子都設(shè)置為左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化。演示實(shí)驗(yàn)四提出問(wèn)題：當(dāng)“釣魚島”所在的三個(gè)盒子都設(shè)置為左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化。演示實(shí)驗(yàn)五提出問(wèn)題：1、當(dāng)“釣魚”所在的二個(gè)盒子設(shè)置為左浮動(dòng)，而“島”設(shè)置為右浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化？2、此時(shí)，瀏覽器窗口變窄，網(wǎng)頁(yè)布局又又何變化？演示實(shí)驗(yàn)六提出問(wèn)題：1、將“魚“所在盒子設(shè)置為右浮動(dòng)，而“島”設(shè)置為左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化？2、瀏覽器窗口變窄的

6、情況下，網(wǎng)頁(yè)布局是如何變化的？演示實(shí)驗(yàn)七提出問(wèn)題：1、當(dāng)在“釣”所在盒子中增加內(nèi)容，然后將“釣魚島”三個(gè)盒子都設(shè)置為左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局有何變化？2、瀏覽器窗口變窄的情況下，網(wǎng)頁(yè)布局是如何變化的？對(duì)浮動(dòng)知識(shí)進(jìn)行小結(jié)。答疑引領(lǐng)提出問(wèn)題引領(lǐng)小結(jié)學(xué)生立禮學(xué)生：“老師好！”學(xué)生思考，然后回答問(wèn)題。學(xué)生傾聽互動(dòng)，明確自己的角色和職位。學(xué)生傾聽互動(dòng)，明確自身的任務(wù)。學(xué)生傾聽、識(shí)記。總結(jié)：沒(méi)有設(shè)置浮動(dòng)的盒子是像兄弟般并排排列的?？偨Y(jié)：“釣”所在的盒子設(shè)置左浮動(dòng)時(shí)，它的寬度不在伸展，而是能夠容納內(nèi)容的最小寬度，此時(shí)，“魚”所在的盒子與其關(guān)系變?yōu)橥恍袃闪小?結(jié)論:“釣魚島”所在的三個(gè)盒子布局是一行三列。結(jié)論：“

7、釣魚島是中國(guó)的”文字所在的盒子也和“釣魚島”三個(gè)字所在的三個(gè)盒子是同行三列。結(jié)論：1、當(dāng)將“島”所在盒子設(shè)置為右浮動(dòng)，“釣”和“魚”所在盒子設(shè)置為左浮動(dòng)時(shí)，“島”所在的盒子在網(wǎng)頁(yè)的最右側(cè)，而此時(shí)文字所在的盒子在它們中間。2、“島”所在盒子被擠到下一行，但仍為右浮動(dòng)。結(jié)論：1、“島”所在的盒子和“魚”所在的盒子交換了位置。在這里給了我們一個(gè)很重要的提示，通過(guò)使用CSS布局，可以實(shí)現(xiàn)在HTML不做任何改變的情況下，調(diào)換盒子的位置。2、瀏覽器窗口變窄，同一行不能容納兩個(gè)左浮動(dòng)的盒子，所以“釣”和“島”是垂直排列的。而右浮動(dòng)的“魚”雖在的盒子是和“釣”所在的盒子是同行排列的。結(jié)論：1、“釣”所在的盒子高度增加，網(wǎng)頁(yè)布局仍然都是左浮動(dòng)。2、瀏覽器窗口變窄的情況下，“島”所在盒子被擋住，不再繼續(xù)左浮動(dòng)，而是垂直排列于“魚”所在盒子之下。傾聽、共同總結(jié)。分組制作項(xiàng)目設(shè)計(jì)主發(fā)言講述，其他人傾聽。分析回答問(wèn)題發(fā)言，進(jìn)行總結(jié)。教師組織學(xué)生上課。溫故而知新情景模擬教學(xué)準(zhǔn)備工作。情景模擬教學(xué)開始。引出浮動(dòng)的知識(shí)點(diǎn)。理解沒(méi)有設(shè)置浮動(dòng)時(shí)盒子的性質(zhì)。掌握左浮動(dòng)的設(shè)置方法及設(shè)置左浮動(dòng)式的網(wǎng)頁(yè)布局變化。掌握設(shè)置兩個(gè)左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局的變化。掌握設(shè)置三個(gè)左浮動(dòng)時(shí)，網(wǎng)頁(yè)布局的變化。掌右浮動(dòng)的屬性，并理解瀏覽器變化時(shí)的網(wǎng)頁(yè)布局變化。掌握調(diào)換盒子的方法，在網(wǎng)頁(yè)布局中是非常有用的。掌握盒子高度