浮動與定位教案

哈爾濱市第一職業(yè)高級中學(xué)校 哈一職教案設(shè)計案例哈一職教案設(shè)計案例 課課 題題第六章 浮動與定位授課時間授課時間2012 年年 10 月月 22 日日 授課類型授課類型新授課學(xué)時 1 知識與技能知識與技能會使用float屬性設(shè)置浮動 過程與方法過程與方法回顧檢查 情景模擬 知識鞏固 總結(jié)作業(yè) 教教 學(xué)學(xué) 目目 標(biāo)標(biāo) 情感 態(tài)度與價值觀情感 態(tài)度與價值觀樹立積極探究新知的觀念 培養(yǎng)學(xué)生勇于創(chuàng)新能力 教學(xué)重點教學(xué)重點掌握 Float 屬性 教學(xué)難點教學(xué)難點Float 屬性的應(yīng)用 教學(xué)方法教學(xué)方法情景模擬教學(xué)法 引導(dǎo)文教學(xué)法教具準(zhǔn)備教具準(zhǔn)備課件 教教 學(xué)學(xué) 過過 程程 教學(xué)內(nèi)容教學(xué)內(nèi)容教師活動教師活動學(xué)生活動學(xué)生活動 設(shè)計意設(shè)計意 圖圖 組織教學(xué)組織教學(xué) 回顧檢查回顧檢查 情景模擬情景模擬 青鳥網(wǎng)頁布局公司情況 角色 角色 老師 青鳥網(wǎng)頁布局公司的老板和技術(shù)顧問 同學(xué) 青鳥網(wǎng)頁布局公司的員工 我們有四 個研發(fā)部門 部門經(jīng)理分別為 青鳥網(wǎng)頁布局公司背景 青鳥網(wǎng)頁布局公司背景 青鳥網(wǎng)頁布局公司剛剛成 立 由于資金有限 我們現(xiàn)在的條件待遇一般 但 是我們要相信 通過我們的努力 面包我們會有的 引出項目 引出項目 告訴各位員工一個好消息 我剛剛與哈 一職網(wǎng)站設(shè)計部門負責(zé)人李主任簽訂了一 份設(shè)計合約 我們將為哈一職網(wǎng)站的兩個 版塊進行網(wǎng)頁布局 各位員工 讓我們共 同努力 爭取賺到我們的第一桶金 項目一 項目一 哈一職志愿者服務(wù)隊哈一職志愿者服務(wù)隊 活動網(wǎng)頁布局效活動網(wǎng)頁布局效 果果 教師 上課 提出 2 個問題 教師布置角色并 介紹公司背景 引出本節(jié)課的兩 個項目 學(xué)生立禮 學(xué)生 老師好 學(xué)生思考 然后回答問 題 學(xué)生傾聽互動 明確自 己的角色和職位 學(xué)生傾聽互動 明確自 身的任務(wù) 教師組織 學(xué)生上課 溫故而知 新 情景模擬 教學(xué)準(zhǔn)備 工作 情景模擬 教學(xué)開始 哈爾濱市第一職業(yè)高級中學(xué)校 項目項目 2 2 哈一職禮儀隊哈一職禮儀隊 活動網(wǎng)頁布局效果圖圖活動網(wǎng)頁布局效果圖圖 技術(shù)要點 技術(shù)要點 作為公司的技術(shù)顧問 我先把我們要完 成的兩個項目的技術(shù)要點介紹給大家 我 們要完成的這兩個網(wǎng)站版塊的布局主要涉 及到得知識點是 浮動 浮動浮動 1 浮動的應(yīng)用 浮動的應(yīng)用 1 定位網(wǎng)頁元素 2 建立橫向多列布局 3 建立混合多列布局 2 float 屬性屬性 1 用于定義元素的浮動方向 2 語法規(guī)則 左浮動語法規(guī)則 float left 右浮動語法規(guī)則 float right 實驗過程 實驗實驗 1 未設(shè)置浮動盒子具有的性質(zhì) 未設(shè)置浮動盒子具有的性質(zhì) 實驗實驗 2 設(shè)置設(shè)置 釣釣 所在的盒子為左浮動所在的盒子為左浮動 實驗實驗 3 設(shè)置設(shè)置 魚魚 所在的盒子為左浮動所在的盒子為左浮動 講解浮動的知識 演示實驗一 提出問題 網(wǎng)頁 布局是什么樣的 演示實驗二 提出問題 當(dāng)將 釣 所在盒子 設(shè)置為左浮動時 網(wǎng)頁布局有何變 化 演示實驗三 提出問題 當(dāng) 釣 和 魚 所在的盒子都設(shè) 置為左浮動時 網(wǎng)頁布局有何變 學(xué)生傾聽 識記 總結(jié) 沒有設(shè)置浮動的 盒子是像兄弟般并排排 列的 總結(jié) 釣 所在的盒 子設(shè)置左浮動時 它的 寬度不在伸展 而是能 夠容納內(nèi)容的最小寬度 此時 魚 所在的盒 子與其關(guān)系變?yōu)橥恍?兩列 結(jié)論 釣魚島 所在 的三個盒子布局是一行 三列 引出浮動 的知識點 理解沒有 設(shè)置浮動 時盒子的 性質(zhì) 掌握左浮 動的設(shè)置 方法及設(shè) 置左浮動 式的網(wǎng)頁 布局變化 掌握設(shè)置 兩個左浮 動時 網(wǎng) 頁布局的 變化 哈爾濱市第一職業(yè)高級中學(xué)校 實驗實驗 4 設(shè)置設(shè)置 島島 所在的盒子為左浮動所在的盒子為左浮動 實驗實驗 5 1 設(shè)置 設(shè)置 島島 所在的盒子為右浮動所在的盒子為右浮動 2 島島 所在的盒子右浮動時 瀏覽器窗口變窄所在的盒子右浮動時 瀏覽器窗口變窄 的網(wǎng)頁情況 的網(wǎng)頁情況 實驗實驗 6 1 設(shè)置 設(shè)置 魚魚 所在的盒子為右浮動 同時設(shè)置所在的盒子為右浮動 同時設(shè)置 島島 所在的盒子為左浮動所在的盒子為左浮動 2 瀏覽器窗口變窄時 網(wǎng)頁的情況 瀏覽器窗口變窄時 網(wǎng)頁的情況 化 演示實驗四 提出問題 當(dāng) 釣魚島 所在 的三個盒子都設(shè) 置為左浮動時 網(wǎng)頁布局有何變 化 演示實驗五 提出問題 1 當(dāng) 釣魚 所在的二個盒子 設(shè)置為左浮動 而 島 設(shè)置為 右浮動時 網(wǎng)頁 布局有何變化 2 此時 瀏覽 器窗口變窄 網(wǎng) 頁布局又又何變 化 演示實驗六 提出問題 1 將 魚 所 在盒子設(shè)置為右 浮動 而 島 設(shè)置為左浮動時 網(wǎng)頁布局有何變 化 2 瀏覽器窗口 變窄的情況下 網(wǎng)頁布局是如何 變化的 結(jié)論 釣魚島是中國 的 文字所在的盒子也 和 釣魚島 三個字所 在的三個盒子是同行三 列 結(jié)論 1 當(dāng)將 島 所在盒子設(shè)置為右浮動 釣 和 魚 所在盒 子設(shè)置為左浮動時 島 所在的盒子在網(wǎng) 頁的最右側(cè) 而此時文 字所在的盒子在它們中 間 2 島 所在盒子被擠 到下一行 但仍為右浮 動 結(jié)論 1 島 所在的盒子和 魚 所在的盒子交換 了位置 在這里給了我 們一個很重要的提示 通過使用 CSS 布局 可 以實現(xiàn)在 HTML 不做任 何改變的情況下 調(diào)換 盒子的位置 2 瀏覽器窗口變窄 同一行不能容納兩個左 浮動的盒子 所以 釣 和 島 是垂直排列的 而右浮動的 魚 雖在 的盒子是和 釣 所在 的盒子是同行排列的 結(jié)論 掌握設(shè)置 三個左浮 動時 網(wǎng) 頁布局的 變化 掌右浮動 的屬性 并理解瀏 覽器變化 時的網(wǎng)頁 布局變化 掌握調(diào)換 盒子的方 法 在網(wǎng) 頁布局中 是非常有 用的 哈爾濱市第一職業(yè)高級中學(xué)校 實驗實驗 7 1 全部向左浮動 全部向左浮動 2 瀏覽器窗口變窄時 網(wǎng)頁的情況 瀏覽器窗口變窄時 網(wǎng)頁的情況 3 3 floatfloat 屬性小結(jié)屬性小結(jié) float 屬性作用 1 定位網(wǎng)頁元素 2 實現(xiàn)一行多列或混合多列的布局 float 屬性使用時注意事項 1 在代碼窗口中 使用英文狀態(tài)下輸入法進行 輸入 否則無法出現(xiàn)正確的運行結(jié)果 2 設(shè)置之后的 CSS 樣式 要使用 套用 才能 實現(xiàn)網(wǎng)頁布局的效果 項目設(shè)計 項目設(shè)計 作為技術(shù)顧問 我已經(jīng)把我們公司要完成的 2 個項目的主要技能要點和大家溝通完了 接下來我 們要開始進行項目設(shè)計 我們分成兩個項目組 比 一比哪個項目組開發(fā)設(shè)計的快 希望大家能夠加班 加點 為公司的發(fā)展而努力 項目設(shè)計講述 項目設(shè)計講述 請項目研發(fā)部門經(jīng)理講述設(shè)計項目的過程 知識鞏固知識鞏固 總總 結(jié)結(jié) 演示實驗七 提出問題 1 當(dāng)在 釣 所在盒子中增加 內(nèi)容 然后將 釣魚島 三個 盒子都設(shè)置為左 浮動時 網(wǎng)頁布 局有何變化 2 瀏覽器窗口 變窄的情況下 網(wǎng)頁布局是如何 變化的 對浮動知識進行 小結(jié) 答疑 引領(lǐng) 提出問題 引領(lǐng)小結(jié) 1 釣 所在的盒子高 度增加 網(wǎng)頁布局仍然 都是左浮動 2 瀏覽器窗口變窄的 情況下 島 所在盒 子被擋住 不再繼續(xù)左 浮動 而是垂直排列于 魚 所在盒子之下 傾聽 共同總結(jié) 分組制作項目設(shè)計 主發(fā)言講述 其他人傾 聽 分析回答問題 發(fā)言 進行總結(jié) 掌握盒子 高度發(fā)生 變化的情 況下 網(wǎng)