浮動與定位教案

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

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

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

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

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

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

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