《網(wǎng)頁設(shè)計與制作》授課教案-參考_第1頁
《網(wǎng)頁設(shè)計與制作》授課教案-參考_第2頁
《網(wǎng)頁設(shè)計與制作》授課教案-參考_第3頁
《網(wǎng)頁設(shè)計與制作》授課教案-參考_第4頁
《網(wǎng)頁設(shè)計與制作》授課教案-參考_第5頁
已閱讀5頁，還剩57頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

教案

2018～2019學年第1學期課程名稱：網(wǎng)頁設(shè)計與制作課程類別：必修課所屬部門：主講教師：職稱：授課班級：1使用教材：

教務處制二○18年9月使用說明（打印在封面反頁）理論、實驗、理實一體、實訓和實習課程的教案模版一致。新入職我校的教師（副高職稱以上、曾講授過本課程的教師除外）在擔任教學工作的前兩年、其他教師上新課的第一輪，教案須手寫。除此以外，教案可手寫，可為電子文檔。理論、實驗、理實一體課程的節(jié)次以2節(jié)為單位進行填寫；實習、實訓課程的節(jié)次根據(jù)教學內(nèi)容選取，一般為2～4節(jié)，最大節(jié)次單元不超過6節(jié)。每一輪課程教案，要體現(xiàn)出內(nèi)容的更新。教案須以紙質(zhì)形式帶入課堂。教案章節(jié)或項目名稱課程介紹、初識HTML5本次授課類型□理論實驗□理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J2-3061二1-2符合□超前□滯后□符合□超前□滯后□符合□超前□滯后□符合□超前□滯后教學目標全面了解本課程的地位、教學目標、教學內(nèi)容激發(fā)學習興趣，鼓勵學生深入本課程與相關(guān)課程的學習了解HTML5發(fā)展歷程、HTML5優(yōu)勢、HTML5瀏覽器支持情況、創(chuàng)建第一個HTML5頁面，回去安裝網(wǎng)頁制作的基本環(huán)境教學重點課程的地位、教學目標、教學內(nèi)容介紹、激發(fā)學習興趣教學難點學習興趣、安裝DreamweaverCC版本、HBuilder、Notepad++等之一的開發(fā)工具教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配課程介紹教師自我介紹，創(chuàng)建班級QQ交流群，公布交流方式本課程的地位、教學目標、教學內(nèi)容暑期生活，討論？講授法師生交互20分鐘崗位查找上智聯(lián)招聘、51JOB等網(wǎng)站搜索相關(guān)的崗位學生自己描述崗位需求討論法20分鐘明確目標就業(yè)：技能培養(yǎng)是專業(yè)核心課程的目標，同時要培養(yǎng)學生的學習能力與素質(zhì)講授法師生交互10分鐘知識講授掌握網(wǎng)頁設(shè)計的流程；了解HTML5的發(fā)展歷史與優(yōu)勢；掌握HTML5的編碼方式。講授法30分鐘課程小結(jié)再次激發(fā)學習興趣，明確學習目標總結(jié)課程教學內(nèi)容作業(yè)，課后安裝或HBuilder網(wǎng)頁設(shè)計工具講授法10分鐘教學效果及改進思路教案一、教師自我介紹與課程介紹教師姓名：劉萬輝，創(chuàng)建班級QQ群，或者加入班級QQ群了解學生，認識學生，了解學生的分布，將來的就業(yè)意向《HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)》課程是軟件技術(shù)、計算機維護技術(shù)、計算機應用技術(shù)等專業(yè)的專業(yè)基礎(chǔ)課程。本課程主要培養(yǎng)學生的靜態(tài)頁面設(shè)計能力，該課程綜合HTML語言、CSS樣式兩項技術(shù)，通過“教、學、做”理論與實踐一體化教學，使學生掌握Web客戶端靜態(tài)頁面編寫的基本方法，并逐步形成正確的客戶端靜態(tài)頁面設(shè)計思想，能夠熟練地使用HTML語言、CSS樣式設(shè)計進行頁面設(shè)計，為Web開發(fā)后續(xù)課程打下基礎(chǔ)。本課程的先導課程有計算機技術(shù)基礎(chǔ)、程序設(shè)計基礎(chǔ)、計算機網(wǎng)絡技術(shù)、操作系統(tǒng)等，后續(xù)課程有C#程序設(shè)計、基礎(chǔ)及應用、JSPweb項目開發(fā)、綜合項目化實訓等?？己朔绞骄C合素質(zhì)評價20%+過程性考核20%+終結(jié)性考核40%。暑假大家都干了什么？討論二、崗位查找上智聯(lián)招聘、51JOB等網(wǎng)站搜索相關(guān)的崗位，學生自己描述崗位需求例如：68design網(wǎng)站崗位/job/?p=2PHP工程師：待遇8000左右項目實施人員項目售后商品營銷等平面設(shè)計師-網(wǎng)頁設(shè)計-軟件界面設(shè)計等：待遇3000-15000左右三、明確目標依據(jù)自身的優(yōu)勢確定奮斗目標：愿景——努力奮斗1年，幸福生活一輩子！HTML5還能火多久？人為什么工作？工作能給我們帶來什么？活著（生存所需、責任-自己與家人、境界-成就感、滿足感，實現(xiàn)自我價值）四、知識講授HTML5發(fā)展歷程、HTML5優(yōu)勢、HTML5瀏覽器支持情況、創(chuàng)建第一個HTML5頁面掌握網(wǎng)頁設(shè)計的流程；掌握HTML5的編碼方式。/v5189664-172510-838747.html五、課堂小結(jié)課程主線：制定目標，了解網(wǎng)頁環(huán)境基本配置的使用，最后綜合項目?？偨Y(jié)課程教學內(nèi)容，明確學習目標，再次激發(fā)學習興趣。章節(jié)或項目名稱任務2、體驗HTML5的頁面特征本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2101三5-6符合□超前□滯后□符合□超前□滯后教學目標了解HTML5的基本文檔格式掌握HTML5文件的編寫工具掌握HTML的基本文檔設(shè)置掌握使用HTML5編寫簡單的Web頁面體驗HTML5的頁面特征教學重點HTML5的基本語法、基本標記HTML5文件的編寫工具教學難點HTML5的頁面特征教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識講授HTML5的基本文檔格式、HTML5的基本語法、基本標記、屬性講授法10分鐘學生實踐學生創(chuàng)建一個新頁面進行體驗基本文檔格式、HTML5的基本語法、基本標記、屬性演示教學10分鐘學生實踐編碼體驗HTML+CSS的編碼方式實驗教學40分鐘學生實踐編碼體驗使用HTML5中HTML+CSS的編碼方式講授法20分鐘課程小結(jié)HTML5基本標簽與文本控制標記、圖像標記，體驗編碼工具的使用講授法10分鐘教學效果及改進思路一、知識講授與學生實踐1通過DW或者HBuilder工具創(chuàng)建一個HTML5文件。體驗HTML5的基本格式認識<!doctype><html><head><body>基本標簽<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>教育門戶</title></head><body></body></html>2認識HTML5的基本語法規(guī)則3認識HTML單標簽、雙標簽、注釋標簽的使用、認識屬性的使用4認識head標簽的使用二、知識講授與學生實踐HTML5的基本語法、基本標記、屬性HTML5的基本結(jié)構(gòu)與編碼方式三、知識講授與學生實踐講解<img標簽的基本使用方法與屬性規(guī)則四、學生實踐編碼體驗HTML+CSS的編碼方式編碼體驗HMTL5中HTML+CSS的編碼方式五、課堂小結(jié)HTML5基本標簽與文本控制標記、圖像標記、超鏈接標記的使用，要多記錄，多實踐。章節(jié)或項目名稱任務3、文字與段落標簽的使用本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2042二1-2符合□超前□滯后□符合□超前□滯后教學目標了解HTML5的基本文檔格式掌握HTML5的基本語法、基本標記、屬性掌握HTML的head標記的使用方法掌握HTML的文本控制標簽的使用方法掌握HTML的圖像控制標簽的使用方法教學重點基本語法、基本標記、屬性HTML的head標記的使用方法HTML的文本控、圖像標簽的使用方法教學難點HTML的文本控制標簽的使用方法HTML的圖像控制標簽的使用方法教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識講授HTML5的基本文檔格式、HTML5的基本語法、基本標記、屬性講授法10分鐘學生實踐學生創(chuàng)建一個新頁面進行體驗基本文檔格式、HTML5的基本語法、基本標記、屬性演示教學10分鐘知識講授文本控制標簽的使用方法標題、段落、換行、水平線文本的格式化標簽b、i、strong、s、u等實驗教學20分鐘學生實踐創(chuàng)建一個新頁面進行體驗基本文檔標簽的使用講授法30分鐘知識講授圖像標簽的基本使用方法實驗教學10分鐘課程小結(jié)HTML5基本標簽與文本控制標記、圖像標記的使用，要多記錄，多實踐講授法10分鐘教學效果及改進思路一、知識講授與學生實踐1．HTML5的基本文檔格式1.文檔類型聲明<!DOCTYPEhtml>2.內(nèi)容類型HTML5的文件擴展名仍為.html和.htm，內(nèi)容類型仍為text/html。3.字符編碼在HTML5中，使用<meta>元素直接追加charset屬性的方式來指定字符編碼，代碼如下：<metacharset="UTF-8"/>4.不區(qū)分英文字母的大小寫HTML5不區(qū)分英文字母的大小寫，如果要兼顧XHTML的兼容性，建議采用小寫英文字母。5.代碼的注釋HTML5代碼注釋采用<!--...-->標簽，例如。<!--這是一段注釋。注釋不會在瀏覽器中顯示。--><p>這是一段普通的段落。</p>6.可以省略標簽的元素在HTML5中，元素的標簽可以省略。具體包括3種類型：第一、不允許寫結(jié)束標簽的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track和wbr。第二、可以省略結(jié)束標簽的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td和th。第三、開始與結(jié)束標簽都可以省略的元素有：html、head、body、colgroup和tbody。7.可以省略引號屬性值兩邊既可以使用雙引號，也可以使用單引號，還可以省略引號。例如下面的三行代碼都是合法的。8.具有布爾值的屬性對于具有boolean值的屬性，如disabled與readonly等，當只寫屬性而不指定屬性值時，表示屬性值為true；如果想要將屬性值設(shè)置為false，可以不使用該屬性。另外，要想將屬性值設(shè)定為true，也可以將屬性名設(shè)置為屬性值，或?qū)⒖兆址O(shè)定為屬性值。例如：2．掌握HTML5的基本語法、基本標記、屬性3．HTML的head標記的使用方法二、知識講授與學生實踐文本的格式化標簽b、i、strong、s、u等文本控制標簽的使用方法標題<hn>、段落<p>、換行<br>、水平線<hr>三、知識講授與學生實踐講解<img標簽的基本使用方法與屬性規(guī)則四、課堂小結(jié)HTML5基本標簽與文本控制標記、圖像標記、超鏈接標記的使用，要多記錄，多實踐。章節(jié)或項目名稱任務4：HTML頁面元素及列表元素本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2042三5-6符合□超前□滯后□符合□超前□滯后教學目標綜合運用HTML5的基本語法、基本標記、屬性。綜合應用圖像控制標簽、超級鏈接控制標簽完成圖文的簡單混排。綜合應用超級鏈接、表格與列表的使用的簡單混排。教學重點HTML5的基本語法、基本標記、屬性HTML的超級鏈接、表格與列表的使用的綜合使用教學難點HTML的超級鏈接、表格與列表的使用教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧HTML5的相關(guān)標記及其屬性、單標記和雙標記、文本、圖像講授法5分鐘知識講授學生實踐HTML5的超級鏈接的使用方法演示教學30分鐘知識講授學生實踐HTML5的表格的使用方法實驗教學20分鐘知識講授學生實踐概述無序列表、有序列表和定義列表。講解“ul元素”講解“ol元素”知識講解“dl元素實驗教學30分鐘課程小結(jié)超級鏈接、表格與列表的使用的簡單混排講授法5分鐘教學效果及改進思路一、知識回顧HTML5的相關(guān)標記及其屬性、單標記和雙標記、文本、圖像、超級鏈接等二、知識講解與實踐超級鏈接（1）、超級鏈接標簽的創(chuàng)建。（2）、認識絕對路徑和相對路徑。（3）、錨點路徑。（4）、影像地圖的使用。三、知識講解與實踐表格（1）、表格的定義。（2）、表格的屬性應用（3）、表格的行與列的合并。四、知識講解“ul元素”“ol元素”“dl元素”（1）、教師展示PPT對“列表”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）、教師展示PPT，對“列表的基本語法格式”及常用屬性值進行講解，并進行代碼演示。（3）、教師指出定義“列表”時需要注意的問題，并給與解答。（4）、學生練習，教師巡視，對疑難問題進行解答。列表的綜合案例：（1）、教師和學生互動：在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到某一類商品被分為若干小類，這些小類通常還包含若干的子類，同樣，在使用列表時，列表項中也有可能包含若干子列表項，例如“淘寶網(wǎng)”中的導航欄效果。要想在列表項中定義子列表項就需要將列表進行嵌套，下面，將對列表的嵌套進行講解。（2）、教師通過PPT對“列表嵌套”在網(wǎng)頁中的常見效果進行展示。（3）、教師對“列表嵌套”進行講解并通過代碼進行演示。（4）、教師指出“列表嵌套”時需要注意的問題，并給予解答。（5）、學生練習，教師巡視，對疑難問題進行解答。五、階段小結(jié)小結(jié)重點：超級鏈接、表格與列表的使用的簡單混排。答疑教師詢問學生對于知識點還有什么不理解的地方。針對學生不理解的知識點給解釋。章節(jié)或項目名稱任務5、基礎(chǔ)標簽案例與任務本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2103二1-2符合□超前□滯后□符合□超前□滯后教學目標綜合應用HTML的文本與段落標簽的設(shè)置綜合應用圖片與超級鏈接標簽的設(shè)置綜合應用表格與列表標簽的設(shè)置教學重點綜合應用HTML的文本與段落標簽、圖片與超級鏈接標簽、表格與列表教學難點恰當?shù)氖褂脴撕灥氖褂脠龊辖虒W設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧頁面交互標簽與文本層次標簽的使用方法等回顧解了HTML5頁面元素及其相關(guān)屬性的使用案例描述講授法10分鐘知識講授案例分析演示教學10分鐘知識講授案例實現(xiàn)實驗教學65分鐘課程小結(jié)階段小結(jié)應用HTML的文本與段落標簽、圖片與超級鏈接標簽、表格與列表標簽的合理應用講授法5分鐘教學效果及改進思路一、知識回顧1合理使用HTML段落與文本標簽。2合理使用HTML圖片與超級鏈接標簽。3合理使用HTML表格與列表標簽。二、案例描述與實施綜合所學的基本HTML標簽，依據(jù)書法家莊輝的個人介紹頁面的布局示意圖，如圖所示來完成網(wǎng)頁頁面的效果。三、課堂小結(jié)應用HTML的文本與段落標簽、圖片與超級鏈接標簽、表格與列表標簽的合理應用。章節(jié)或項目名稱任務6：HTML5結(jié)構(gòu)性與分組標簽本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2103三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握結(jié)構(gòu)元素header元素、nav元素、article元素、aside元素、section元素、footer元素的使用。掌握figure和figcaption元素、hgroup元素的使用。教學重點合理使用header元素、nav元素、article元素、aside元素、section元素、footer元素的使用合理使用figure和figcaption元素元素教學難點header元素、nav元素、article元素、aside元素、section元素、footer元素的使用教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧有序列表、無序列表、定義列表、嵌套列表等。講授法5分鐘知識講授知識講解“header元素”、“nav元素”學練一體20分鐘知識講授知識講解“article元素”“aside元素”學練一體20分鐘知識講授知識講解“section元素”“footer元素”學練一體20分鐘知識講授知識講解figure和figcaption元素、hgroup元素學練一體20分鐘課程小結(jié)總結(jié)如何能合理使用結(jié)構(gòu)元素、分組元素。講授法5分鐘教學效果及改進思路一、知識回顧有序列表、無序列表、定義列表、嵌套列表等。二、知識講解“header元素”“nav元素”（1）、教師展示PPT對“header元素”的概念及基本語法格式進行講解。（2）、教師對“header元素”的顯示效果及應用范圍通過代碼進行演示。（3）、教師對“header元素”的注意事項進行講解，并使用代碼進行實時演示。同樣講解nav元素（4）、學生練習，教師巡視，對疑難問題進行解答。三、知識講解“article元素”“aside元素”（1）、教師展示PPT對“article元素”的概念及基本語法格式進行講解。（2）、教師對“article元素”的顯示效果及應用范圍通過代碼進行演示。（3）、教師對“article元素”的注意事項進行講解，并使用代碼進行實時演示。同樣講解aside元素（4）、學生練習，教師巡視，對疑難問題進行解答。四、知識講解“section元素”“footer元素”（1）、教師展示PPT對“section元素”的概念及基本語法格式進行講解。（2）、教師對“section元素”的顯示效果及應用范圍通過代碼進行演示。（3）、教師對“section元素”的注意事項進行講解，并使用代碼進行實時演示。同樣講解footer元素（4）、學生練習，教師巡視，對疑難問題進行解答。五、講解figure和figcaption元素、hgroup元素（1）、教師展示PPT對“figure和figcaption元素”的概念及基本語法格式進行講解。（2）、教師對“figure和figcaption元素”的顯示效果及應用范圍通過代碼進行演示。（3）、教師對“figure和figcaption元素”的注意事項進行講解，并使用代碼進行實時演示。同樣講解hgroup元素（基本被HTML5放棄了）（4）、學生練習，教師巡視，對疑難問題進行解答。六、階段小結(jié)header元素。header元素是一種具有引導和導航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁面頭部的內(nèi)容。header元素通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，也可以包含網(wǎng)站Logo圖、搜索表單或者其他相關(guān)內(nèi)容。nav元素。nav元素用于定義導航鏈接，該元素可以將具有導航性質(zhì)的鏈接歸納在一個區(qū)域中，使頁面元素的語義更加明確。其中的導航元素可以鏈接到站點的其他頁面，或者當前頁的其他部分。article元素。article元素代表文檔、頁面或者應用程序中與上下文不相關(guān)的獨立部分，該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。article元素通常使用多個section元素進行劃分，一個頁面中article元素可以出現(xiàn)多次。aside元素。aside元素用來定義當前頁面或者文章的附屬信息部分，它可以包含與當前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導航條等其他類似的有別于主要內(nèi)容的部分。section元素。section元素用于對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊，一個section元素通常由內(nèi)容和標題組成。footer元素。footer元素用于定義一個頁面或者區(qū)域的底部，它可以包含所有通常放在頁面底部的內(nèi)容。章節(jié)或項目名稱任務7：頁面交互、行內(nèi)語義標簽與全局屬性本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20242中午符合□超前□滯后□符合□超前□滯后教學目標能運用details和summary元素、progress元素、meter元素。能運用time元素、mark元素、cite元素。教學重點details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素教學難點details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素使用場景教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧結(jié)構(gòu)標簽與分組標簽的使用方法等講授法5分鐘知識講授知識講解details和summary元素演示教學10分鐘知識講授知識講解“progress元素”“meter元素”實驗教學10分鐘知識講授知識講解time元素、mark元素、cite元素實驗教學30分鐘知識講授知識講授“draggable屬性”、“draggable屬性”、“spellcheck屬性”、“contenteditable屬性”實驗教學30分鐘課程小結(jié)頁面交互元素、文本層次語義元素的使用場景與使用技巧講授法5分鐘教學效果及改進思路一、知識回顧結(jié)構(gòu)標簽與分組標簽的使用方法等。二、知識講解“details和summary元素”（1）、教師展示PPT對“details和summary元素”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）、教師展示PPT，對“details和summary元素”及常用屬性值進行講解，并進行代碼演示。（3）、教師指出定義“details和summary元素”時需要注意的問題，并給與解答。（4）、學生練習，教師巡視，對疑難問題進行解答。三、知識講解“progress元素”“meter元素”（1）、教師展示PPT對“progress元素”“meter元素”的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）、教師展示PPT，對“progress元素”“meter元素”及常用屬性值進行講解，并進行代碼演示。（3）、教師指出定義“progress元素”“meter元素”時需要注意的問題，并給與解答。（4）、學生練習，教師巡視，對疑難問題進行解答。四、知識講解time元素、mark元素、cite元素（1）、教師展示PPT分別對time元素、mark元素、cite元素的概念進行講解，并列舉網(wǎng)頁中常見的例子進行說明。（2）、教師展示PPT，分別對time元素、mark元素、cite元素及常用屬性值進行講解，并進行代碼演示。（3）、教師指出定義time元素、mark元素、cite元素時需要注意的問題，并給與解答。（4）、學生練習，教師巡視，對疑難問題進行解答。五、知識講解“draggable屬性”、“draggable屬性”、“spellcheck屬性”、“contenteditable屬性”教師展示PPT分別對“draggable屬性”、“draggable屬性”、“spellcheck屬性”、“contenteditable屬性”的概念進行講解，指出draggable屬性用來定義元素是否可以拖動。六、階段小結(jié)總結(jié)details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素的使用場景與使用方法?？偨Y(jié)，“draggable屬性”、“draggable屬性”、“spellcheck屬性”、“contenteditable屬性”章節(jié)或項目名稱任務8：HTML5的新標簽案例任務本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2104三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握如何使用結(jié)構(gòu)元素中的相關(guān)標記搭建一個網(wǎng)站的頁面結(jié)構(gòu)？根據(jù)HTML5新增的結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及常用的標準屬性等內(nèi)容。本節(jié)將結(jié)合前面所學知識點制作一個“電影影評網(wǎng)”。教學重點準確恰當?shù)倪x擇運用結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及常用的全局屬性搭建商業(yè)網(wǎng)站。教學難點準確恰當?shù)倪x擇運用結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及常用的標準屬性等內(nèi)容。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧頁面交互標簽與文本層次標簽的使用方法等回顧解了HTML5頁面元素及其相關(guān)屬性的使用案例描述講授法10分鐘知識講授案例分析演示教學10分鐘知識講授案例實現(xiàn)任務實現(xiàn)實驗教學65分鐘課程小結(jié)階段小結(jié)課外動手實踐，對“列表元素”、“結(jié)構(gòu)元素”、“分組元素”、“頁面交互元素”、“全局屬性”等知識點的掌握程度講授法5分鐘教學效果及改進思路教案一、知識回顧回顧HTML5頁面元素及其相關(guān)屬性的使用。header元素是一種具有引導和導航作用的結(jié)構(gòu)元素，該元素可以包含所有通常放在頁面頭部的內(nèi)容。nav元素用于定義導航鏈接。article元素通常使用多個section元素進行劃分。aside元素用來定義當前頁面或者文章的附屬信息部分，包括側(cè)邊欄、廣告、導航條等其他類似的有別于主要內(nèi)容的部分。section元素用于對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊，一個section元素通常由內(nèi)容和標題組成。footer元素用于定義一個頁面或者區(qū)域的底部。案例描述本章前面講解了HTML5新增的結(jié)構(gòu)元素、分組元素、頁面交互元素、文本層次語義元素以及常用的標準屬性等內(nèi)容。本節(jié)將結(jié)合前面所學知識點制作一個“門戶網(wǎng)站主頁”，默認效果如圖所示。案例分析綜合HTML5的基本語法、HTML5的結(jié)構(gòu)性標簽、級塊標簽、行內(nèi)語義性標簽，分析首頁的頁面結(jié)構(gòu)，在任務2的基礎(chǔ)之上，運用結(jié)構(gòu)性標簽完善門戶網(wǎng)站的HTML代碼。案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁制作，通過分析效果圖、制作頁面結(jié)構(gòu)等步驟完成頁面的制作，并指出其中需要注意的事項。說明：在網(wǎng)頁制作時可適時停下來，讓學生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對疑難問題進行解答。階段小結(jié)課外動手實踐，對“列表元素”、“結(jié)構(gòu)元素”、“分組元素”、“頁面交互元素”、“全局屬性”等知識點的掌握程度章節(jié)或項目名稱任務9：初識CSS3與CSS的使用本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2046二1-2符合□超前□滯后□符合□超前□滯后教學目標了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。掌握CSS基礎(chǔ)選擇器，能夠運用CSS選擇器定義標記樣式。教學重點CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。教學難點準確恰當?shù)倪x擇與運用CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧Html5的元素結(jié)構(gòu)與框架講授法5分鐘知識講授學生練習CSS的作用及其位置CSS的發(fā)展歷史，96CSS1，985CSS2、04CSS3CSS3中瀏覽器的支持情況，測試演示教學學做一體25分鐘知識講授學生練習CSS樣式規(guī)則、樣式表的引用演示教學學做一體15知識講授學生練習CSS樣式規(guī)則、樣式表的引用標記選擇器、類選擇器、id選擇器、通配符選擇器、演示教學學做一體40課程小結(jié)階段小結(jié)：CSS的作用、發(fā)展歷史、CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。講授法5分鐘教學效果及改進思路教案一、知識回顧回顧HTML5頁面元素及其相關(guān)屬性的使用。二、知識講授：“CSS概述”“CSS3發(fā)展歷史”“CSS3瀏覽器支持情況”講解“CSS概述”教師展示PPT對“CSS概念及作用”進行講解，并打開網(wǎng)頁進行效果展示。教師講解CSS在HTML5中的書寫位置，并使用代碼進行演示。教師展示PPT，對初學者在書寫CSS樣式時需要注意的問題進行講解。（結(jié)構(gòu)樣式分離）教師讓學生自行嘗試，理解“CSS樣式規(guī)則”的語法，并能靈活運用?！癈SS3發(fā)展歷史”教師展示PPT對“CSS3發(fā)展歷史”進行說明，并對比各個版本間的區(qū)別與聯(lián)系?！癈SS3瀏覽器支持情況”常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的瀏覽器都完全支持CSS3。谷歌（Chrome）瀏覽器對CSS3的支持最好。各瀏覽器廠商對CSS3各屬性的支持程度不一樣，因此在標準尚未明確的情況下，會用廠商的前綴加以區(qū)分，各主流瀏覽器都定義了自己的私有屬性。內(nèi)核類型相關(guān)瀏覽器私有前綴TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o舉例展示：例如，參照表3-1測試，也包括很多動畫功能等。三、知識講授：“CSS樣式規(guī)則”“引入CSS樣式表”教師展示PPT對“CSS樣式規(guī)則”的具體格式進行講解，并使用代碼進行演示。教師展示PPT，對初學者在書寫CSS樣式時需要注意的問題進行講解。教師讓學生自行嘗試，理解“CSS樣式規(guī)則”的語法，并能靈活運用。教師展示PPT對“引入CSS樣式表”的具體格式進行講解，并使用代碼進行演示。教師展示PPT，對初學者在引入CSS樣式表時需要注意的問題進行講解。教師讓學生自行嘗試，理解引入CSS樣式表的語法，并能靈活運用。四、知識講授：“CSS基礎(chǔ)選擇器”（1）、教師展示PPT對“CSS選擇器”的概念及用法進行講解。（2）、教師分別對“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”等的基本語法格式進行詳細講解并通過代碼進行演示。（3）、教師對比“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”等的使用方法及應用效果，并指出其優(yōu)缺點。（4）、學生練習，教師巡視，對疑難問題進行解答。五、階段小結(jié)：階段小結(jié)：CSS的作用、發(fā)展歷史、CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。章節(jié)或項目名稱任務10：CSS常用選擇器本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2046三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握CSS常用選擇器，能夠運用CSS選擇器定義標記樣式。教學重點CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。教學難點準確恰當?shù)倪x擇與運用CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧Html5的元素結(jié)構(gòu)與框架CSS的作用及其位置CSS的發(fā)展歷史，96CSS1，985CSS2、04CSS3CSS3中瀏覽器的支持情況，測試講授法5分鐘知識講授學生練習CSS基礎(chǔ)選擇器（標記選擇器、類選擇器、id選擇器、通配符選擇器）。演示教學學做一體40分鐘知識講授學生練習CSS基礎(chǔ)選擇器（指定選擇器、后代選擇器、并集選擇器）。演示教學學做一體40分鐘課程小結(jié)階段小結(jié)：CSS的作用、發(fā)展歷史、CSS樣式規(guī)則、講授法5分鐘教學效果及改進思路一、知識回顧回顧HTML5頁面元素及其相關(guān)屬性的使用。二、知識講授：“CSS基礎(chǔ)選擇器”（標簽選擇器、類選擇器、id選擇器）（1）、教師展示PPT對“CSS選擇器”的概念及用法進行講解。（2）、教師分別對“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”等的基本語法格式進行詳細講解并通過代碼進行演示。（3）、教師對比“標記選擇器”、“類選擇器”、“id選擇器”及“通配符選擇器”等的使用方法及應用效果，并指出其優(yōu)缺點。（4）、學生練習，教師巡視，對疑難問題進行解答。三、知識講授：CSS基礎(chǔ)選擇器（指定選擇器、后代選擇器、并集選擇器）（1）、教師展示PPT對“E[att^=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att^=value]屬性選擇器”的用法進行講解并通過代碼進行演示。（2）、學生練習，教師巡視，對疑難問題進行解答。（3）、教師展示PPT對“E[att$=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att$=value]屬性選擇器”的用法進行講解并通過代碼進行演示。（4）、學生練習，教師巡視，對疑難問題進行解答。（5）、教師展示PPT對“E[att*=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att*=value]屬性選擇器”的用法進行講解并通過代碼進行演示。與前兩種屬性選擇器做對比區(qū)分。（6）、學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)：重點1：屬性選擇器的用法。易錯點：注意區(qū)分各個屬性選擇器的書寫方式及含義。重點2：“子代選擇器（>）”、“兄弟選擇器（+、~）”的使用易錯點：區(qū)分“臨近兄弟選擇器”和“普通兄弟選擇器”的用法。章節(jié)或項目名稱任務11：CSS3屬性與關(guān)系選擇器本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2047二1-2符合□超前□滯后□符合□超前□滯后教學目標掌握CSS基礎(chǔ)選擇器（指定、包含、群組選擇器）。掌握CSS3屬性選擇器的使用。掌握CSS3關(guān)系選擇器的使用。教學重點指定、包含、群組選擇器的使用、CSS3屬性選擇器、關(guān)系選擇器的使用。教學難點CSS3屬性選擇器、關(guān)系選擇器的使用。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧CSS樣式規(guī)則與基本；CSS樣式的使用方式，基礎(chǔ)選擇器講授法10分鐘知識講授學生練習CSS3屬性選擇器的使用演示教學學做一體25分鐘知識講授學生練習CSS3關(guān)系選擇器的使用演示教學學做一體45分鐘課程小結(jié)階段小結(jié)：CSS基礎(chǔ)選擇器（記指定選擇器、后代選擇器、并集選擇器）、CSS3屬性選擇器、關(guān)系選擇器的使用。講授法5分鐘教學效果及改進思路教案一、知識回顧回顧HTML5頁面元素及其相關(guān)屬性的使用。CSS基礎(chǔ)選擇器（指定選擇器、后代選擇器、并集選擇器）二、知識講解：“E[att^=value]屬性選擇器”“E[att$=value]屬性選擇器”“E[att*=value]屬性選擇器”（1）、教師展示PPT對“E[att^=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att^=value]屬性選擇器”的用法進行講解并通過代碼進行演示。（2）、學生練習，教師巡視，對疑難問題進行解答。（3）、教師展示PPT對“E[att$=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att$=value]屬性選擇器”的用法進行講解并通過代碼進行演示。（4）、學生練習，教師巡視，對疑難問題進行解答。（5）、教師展示PPT對“E[att*=value]屬性選擇器”的具體格式進行講解。教師展示PPT對“E[att*=value]屬性選擇器”的用法進行講解并通過代碼進行演示。與前兩種屬性選擇器做對比區(qū)分。（6）、學生練習，教師巡視，對疑難問題進行解答。三、知識講解：子代選擇器（>）、兄弟選擇器+：臨近兄弟選擇器、兄弟選擇器~：普通兄弟選擇器（1）、教師展示PPT對“子代選擇器（>）”的書寫格式進行講解。教師展示PPT對“子代選擇器（>）”的用法進行講解并通過代碼進行演示。（2）、學生練習，教師巡視，對疑難問題進行解答。（3）、教師展示PPT對“兄弟選擇器+”的書寫格式進行講解。教師展示PPT對“兄弟選擇器+”的用法進行講解并通過代碼進行演示。（4）、學生練習，教師巡視，對疑難問題進行解答。（5）、教師展示PPT對“兄弟選擇器~”的書寫格式進行講解。教師展示PPT對“兄弟選擇器~”的用法進行講解并通過代碼進行演示。區(qū)分“臨近兄弟選擇器”和“普通兄弟選擇器”的用法。（6）、學生練習，教師巡視，對疑難問題進行解答。四、階段小結(jié)：重點1：屬性選擇器的用法。易錯點：注意區(qū)分各個屬性選擇器的書寫方式及含義。重點2：“子代選擇器（>）”、“兄弟選擇器（+、~）”的使用易錯點：區(qū)分“臨近兄弟選擇器”和“普通兄弟選擇器”的用法。教案章節(jié)或項目名稱任務12：CSS3選擇器與樣式表的繼承與層疊本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2067三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器。掌握CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊教學重點CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。教學難點掌握CSS3偽元素選擇器、CSS的權(quán)值計算。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧CSS3的屬性、關(guān)系選擇器的使用講授法5分鐘知識講授學生練習CSS3鏈接偽類選擇器演示教學學做一體15分鐘知識講授學生練習CSS3結(jié)構(gòu)偽類選擇器演示教學學做一體20分鐘知識講授學生練習CSS3偽元素選擇器演示教學學做一體20分鐘知識講授學生練習UI元素狀態(tài)偽類選擇器演示教學學做一體10分鐘知識講授學生練習CSS的繼承與層疊演示教學學做一體15分鐘課程小結(jié)階段小結(jié)：CSS3選擇器與樣式表的繼承與層疊講授法5分鐘教學效果及改進思路教案一、知識回顧回顧CSS3的屬性、關(guān)系選擇器的使用。二、知識講授：CSS鏈接偽類選擇器教師展示鏈接偽類選擇器的使用進行講解，并打開網(wǎng)頁進行效果展示。教師讓學生自行嘗試，理解“指定選擇器”的定義方法，并能靈活運用。三、知識講解：CSS3結(jié)構(gòu)偽類選擇器1基礎(chǔ)結(jié)構(gòu):root選擇器、:not選擇器、:only-child

選擇器器（1）、教師展示PPT對:root選擇器、:not選擇器、:only-child

選擇器的使用方法的書寫格式進行講解。（2）、教師展示PPT對:root選擇器、:not選擇器、:only-child

選擇器的使用方法的用法進行講解并通過代碼進行演示。（3）、學生練習，教師巡視，對疑難問題進行解答。2子元素偽類選擇器: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)選擇器器（1）、教師展示PPT對: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)選擇器器的使用方法的書寫格式進行講解。（2）、教師展示PPT對: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)選擇器器的使用方法的用法進行講解并通過代碼進行演示。（3）、學生練習，教師巡視，對疑難問題進行解答。3:\o"CSS:nth-child(n)選擇器"empty選擇器、:target選擇器的使用方法（1）、教師展示PPT對:\o"CSS:nth-child(n)選擇器"empty選擇器、:target選擇器的書寫格式進行講解。（2）、教師展示PPT對:\o"CSS:nth-child(n)選擇器"empty選擇器、:target選擇器的用法進行講解并通過代碼進行演示。（3）、學生練習，教師巡視，對疑難問題進行解答。四、知識講解：CSS3偽元素選擇器教師展示PPT對“:\o"CSS:before選擇器"before選擇器”“:\o"CSS:before選擇器"after選擇器”的概念及書寫格式進行講解。學生練習，教師巡視，對疑難問題進行解答。五、知識講解：UI元素狀態(tài)偽類選擇器教師展示PPT對“UI元素狀態(tài)偽類”的概念及書寫格式進行講解。學生練習，教師巡視，對疑難問題進行解答。六、知識講解：CSS層疊與繼承1、CSS層疊性與繼承性教師展示PPT對“CSS層疊性與繼承性”的概念進行講解。2、講解“CSS優(yōu)先級”、權(quán)值的計算七、階段小結(jié)：CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。章節(jié)或項目名稱任務13：CSS應用的案例任務本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2028二中午符合□超前□滯后□符合□超前□滯后教學目標掌握如何使用CSS實現(xiàn)網(wǎng)站的門戶頁眉導航。掌握如何使用CSS3實現(xiàn)網(wǎng)站的門戶頁眉導航。教學重點使用CSS3的新選擇器構(gòu)建頁面導航效果。教學難點使用CSS3中的結(jié)構(gòu)化偽類的使用。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。講授法10分鐘知識講授案例分析演示教學10分鐘知識講授案例實現(xiàn)任務實現(xiàn)實驗教學65分鐘課程小結(jié)階段小結(jié)頁眉導航中CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。講授法5分鐘教學效果及改進思路教案一、知識回顧CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。二、案例描述本任務就是在任務3的基礎(chǔ)之上，編寫基本的CSS3樣式表，實現(xiàn)網(wǎng)站頭部的頁面效果，如圖所示。三、案例分析第一步：使用通配符編寫通用樣式，統(tǒng)一頁面中所有的文本樣式，統(tǒng)一頁面中的內(nèi)外邊距與邊框，統(tǒng)一樣式表的風格。第二步：根據(jù)需要可以在<header>標簽內(nèi)添加2個<div>標簽，第1個來放置整個導航信息，第2個來實現(xiàn)超級鏈接的頁面效果。第三步：設(shè)置nav區(qū)域中的超級鏈接的樣式。四、案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁CSS代碼的編寫與測試。五、階段小結(jié)CSS3鏈接偽類選擇器、結(jié)構(gòu)偽類選擇器、CSS3偽元素選擇器、UI元素狀態(tài)偽類選擇器。CSS的繼承與層疊。章節(jié)或項目名稱任務14：文本樣式與CSS高級特性本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-2068三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握CSS字體樣式掌握CSS字體外觀屬性教學重點CSS字體樣式教學難點CSS字體外觀屬性教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器講授法5分鐘知識講授學生練習CSS字體樣式演示教學學做一體40知識講授學生練習CSS字體外觀屬性演示教學學做一體40課程小結(jié)階段小結(jié)：CSS字體樣式、CSS字體外觀屬性、CSS3的層疊性和繼承性、CSS的優(yōu)先級講授法5分鐘教學效果及改進思路一、知識回顧CSS樣式規(guī)則、CSS樣式表的引入方式、CSS基礎(chǔ)選擇器二、知識講解：CSS字體樣式屬性（1）、教師和學生互動：瀏覽網(wǎng)頁的時候，我們經(jīng)?？吹揭恍┨厥獾淖煮w效果，比如：控制字體的字號、將字體進行加粗，或者設(shè)置字體傾斜等。為了更方便的控制網(wǎng)頁中各種各樣的字體，CSS提供了一系列的字體樣式屬性。（2）、教師展示PPT對“網(wǎng)頁中常見的字體效果”進行展示及說明。（3）、教師分別對“font-size、font-family、font-weight、font-variant、font-style及font綜合設(shè)置屬性”進行講解，并進行代碼演示。注意：font綜合屬性的使用font：font-stylefont-weightfont-size/line-heightfont-family順序-順序-順序-順序-順序?。。?）、拓展樣式：@font-face屬性word-wrap的使用（5）、學生練習，教師巡視，對疑難問題進行解答。三、知識講解：CSS文本外觀屬性（1）、教師和學生互動：使用CSS不僅可以設(shè)置一些特殊的字體效果，還可以設(shè)置一些段落文本的外觀顯示效果，比如：設(shè)置文本顏色、字間距、行間距、文本裝飾效果等。使用HTML只能進行簡單的控制，但是效果并不理想，為此CSS提供了一系列的文本外觀樣式屬性。（2）、教師展示PPT對“網(wǎng)頁中常見的文本外觀效果”進行展示及說明。（3）、教師分別對“color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space”等文本外觀屬性進行講解，并進行代碼演示。拓展：text-shadow陰影效果text-overflow標示對象內(nèi)溢出文本（4）、教師分別對使用CSS設(shè)置文本外觀時需要注意的問題進行說明。（5）、學生練習，教師巡視，對疑難問題進行解答。四、階段小結(jié)：CSS字體樣式、CSS字體外觀屬性、CSS3的層疊性和繼承性、CSS的優(yōu)先級章節(jié)或項目名稱任務15：CSS設(shè)置背景屬性及漸變屬性本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J12049二中午符合□超前□滯后□符合□超前□滯后教學目標掌握CSS中背景屬性及漸變屬性的相關(guān)設(shè)置教學重點設(shè)置背景復合屬性教學難點背景圖像的大小、顯示區(qū)域、裁剪區(qū)域、多重背景圖像、漸變屬性的設(shè)置教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧文字與字體的使用講授法5分鐘知識講授學生練習設(shè)置背景顏色、設(shè)置背景圖像、設(shè)置背景與圖片不透明度、設(shè)置背景圖像平鋪、設(shè)置背景圖像的位置、設(shè)置背景圖像固定。演示教學學做一體20分鐘知識講授學生練習設(shè)置背景圖像的大小、設(shè)置背景的顯示區(qū)域、設(shè)置背景圖像的裁剪區(qū)域、設(shè)置多重背景圖像。演示教學學做一體25分鐘知識講授學生練習背景的復合屬性的設(shè)置。演示教學學做一體10分鐘知識講授學生練習漸變屬性的設(shè)置。演示教學學做一體20分鐘課程小結(jié)階段小結(jié)：重點：背景復合屬性、背景圖像的大小、顯示區(qū)域、裁剪區(qū)域、多重背景圖像、漸變屬性的設(shè)置、漸變的設(shè)置。易錯點：瀏覽器的兼容處理。講授法5分鐘教學效果及改進思路一、知識回顧CSS中盒子模型的相關(guān)設(shè)置。二、知識講解：設(shè)置背景顏色、設(shè)置背景圖像、設(shè)置背景與圖片不透明度、設(shè)置背景圖像平鋪、設(shè)置背景圖像的位置、設(shè)置背景圖像固定（1）、教師展示PPT對“background-color屬性”的應用效果進行展示及說明。（2）、教師對使用“background-color屬性”的三種屬性值進行講解，并進行代碼演示。（3）、學生練習，教師巡視，對疑難問題進行解答。依次講解背景圖像、設(shè)置背景與圖片不透明度、設(shè)置背景圖像平鋪、設(shè)置背景圖像的位置、設(shè)置背景圖像固定等。三、知識講解：設(shè)置背景圖像的大小、設(shè)置背景的顯示區(qū)域、設(shè)置背景圖像的裁剪區(qū)域、設(shè)置多重背景圖像（1）、教師和學生互動：我們知道在CSS2及之前的版本，背景圖像的大小是不可以控制的。要想使背景圖像填充元素區(qū)域，只能預設(shè)較大的背景圖像或者讓背景圖像以平鋪的方式填充，操作起來繁瑣不方便。運用CSS3中的background-size屬性可以輕松解決這個問題。（2）、教師展示PPT對“background-size屬性”的應用效果進行展示。（3）、教師對“background-size屬性”的基本語法格式及不同的屬性值進行講解，并進行代碼演示。（4）、教師對使用“background-size屬性”時需要注意的問題進行說明。（5）、學生練習，教師巡視，對疑難問題進行解答。依次講解設(shè)置背景的顯示區(qū)域、設(shè)置背景圖像的裁剪區(qū)域、設(shè)置多重背景圖像等內(nèi)容。四、知識講解：背景的復合屬性的設(shè)置（1）、教師和學生互動：在CSS中，可以設(shè)置背景的顏色、圖像、平鋪、位置、固定等多種屬性，每個屬性都是設(shè)置背景單一的屬性，那么是否可以將這些屬性進行綜合，同時設(shè)置幾個背景屬性呢？下面，將對如何綜合設(shè)置元素的背景屬性進行講解。Background：background-colorbackground-iamgebackground-repeatbackground-attchmentbackground-positionbackground-sizebackground-clipbackground-origin;(注意順序)（2）、教師對使用“背景復合屬性”時需要注意的問題進行分析、說明。（3）、學生練習，教師巡視，對疑難問題進行解答。五、知識講解：線性漸變、徑向漸變、重復漸變（1）、教師展示PPT對“線性漸變”的概念及特點進行說明。（2）、教師對“線性漸變”的基本語法格式及常見參數(shù)進行講解，并使用代碼進行演示。（3）、教師分別對“漸變角度”、“顏色值”等概念進行講解，并舉例說明。用于標示顏色漸變的位置例如下面的示例代碼：background-image:linear-gradient(30deg,#0f050%,#00F80%);在上面的示例代碼中，可以看做綠色（#0f0）由50%的位置開始出現(xiàn)漸變至藍色（#00f）位于80%的位置結(jié)束漸變?？梢杂肞hotoshop中的漸變色塊進行類比，如下圖所示。（4）、教師對使用“線性漸變”時需要注意的問題進行分析、說明。學生練習，教師巡視，對疑難問題進行解答。依次講解徑向漸變與徑向漸變。階段小結(jié)：重點：背景復合屬性、背景圖像的大小、顯示區(qū)域、裁剪區(qū)域、多重背景圖像、漸變屬性的設(shè)置、漸變的設(shè)置。易錯點：瀏覽器的兼容處理。章節(jié)或項目名稱任務16：文字、背景與列表案例本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J12049三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握如何使用文字、背景、列表的樣式實現(xiàn)網(wǎng)站的門戶頁眉導航。掌握如何使用CSS3實現(xiàn)網(wǎng)站的商品導航。教學重點使用CSS3的新選擇器構(gòu)建頁面導航效果。教學難點使用CSS3中的背景與列表的使用。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧文字、背景、列表的樣式使用講授法10分鐘知識講授案例分析演示教學10分鐘知識講授案例實現(xiàn)任務實現(xiàn)實驗教學65分鐘課程小結(jié)階段小結(jié)文字、背景、列表的樣式使用。講授法5分鐘教學效果及改進思路一、知識回顧文字、背景、列表的樣式使用。二、案例描述本任務就是在任務4的基礎(chǔ)之上，通過本章對文本、背景、列表的學習，構(gòu)建網(wǎng)站<header>與<banner>區(qū)域區(qū)域的頁面效果。圖2電商產(chǎn)品分類列表展示效果三、案例分析第一步：編寫<header>與<banner>區(qū)域的HTML代碼。第二步：編寫<header>區(qū)域的漸變背景色。第二步：設(shè)置<banner>區(qū)域內(nèi)的多圖背景效果。四、案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁CSS代碼的編寫與測試。五、階段小結(jié)CSS3中對文字、背景、列表的樣式的綜合使用。拓展案例：通過本章學習的文本、背景以及列表的相關(guān)內(nèi)容，構(gòu)建一個電商網(wǎng)站的商品類別展示導航菜單，如圖2所示。章節(jié)或項目名稱任務17：文字、背景與列表任務本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20610二1-2符合□超前□滯后□符合□超前□滯后教學目標掌握如何使用文字、背景、列表的樣式實現(xiàn)網(wǎng)站的門戶頁眉導航。掌握如何使用CSS3實現(xiàn)網(wǎng)站的商品導航。教學重點使用CSS3的新選擇器構(gòu)建頁面導航效果。教學難點使用CSS3中的背景與列表的使用。教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧文字、背景、列表的樣式使用講授法10分鐘知識講授案例分析演示教學10分鐘知識講授案例實現(xiàn)任務實現(xiàn)實驗教學65分鐘課程小結(jié)階段小結(jié)文字、背景、列表的樣式使用。講授法5分鐘教學效果及改進思路一、知識回顧文字、背景、列表的樣式使用。二、案例描述本任務就是在任務4的基礎(chǔ)之上，通過本章對文本、背景、列表的學習，構(gòu)建網(wǎng)站<header>與<banner>區(qū)域區(qū)域的頁面效果。三、案例分析第一步：編寫<header>與<banner>區(qū)域的HTML代碼。第二步：編寫<header>區(qū)域的漸變背景色。第二步：設(shè)置<banner>區(qū)域內(nèi)的多圖背景效果。四、案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁CSS代碼的編寫與測試。五、階段小結(jié)CSS3中對文字、背景、列表的樣式的綜合使用。章節(jié)或項目名稱任務18：盒子模型及相關(guān)屬性本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20610三5-6符合□超前□滯后□符合□超前□滯后教學目標掌握認識盒子模型、<div>標記、盒子的寬與高、邊框?qū)傩?、邊距屬性、box-shadow屬性、box-sizing屬性的使用教學重點盒子模型、盒子的寬與高、邊框、邊距屬性的使用教學難點box-shadow屬性、box-sizing屬性的使用教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧CSS的使用方法，文本、背景、列表等的使用方式。講授法5分鐘知識講授學生練習盒子模型演示教學學做一體10分鐘知識講授學生練習<div>標記、盒子的寬與高演示教學學做一體25分鐘知識講授學生練習邊框?qū)傩?、邊距屬性演示教學學做一體20分鐘知識講授學生練習box-shadow屬性、box-sizing屬性演示教學學做一體25分鐘課程小結(jié)階段小結(jié)：重點：盒子模型、<div>標記、盒子的寬與高、邊距屬性。易錯點：盒子模型的總寬度和總高度的計算原則。注意區(qū)分內(nèi)邊距與外邊距。講授法5分鐘教學效果及改進思路一、知識回顧CSS的使用方法，文本、背景、列表等的使用方式。二、知識講解：認識盒子模型（1）、教師展示PPT對“CSS盒子模型”的概念進行講解，并以生活中常見的手機盒子的構(gòu)成進行演示。（2）、教師展示PPT，對CSS盒子模型的構(gòu)成元素進行具體講解。（3）、教師使用CSS盒子模型控制網(wǎng)頁中的元素，并進行代碼演示。（4）、學生練習，教師巡視，對疑難問題進行解答。三、知識講解：“<div>標記”與“盒子的寬與高”（1）、教師展示PPT對“<div>標記”的概念及用途進行講解，同時去認識“盒子的寬與高”，并舉例說明。（2）、教師對“<div>標記”的使用方法進行講解，并通過代碼進行演示認識“盒子的寬度與高度”的常用單位數(shù)值進行講解。（3）、教師指出使用“<div>標記”布局時需要注意的問題，教師指出計算“盒子模型的總寬度和總高度”的計算原則，并能夠根據(jù)實際情況進行計算。盒子的總寬度=width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和盒子的總高度=height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和（4）、學生練習，教師巡視，對疑難問題進行解答。四、知識講解：“邊框?qū)傩浴迸c“邊距屬性”（1）、教師展示PPT對“邊框?qū)傩浴钡母拍罴坝猛具M行講解。教師分別對“設(shè)置邊框樣式”、“設(shè)置邊框?qū)挾取?、“設(shè)置邊框顏色”及“綜合設(shè)置邊框”的屬性值及應用效果進行講解并通過代碼進行演示。教師分別對設(shè)置“圓角邊框”、“圖片邊框”進行講解，并進行實時演示。教師指出應用“邊框?qū)傩浴睍r需要注意的問題，并給與解答。（2）、學生練習，教師巡視，對疑難問題進行解答。（3）、教師展示PPT將CSS邊距屬性分為“內(nèi)邊距”和“外邊距”兩種，展示PPT對“內(nèi)邊距”、“外邊距”的概念進行講解。教師分別對“內(nèi)邊距屬性”、“外邊距屬性”進行講解并通過代碼進行演示。教師分析內(nèi)外邊距的區(qū)別與聯(lián)系，并對比其應用效果。（4）、學生練習，教師巡視，對疑難問題進行解答。五、知識講解：“box-shadow屬性”與“box-sizing屬性”（1）、教師展示PPT對“box-shadow屬性”的概念及用途進行講解，指出box-shadow屬性用于實現(xiàn)陰影。講解“box-shadow屬性”參數(shù)值進行說明并講解。（2）教師對“box-shadow屬性”進行講解并通過代碼進行演示。教師指出應用“box-shadow屬性”時需要注意的問題，并給與解答。（3）、教師展示PPT對“box-sizing屬性”的概念進行講解，指出box-sizing屬性用于定義盒子的寬度值和高度值是否包含元素的內(nèi)邊距和邊框。教師對“box-sizing屬性”的content-box、border-box取值進行說明并講解。（4）教師對“box-sizing屬性”進行講解并通過代碼進行演示。（5）教師指出應用“box-sizing屬性”時需要注意的問題，并給與解答。（6）、學生練習，教師巡視，對疑難問題進行解答。階段小結(jié)：重點：盒子模型、<div>標記、盒子的寬與高、邊距屬性。易錯點：盒子模型的總寬度和總高度的計算原則。注意區(qū)分內(nèi)邊距與外邊距。章節(jié)或項目名稱任務19：元素的屬性float、清除、定位本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20611二1-2符合□超前□滯后□符合□超前□滯后教學目標掌握理解元素的浮動，能夠為元素設(shè)置浮動樣式。熟悉清除浮動的方法，可以使用不同方法清除浮動。掌握元素的定位，能夠為元素設(shè)置常見的定位模式。教學重點元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性。教學難點元素的浮動屬性float、overflow屬性、元素的定位屬性教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧盒子模型、背景、漸變的相關(guān)設(shè)置講授法5分鐘知識講授學生練習浮動屬性float、清除浮動演示教學學做一體20分鐘知識講授學生練習overflow屬性的使用演示教學學做一體15分鐘知識講授學生練習定位屬性、靜態(tài)定位、相對定位、絕對定位、固定定位、z-index層疊等級屬性演示教學學做一體30分鐘知識講授學生練習元素的類型、<span>標記、元素的轉(zhuǎn)換演示教學學做一體15分鐘課程小結(jié)階段小結(jié)：元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性的使用細節(jié)。講授法5分鐘教學效果及改進思路一、知識回顧盒子模型、背景、漸變的相關(guān)設(shè)置。二、知識講解：浮動屬性float、清除浮動（1）、教師通過PPT對網(wǎng)頁中常見的元素浮動效果進行展示。（2）、教師通過PPT對“浮動”的概念及基本語法格式進行講解，并進行代碼演示。（3）、教師對“浮動”的常用屬性—左浮動、右浮動進行講解，并進行代碼演示。（4）、教師指出對元素應用“浮動”時需要注意的問題，并給予解答。（5）、學生練習，教師巡視，對疑難問題進行解答。教師對元素的浮動會對其他元素產(chǎn)生影響，并進行代碼演示。講解，清除浮動的方法。三、知識講解：overflow屬性的使用（1）、教師通過PPT對“overflow屬性”的作用進行講解。（2）、教師對“overflow屬性”的基本語法格式進行講解，并進行代碼演示。（3）、教師對“overflow屬性”的四個常用屬性值進行講解，演示其具體用法和效果，通過對比分析不同屬性值的異同。（4）、教師指出應用“overflow屬性”時需要注意的問題，并給予解答。（5）、學生練習，教師巡視，對疑難問題進行解答。四、知識講解：定位屬性、靜態(tài)定位、相對定位、絕對定位、固定定位、z-index層疊等級屬性（1）、教師和學生互動：制作網(wǎng)頁時，如果希望元素出現(xiàn)在某個特定的位置，就需要使用定位屬性對元素進行精確定位。元素的定位屬性主要包括定位模式和邊偏移兩部分。下面，將進行具體講解。（2）、教師分別針對“定位模式”和“邊偏移”進行詳細講解。（3）、教師對“定位模式”的基本語法格式進行講解，并進行代碼演示。（4）、教師指出position屬性的四個常用值，并進行分析。（5）、學生練習，教師巡視，對疑難問題進行解答。依次學習靜態(tài)定位、相對定位、絕對定位、固定定位、z-index層疊的關(guān)系。五、知識講解：元素的類型、<span>標記、元素的轉(zhuǎn)換（1）、教師和學生互動：HTML標記語言提供了豐富的標記，用于組織頁面結(jié)構(gòu)。為了使頁面結(jié)構(gòu)的組織更加輕松、合理，HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素。下面，我們開始學習塊元素和行內(nèi)元素。（2）、教師展示PPT對“塊元素和行內(nèi)元素”的概念及特點進行說明。（3）、教師分別對“塊元素和行內(nèi)元素”進行講解，并進行代碼演示。（4）、教師列舉常見的塊元素和行內(nèi)元素，并對比其不同。（5）、學生練習，教師巡視，對疑難問題進行解答?！霸氐霓D(zhuǎn)換”功能，注意display屬性的使用。階段小結(jié)：重點：元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性使用細節(jié)。章節(jié)或項目名稱任務20：使用盒子模型布局網(wǎng)頁本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20611三5-6符合□超前□滯后□符合□超前□滯后教學目標綜合使用元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性教學重點元素的浮動、元素的定位、元素的類型與轉(zhuǎn)換。教學難點注意區(qū)分行內(nèi)元素和塊元素的區(qū)別教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性使用細節(jié)講授法5分鐘案例描述當鼠標移上圖中的焦點圖時，兩側(cè)將會出現(xiàn)焦點圖切換按鈕演示教學學做一體5分鐘案例分析分析“網(wǎng)頁焦點圖”的構(gòu)成元素，將其拆解為幾個部分，分析各部分使用了哪些HTML標記及應用了哪些CSS樣式。演示教學學做一體10分鐘案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁制作，通過分析效果圖、制作頁面結(jié)構(gòu)、定義CSS樣式等步驟完成頁面的制作，并指出其中需要注意的事項。演示教學學做一體65分鐘課程小結(jié)重點：元素的浮動、元素的定位、元素的類型與轉(zhuǎn)換。易錯點：注意區(qū)分行內(nèi)元素和塊元素的區(qū)別。講授法5分鐘教學效果及改進思路一、案例描述本章前幾節(jié)重點講解了元素的浮動、定位、以及清除浮動。為了使讀者更好地運用浮動與定位組織頁面，本節(jié)將通過案例的形式分步驟制作一個網(wǎng)頁焦點圖，其默認效果如圖所示。當鼠標移上圖中的焦點圖時，兩側(cè)將會出現(xiàn)焦點圖切換按鈕，效果如下圖所示。二、案例分析分析“網(wǎng)頁焦點圖”的構(gòu)成元素，將其拆解為幾個部分，分析各部分使用了哪些HTML標記及應用了哪些CSS樣式。三、案例實現(xiàn)教師帶領(lǐng)學生分步驟地進行網(wǎng)頁制作，通過分析效果圖、制作頁面結(jié)構(gòu)、定義CSS樣式等步驟完成頁面的制作，并指出其中需要注意的事項。說明：在網(wǎng)頁制作時可適時停下來，讓學生自行嘗試。小組之間可以協(xié)作討論，教師巡視，對疑難問題進行解答。階段小結(jié)：重點：元素的浮動、元素的定位、元素的類型與轉(zhuǎn)換。易錯點：注意區(qū)分行內(nèi)元素和塊元素的區(qū)別。完成的同學可以制作：章節(jié)或項目名稱任務21：盒子模型的案例與任務本次授課類型□理論□實驗理實一體□實訓□實習班級地點周次星期節(jié)次授課進度310171J1-20612二1-2符合□超前□滯后□符合□超前□滯后教學目標綜合使用元素的浮動屬性float、運用clear屬性清除浮動、運用overflow屬性清除浮動、使用after偽對象清除浮動、overflow屬性、元素的定位屬性教學重點元素的浮動、元素的定位、元素的類型與轉(zhuǎn)換。教學難點注意區(qū)分行內(nèi)元素和塊元素的區(qū)別教學設(shè)計教學環(huán)節(jié)內(nèi)容要點與手段時間分配知識回顧文字、背景、列表的樣式使用講授法10分

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論