響應式Web開發(fā)項目化教程（HTML5+CSS3） 教案 孫曉娟 項目4-10 制作家裝行業(yè)產品展示頁面-制作復雜響應式網站

PAGE8一、教案頭授課標題項目4制作家裝行業(yè)產品展示頁面

子項目一過渡

子項目二變形學時2地點授課班級課次第17次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠制作過渡和變形效果掌握過渡和變形的制作方法教學重點制作過渡和變形效果教學難點制作過渡和變形效果能力訓練任務及案例項目4制作家裝行業(yè)產品展示頁面

子項目一過渡

子項目二變形教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)作業(yè)七高級應用階段案例參考資料《響應式Web開發(fā)教程》課后小結二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解transition-property、transition-duration、transition-timing-function、transition-delay、transition屬性）復習上節(jié)課內容本課時內容學習傳統(tǒng)的Web設計中，當網頁中需要顯示動畫或特效時，需要使用JavaScript腳本或者Flash來實現(xiàn)。CSS3提供了強大的過渡屬性，它可以在不使用Flash動畫或者JavaScript腳本的情況下，為元素從一種樣式轉變?yōu)榱硪环N樣式時添加效果，例如漸顯、漸弱、動畫快慢等。那么，在CSS3中，過渡屬性主要包括哪些呢？知識點講解講解“transition-property屬性”（1）教師通過PPT對“transition-property屬性”的概念及作用進行講解，指出transition-property屬性用于指定應用過渡效果的CSS屬性的名稱。（2）教師對“transition-property屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“transition-property屬性”的三個常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師指出應用“transition-property屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“transition-duration屬性”（1）教師通過PPT對“transition-duration屬性”的概念及作用進行講解，指出\o"CSS3transition-duration屬性"transition-duration屬性用于定義過渡效果花費的時間。（2）教師對“transition-duration屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師指出在設置“過渡”效果時，必須使用\o"CSS3transition-duration屬性"transition-duration屬性設置過渡時間，否則不會產生過渡效果。（4）學生練習，教師巡視，對疑難問題進行解答。講解“transition-timing-function屬性”（1）教師通過PPT對“transition-timing-function屬性”的概念及作用進行講解，指出transition-timing-function屬性規(guī)定過渡效果的速度曲線。（2）教師對“transition-timing-function屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“transition-timing-function屬性”的常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師對比“transition-timing-function屬性”不同屬性值的產生過渡效果的速度曲線，并分析其異同。（5）學生練習，教師巡視，對疑難問題進行解答。講解“transition-delay屬性”（1）教師通過PPT對“transition-delay屬性”的概念及作用進行講解，指出transition-delay屬性規(guī)定過渡效果何時開始。（2）教師對“transition-delay屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對比“transition-delay屬性”設置的過渡效果，并分析說明。（4）學生練習，教師巡視，對疑難問題進行解答。講解“transition屬性”（1）教師對“transition屬性”的概念進行講解，指出transition屬性是一個復合屬性，用于在一個屬性中設置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性。（2）教師對“transition屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對使用“transition屬性”設置transition-property、transition-duration、transition-timing-function、transition-delay四個過渡屬性進行講解，并對比分析其優(yōu)缺點。（4）教師指出應用“transition屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：transition屬性。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握如何使用transition-property、transition-duration、transition-timing-function、transition-delay屬性設置元素的過渡效果。本課時內容學習在CSS3之前，如果需要為頁面設置變形效果，需要依賴于圖片、Flash或JavaScript才能完成。CSS3出現(xiàn)后，通過transform屬性就可以實現(xiàn)變形效果，。那么，請同學們討論下：使用transform屬性可以實現(xiàn)哪幾種變形效果？知識點講解講解“認識transform”（1）教師通過PPT對“CSS32D變形和CSS33D變形”產生的背景進行介紹。（2）教師對“CSS3變形”能夠實現(xiàn)的功能和效果進行概述，并分析其優(yōu)缺點。（3）教師對“transform屬性”的基本語法進行講解，并使用代碼進行演示。（4）教師指出transform-function函數(shù)包括matrix（）、translate（）、scale（）rotate（）和skew（）等，并進行簡單介紹。（5）學生練習，教師巡視，對疑難問題進行解答。講解“2D轉換”（1）教師指出使用transform屬性可以實現(xiàn)2D轉換，主要包括：平移、縮放、傾斜和旋轉。（2）教師分別對“translate（）方法、scale()方法、skew()方法、rotate()方法”的實現(xiàn)效果及基本語法格式進行講解，并畫出變形效果示意圖。（3）教師分別對“ranslate（）方法、scale()方法、skew()方法、rotate()方法”進行講解，演示其具體用法和效果，并對比分析其變形效果的異同。（4）教師指出應用“transform屬性”實現(xiàn)平移、縮放、傾斜和旋轉時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“3D轉換”（1）教師和學生互動：在上一節(jié)中，我們已經學習了2D轉換，主要包括如何讓元素在平面上進行順時針或逆時針旋轉。其實，在3D變形中可以讓元素圍繞X軸、Y軸、Z軸進行旋轉，下面將針對CSS3中的rotateX()、rotateY()函數(shù)進行具體講解。（2）教師分別針對“rotateX()、rotateY()、rotate3d()”函數(shù)的基本語法格式及常見參數(shù)進行講解，并進行代碼演示。（3）教師對比分析“rotateX()、rotateY()、rotate3d()”函數(shù)轉換效果的異同，并進行分析說明。（4）教師指出應用“rotate3d()函數(shù)”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：2D轉換、3D轉換。易錯點：注意區(qū)分2D轉換和3D轉換的不同。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握通過transform屬性實現(xiàn)元素的移動、傾斜、縮放、翻轉等變形效果。一、教案頭授課標題項目4制作家裝行業(yè)產品展示頁面

子項目三動畫學時2地點授課班級課次第18次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠制作動畫效果掌握動畫的制作方法教學重點制作常見的過渡效果制作２D轉換、３D轉換效果教學難點制作常見的過渡效果制作２D轉換、３D轉換效果能力訓練任務及案例項目4制作家裝行業(yè)產品展示頁面

子項目三動畫教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)作業(yè)七高級應用階段案例參考資料《響應式Web開發(fā)教程》課后小結二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內容1、在CSS3中，使用transform屬性可以實現(xiàn)變形效果。下列選項中，能夠實現(xiàn)元素縮放的函數(shù)是？本課時內容學習使用動畫之前必須先定義關鍵幀，一個關鍵幀表示動畫過程中的一個狀態(tài)。在CSS3中，@keyframes規(guī)則用于創(chuàng)建動畫。那么，請同學們討論下：如何使用@keyframes屬性定義動畫？知識點講解講解“@keyframes”（1）教師和學生互動：使用動畫之前必須先定義關鍵幀，一個關鍵幀表示動畫過程中的一個狀態(tài)。在CSS3中，@keyframes規(guī)則用于創(chuàng)建動畫。在@keyframes中規(guī)定某項CSS樣式，就能創(chuàng)建由當前樣式逐漸變?yōu)樾聵邮降膭赢嬓ЧＯ旅?，將對@keyframes屬性進行具體講解。（2）教師通過PPT對“@keyframes屬性”的概念及作用進行講解，指出@keyframes規(guī)則用于創(chuàng)建動畫。（3）教師對“@keyframes屬性”的基本語法格式進行講解，并進行代碼演示。（4）教師對“@keyframes屬性”包含的參數(shù)含義進行說明，并進行代碼演示。（5）教師指出應用“@keyframes屬性”時需要注意的問題，并給予解答。（6）學生練習，教師巡視，對疑難問題進行解答。講解“animation-name屬性”（1）教師通過PPT對“animation-name屬性”的概念及作用進行講解，指出animation-name屬性用于定義要應用的動畫名稱，為@keyframes動畫規(guī)定名稱。（2）教師對“animation-name屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“animation-name屬性”常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）學生練習，教師巡視，對疑難問題進行解答。講解“animation-duration屬性”（1）教師通過PPT對“animation-duration屬性”的概念及作用進行講解，指出animation-duration屬性用于定義整個動畫效果完成所需要的時間。（2）教師對“animation-duration屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師指出應用“animation-duration屬性”時需要注意的問題，并給予解答。（4）學生練習，教師巡視，對疑難問題進行解答。講解“animation-timing-function屬性”（1）教師通過PPT對“animation-timing-function屬性”的概念及作用進行講解，指出animation-timing-function用來規(guī)定動畫的速度曲線，定義使用哪種方式來執(zhí)行動畫效果。（2）教師對“animation-timing-function屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“animation-timing-function屬性”的常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值動畫效果的異同。（4）教師指出應用“animation-timing-function屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“animation-delay屬性”（1）教師通過PPT對“animation-delay屬性”的概念及作用進行講解，指出animation-delay屬性用于定義執(zhí)行動畫效果之前延遲的時間，即規(guī)定動畫什么時候開始。（2）教師對“animation-delay屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師指出應用“animation-delay屬性”時需要注意的問題，并給予解答。（4）學生練習，教師巡視，對疑難問題進行解答。講解“animation-iteration-count屬性”（1）教師通過PPT對“animation-iteration-count屬性”的概念及作用進行講解，指出animation-iteration-count屬性用于定義動畫的播放次數(shù)。（2）教師對“animation-iteration-count屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“animation-iteration-count屬性”的常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值動畫效果的異同。（4）教師指出應用“animation-iteration-count屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“animation-direction屬性”（1）教師通過PPT對“animation-direction屬性”的概念及作用進行講解，指出animation-direction屬性定義當前動畫播放的方向。（2）教師對“animation-iteration-count屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“animation-direction屬性”的常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值動畫效果的異同。（4）教師指出應用“animation-direction屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“animation屬性”（1）教師對“animation屬性”的概念進行講解，指出animation屬性是一個簡寫屬性，用于在一個屬性中設置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個動畫屬性。（2）教師對“animation屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對使用“animation屬性”同時設置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六個動畫屬性進行講解，并對比分析其優(yōu)缺點。（4）教師指出應用“animation屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：animation屬性。易錯點：注意區(qū)分animation相關屬性的用法。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握如何使用animation相關屬性定義不同的動畫效果。一、教案頭授課標題子項目四綜合項目——制作家裝行業(yè)產品展示頁面學時2地點授課班級課次第19次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠設置漸變背景理解漸變屬性的原理教學重點能夠設置漸變背景教學難點能夠設置漸變背景能力訓練任務及案例子項目四綜合項目——制作家裝行業(yè)產品展示頁面教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)作業(yè)七高級應用階段案例參考資料《響應式Web開發(fā)教程》課后小結二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程項目分析4.3.1頁面結構分析頁面結構如圖4-14所示。圖4-14頁面結構圖通過觀察圖4-14，我們發(fā)現(xiàn)頁面的主體結構“產品展示”由“地中海風格”“現(xiàn)代簡約風格”“歐式風格”“中式風格”四個版塊組成。這四個版塊也構成了產品展示的導航欄“地中海風格”版塊：需要設置標題標記<h1>和無序列表標記<ul><li>定義導航欄，需要設置標題標記<h2>、段落標記<p>、圖像標記<img>定義右側頁面樣式?！艾F(xiàn)代簡約風格”“歐式風格”“中式風格”版塊：需要設置標題標記<h2>和段落標記<p>，其中，在“中式風格”版塊中，還需要設置圖像標記<img>，在“現(xiàn)代簡約風格”版塊中，還需要設置無序列表標記<ul><li>嵌套圖像標記<img>。4.3.2樣式分析“地中海風格”版塊：該版塊是始終不動的，需設置絕對定位。“現(xiàn)代簡約風格”“歐式風格”“中式風格”版塊：開始時隱藏于頁面的左外側，通過margin-left:-100%設置，該項目的關鍵是實現(xiàn)過渡的動畫效果，動畫的觸發(fā)事件是選擇導航欄，選中的版塊則產生活動。當選擇導航欄的選項時，被選中的版塊margin-left發(fā)生變化，由margin-left:-100%變?yōu)閙argin-left:0%，從而使版塊進入頁面。未被選中的版塊自動退回左外側，通過margin-left:-100%設置實現(xiàn)。4.4項目實踐4.4.1制作頁面結構1．制作導航欄1<header>2<h1>產品展示</h1>3<nav>4<aid="link-di"href="#di">地中海風格</a>5<aid="link-xian"href="#xian">現(xiàn)代簡約風格</a>6<aid="link-ou"href="#ou">歐式風格</a>7<aid="link-zhong"href="#zhong">中式風格</a>8</nav>9</header>2．制作“地中海風格”“現(xiàn)代簡約風格”“歐式風格”“中式風格”版塊1<!--di-->2<divid="di"class="content">3<h2>地中海風格</h2>4<p>浪漫柔情地中海風格，在家擁有藍天碧海般感覺</p>5<p>無處不在的浪漫主義氣息和兼容并蓄的文化品位，以其6極具親和力的田園風情被不同層次的人們接受。7生性浪漫又崇尚遼闊自然的愜意生活的人們會情不自禁8地愛上地中海。</p>9<imgsrc="img/dizhonghai.jpg"height="250">10</div>11<!--/di-->12<!--xian-->13<divid="xian"class="panel">14<divclass="content">15<h2>現(xiàn)代簡約</h2>16<p>現(xiàn)代簡約，優(yōu)雅高檔，時尚現(xiàn)代</p>17<ulid="works">18<li><ahref="#"><imgsrc="img/jian1.jpg"height="250"></a></li>19<li><ahref="#"><imgsrc="img/jian2.jpg"height="250"></a></li>20<li><ahref="#"><imgsrc="img/jian3.jpg"height="250"></a></li>21<li><ahref="#"><imgsrc="img/jian4.jpg"height="250"></a></li>22</ul>2324</div>25</div>26<!--/xian-->27<!--ou-->28<divid="ou"class="panel">29<divclass="content">30<h2>歐式風格</h2>31<p>大氣、奢華、浪漫是歐式風格顯著的特點，32根據(jù)設計使用元素的不同，歐式風格也能展現(xiàn)出不同的家裝魅力。</p>33<p>將鮮花、波浪這些元素融入客廳空間裝飾中，34通過完美的曲線，精細的細節(jié)處理，華麗動感，打破了理性的空間之美，35典雅奢華的立體感呼之欲出，是浪漫優(yōu)雅家居生活的美好體現(xiàn)。</p>36</div>37</div>38<!--/ou-->39<!--zhong-->40<divid="zhong"class="panel">41<divclass="content">42<h2>中式風格</h2>43<p>低調奢華中式風格</p>44<p>以京城民宅的黑、白、灰色為基調，45將皇家住宅的紅色作為局部色彩，同一種系列搭配在一起很好看。</p>46<imgsrc="img/zhong.jpg"height="250">47</div>48</div>49<!--/zhong-->4.4.2定義CSS樣式1．定義全局樣式*{margin:0;padding:0;}body{width:100%;background:#b1e583;}2．定義導航欄樣式header{position:absolute;z-index:999;width:250px;top:100px;}headerh1{font-size:30px;font-weight:400;text-transform:uppercase;color:rgba(255,255,255,0.9);text-shadow:0px1px1pxrgba(0,0,0,0.3);padding:20px;background:#000;}nav{margin-top:20px;width:250px;display:block;list-style:none;z-index:3;}nava{color:#444;display:block;background:#fff;background:rgba(255,255,255,0.9);line-height:50px;padding:0px20px;box-shadow:1px1px2pxrgba(0,0,0,0.2);font-size:16px;margin-bottom:2px;text-align:center;text-decoration:none;}nava:hover{background:#ddd;}3．定義“地中海風格”“現(xiàn)代簡約風格”“歐式風格”“中式風格”版塊樣式.content{left:350px;top:0px;position:absolute;padding-bottom:30px;}.contenth2{font-size:110px;padding:10px0px20px0px;margin-top:52px;color:#fff;color:rgba(255,255,255,0.9);text-shadow:0px1px1pxrgba(0,0,0,0.3);}.contentp{font-size:18px;line-height:24px;color:#fff;background:black;padding:10px;margin:3px0px;width:640px;}.panel{width:100%;min-height:100%;position:absolute;background-color:#000;margin-left:-100%;z-index:2;-webkit-transition:all.6sease-in-out;-moz-transition:all.6sease-in-out;-o-transition:all.6sease-in-out;-ms-transition:all.6sease-in-out;transition:all.6sease-in-out;}.panel:target{margin-left:0%;background-color:#b1e583;}#di:target~#header#navigation#link-di,#xian:target~#header#navigation#link-xian,#ou:target~#header#navigation#link-ou,#zhong:target~#header#navigation#link-zhong{background:#000;color:#fff;}#works{padding:15px0px;overflow:hidden;width:700px;}#worksli{float:left;list-style:none;padding-right:10px;}#worksimg,.contentimg{box-shadow:1px1px2pxrgba(0,0,0,0.3);padding:12px;background:rgba(255,255,255,0.9);}4.5項目總結通過本項目的學習，讀者能夠理解過渡屬性，能夠控制動畫的過渡時間、動畫的展示速度等常見過渡效果，掌握CSS3中的變形屬性，能夠制作2D轉換、3D轉換效果，并掌握CSS3中的動畫屬性，能夠熟練制作網頁中常見的動畫效果。一、教案頭授課標題項目5制作旅游網站的導航欄和banner版塊

子項目一元素的浮動屬性float

子項目二元素的清除浮動屬性clear學時2地點授課班級課次第20次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠為元素設置浮動樣式能夠使用不同方法清除浮動理解元素的浮動熟悉清除浮動的方法教學重點為元素設置浮動樣式使用不同方法清除浮動教學難點為元素設置浮動樣式使用不同方法清除浮動能力訓練任務及案例項目5制作旅游網站的導航欄和banner版塊

子項目一元素的浮動屬性float

子項目二元素的清除浮動屬性clear教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結PAGE11PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解元素的浮動屬性float、清除浮動）復習上節(jié)課內容一個盒子的寬（width）和高（height）均為200px，左內邊距為50px，同時盒子有3px的邊框，請問這個盒子的總寬度是多少？本課時內容學習初學者在設計一個頁面時，通常會按照默認的排版方式，將頁面中的元素從上到下一一羅列，這樣的布局制作出來的頁面看起來呆板、不美觀。其實，通過元素“浮動”可以使頁面中的元素按照左、中、右的結構進行排版。那么，什么是“元素的浮動”，以及如何設置元素的浮動呢？知識點講解總結知識點教師和學生一起總結在案例中涉及到的知識點，主要包括“元素的浮動屬性float”等。講解“元素的浮動屬性float”（1）教師通過PPT對網頁中常見的元素浮動效果進行展示。（2）教師通過PPT對“浮動”的概念及基本語法格式進行講解，并進行代碼演示。（3）教師對“浮動”的常用屬性—左浮動、右浮動進行講解，并進行代碼演示。（4）教師指出對元素應用“浮動”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“清除浮動”（1）教師對元素的浮動會對其他元素產生影響，并進行代碼演示。（2）教師對分別對“使用空標記清除浮動”、“使用overflow屬性清除浮動”以及“使用after偽對象清除浮動”的方法及應用范圍進行講解，并進行代碼演示。（3）教師對比“使用空標記清除浮動”、“使用overflow屬性清除浮動”以及“使用after偽對象清除浮動”的異同，并分析其優(yōu)缺點。（4）教師分別指出清除元素浮動時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。說明：在網頁制作時可適時停下來，讓學生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對疑難問題進行解答。階段小結小結重點：元素的浮動屬性float、清除浮動。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握如何給元素設置浮動屬性，并能夠清除浮動元素帶來的影響。本課時內容學習當盒子內的元素超出盒子自身的大小時，內容就會溢出，這時如果想要規(guī)范溢出內容的顯示方式，就需要使用CSS中的overflow屬性。那么，請同學們討論下：overflow屬性的屬性值有哪些？各個屬性值有什么作用？知識點講解講解“overflow屬性”（1）教師通過PPT對“overflow屬性”的作用進行講解。（2）教師對“overflow屬性”的基本語法格式進行講解，并進行代碼演示。（3）教師對“overflow屬性”的四個常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）教師指出應用“overflow屬性”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：overflow屬性。易錯點：注意區(qū)分overflow不同屬性值的用法。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握overflow屬性的用法。一、教案頭授課標題項目5制作旅游網站的導航欄和banner版塊

子項目三元素的位置定位屬性

子項目四元素的類型轉換學時2地點授課班級課次第21次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠為元素設置常見的定位模式掌握元素的定位教學重點元素的定位教學難點元素的定位能力訓練任務及案例項目5制作旅游網站的導航欄和banner版塊

子項目三元素的位置定位屬性

子項目四元素的類型轉換教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結PAGE5PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解元素的定位屬性、靜態(tài)定位、相對定位、絕對定位、固定定位、z-index層疊等級屬性）復習上節(jié)課內容1、下列樣式代碼中，可實現(xiàn)元素的溢出內容被修剪，且被修剪的內容不可見的是（）。A、 overflow:visible;B、 overflow:hidden;C、 overflow:auto;D、 overflow:scroll;本課時內容學習元素的定位方式包括多種，例如：靜態(tài)定位、相對定位、絕對定位、固定定位等。那么，請同學們討論下：什么是“相對定位”？相對定位是將元素相對于它在標準文檔流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。知識點講解講解“元素的定位屬性”（1）教師和學生互動：制作網頁時，如果希望元素出現(xiàn)在某個特定的位置，就需要使用定位屬性對元素進行精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。下面，將進行具體講解。（2）教師分別針對“定位模式”和“邊偏移”進行詳細講解。（3）教師對“定位模式”的基本語法格式進行講解，并進行代碼演示。（4）教師指出position屬性的四個常用值，并進行分析。（5）學生練習，教師巡視，對疑難問題進行解答。講解“靜態(tài)定位”（1）教師展示PPT對“靜態(tài)定位”的概念進行講解。。（2）教師針對“靜態(tài)定位”進行詳細講解，并進行代碼演示。（3）學生練習，教師巡視，對疑難問題進行解答。講解“相對定位”（1）教師展示PPT對“相對定位”的概念進行講解。（2）教師針對“相對定位”進行詳細講解，并進行代碼演示。（3）教師分析“相對定位”的用法及顯示效果，對比其和“靜態(tài)定位”的區(qū)別與聯(lián)系。（4）教師指出應用“相對定位”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“絕對定位”（1）教師展示PPT對“絕對定位”的概念進行講解。（2）教師針對“絕對定位”進行詳細講解，并進行代碼演示。（3）教師分析“絕對定位”的用法及顯示效果，對比其和“靜態(tài)定位”以及“相對定位”的區(qū)別與聯(lián)系。（4）教師指出應用“絕對定位”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“固定定位”（1）教師展示PPT對“固定定位”的概念進行講解。（2）教師針對“固定定位”進行詳細講解，并進行代碼演示。（3）教師分析“固定定位”的用法及顯示效果，對比其和“靜態(tài)定位”、“相對定位”以及“絕對定位”的區(qū)別與聯(lián)系。（4）學生練習，教師巡視，對疑難問題進行解答。講解“z-index層疊等級屬性”（1）教師和學生互動：當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊，那么，怎樣解決這個問題呢？（2）教師展示PPT對“z-index層疊等級屬性”的用法進行說明。（3）教師針對“z-index層疊等級屬性”進行詳細講解，并進行代碼演示。（4）教師指出“z-index層疊等級屬性”需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：相對定位、絕對定位。易錯點：注意區(qū)分相對定位與絕對定位的用法。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握如何使用定位屬性控制元素的位置，以及z-index層疊等級屬性控制元素的堆疊順序。本課時內容學習在HTML中，元素分為塊元素和行內元素。具體如下：塊元素塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點是，每個塊元素通常都會獨自占據(jù)一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標記是最典型的塊元素。行內元素行內元素也稱內聯(lián)元素或內嵌元素，其特點是，不必在新的一行開始，同時，也不強迫其他的元素在新的一行顯示。一個行內元素通常會和它前后的其他行內元素顯示在同一行中，它們不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。常見的行內元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>標記是最典型的行內元素。知識點講解講解“元素的類型”（1）教師和學生互動：HTML標記語言提供了豐富的標記，用于組織頁面結構。為了使頁面結構的組織更加輕松、合理，HTML標記被定義成了不同的類型，一般分為塊標記和行內標記，也稱塊元素和行內元素。下面，我們開始學習塊元素和行內元素。（2）教師展示PPT對“塊元素和行內元素”的概念及特點進行說明。（3）教師分別對“塊元素和行內元素”進行講解，并進行代碼演示。（4）教師列舉常見的塊元素和行內元素，并對比其不同。（5）學生練習，教師巡視，對疑難問題進行解答。講解“<span>標記”（1）教師和學生互動：在上面的小節(jié)中，我們已經學習了<div>標記，<div>標記是典型的塊標記。下面，我們學習一個典型的行內標記—<span>標記。（2）教師展示PPT對<span>標記的概念及特點進行說明。（3）教師對<span>標記的使用方法進行講解，并進行代碼演示。（4）教師對比<span>標記和<div>標記的異同，并指出使用<span>標記布局時需要注意的問題。（5）學生練習，教師巡視，對疑難問題進行解答。講解“元素的轉換”（1）教師和學生互動：我們知道，網頁是由多個塊元素和行內元素構成的盒子排列而成的，而HTML元素分為塊元素和行內元素。如果希望行內元素具有塊元素的某些特性，例如可以設置寬高，或者需要塊元素具有行內元素的某些特性，例如不獨占一行排列，那么，需要怎么做呢？其實，在CSS中使用display屬性可以對元素的類型進行轉換。（2）教師展示PPT對“display屬性”及其常用的屬性值進行展示。（3）教師對“display屬性”的使用方法進行講解，并進行代碼演示。（4）教師對比“display屬性”不同屬性值顯示的不同效果，并進行總結。（5）教師指出使用“display屬性”轉換元素類型時需要注意的問題，并給與解答。（6）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：元素的轉換。易錯點：注意區(qū)分行內元素和塊元素。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地區(qū)分元素的類型，以及如何進行元素的轉換等知識點。PAGE4一、教案頭授課標題子項目五綜合項目——制作旅游網站的導航欄和banner版塊學時2地點授課班級課次第22次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠運用浮動與定位解決實際問題掌握浮動與定位的方法教學重點浮動與定位的方法教學難點浮動與定位的方法能力訓練任務及案例子項目五綜合項目——制作旅游網站的導航欄和banner版塊教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)作業(yè)六浮動與定位階段案例參考資料《響應式Web開發(fā)教程》課后小結PAGE3PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內容在上一節(jié)中，我們知道HTML元素主要分為塊元素和行內元素兩部分，并且通過display屬性可以對元素的類型進行轉換。那么，請大家回顧下：display屬性常用的屬性值有哪些？并說明其含義。本課時內容學習案例講解案例描述本章前幾節(jié)重點講解了元素的浮動、定位、以及清除浮動。案例分析分析構成元素，將其拆解為幾個部分，分析各部分使用了哪些HTML標記及應用了哪些CSS樣式。案例實現(xiàn)教師帶領學生分步驟地進行網頁制作，通過分析效果圖、制作頁面結構、定義CSS樣式等步驟完成頁面的制作，并指出其中需要注意的事項。階段小結小結重點：元素的浮動、元素的定位、元素的類型與轉換。易錯點：注意區(qū)分行內元素和塊元素的區(qū)別。鞏固練習鞏固本課時知識點學完知識點后，讓學生再制作一次“網頁焦點圖”。以此使學生更熟練地運用浮動和定位進行網頁布局，掌握清除浮動的幾種常用方法，理解元素的類型與轉換。（作品點評）教師對學生的提交的上機測試作品進行點評，指出代碼中容易出現(xiàn)bug的地方，并給與解答。一、教案頭授課標題項目六制作視頻播放頁面

子項目一嵌入視頻

子項目二嵌入音頻學時2地點授課班級課次第23次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠在HTML5頁面中添加視頻、音頻掌握HTML5中視頻、音頻的相關屬性教學重點在HTML5頁面中添加視頻、音頻教學難點在HTML5頁面中添加視頻、音頻能力訓練任務及案例項目八多媒體技術教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結PAGE4PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解HTML5多媒體的特性、視頻和音頻編解碼器、多媒體的格式、支持視頻和音頻的瀏覽器）復習上節(jié)課內容我們學習了表單的相關元素及其屬性和CSS控制表單樣式。那么，表單的屬性都有那些呢？本課時內容學習支持視頻和音頻的瀏覽器有哪些？瀏覽器支持版本IE9.0及以上版本Frefox3.5及以上版本Opear10.5及以上版本Chrome3.0及以上版本Safari3.2及以上版本知識點講解講解“HTML5多媒體的特性”（1）教師展示PPT對“HTML5多媒體的特性”進行簡單介紹。（2）學生自主提問，教師對疑難問題進行解答。講解“視頻和音頻編解碼器

”（1）教師展示PPT指出HTML5視頻和音頻編解碼器都有哪些。（2）學生自主提問，教師對疑難問題進行解答。講解“多媒體的格式”（1）教師通過PPT分別講解“多媒體的格式”中音頻和視頻格式都有哪些。（2）教師展示PPT詳細介紹每一種音視頻格式。（3）學生自主提問，教師對疑難問題進行解答。講解“支持視頻和音頻的瀏覽器”（1）教師展示PPT指出支持HTML5視頻和音頻的瀏覽器都有哪些。（2）教師指出實際工作中，不同瀏覽器視頻的顯示效果有所不同。（3）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：支持視頻和音頻的瀏覽器。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生了解HTML5多媒體的特性、視頻和音頻編解碼器、多媒體的格式以及支持視頻和音頻的瀏覽器。（講解在HTML5中嵌入視頻、在HTML5中嵌入音頻、音視頻中的source元素、調用網頁多媒體文件）本課時內容學習我們知道，在HTML5中通過video元素可嵌入視頻，為了進一步優(yōu)化視頻的播放效果，video元素中通常還可以添加一些其他屬性。那么，video元素都有哪些屬性呢？屬性值描述autoplayautoplay當頁面載入完成后自動播放視頻。looploop視頻結束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用"autoplay"，則忽略該屬性。posterurl當視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來。知識點講解講解“在HTML5中嵌入視頻”（1）教師展示PPT對“在HTML5中嵌入視頻”的基本語法格式進行講解。（2）教師對“在HTML5中嵌入視頻”的顯示效果通過代碼進行演示。（3）教師展示PPT對video元素的常見屬性進行詳細講解。（4）學生練習，教師巡視，對疑難問題進行解答。講解“在HTML5中嵌入音頻”（1）教師展示PPT對“在HTML5中嵌入音頻”的基本語法格式進行講解。（2）教師對“在HTML5中嵌入音頻”的顯示效果通過代碼進行演示。（3）教師展示PPT對audio元素的常見屬性進行詳細講解。（4）學生練習，教師巡視，對疑難問題進行解答。講解“音視頻中的source元素”（1）教師展示PPT對“音視頻中的source元素”的用途進行講解。（2）教師展示PPT對“音視頻中的source元素”的基本語法格式進行講解。（3）學生練習，教師巡視，對疑難問題進行解答。講解“調用網頁多媒體文件”（1）教師概括描述“調用網頁多媒體文件”的兩種方法。（2）教師展示PPT對調用指定url地址的互聯(lián)網多媒體文件進行講解，比較兩種方法的異同，并指出其優(yōu)缺點。（3）學生練習，教師巡視，對疑難問題進行解答。階段小結小結重點：在HTML5中嵌入視頻、在HTML5中嵌入音頻。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握在HTML5中嵌入視頻、在HTML5中嵌入音頻、音視頻中的source元素、調用網頁多媒體文件等知識點。PAGE3PAGE1一、教案頭授課標題項目七制作垃圾分類頁面子項目一視口

子項目二簡單媒體查詢學時2地點授課班級課次第24次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠運用媒體查詢解決實際問題掌握視口的概念；掌握簡單媒體查詢的方法教學重點視口、媒體查詢教學難點媒體查詢能力訓練任務及案例項目七制作垃圾分類頁面子項目一視口

子項目二簡單媒體查詢教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內容。2、學生分組將學生在教學中分成學習小組，強化學生的團結合作意識，在每項個項目結束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內容怎樣插入音頻、視頻？本課時內容學習隨著顯示屏幕越來越多樣，為了適應顯示屏大小，響應式設計也就應運而生。那么響應式設計到底指的是什么呢？響應式設計是指自動識別屏幕寬度并做出相應調整的網頁設計，布局和展示的內容可能會有所變動。也就是說，做一個網站同時能兼容多個終端，為我們大大節(jié)省了資源。當我們對移動端進行頁面適配時，我們首先應該了解到視口，媒體查詢，以及百分比布局。知識點講解講解“視口”視口是用戶網頁的可視區(qū)域，它定義了瀏覽器能顯示內容的屏幕區(qū)域。那么PC上的web頁面在移動設備上打開是什么樣子的？在瀏覽器中訪問新浪首頁/，打開chrome開發(fā)者工具，本節(jié)中我們使用chrome自帶的移動終端模擬器。點擊模擬器圖標，打開chrome開發(fā)者工具中的模擬器，選擇一種手機型號，查看新浪首頁的手機視圖可以看到，網頁并沒有超出手機的屏幕，而是自動縮放了。實際上，手機瀏覽器會把頁面放入到一個虛擬的視口（viewport）中，在渲染網頁的時候，比如它原本是顯示在寬980px的屏幕上的，那同樣的內容被壓縮到一個很小的手機屏幕上，用戶要花好多時間放大屏幕，才能看清網頁上的內容或與網頁交互。如果我們想要在更小的屏幕上顯示網頁，必須顯式地設置viewport?，F(xiàn)代瀏覽器引進了viewport這個metatag，讓網頁開發(fā)者來控制viewport的大小和縮放。講解“設置視口”一個常用的針對移動網頁優(yōu)化過的頁面的viewportmeta標簽大致如下：<metaname="viewport"content="width=device-width,initial-scale=1.0">在移動端布局時，在meta標簽中我們會將width設置成device-width，device-width一般是表示設備分辨率的寬度。viewportmeta標簽一共有6個屬性，如表8-1所示：表8-1viewport的屬性說明屬性名稱屬性說明width設置viewport的寬度，默認視口寬度，可以指定的一個值，或者特殊的值，如device-width為設備的寬度（單位為縮放為100%時的CSS的像素）。height設置viewport的高度，和width相對應。initial-scale初始縮放比例，也即是當頁面第一次load的時候縮放比例。maximum-scale允許用戶縮放到的最大比例。minimum-scale允許用戶縮放到的最小比例。user-scalable是否允許用戶進行縮放，值為"no"或"yes",no代表不允許，yes代表允許講解“媒體查詢”在上一節(jié)中，我們使用視口來告訴瀏覽器，網頁要怎樣渲染在移動端設備上。這里有一個問題，移動端設備有各種各樣不同的尺寸，而且不同移動端的設備下，在css文件中，1px所表示的物理像素的大小是不同的，因此通過一套樣式，無法實現(xiàn)各端的自適應。考慮到用戶在任何設備上的體驗，那么能不