浮動與定位_教學(xué)設(shè)計(jì)

《浮動與定位_教學(xué)設(shè)計(jì)》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效傳智播客《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》教學(xué)設(shè)計(jì)課程名稱：HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程授課年級：2016年級授課學(xué)期：2016學(xué)年第一學(xué)期教師姓名：某某老師13博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效201年月日課題名稱第6章浮動與定位計(jì)劃課時(shí)8課時(shí)內(nèi)容分析通過前面幾章的學(xué)習(xí)，初學(xué)者不難發(fā)現(xiàn)，在默認(rèn)情況下，網(wǎng)頁中的元素會按照從上到下或從左到右的順序一一羅列。如果僅僅按照這種默認(rèn)的方式進(jìn)行布局，網(wǎng)頁將會顯得單調(diào)、混亂。為了使網(wǎng)頁的布局更加豐

2、富、合理，可以在CSS中對元素設(shè)置浮動和定位屬性。本章將對元素的浮動和定位進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)l理解元素的浮動，能夠?yàn)樵卦O(shè)置浮動樣式。l熟悉清除浮動的方法，可以使用不同方法清除浮動。l掌握元素的定位，能夠?yàn)樵卦O(shè)置常見的定位模式。重點(diǎn)及措施教學(xué)重點(diǎn)：元素的浮動屬性float、運(yùn)用clear屬性清除浮動、運(yùn)用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：元素的浮動屬性float、ov

3、erflow屬性、元素的定位屬性。措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程第一課時(shí)（講解元素的浮動屬性float、清除浮動）l復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出以下問題讓學(xué)生回答，以復(fù)習(xí)第五章“CSS盒子模型”的相關(guān)知識。1、一個(gè)盒子的寬（width）和高（height）均為300px，左內(nèi)邊距為30px，同時(shí)盒子有3px的邊框，請問這個(gè)盒子的總寬度是多少？（）A、333pxB、366pxC、336pxD、363px答案：Cl盒子的

4、總寬度=width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和；l所以，盒子的總寬度=width（300px）+左內(nèi)邊距（30px）+左右邊框?qū)挾戎停?px*2）=336px；說明：教師可根據(jù)學(xué)生對上述問題的回答情況，對以上問題進(jìn)行簡單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。l本課時(shí)內(nèi)容學(xué)習(xí)2分組討論13博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：初學(xué)者在設(shè)計(jì)一個(gè)頁面時(shí)，通常會按照默認(rèn)的排版方式，將頁面中的元素從上到下一一羅列，這樣的布局制作出來的頁面看起

5、來呆板、不美觀。其實(shí)，通過元素“浮動”可以使頁面中的元素按照左、中、右的結(jié)構(gòu)進(jìn)行排版。那么，什么是“元素的浮動”，以及如何設(shè)置元素的浮動呢？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：l所謂元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的控制，移動到其父元素中相應(yīng)位置的過程。在CSS中，通過float屬性來定義浮動，其基本語法格式如下：選擇器{float:屬性值;}l在上面的語法中，常用的float屬性值有三個(gè)：left、right、none。分別用于設(shè)置元素向左浮動、元素向右浮動和元素

6、不浮動。2知識點(diǎn)講解?總結(jié)知識點(diǎn)教師和學(xué)生一起總結(jié)在案例中涉及到的知識點(diǎn)，主要包括“元素的浮動屬性float”等。?講解“元素的浮動屬性float”（1）、教師通過PPT對網(wǎng)頁中常見的元素浮動效果進(jìn)行展示。（2）、教師通過PPT對“浮動”的概念及基本語法格式進(jìn)行講解，并進(jìn)行代碼演示。（3）、教師對“浮動”的常用屬性—左浮動、右浮動進(jìn)行講解，并進(jìn)行代碼演示。（4）、教師指出對元素應(yīng)用“浮動”時(shí)需要注意的問題，并給予解答。（5）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。?講解“清除浮動”（1）、教師對元素

7、的浮動會對其他元素產(chǎn)生影響，并進(jìn)行代碼演示。（2）、教師對分別對“使用空標(biāo)記清除浮動”、“使用overflow屬性清除浮動”以及“使用after偽對象清除浮動”的方法及應(yīng)用范圍進(jìn)行講解，并進(jìn)行代碼演示。（3）、教師對比“使用空標(biāo)記清除浮動”、“使用overflow屬性清除浮動”以及“使用after偽對象清除浮動”的異同，并分析其優(yōu)缺點(diǎn)。（4）、教師分別指出清除元素浮動時(shí)需要注意的問題，并給予解答。（5）、學(xué)生練習(xí)，教師巡視，對疑難問題進(jìn)行解答。說明：在網(wǎng)頁制作時(shí)可適時(shí)停下來，讓學(xué)生自行嘗試。小組之間可

8、以協(xié)作討論，教師巡視，對疑難問題進(jìn)行解答。2階段小結(jié)?小結(jié)重點(diǎn)：元素的浮動屬性float、清除浮動。?答疑13博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效教師詢問學(xué)生對于知識點(diǎn)還有什么不理解的地方。針對學(xué)生不理解的知識點(diǎn)給與解釋。2鞏固練習(xí)?鞏固本課時(shí)知識點(diǎn)學(xué)完知識點(diǎn)后，教師帶領(lǐng)學(xué)生對本課時(shí)所學(xué)知識點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何給元素設(shè)置浮動屬性，并能夠清除浮動元素帶來的影響。?通過“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測試題目及案例素材給學(xué)生，對于掌握較