版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
一、教案頭授課標題項目1制作HBuilder百科頁面
子項目一網(wǎng)頁基礎知識
子項目二HTML5概述學時2地點授課班級課次第1次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠創(chuàng)建HTML5頁面了解HTML5發(fā)展史；熟悉HTML5瀏覽器支持情況教學重點創(chuàng)建HTML5頁面教學難點HTML5瀏覽器支持情況能力訓練任務及案例項目1制作HBuilder百科頁面
子項目一網(wǎng)頁基礎知識教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE3PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解HTML5發(fā)展歷程、HTML5優(yōu)勢、HTML5瀏覽器支持情況、創(chuàng)建第一個HTML5頁面）本課時內(nèi)容學習提問什么是HTML5？為什么要學習HTML5語言呢？知識點講解講解“HTML5發(fā)展歷程”（1）教師展示PPT對“HTML語言”的概念及發(fā)展歷史進行簡單介紹。（2）教師展示PPT對HTML從2.0版到3.2版、4.0版，再到1999年的4.01版的各個版本的區(qū)別與聯(lián)系。（3）教師展示PPT對HTML5出現(xiàn)的原因及背景進行介紹。（4）教師展示PPT對HTML5的出現(xiàn)與發(fā)展進行講解，并分析其優(yōu)缺點。（5）學生自主提問，教師對疑難問題進行解答。講解“HTML5優(yōu)勢”（1）教師展示PPT指出HTML5增加了很多新功能和新特性。（2）教師展示PPT，針對HTML5的“解決了跨瀏覽器問題、新增了多個新特性、用戶優(yōu)先的原則、化繁為簡的優(yōu)勢”優(yōu)勢分別進行講解，并聯(lián)系實際舉例說明。（3）學生自主提問，教師對疑難問題進行解答。講解“HTML5瀏覽器支持情況”（1）教師通過PPT展示一些常見瀏覽器，并進行匯總。（2）教師展示PPT分別講解IE瀏覽器、火狐瀏覽器、Google瀏覽器、Safari瀏覽器、Opera瀏覽器對HTML5語言新功能和新特性的瀏覽器支持情況。（3）教師分別對Web標準的“結(jié)構(gòu)標準”、“表現(xiàn)標準”及“行為標準”進行詳細講解，并分別舉例說明。（4）教師分析這些瀏覽器紛紛朝著HTML5的方向邁進，指出HTML5的時代即將來臨。（5）、學生自主提問，教師對疑難問題進行解答。講解“創(chuàng)建第一個HTML5頁面”階段小結(jié)重點：創(chuàng)建第一個HTML5頁面。教師詢問學生對于知識點還有什么不理解的地方。針對學生不理解的知識點給與解釋。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生了解HTML5發(fā)展歷程、HTML5優(yōu)勢、HTML5瀏覽器支持情況，并能夠使用HBuilder創(chuàng)建一個HTML5頁面。一、教案頭授課標題項目1制作HBuilder百科頁面
子項目三HBuilder軟件的使用
子項目四文本控制元素學時2地點授課班級課次第2次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠熟練運用文本控制標記理解HTML5基本語法掌握文本控制標記教學重點文本控制標記教學難點HTML5基本語法能力訓練任務及案例項目1制作HBuilder百科頁面
子項目三HBuilder軟件的使用
子項目四文本控制元素教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE4PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解HTML5文檔基本格式、HTML5語法、HTML標記及屬性、HTML5文檔頭部相關標記）復習上節(jié)課內(nèi)容提問目前，對HTML5新特性支持最好的瀏覽器是?本課時內(nèi)容學習學習任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求一樣。HTML5標記語言也不例外，同樣需要遵從一定的規(guī)范。請大家討論下：使用HBuilder新建HTML5默認文檔時，HTML5文檔的基本格式包括哪些標記？知識點講解講解“HTML5文檔基本格式”（1）教師通過Dreamweaver工具新建默認文檔，并指出默認文檔中會自帶一些源代碼。<!doctypehtml><html><head><metacharset="utf-8"><title>無標題文檔</title></head><body></body></html>（2）教師分析自帶的源代碼，講解HTML5文檔的基本格式及構(gòu)成標記。（3）教師讓學生自行嘗試，理解<!DOCTYPE>文檔類型聲明、<html>根標記、<head>頭部標記、<body>主體標記的語義及用法。（4）學生練習，教師巡視，對疑難問題進行解答。講解“HTML5語法”（1）教師展示PPT對“HTML5語法”進行簡單介紹。（2）教師展示PPT，對“HTML5語法”規(guī)則進行分析，并與之前的各種版本進行對比分析。（3）教師針對HTML5語法中的“標簽不區(qū)分大小寫、允許屬性值不使用引號、允許部分屬性值的屬性省略”通過代碼演示，并舉例說明。（4）學生自主提問，教師對疑難問題進行解答。講解“HTML標記”（1）教師展示PPT對“單標記與雙標記”、“注釋標記”的概念進行講解，并指出“單標記與雙標記”的不同。（2）教師舉例說明常見的單標記、雙標記以及注釋標記。（3）教師通過代碼對“單標記與雙標記”、“注釋標記”的使用方法進行演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“標記的屬性”（1）教師和學生互動：在網(wǎng)頁制作時，如果大家想要控制標記的樣式，比如：希望標題文本的字體為“微軟雅黑”且居中顯示，或者段落文本中的某些名詞顏色突出顯示等問題。此時僅僅依靠HTML標記的默認顯示樣式已經(jīng)不能滿足需求了，需要使用“HTML標記的屬性”進行控制。（2）教師展示PPT對“標記的屬性”進行講解，并使用代碼進行實時演示。（3）學生練習，教師巡視，對疑難問題進行解答。講解“HTML5文檔頭部相關標記”（1）教師展示PPT對“HTML文檔頭部相關標記”進行講解。（2）教師分別對<title>標記、<meta/>標記、<link>標記及<style>標記的基本語法格式進行講解，并進行代碼演示。（3）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：HTML5語法、HTML5標記、標記的屬性。（講解標題和段落標記、文本格式化標記、特殊字符標記）本課時內(nèi)容學習知識點講解講解“標題和段落標記”（1）教師展示PPT對“標題標記”、“段落標記”的概念及基本語法格式進行講解。（2）教師對“標題標記”、“段落標記”的顯示效果通過代碼進行演示。（3）教師分別對“標題標記”及“段落標記”的align屬性進行講解并通過代碼進行演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“文本格式化標記”（1）教師和學生互動：使用“HTML標記的屬性”可以設置文本的對齊方式、顏色等，那么，如果想要為文字設置粗體、斜體或下劃線效果需要怎么辦呢？下面，我們來學習“文本格式化標記”。（2）教師展示PPT對“文本格式化標記”進行講解，并使用代碼進行實時演示。（3）學生練習，教師巡視，對疑難問題進行解答。講解“特殊字符標記”（1）教師和學生互動：瀏覽網(wǎng)頁時常常會看到一些包含特殊字符的文本，如數(shù)學公式、版權信息等。那么如何在網(wǎng)頁上顯示這些包含特殊字符的文本呢？下面，我們來學習特殊字符標記。（2）教師展示PPT對“常用特殊字符標記”進行講解，分析“字符標記”的構(gòu)成，并使用代碼進行實時演示。（3）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：段落標記、文本格式化標記。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生掌握段落標記、文本格式化標記、特殊字符標記的使用。一、教案頭授課標題項目1制作HBuilder百科頁面
子項目五圖像元素
子項目六超鏈接元素學時2地點授課班級課次第3次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠熟練運用圖像及超鏈接標記掌握圖像標記、超鏈接標記教學重點圖像及超鏈接標記教學難點圖像及超鏈接標記能力訓練任務及案例項目1制作HBuilder百科頁面
子項目五圖像元素
子項目六超鏈接元素教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE4PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解常用圖像格式、圖像標記<img/>、絕對路徑和相對路徑）復習上節(jié)課內(nèi)容提問1、在上節(jié)課中，我們學習了文本格式化標記。那么，在文本格式化標記中，如何將文字設置為粗體呢？本課時內(nèi)容學習在網(wǎng)站中，我們可以看到絢麗多彩的圖片。那么，目前網(wǎng)頁上常用的圖像格式有哪些呢，請結(jié)合它們的優(yōu)缺點進行說明？知識點講解講解“常用圖像格式”（1）教師帶領學生查看網(wǎng)頁中的圖像，總結(jié)網(wǎng)頁中常用的圖像格式。（2）教師展示PPT對GIF、JPG和PNG三種常用的圖像格式進行講解，比較三種格式的異同，并指出其優(yōu)缺點。（3）學生提問，教師對疑難問題進行解答。講解“圖像標記<img/>”（1）教師和學生互動：在網(wǎng)頁中隨處可見各種各樣的圖像，比如：廣告圖、推廣圖、輪播圖等。大家在網(wǎng)頁中都見過哪些圖片呢？然后，教師使用PPT展示網(wǎng)頁中各式各樣的圖片效果。（2）教師展示PPT對“圖像標記”及其屬性進行講解，并使用代碼進行實時演示。（3）學生練習，教師巡視，對疑難問題進行解答。講解“絕對路徑和相對路徑”（1）教師通過文件夾的層級關系對“路徑”進行講解，并指出網(wǎng)頁中的路徑通常分為“相對路徑與絕對路徑”兩種。（2）教師展示PPT對“絕對路徑”進行講解，并舉例說明。（3）教師展示PPT對“相對路徑”進行講解，并通過“圖像文件和html文件”的不同位置進行演示。（4）學生提問，教師對疑難問題進行解答。階段小結(jié)小結(jié)重點：圖像標記。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握圖像標記<img/>的使用，并能夠區(qū)分圖像的相對路徑與絕對路徑的不同。本課時內(nèi)容學習當我們打開一個網(wǎng)站時，例如遼寧生態(tài)工程職業(yè)學院官網(wǎng)“/”，通過點擊頁面中的導航或者帶有鏈接地址的文字就可以跳轉(zhuǎn)到不同的頁面，那么如何實現(xiàn)網(wǎng)站中的頁面跳轉(zhuǎn)呢？知識點講解講解“創(chuàng)建超鏈接”（1）教師和學生互動：教師打開360導航網(wǎng)址/，點擊頁面中的導航文字，就可以跳轉(zhuǎn)到相應的頁面，這就是通過給文字創(chuàng)建超鏈接來實現(xiàn)的。教師組織學生討論：如何通過超鏈接實現(xiàn)頁面中的跳轉(zhuǎn)呢？（2）教師針對超鏈接的作用以及基本語法格式進行講解，并進行演示說明。（3）教師展示PPT對“創(chuàng)建超鏈接”進行講解，并使用代碼進行實時演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“錨點鏈接”（1）教師和學生互動：如果網(wǎng)頁內(nèi)容較多，頁面過長，瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容，這樣效率較低且不方便。那么如何提高信息的檢索速度呢？HTML5語言提供了一種特殊的鏈接——錨點鏈接，用戶能夠快速定位到目標內(nèi)容。（2）教師針對“錨點鏈接”的作用及創(chuàng)建方法進行講解，并進行演示說明。（3）教師對“創(chuàng)建超鏈接”與“錨點鏈接”進行對比分析，并總結(jié)其注意事項。（4）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：創(chuàng)建超鏈接、錨點鏈接。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握創(chuàng)建超鏈接、錨點鏈接的方法，并能夠通過創(chuàng)建超鏈接、錨點鏈接來實現(xiàn)頁面間的跳轉(zhuǎn)。PAGE5一、教案頭授課標題項目1制作HBuilder百科頁面
子項目七列表元素
子項目八結(jié)構(gòu)元素學時2地點授課班級課次第4次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠熟練運用列表元素掌握列表元素、結(jié)構(gòu)元素的使用教學重點列表元素、結(jié)構(gòu)元素的使用教學難點列表元素、結(jié)構(gòu)元素的使用能力訓練任務及案例項目1制作HBuilder百科頁面
子項目七列表元素
子項目八結(jié)構(gòu)元素教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE5PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程第一課時（講解ul元素、ol元素、dl元素、列表的嵌套應用）復習上節(jié)課內(nèi)容提問1、在上一章中，我們學習了HTML5的相關標記及其屬性。在HTML標記中，主要分為單標記和雙標記兩種。那么，什么是“單標記”呢？2、瀏覽網(wǎng)頁時，我們經(jīng)常閱讀很多的段落文字。在網(wǎng)頁制作時，同樣需要使用段落標記搭建頁面結(jié)構(gòu)，那么如何設置段落標記<p>的對齊屬性呢？本課時內(nèi)容學習為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，例如，淘寶商城首頁的商品服務分類、排列有序，呈現(xiàn)為列表的形式。其實，在HTML5中，提供了3種常用的列表，分別為無序列表、有序列表和定義列表。那么，請舉例說明什么是“無序列表”和“有序列表”？它們之間有什么區(qū)別？教師對上述問題進行解釋：無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因為其各個列表項之間為并列關系，沒有順序級別之分。例如傳智播客官網(wǎng)的導航欄結(jié)構(gòu)清晰，各列表項之間（如“網(wǎng)頁平面”與“java培訓”）排序不分先后，這個導航欄就可以看做一個無序列表。有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列，例如網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。無序列表使用<ul></ul>標記定義，<li></li>為具體的列表項。有序列表使用<ol></ol>標記定義，<li></li>為具體的列表項。知識點講解講解“ul元素”（1）教師展示PPT對“無序列表”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）教師展示PPT，對“無序列表的基本語法格式”及常用屬性值進行講解，并進行代碼演示。（3）教師指出定義“無序列表”時需要注意的問題，并給與解答。（4）學生練習，教師巡視，對疑難問題進行解答。講解“ol元素”（1）教師展示PPT對“有序列表”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）教師展示PPT，對“有序列表的基本語法格式”及常用屬性值進行講解，并進行代碼演示。（3）教師對比“無序列表”與“有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。（4）教師指出定義“有序列表”時需要注意的問題，并給與解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“dl元素”（1）教師展示PPT對“定義列表”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）教師展示PPT，對“定義列表的基本語法格式”及常用屬性值進行講解，并進行代碼演示。（3）教師對比“定義列表”與“無序列表和有序列表”的顯示效果，分析其區(qū)別與聯(lián)系。（4）教師指出定義“定義列表”時需要注意的問題，并給與解答。（5）學生練習，教師巡視，對疑難問題進行解答。講解“列表的嵌套應用”（1）教師和學生互動：在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到某一類商品被分為若干小類，這些小類通常還包含若干的子類，同樣，在使用列表時，列表項中也有可能包含若干子列表項，例如“淘寶網(wǎng)”中的導航欄效果。要想在列表項中定義子列表項就需要將列表進行嵌套，下面，將對列表的嵌套進行講解。（2）教師通過PPT對“列表嵌套”在網(wǎng)頁中的常見效果進行展示。（3）教師對“列表嵌套”進行講解并通過代碼進行演示。（4）教師指出“列表嵌套”時需要注意的問題，并給予解答。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：ul元素、ol元素、dl元素、列表的嵌套應用。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生了解無序列表、有序列表、定義列表的不同，并能熟練地應用ul元素、ol元素、dl元素搭建列表結(jié)構(gòu)以及列表的嵌套應用。本課時內(nèi)容學習瀏覽網(wǎng)站時，我們經(jīng)常需要通過點擊導航欄目下的鏈接來查找相應的內(nèi)容，那么如何使用HTML5語言中的相關標記創(chuàng)建網(wǎng)頁中的導航欄目呢？知識點講解講解“header元素”（1）教師展示PPT對“header元素”的概念及基本語法格式進行講解。（2）教師對“header元素”的顯示效果及應用范圍通過代碼進行演示。（3）教師對“header元素”的注意事項進行講解，并使用代碼進行實時演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“nav元素”（1）教師和學生互動：打開傳智播客的官網(wǎng)/，可以看到首頁面中的導航欄，包括首頁、Java培訓、PHP培訓、網(wǎng)頁平面培訓等多個版塊。在HTML5中，通常通過nav元素內(nèi)部嵌套無序列表ul來搭建導航結(jié)構(gòu)。一個HTML頁面中可以包含多個nav元素，下面，我們來學習“nav元素”。（2）教師展示PPT對“nav元素”的適用范圍進行總結(jié)，包括傳統(tǒng)導航條、側(cè)邊欄導航、頁內(nèi)導航、翻頁操作等。（3）教師針對“nav元素”進行講解，并使用代碼進行實時演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“article元素”（1）教師和學生互動：瀏覽網(wǎng)頁時常常會看到一些新聞頁面，包含一篇日志、一條新聞或用戶評論等。那么如何使用HTML5標簽搭建頁面中的這些獨立的頁面版塊呢？下面，我們來學習article元素。（2）教師展示PPT對“article元素”的概念及基本語法格式進行講解。（3）教師通過PPT對“article元素”的顯示效果及應用范圍進行展示。（4）教師針對“article元素”進行講解，并使用代碼進行實時演示。（5）學生練習，教師巡視，對疑難問題進行解答。講解“aside元素”（1）教師和學生互動：在瀏覽器地址欄中輸入網(wǎng)址“/”打開“京東商城”的頁面?？梢钥吹巾撁嬷饕譃樽笥覂刹糠?，左邊的側(cè)邊欄，就是通過HTML5中的aside元素定義的。下面，我們來學習aside元素。（2）教師展示PPT對“aside元素”的概念及應用范圍進行講解。（3）教師通過PPT對“article元素”在網(wǎng)頁中的顯示效果進行展示。指出aside元素用來定義內(nèi)容相關的引用、側(cè)邊欄、廣告、導航條。（4）教師針對“article元素”進行講解，并使用代碼進行實時演示。（5）學生練習，教師巡視，對疑難問題進行解答。講解“section元素”（1）教師和學生互動：在網(wǎng)頁中隨處可見各種各樣的頁面版塊或欄目，比如：新聞版塊、內(nèi)容板塊、廣告版塊等。大家在網(wǎng)頁中都見過哪些頁面版塊或欄目呢？下面，我們來學習section元素。（2）教師展示PPT對“section元素”的概念及應用范圍進行講解。（3）教師針對“section元素”進行講解，并使用代碼進行實時演示（4）教師對比“section元素”與“article元素”的區(qū)別與聯(lián)系，分析其用法的異同。（5）學生練習，教師巡視，對疑難問題進行解答。講解“footer元素”（1）頁面底部包含一個底部版塊。在HTML5中，通常通過footer元素來定義。下面，我們來學習“footer元素”。（2）教師展示PPT對“footer元素”的概念及應用范圍進行講解。（3）教師對“footer元素”在網(wǎng)頁中的顯示效果進行展示。（4）教師針對“footer元素”進行講解，并使用代碼進行實時演示。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：nav元素、article元素、section元素。鞏固練習鞏固本課時知識點學完知識點后，讓學生使用結(jié)構(gòu)元素搭建一個按照模塊分區(qū)的頁面，以此使學生更熟練地掌握header元素、nav元素、article元素、aside元素、section元素、footer元素的使用。一、教案頭授課標題項目1制作HBuilder百科頁面
子項目九分組元素
子項目十內(nèi)容交互元素學時2地點授課班級課次第5次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠建立簡單的標題組能夠?qū)崿F(xiàn)簡單的交互效果理解分組元素的使用掌握頁面交互元素的使用理解文本層次語義元素掌握全局屬性的應用教學重點建立簡單的標題組全局屬性的應用教學難點全局屬性的應用能力訓練任務及案例項目1制作HBuilder百科頁面
子項目九分組元素
子項目十內(nèi)容交互元素教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE5PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內(nèi)容提問上節(jié)課中我們學習了header元素、nav元素、article元素、aside元素、section元素以及footer元素，請對比分析它們的用法與區(qū)別？本課時內(nèi)容學習HTML5中新增了很多元素，其中，details和summary元素是其中重要的一個元素。那么，如何理解details和summary元素呢？知識點講解講解“figure和figcaption元素”（1）教師展示PPT對“figure和figcaption元素”的概念及應用范圍進行講解，指出figure元素用于定義獨立的流內(nèi)容，figcaption元素用于為figure元素組添加標題。（2）教師對“figure和figcaption元素”在網(wǎng)頁中的顯示效果進行展示。（3）教師對“figure和figcaption元素”進行講解，并使用代碼進行實時演示。（4）學生練習，教師巡視，對疑難問題進行解答。講解“hgroup元素”（1）教師展示PPT對“hgroup元素”的概念及應用范圍進行講解，指出hgroup元素用于將多個標題（主標題和副標題或者子標題）組成一個標題組，通常它與h1~h6元素組合使用。（2）教師針對“hgroup元素”進行講解，并使用代碼進行實時演示。（3）教師分析說明使用“hgroup元素”需要注意的事項，并進行總結(jié)。（4）學生練習，教師巡視，對疑難問題進行解答。講解“details和summary元素”（1）教師展示PPT對“details和summary元素”的概念及應用范圍進行講解，指出details元素用于描述文檔或文檔某個部分的細節(jié)，summary元素為details定義標題。（2）教師對“details和summary元素”在網(wǎng)頁中的顯示效果進行展示。（3）教師對“details和summary元素”進行講解，并使用代碼進行實時演示。（4）教師分析說明使用“details和summary元素”需要注意的事項，并進行總結(jié)。（5）學生練習，教師巡視，對疑難問題進行解答。講解“progress元素”（1）教師和學生互動：在日常工作中，我們經(jīng)常需要統(tǒng)計某項工作完成的進度，那么在網(wǎng)頁中使用HTML5標記統(tǒng)計某項工作完成的進度呢？HTML5語言提供了一個progress元素，下面將對progress元素進行講解。（2）教師展示PPT對“progress元素”的概念及應用范圍進行講解，指出progress元素用于定義一個正在完成的進度條。（3）教師對“progress元素”進行講解，并使用代碼進行實時演示。（4）教師針對“progress元素”的常用屬性進行講解，并進行代碼演示。（5）學生練習，教師巡視，對疑難問題進行解答。講解“meter元素”（1）教師展示PPT對“meter元素”的概念及應用范圍進行講解，指出meter元素用于表示指定范圍內(nèi)的數(shù)值。（2）教師對“meter元素”進行講解，并使用代碼進行實時演示。（3）教師針對“meter元素”的常用屬性進行講解，并進行代碼演示。（4）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：figure和figcaption元素、details和summary元素、progress元素。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生了解分組元素、頁面交互元素，并能熟練地使用figure和figcaption元素、hgroup元素、details和summary元素、progress元素、meter元素搭建網(wǎng)頁。本課時內(nèi)容學習在HTML5中，為了使HTML頁面中的文本內(nèi)容更加形象生動，需要使用一些特殊的元素來突出文本之間的層次關系，這樣的元素被稱為層次語義元素。其中，time元素是一個重要的層次語義元素。那么，如何理解time元素及其屬性呢？知識點講解講解“time元素”（1）教師和學生互動：瀏覽新聞頁面時，我們經(jīng)?？梢钥吹胶芏鄮в袝r間和日期的新聞事件？有時候，這些時間我們需要記錄下來，將生日提醒或其他事件添加到日程表中以提醒我們以后的生活或工作。為此，HTML5語言提供了一個time元素，下面將對time元素進行講解。（2）教師展示PPT對“time元素”的概念及應用范圍進行講解，指出time元素用于定義時間或日期。（3）教師對“time元素”在網(wǎng)頁中的顯示效果進行展示。（4）教師對“time元素”及其常用屬性進行講解，并使用代碼進行演示。（5）學生練習，教師巡視，對疑難問題進行解答。講解“mark元素”（1）教師和學生互動：我們知道，使用em和strong標記可以將某些文本加粗顯示？但是，有時候我們需要讓某些文本中高亮顯示，以引起用戶注意。HTML5語言提供了一個mark元素，下面將對mark元素進行講解。（2）教師展示PPT對“mark元素”的概念及應用范圍進行講解，指出mark元素的主要功能是在文本中高亮顯示某些字符。（3）教師對“mark元素”在網(wǎng)頁中的顯示效果進行展示。（4）教師針對“mark元素”進行講解，并使用代碼進行實時演示。（5）教師分析說明“mark元素”與“em和strong元素”的顯示效果，并分析其異同。（6）學生練習，教師巡視，對疑難問題進行解答。講解“cite元素”（1）教師和學生互動：在編輯一本書或者編寫一篇論文時，需要編寫文檔參考文獻的引用說明，并且通常將標記的文檔內(nèi)容以斜體展示在頁面中。在HTML5標記中，提供了一個cite元素，用于對參考文獻的引用說明。下面將對cite元素進行講解。（2）教師展示PPT對“cite元素”的概念及應用范圍進行講解。（3）教師對“cite元素”進行講解，并使用代碼進行實時演示。（4）教師分析說明使用“cite元素”需要注意的事項，并進行總結(jié)。（5）學生練習，教師巡視，對疑難問題進行解答。講解“draggable屬性”（1）教師展示PPT對“draggable屬性”的概念進行講解，指出draggable屬性用來定義元素是否可以拖動。（2）教師對“draggable屬性”進行講解，并使用代碼進行實時演示。（3）教師針對“draggable屬性”的常用屬性進行講解，并舉例說明。（4）學生練習，教師巡視，對疑難問題進行解答。講解“hidden屬性”（1）教師展示PPT對“hidden屬性”的概念及應用范圍進行講解。（2）教師對“hidden屬性”進行講解，并使用代碼進行實時演示。（3）教師對“hidden屬性”的常用屬性進行講解，并舉例說明。（4）教師對“hidden屬性”的注意事項進行說明，并分析總結(jié)。（5）學生練習，教師巡視，對疑難問題進行解答。講解“spellcheck屬性”（1）教師和學生互動：當我們登陸某個網(wǎng)站時，經(jīng)常需要注冊個人信息。填寫信息時，如果不對輸入的內(nèi)容進行檢查，用戶很容易在輸入框中填寫不符合要求或拼寫錯誤的內(nèi)容，給用戶帶來很大的麻煩。在HTML5中，spellcheck屬性主要針對于input元素和textarea文本輸入框，對用戶輸入的文本內(nèi)容進行拼寫和語法檢查。下面將對spellcheck屬性進行講解。（2）教師展示PPT對“spellcheck屬性”的概念進行講解，指出spellcheck屬性針對input元素和textarea文本輸入框，對用戶輸入的文本內(nèi)容進行拼寫和語法檢查。（3）教師對“spellcheck屬性”進行講解，并使用代碼進行實時演示。（4）教師對“spellcheck屬性”的常用屬性進行講解，并舉例說明。（5）學生練習，教師巡視，對疑難問題進行解答。講解“contenteditable屬性”（1）教師展示PPT對“contenteditable屬性”的概念講解，指出contenteditable屬性規(guī)定是否可編輯元素的內(nèi)容。（2）教師對“contenteditable屬性”進行講解，并使用代碼進行實時演示。（3）教師對“contenteditable屬性”的常用屬性進行講解，并舉例說明。（4）教師對“contenteditable屬性”的注意事項進行說明，并分析總結(jié)。（5）學生練習，教師巡視，對疑難問題進行解答。說明：在網(wǎng)頁制作時可適時停下來，讓學生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：time元素、mark元素、hidden屬性、spellcheck屬性。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生了解文本層次語義元素、全局屬性，能夠熟練地使用time元素、mark元素、cite元素控制頁面，并使用draggable屬性、hidden屬性、spellcheck屬性、contenteditable屬性控制頁面元素的顯示效果。一、教案頭授課標題子項目十一綜合項目——制作HBuilder百科頁面學時2地點授課班級課次第6次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠制作簡單的網(wǎng)頁掌握HTML5標記教學重點HTML5標記教學難點HTML5標記能力訓練任務及案例子項目十一綜合項目——制作HBuilder百科頁面教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)作業(yè)一HTML階段案例參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE3PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內(nèi)容對新課進行講解前，先讓學生分組討論以下問題：1、在上節(jié)課中，我們學習了如何給頁面中的元素創(chuàng)建超鏈接。通過頁面中的超鏈接地址，點擊文字或圖片，可以使頁面跳轉(zhuǎn)到別的頁面。超鏈接在網(wǎng)頁中占有不可替代的地位，那么，超標記<a>都有哪些屬性呢？本課時內(nèi)容學習案例講解案例描述本章前幾節(jié)重點講解了HTML5語法及標記、文本控制標記以及圖像標記等。為了使讀者能夠更好地認識HTML5，本節(jié)將通過案例的形式分步驟地制作一個HTML5百科頁面案例分析分析“HTML5百科頁面”的構(gòu)成元素，將其拆解為幾個部分，分析各部分使用了哪些HTML5標記及應用了哪些HTML5標記的屬性。案例實現(xiàn)教師帶領學生分步驟地進行網(wǎng)頁制作，通過分析效果圖、制作頁面、制作頁面鏈接等步驟完成頁面的制作，并指出其中需要注意的事項。階段小結(jié)小結(jié)重點：制作HTML5百科頁面。鞏固練習鞏固本課時知識點學完知識點后，讓學生再制作一次“HTML5百科頁面”。以此使學生更熟練地掌握“HTML5語法、文本控制標記、圖像標記”等知識點，并能夠通過創(chuàng)建超鏈接、錨點鏈接來實現(xiàn)頁面間的跳轉(zhuǎn)。（作品點評）教師對學生的提交的上機測試作品進行點評，指出代碼中容易出現(xiàn)bug的地方，并給與解答。一、教案頭授課標題項目2制作化妝品展示列表頁面
子項目一初識CSS3
子項目二引入CSS樣式與CSS語法格式學時2地點授課班級課次第7次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠運用CSS選擇器選擇頁面元素能夠運用相應的屬性定義文本樣式能夠區(qū)分復合選擇器權重的大小掌握CSS3語法格式教學重點能夠熟練運用CSS語法教學難點CSS優(yōu)先級能力訓練任務及案例項目2制作化妝品展示列表頁面
子項目一初識CSS3
子項目二引入CSS樣式與CSS語法格式教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE4PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內(nèi)容提問通過上一章的學習，我們知道：HTML5文檔的基本格式中，有一個重要的標記——<!DOCTYPE>標記。請簡要描述什么HTML5中的“<!DOCTYPE>聲明”及其用法？本課時內(nèi)容學習在網(wǎng)頁設計中，運用CSS3技術能夠讓原有的網(wǎng)站變得趣味盎然，很多站點都為自己的頁面添加了各種炫酷的CSS3效果。但是CSS3技術是怎樣發(fā)展起來的？哪些瀏覽器能夠很好的兼容CSS3呢？知識點講解講解“CSS概述”（1）教師展示PPT對“CSS概念及作用”進行講解，并打開網(wǎng)頁進行效果展示。（2）教師講解CSS在HTML5中的書寫位置，并使用代碼進行演示。（3）教師展示PPT，對初學者在書寫CSS樣式時需要注意的問題進行講解。（4）教師讓學生自行嘗試，理解“CSS樣式規(guī)則”的語法，并能靈活運用。（5）學生練習，教師巡視，對疑難問題進行解答。講解“CSS3發(fā)展歷史”（1）教師展示PPT對“CSS3發(fā)展歷史”進行說明，并對比各個版本間的區(qū)別與聯(lián)系。（2）教師展示PPT對“CSS3發(fā)展歷史”進行講解并通過代碼進行演示。（3）、學生自主提問，教師對疑難問題進行解答。講解“CSS3瀏覽器支持情況”（1）教師和學生互動：瀏覽器是網(wǎng)頁運行的平臺，目前常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的瀏覽器都完全支持CSS3。（2）教師分別對各個瀏覽器對CSS3的支持情況進行分析，并總結(jié)出谷歌（Chrome）瀏覽器對CSS3的支持最好。（3）教師指出由于各瀏覽器廠商對CSS3各屬性的支持程度不一樣，因此在標準尚未明確的情況下，會用廠商的前綴加以區(qū)分，各主流瀏覽器都定義了自己的私有屬性。（4）教師對各個瀏覽器的私有屬性進行講解，并通過代碼進行演示。（5）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：CSS3瀏覽器支持情況。易錯點：注意區(qū)分各個瀏覽器在CSS3中的私有前綴。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地了解“CSS概述、CSS3發(fā)展歷史、CSS3瀏覽器支持情況”等知識點。本課時內(nèi)容學習如果把一個網(wǎng)頁看成一個人的話，HTML5就相當于人的骨架，是結(jié)構(gòu)；CSS相當于人的衣服，是表現(xiàn)。那么如何使用CSS去修飾頁面呢？其實，給網(wǎng)頁應用樣式首先需要使用CSS中的選擇器。那么，CSS基礎選擇器主要有哪些？又有哪些不同呢？知識點講解講解“CSS樣式規(guī)則”（1）教師展示PPT對“CSS樣式規(guī)則”的具體格式進行講解，并使用代碼進行演示。（2）教師展示PPT，對初學者在書寫CSS樣式時需要注意的問題進行講解。（3）教師讓學生自行嘗試，理解“CSS樣式規(guī)則”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“引入CSS樣式表”（1）教師展示PPT對“HTML文檔中引入CSS樣式表”進行說明，并指出“引入CSS樣式表”的三種方式。（2）教師分別對“行內(nèi)式”、“內(nèi)嵌式”及“鏈入式”引入CSS樣式表進行講解并通過代碼進行演示。（3）教師指出“行內(nèi)式”、“內(nèi)嵌式”及“鏈入式”的基礎語法格式及其優(yōu)缺點。（4）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：CSS樣式規(guī)則、引入CSS樣式表。易錯點：注意區(qū)分標記選擇器、類選擇器、id選擇器及通配符選擇器。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握“CSS樣式規(guī)則、引入CSS樣式表、CSS基礎選擇器”等知識點。PAGE4一、教案頭授課標題項目2制作化妝品展示列表頁面
子項目三CSS基礎選擇器學時2地點授課班級課次第8次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠運用CSS選擇器選擇頁面元素能夠運用相應的屬性定義文本樣式了解CSS3發(fā)展歷史掌握CSS基礎選擇器教學重點CSS基礎選擇器CSS文本樣式屬性教學難點CSS優(yōu)先級能力訓練任務及案例項目2制作化妝品展示列表頁面
子項目三CSS基礎選擇器教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE3PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程復習上節(jié)課內(nèi)容提問瀏覽網(wǎng)頁的時候，我們可以看見很多炫麗的CSS3效果，CSS3給我們帶來了眾多全新的視覺感受和用戶體驗，但是并不是所有的瀏覽器都完全支持它，所以使用CSS3時需要添加私有前綴。那么，常見的瀏覽器內(nèi)核類型和私有前綴都有哪些呢？本課時內(nèi)容學習如果把一個網(wǎng)頁看成一個人的話，HTML5就相當于人的骨架，是結(jié)構(gòu)；CSS相當于人的衣服，是表現(xiàn)。那么如何使用CSS去修飾頁面呢？其實，給網(wǎng)頁應用樣式首先需要使用CSS中的選擇器。那么，CSS基礎選擇器主要有哪些？又有哪些不同呢？知識點講解講解“CSS基礎選擇器”（1）教師展示PPT對“CSS選擇器”的概念及用法進行講解。（2）教師分別對“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”的基本語法格式進行詳細講解并通過代碼進行演示。（3）教師對比“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”的使用方法及應用效果，并指出其優(yōu)缺點。（4）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：CSS基礎選擇器。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握“CSS樣式規(guī)則、引入CSS樣式表、CSS基礎選擇器”等知識點。PAGE5一、教案頭授課標題項目2制作化妝品展示列表頁面
子項目四偽元素選擇器
子項目五鏈接偽類
子項目六結(jié)構(gòu)化偽類選擇器（一）學時2地點授課班級課次第9次課授課時間年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)第次課年月日第節(jié)教學目標能力（技能）目標知識目標能夠熟練運用偽元素選擇器、鏈接偽類、結(jié)構(gòu)化偽類選擇器掌握常用的結(jié)構(gòu)化偽類選擇器掌握偽元素選擇器的使用掌握CSS偽類教學重點為相同名稱的元素定義不同樣式教學難點為相同名稱的元素定義不同樣式能力訓練任務及案例項目2制作化妝品展示列表頁面
子項目四偽元素選擇器
子項目五鏈接偽類
子項目六結(jié)構(gòu)化偽類選擇器（一）教學組織采用分組教學：在教師提問時，分組討論預期成果學生能完成課上指定任務，掌握教學內(nèi)容教學材料《響應式Web開發(fā)教程》作業(yè)參考資料《響應式Web開發(fā)教程》課后小結(jié)PAGE5PAGE1二、教案正頁設計要點：1、分教學準備、教學實施兩大部分設計；2、統(tǒng)籌教學內(nèi)容、教學實施過程、方法手段、重難點解決策略、師生活動、時間分配等要素；3、以“科學設計、詳盡規(guī)劃、教無定法、保障效果”為總尺度。附注第一部分：教學準備一、教學條件：場地：帶有多媒體設備并可上網(wǎng)的計算機實驗室機器配置：P4處理器，Win7操作系統(tǒng)，HBuilder軟件二、教師條件配備一名專職教師，幫助學生完成資料的查找和搜集、指導學生完成學習任務，完成對學生的評價；給學生做操作演示，糾正學生在操作過程中不正確的操作。三、學生特點分析該班學生聰明好學，比較喜歡開放、自由的學習環(huán)境，但是學生學習的自信心不強，不善于獨立思考和探索問題.根據(jù)學生特點,通過激發(fā)學生學習興趣,提倡學習獨立思考,帶問題學習,努力培養(yǎng)學生自制能力,堅定他們的學習毅力和自信心,實現(xiàn)本節(jié)課的重點能力目標和素質(zhì)目標。四、教學方式教學采用教師課堂講授為主，使用教學PPT講解。五、重難點解決策略措施：通過上機操作加強學習和補充案例進行鞏固。六、課前準備1、告知提前1天老師給學生布置本次課的教學任務，學生以小組為單位，預習課程內(nèi)容。2、學生分組將學生在教學中分成學習小組，強化學生的團結(jié)合作意識，在每項個項目結(jié)束時，分組講解各組所設計的作品，讓每個同學都得到充分的訓練。第二部分：教學過程（講解:root選擇器、:not選擇器、:only-child
選擇器、:first-child和:last-child選擇器、:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器、:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器、:\o"CSS:nth-child(n)選擇器"empty選擇器、:target選擇器）復習上節(jié)課內(nèi)容提問通過對上節(jié)課的學習，我們知道“關系選擇器”是CSS3新增選擇器中的一種，且“關系選擇器”分為兩類：兄弟選擇器、子代選擇器。那么，這兩種選擇器的書寫格式是什么呢？本課時內(nèi)容學習知識點講解講解“:root選擇器”（1）教師展示PPT對“:root選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:root選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:root選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:not選擇器”（1）教師展示PPT對“:not選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:not選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:not選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:only-child
選擇器”（1）教師展示PPT對“:only-child
選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:only-child
選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:only-child
選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:first-child和:last-child選擇器”（1）教師展示PPT對“:first-child和:last-child選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:first-child和:last-child選擇器”的用法進行講解并通過代碼進行演示。（可選用如下代碼）<ul> <li>網(wǎng)頁平面</li> <li>PHP</li> <li>JAVA</li> <li>iOS</li></ul>添加CSS樣式，代碼如下：li:first-child{color:red;}li:last-child{color:blue;}（3）教師讓學生自行嘗試，理解“:first-child和:last-child選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器”（1）教師展示PPT對“:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器”的用法進行講解并通過代碼進行演示。修改CSS樣式如下：li:nth-child(2){color:red;}li:nth-last-child(2){color:blue;}（3）教師讓學生自行嘗試，理解“:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器”（1）教師展示PPT對“:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器”的用法進行講解并通過代碼進行演示。（3）教師講解區(qū)分“:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器”與“:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器”這兩種選擇器的區(qū)別。（4）教師讓學生自行嘗試，理解“:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器”的語法，并能靈活運用。（5）學生練習，教師巡視，對疑難問題進行解答。講解“:\o"CSS:nth-child(n)選擇器"empty選擇器”（1）教師展示PPT對“:\o"CSS:nth-child(n)選擇器"empty選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:\o"CSS:nth-child(n)選擇器"empty選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:\o"CSS:nth-child(n)選擇器"empty選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。講解“:target選擇器”（1）教師展示PPT對“:target選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:target選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:target選擇器”的語法，并能靈活運用。（4）學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)小結(jié)重點：:first-child和:last-child選擇器、:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器。易錯點：注意區(qū)分:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器與:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器。鞏固練習鞏固本課時知識點學完知識點后，教師帶領學生對本課時所學知識點進行回顧。以此使學生更熟練地掌握“:root選擇器、:not選擇器、:only-child
選擇器、:first-child和:last-child選擇器、:\o"CSS:nth-child(n)選擇器"nth-child(n)和:nth-last-child(n)選擇器、:\o"CSS:nth-of-type(n)選擇器"nth-of-type(n)和:nth-last-of-type(n)選擇器、:\o"CSS:nth-child(n)選擇器"empty選擇器、:target選擇器”等知識點。（講解:\o"CSS:before選擇器"before選擇器、:\o"CSS:before選擇器"after選擇器、鏈接偽類）本課時內(nèi)容學習知識點講解講解“:\o"CSS:before選擇器"before選擇器”（1）教師展示PPT對“:\o"CSS:before選擇器"before選擇器”的概念及書寫格式進行講解。（2）教師展示PPT對“:\o"CSS:before選擇器"before選擇器”的用法進行講解并通過代碼進行演示。（3）教師讓學生自行嘗試，理解“:\o"CSS:before選擇器"before選擇器”的語法，并
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度保險產(chǎn)品貨款合同退款與理賠服務協(xié)議3篇
- 2025年度沙石料加工與智慧城市建設合同3篇
- 2025版設備租賃合同標的及租賃條件和服務內(nèi)容3篇
- 個人商鋪租賃合同2025版：租賃協(xié)議模板下載19篇
- 二零二五年度化工原料購銷合同模板3篇
- 2024版商用采購單價協(xié)議范例版B版
- 2025版直播主持人肖像權合同：主持人肖像使用的授權協(xié)議
- 二零二五年低溫儲存凍庫租賃合同含冷鏈物流保險及賠償條款3篇
- 二零二五年度公路工程施工設備租賃合同3篇
- 學校消防安全整治講話稿（9篇）
- 道路運輸企業(yè)安全生產(chǎn)管理人員安全考核試題題庫與答案
- 年終抖音運營述職報告
- 車間修繕合同模板
- 腦梗死患者的護理常規(guī)
- 2024年7月國家開放大學法律事務?？啤斗勺稍兣c調(diào)解》期末紙質(zhì)考試試題及答案
- 護士條例解讀
- 醫(yī)務人員崗前培訓課件
- SQE年終總結(jié)報告
- 檢修工（題庫）附答案
- 2025屆高考語文一輪復習：小說情節(jié)結(jié)構(gòu)之伏筆 練習題（含答案）
- 《化學實驗室安全》課程教學大綱
評論
0/150
提交評論