HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教程（第2版）教案-單元設(shè)計(jì) 單元3 CSS基本應(yīng)用

XXXXXX學(xué)院單元設(shè)計(jì)課程課程：內(nèi)容：單元3CSS基本應(yīng)用學(xué)時(shí)：

設(shè)計(jì)摘要教學(xué) 課題單元1HTML5靜態(tài)網(wǎng)站開發(fā)概述課程學(xué)時(shí)安排8學(xué)時(shí)年級高職一年級所選教材湯佳陳曉男主編．《HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教材（第2版）》．高等教育出版社，2023年12月．一、教學(xué)背景創(chuàng)作思路：針對傳統(tǒng)教學(xué)無法解決的教學(xué)難題進(jìn)行設(shè)計(jì)，課程依托信息化教學(xué)環(huán)境，整合數(shù)字化教學(xué)資源，采用混合式教學(xué)模式，采用翻轉(zhuǎn)課堂的有力手段，采用“有效學(xué)習(xí)時(shí)間”的理念進(jìn)行項(xiàng)目化考核。以學(xué)生為中心，教師做引導(dǎo)，在項(xiàng)目教學(xué)的各環(huán)節(jié)充分運(yùn)用HbuilderX開發(fā)工具、智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺(tái)等信息化手段解決教學(xué)重點(diǎn)難點(diǎn)問題。設(shè)計(jì)特色 ：1．教學(xué)過程項(xiàng)目化：依據(jù)“工學(xué)結(jié)合、職業(yè)情境、項(xiàng)目主導(dǎo)”人才培養(yǎng)模式，通過創(chuàng)設(shè)情境、針對實(shí)際問題精心設(shè)計(jì)單元引例，教師點(diǎn)評、小組互評，使學(xué)生自主探究，“做中學(xué)”，“學(xué)中做”，降低了學(xué)生學(xué)習(xí)難度，提高學(xué)習(xí)興趣和課堂參與度；2．教學(xué)資源數(shù)字化：豐富的課件、經(jīng)典作品、視頻等資源可供學(xué)生在線平臺(tái)學(xué)習(xí)；3．網(wǎng)絡(luò)平臺(tái)融合化：緊緊圍繞HbuilderX開發(fā)工具，融入智慧職教MOOC、動(dòng)畫、在線教學(xué)平臺(tái)等信息化手段進(jìn)行教學(xué)完成教學(xué)目標(biāo)，突破重點(diǎn)、難點(diǎn)；4．學(xué)習(xí)評價(jià)多元化：結(jié)合作品展示、小組匯報(bào)等多種方式，采用學(xué)生自評、師生互評，以及評價(jià)平臺(tái)等多種手段形成動(dòng)態(tài)化、多元化的評價(jià)體系。二、學(xué)習(xí)目標(biāo)與內(nèi)容1.學(xué)習(xí)目標(biāo) 知識(shí)目標(biāo)：理解層疊樣式表CSS的基本概念及相關(guān)使用技巧；掌握CSS的語法，熟悉常用CSS屬性的含義；理解盒子模型基礎(chǔ)，掌握浮動(dòng)屬性的基本概念；掌握常用的文本樣式和圖片樣式的設(shè)置以及圖片背景的使用；理解定位的概念，掌握常用的定位方法。能力目標(biāo)：理解常用CSS屬性的含義，并熟練掌握語法結(jié)構(gòu)；深刻理解CSS元素選擇器含義及應(yīng)用環(huán)境，并熟練掌握其語法結(jié)構(gòu)；熟練掌握盒子模型的浮動(dòng)布局；熟練掌握Chrome瀏覽器調(diào)試基本技巧。素質(zhì)目標(biāo)：總體目標(biāo)：初具發(fā)現(xiàn)問題，面對問題，解決問題的能力。具備快速定位和解決問題的能力；具備自我驅(qū)動(dòng)，獨(dú)立思考的能力；具備積極推進(jìn)項(xiàng)目，不斷自我提高的能力。思政育人目標(biāo)：通過盒子模型浮動(dòng)屬性的反復(fù)練習(xí)，讓學(xué)生明白，重要技能需要長時(shí)間的反復(fù)練習(xí)方能掌握，冰凍三尺非一日之寒，練習(xí)的次數(shù)越多越好；通過學(xué)習(xí)Chrome瀏覽器調(diào)試基本技巧，讓學(xué)生明白如果工匠要想做好活兒，一定先要把工具整治得銳利精良。比喻要做好事情，必須先做好準(zhǔn)備，創(chuàng)造條件。2.學(xué)習(xí)主要內(nèi)容 使用CSS設(shè)置body樣式；CSS元素選擇器的使用；內(nèi)聯(lián)式、嵌入式、外部式樣式的使用；測試樣式優(yōu)先級；創(chuàng)建盒子模型；CSS中float屬性的使用；常用文本樣式屬性的使用；常用圖片樣式屬性的使用；position的4種定位方式的使用；Chrome瀏覽器調(diào)試基本技巧。3.學(xué)習(xí)重點(diǎn)及難點(diǎn)教學(xué)重點(diǎn)：CSS元素選擇器的語法結(jié)構(gòu)及使用場景；CSS中float屬性的基本語法及含義；Chrome瀏覽器調(diào)試基本技巧。教學(xué)難點(diǎn)：CSS元素選擇器的語法結(jié)構(gòu)及使用場景；CSS樣式優(yōu)先級順序；position的4種定位方式的使用場景。三、學(xué)情分析授課對象是高職一年級的學(xué)生，通過一學(xué)期的學(xué)習(xí)，已系統(tǒng)學(xué)習(xí)了《計(jì)算機(jī)應(yīng)用基礎(chǔ)》《程序設(shè)計(jì)基礎(chǔ)》課程，有一定的編程基礎(chǔ)，但對軟件開發(fā)基本流程的理解、自我規(guī)劃和管理能力、團(tuán)隊(duì)協(xié)作交流能力、自我學(xué)習(xí)解決問題的能力還有所欠缺，基于“課堂不保證做，課后保證不做”的現(xiàn)狀，需要采用翻轉(zhuǎn)課堂的有力手段監(jiān)督其課后學(xué)習(xí)情況，課堂主要用于作業(yè)檢查、解惑答疑、交流討論，從而達(dá)到更好的教學(xué)效果。四、學(xué)習(xí)環(huán)境選擇與學(xué)習(xí)資源設(shè)計(jì)1.學(xué)習(xí)環(huán)境（1）教學(xué)硬件：多媒體教室；（2）教學(xué)軟件：極域電子教室、PhotoShop、HBuilderX、谷歌瀏覽器等。2.學(xué)習(xí)資源類型（1）課程在線教學(xué)平臺(tái)（2）新形態(tài)一體化教材（3）職教云課堂3.學(xué)習(xí)資源內(nèi)容簡要說明智慧職教平臺(tái)《移動(dòng)web開發(fā)》在線開放課程有多媒體課件、微視頻、試題庫等多種數(shù)字化資源；高等職業(yè)教育新形態(tài)一體化規(guī)劃教材《HTML5+CSS3網(wǎng)頁設(shè)計(jì)任務(wù)教材（第2版）》中二維碼標(biāo)注微課、課件，實(shí)現(xiàn)移動(dòng)終端隨掃隨學(xué)。五、學(xué)習(xí)情境創(chuàng)設(shè)HTML代碼作為超文本標(biāo)記語言是Web的基礎(chǔ)，它定義了Web頁面的結(jié)構(gòu)和內(nèi)容，那么網(wǎng)頁是通過什么方式來修飾文本、圖片、多媒體和表單等元素的？CSS代碼是如何定義和被使用的？如何將文本、圖片、多媒體和表單等元素按照用戶需求進(jìn)行排版？如何快速準(zhǔn)確的調(diào)試CSS錯(cuò)誤？這是我們這一章節(jié)需要解決的問題。六、教法學(xué)法設(shè)計(jì)1、項(xiàng)目化教學(xué)步驟：①創(chuàng)設(shè)情景、導(dǎo)入任務(wù)②演示錄屏、學(xué)生筆記③學(xué)生練習(xí)、教師巡視④集中講解，學(xué)生修改，上傳作業(yè)⑤重復(fù)2-4步⑥課堂小結(jié)⑦布置作業(yè)。2、教師教法（1）分階段演示法：將一個(gè)復(fù)雜案例分解成若干個(gè)步驟，分階段演示。（2）巡回指導(dǎo)法：逐個(gè)檢查學(xué)生的練習(xí)情況，并進(jìn)行答疑解惑。（3）錯(cuò)誤總結(jié)法：將檢查巡視過程中發(fā)現(xiàn)的共性錯(cuò)誤，進(jìn)行集中講解。（4）定期檢查法：針對期末項(xiàng)目考核，階段性檢查其作業(yè)情況，起到監(jiān)督和輔導(dǎo)的作用。3、學(xué)生學(xué)法（1）模仿案例法：學(xué)期初學(xué)生還未入門，學(xué)生根據(jù)教師的操作錄屏，模仿案例自主練習(xí)。（2）反復(fù)練習(xí)法：針對常用知識(shí)點(diǎn)，需要反復(fù)不斷練習(xí)，提高熟練程度。（3）綜合項(xiàng)目法：針對復(fù)雜案例，先進(jìn)行分析，分解成若干簡單案例，再進(jìn)行組合。（4）自由發(fā)揮法：底子薄弱的學(xué)生，照著書本敲代碼，練習(xí)打字維持課堂秩序即可。4、項(xiàng)目考核：人手一份，定期展示，錄像檢查。

七、教學(xué)過程設(shè)計(jì)（第1-2學(xué)時(shí)，共8學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：使用CSS設(shè)置body樣式；CSS元素選擇器的使用。1、通過智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑網(wǎng)頁有哪些元素可以被修飾？查看在線學(xué)習(xí)平臺(tái)公告，提前通過平臺(tái)或者掃描新形態(tài)一體化教材上的對應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示使用CSS設(shè)置body樣式頁面效果。打開教材提供的網(wǎng)頁案例，演示基礎(chǔ)選擇器頁面效果。打開教材提供的網(wǎng)頁案例，演示復(fù)合選擇器頁面效果。打開教材提供的網(wǎng)頁案例，演示偽類選擇器頁面效果。設(shè)疑：CSS代碼是否可以被反復(fù)使用？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索《舌尖上的中國》相關(guān)內(nèi)容，作為案例制作文本素材，了解中國美食文化的悠久歷史。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用CSS設(shè)置body樣式；基礎(chǔ)選擇器（ID選擇器、類選擇器、標(biāo)簽選擇器）的基本使用；復(fù)合選擇器（組合選擇器、后代選擇器、子元素選擇器、兄弟選擇器、屬性選擇器）的基本使用；偽類選擇器（超鏈接樣式）的基本使用。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。網(wǎng)頁是通過什么代碼來修飾的？CSS是CascadingStyleSheets的縮寫，即層疊樣式表，在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中，CSS負(fù)責(zé)網(wǎng)頁內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、字體顏色、元素位置等。CSS樣式的語法結(jié)構(gòu)是什么？selector{declaration1;declaration2;...declarationN}/*這里是注釋*/1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生使用CSS設(shè)置body樣式： body{ margin-top:35px; margin-left:25px; font-size:25px; color:white; font-family:ComicSansMS,"微軟雅黑"; line-height:25px; background-image:url(./img/bg.jpg); background-repeat:no-repeat; }CSS元素選擇器的使用：代碼詳見教材第53頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識(shí)的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第3-4學(xué)時(shí)，共8學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：內(nèi)聯(lián)式、嵌入式、外部式樣式的使用；測試樣式優(yōu)先級；創(chuàng)建盒子模型；CSS中float屬性的使用。1、通過智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑CSS代碼和HTML代碼能否單獨(dú)存放？查看在線學(xué)習(xí)平臺(tái)公告，提前通過平臺(tái)或者掃描新形態(tài)一體化教材上的對應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示內(nèi)聯(lián)式、嵌入式、外部式樣式頁面效果。打開教材提供的網(wǎng)頁案例，演示測試樣式優(yōu)先級效果。打開教材提供的網(wǎng)頁案例，演示盒子模型效果。打開教材提供的網(wǎng)頁案例，演示CSS浮動(dòng)float屬性頁面效果。設(shè)疑：網(wǎng)頁中的盒子，具有哪些屬性？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過學(xué)習(xí)內(nèi)聯(lián)式、嵌入式、外部式樣式的優(yōu)先級，讓學(xué)生明白輕重緩急工作原則，青春是用來奮斗的。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生內(nèi)聯(lián)式、嵌入式、外部式樣式的基本使用方法；CSS樣式優(yōu)先級；盒子模型基本概念；塊狀元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊狀元素基本知識(shí)；CSS浮動(dòng)float屬性。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。CSS的樣式有哪幾種？測試內(nèi)聯(lián)式、嵌入式、外部式樣式。（1）內(nèi)聯(lián)式一般都寫在特定的標(biāo)簽元素里面來實(shí)現(xiàn)對元素的修改。例如：<pstyle="color:red;">人生應(yīng)該奮斗不止</p>（2）嵌入式嵌入式CSS樣式寫在<head><style>和</style></head>之間。（3）外部式把CSS代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)CSS樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)使用<link>標(biāo)簽將CSS樣式文件鏈接到HTML文件內(nèi)，如下面代碼：<linkhref="base.css"rel="stylesheet"type="text/css"/>測試內(nèi)聯(lián)式、嵌入式、外部式樣式優(yōu)先級.CSS優(yōu)先級的優(yōu)先順序!important>內(nèi)聯(lián)樣式>ID選擇器>類選擇器=屬性選擇器=偽類選擇器>標(biāo)簽選擇器=偽元素選擇器>通配選擇器。盒子模型基本概念。盒子模型是網(wǎng)頁布局的基礎(chǔ)，通過對盒子模型的控制可以實(shí)現(xiàn)各種復(fù)雜的網(wǎng)頁布局效果。盒子模型由四個(gè)部分組成，分別是內(nèi)容區(qū)、內(nèi)邊距區(qū)、邊框區(qū)和外邊距區(qū)。其中內(nèi)容區(qū)包含了元素的實(shí)際內(nèi)容，內(nèi)邊距區(qū)是內(nèi)容區(qū)和邊框之間的距離，邊框區(qū)是包圍內(nèi)容區(qū)和內(nèi)邊距區(qū)的線框，外邊距區(qū)是邊框和相鄰元素之間的距離。（1）內(nèi)容（content）：內(nèi)容包括了文本，塊狀盒子，圖片，內(nèi)容盒子的盒模型等等。（2）內(nèi)邊距（padding）：內(nèi)邊距規(guī)定了內(nèi)容與邊框之間的填充距離。（3）邊框（border）：border默認(rèn)為0；可以設(shè)置邊框樣式。（4）外邊距（margin）：外邊距規(guī)定了盒子與盒子之間的距離，因此它不會(huì)被計(jì)算到盒子的總體寬度和高度之中，盒子內(nèi)的盒子的外邊距則會(huì)影響父級元素的寬度和高度。（5）元素框的總寬度=內(nèi)容（content）的width+padding的左邊距和右邊距的值+margin的左邊距和右邊距的值+border的左右寬度。（6）元素框的總高度=內(nèi)容（content）的height+padding的上下邊距的值+margin的上下邊距的值＋border的上下寬度。塊狀元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊狀元素基本知識(shí)。在CSS中，HTML中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素（block）、內(nèi)聯(lián)元素（又叫行內(nèi)元素，inline）和內(nèi)聯(lián)塊狀元素（inline-block）。1）常用的塊狀元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>2）常用的內(nèi)聯(lián)元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>3）常用的內(nèi)聯(lián)塊狀元素有：<img>、<input>、<td>4）塊級元素(block)特點(diǎn)（1）總是從新行開始（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。（3）寬度默認(rèn)是容器的100%（4）可以容納內(nèi)聯(lián)元素和其他塊元素。5）內(nèi)聯(lián)元素(inline)特點(diǎn)（1）和相鄰行內(nèi)元素在一行上。（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）6）內(nèi)聯(lián)塊狀元素(inline-block)元素特點(diǎn)：（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生內(nèi)聯(lián)式、嵌入式、外部式樣式的使用： <h1>內(nèi)聯(lián)式、嵌入式、外部式樣式</h1> <h3>內(nèi)聯(lián)式</h3> <pstyle="color:red;font-size:20px;">內(nèi)聯(lián)式CSS樣式表就是把CSS代碼直接寫在現(xiàn)有的HTML標(biāo)簽中，如：<pstyle="color:red;font-size:20px">這里文字是紅色。</p> <h3>嵌入式</h3> <p>嵌入式CSS樣式，就是可以把CSS樣式代碼寫在<span><styletype="text/css"></style>標(biāo)簽之間</span>。 </p> <h3>外部式</h3> <p>外部式CSS樣式(也可稱為外聯(lián)式)就是把CSS代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)CSS樣式文件以".css"為擴(kuò)展名，如<linkhref="style.css"rel="stylesheet"type="text/css"/>，<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。 </p>測試樣式優(yōu)先級：代碼詳見教材第63頁。創(chuàng)建盒子模型：代碼詳見教材第66頁。CSS中float屬性的使用：代碼詳見教材第69頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識(shí)的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第5-6學(xué)時(shí)，共8學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：CSS中float屬性的使用；常用文本樣式屬性的使用；常用圖片樣式屬性的使用。1、通過智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑word中的文本和圖片可以設(shè)置哪些效果？查看在線學(xué)習(xí)平臺(tái)公告，提前通過平臺(tái)或者掃描新形態(tài)一體化教材上的對應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容?！兑苿?dòng)web開發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示CSS浮動(dòng)float屬性頁面效果。打開教材提供的網(wǎng)頁案例，演示div居中頁面效果。打開教材提供的網(wǎng)頁案例，演示文字左右居中頁面效果。打開教材提供的網(wǎng)頁案例，演示文字上下居中頁面效果。打開教材提供的網(wǎng)頁案例，演示CSS3文本陰影頁面效果。打開教材提供的網(wǎng)頁案例，演示自定義字體頁面效果。打開教材提供的網(wǎng)頁案例，演示遠(yuǎn)程調(diào)用字體頁面效果。打開教材提供的網(wǎng)頁案例，演示圓角屬性使用頁面效果。打開教材提供的網(wǎng)頁案例，演示漸變屬性使用頁面效果。打開教材提供的網(wǎng)頁案例，演示多種圖片特效頁面效果。打開教材提供的網(wǎng)頁案例，演示相對路徑頁面效果。打開教材提供的網(wǎng)頁案例，演示絕對路徑頁面效果。設(shè)疑：兩個(gè)浮動(dòng)的div代碼先后出現(xiàn)的順序和效果有什么關(guān)系？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索十二生肖圖片，作為案例制作圖片素材，加深傳統(tǒng)文化和民俗文化的熏陶和傳承。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生div居中；文字左右居中；文字上下居中；CSS3文本陰影。自定義字體；遠(yuǎn)程調(diào)用字體；圓角屬性；漸變屬性；多種圖片特效；相對路徑和絕對路徑。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生提出以下問題，學(xué)生自行百度獲取答案。CSS3文本陰影語法結(jié)構(gòu)。向文本設(shè)置陰影使用text-shadow屬性，其使用格式為：text-shadow:h-shadowv-shadowblurcolor;其中h-shadow值是必需有的，表示水平陰影的位置，允許負(fù)值；v-shadow值是必需有的，表示垂直陰影的位置，允許負(fù)值；blur值是可選的，表示陰影模糊的距離；color值也是可選的，表示陰影的顏色。CSS3圓角邊框語法結(jié)構(gòu)。border-radius能夠同時(shí)設(shè)置1到4個(gè)值。border-radius:40px;表示4個(gè)圓角都使用這個(gè)值。border-radius:10px50px;表示左上角和右下角使用第一個(gè)值，右上角和左下角使用第二個(gè)值。border-radius:10px50px40px;表示左上角使用第一個(gè)值，右上角和左下角使用第二個(gè)值，右下角使用第三個(gè)值。border-radius:10px20px30px40px;若是設(shè)置四個(gè)值，則依次對應(yīng)左上角、右上角、右下角、左下角（順時(shí)針順序）。border-radius:10px20px30px40px/40px30px20px10px“/”前的四個(gè)數(shù)值表示圓角的水平半徑，后面四個(gè)值表示圓角的垂直半徑。CSS3漸變屬性語法結(jié)構(gòu)。CSS3漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。CSS3定義了兩種類型的漸變（gradients）：線性漸變和徑向漸變。線性漸變：為了創(chuàng)建一個(gè)線性漸變，必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。徑向漸變：徑向漸變由它的中心定義。為了創(chuàng)建一個(gè)徑向漸變，必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，可以指定漸變的中心、形狀（圓形或橢圓形）、大小。線性漸變語法：background-image:linear-gradient(direction,color-stop1,color-stop2,...);徑向漸變語法：background-image:linear-gradient(angle,color-stop1,color-stop2);1、布置任務(wù)；2、巡視督促，答疑解惑，指導(dǎo)實(shí)踐。1、通過平臺(tái)提供的教程學(xué)習(xí)；2、小組分工協(xié)作。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖為了鞏固本次課所授知識(shí)，提高學(xué)生利用所學(xué)知識(shí)進(jìn)行實(shí)踐訓(xùn)練的能力，讓學(xué)生自主地完成實(shí)戰(zhàn)任務(wù)。所以，老師應(yīng)盡量少指導(dǎo)，而是引導(dǎo)學(xué)生學(xué)會(huì)利用各種不同的信息化手段尋求幫助，使學(xué)生得到更多的啟發(fā)，與此同時(shí)，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對新知識(shí)的索取能力。步驟6：引例實(shí)現(xiàn)時(shí)間：30分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生CSS中float屬性的使用：代碼詳見教材第69頁。常用文本樣式屬性的使用：代碼詳見教材第72頁。常用圖片樣式屬性的使用：代碼詳見教材第77頁。1、教師分析；2、巡視督促，答疑解惑，指導(dǎo)引例實(shí)現(xiàn)。1、分組討論；2、引例實(shí)現(xiàn)。1、講練結(jié)合；2、分組討論；3、利用信息化手段尋求幫助，化解難點(diǎn)；4、動(dòng)手實(shí)踐。1、課程在線教學(xué)平臺(tái)2、職教云課堂設(shè)計(jì)意圖通過分析與實(shí)現(xiàn)單元引例，進(jìn)一步深化鞏固本次課所授知識(shí)，引導(dǎo)學(xué)生進(jìn)行分組討論，讓學(xué)生在自主探究中體驗(yàn)成功的樂趣，增強(qiáng)對知識(shí)的內(nèi)化。步驟7：評價(jià)總結(jié)時(shí)間：10分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生在線測驗(yàn)課堂總結(jié)1、組織交流；2、教師點(diǎn)評；3、課堂總結(jié)。1、分享交流；2、相互評價(jià)。1、教師啟發(fā)2、討論歸納3、分?jǐn)?shù)激勵(lì)1、極域電子教室2、職教云課堂設(shè)計(jì)意圖教師應(yīng)充分發(fā)揮教學(xué)評價(jià)在教學(xué)中的導(dǎo)向作用，重視自評與互評，使評價(jià)成為學(xué)生反思自我，發(fā)現(xiàn)自我，發(fā)展自我的過程。為了使評價(jià)優(yōu)化，評價(jià)時(shí)要指導(dǎo)方法、提出依據(jù)，這樣才能有效地達(dá)到評價(jià)的效果。步驟8：課后鞏固教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生課后作業(yè)：在線學(xué)習(xí)視頻。1、布置作業(yè)；2、學(xué)生作業(yè)提交后及時(shí)批改并給出指導(dǎo)建議。1、自主完成課后任務(wù)；2、課后任務(wù)完成后，按時(shí)提交至在線課程平臺(tái)。1、教師講解；2、學(xué)生提交作業(yè)，教師提出修改意見。1、班級QQ群2、課程在線教學(xué)平臺(tái)設(shè)計(jì)意圖讓學(xué)生利用課后時(shí)間進(jìn)一步地吸收消化課堂內(nèi)容，在鞏固知識(shí)的同時(shí)，不斷提高自身信息素養(yǎng)。

七、教學(xué)過程設(shè)計(jì)（第7-8學(xué)時(shí)，共8學(xué)時(shí)）步驟1：課前準(zhǔn)備教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生通過在線學(xué)習(xí)平臺(tái)發(fā)布課程學(xué)習(xí)內(nèi)容：position的4種定位方式的使用；Chrome瀏覽器調(diào)試基本技巧。1、通過智慧職教云平臺(tái)發(fā)布通知及布置課前任務(wù)，告知學(xué)生即將學(xué)習(xí)的課程內(nèi)容，并在平臺(tái)發(fā)布與課程內(nèi)容相關(guān)的授課錄像、課件等資源，讓學(xué)生提前預(yù)習(xí)。2、問題設(shè)疑平時(shí)如何調(diào)試CSS代碼？有沒有更加便捷的方式進(jìn)行調(diào)試？查看在線學(xué)習(xí)平臺(tái)公告，提前通過平臺(tái)或者掃描新形態(tài)一體化教材上的對應(yīng)知識(shí)點(diǎn)的二維碼觀看微課程視頻預(yù)習(xí)相關(guān)課程內(nèi)容。通過信息化手段和技術(shù)發(fā)布告知學(xué)生學(xué)習(xí)內(nèi)容。《移動(dòng)web開發(fā)》課程在線教學(xué)平臺(tái)新形態(tài)一體化教材職教云課堂設(shè)計(jì)意圖教師通過信息化手段向?qū)W生提前發(fā)布即將學(xué)習(xí)的課程內(nèi)容，意在讓學(xué)生養(yǎng)成良好地運(yùn)用信息技術(shù)手段進(jìn)行知識(shí)獲取及自主探究的習(xí)慣，培養(yǎng)自身信息素養(yǎng)，也為課程教學(xué)做好準(zhǔn)備。步驟2：引例描述時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生打開教材提供的網(wǎng)頁案例，演示相對定位頁面效果。打開教材提供的網(wǎng)頁案例，演示絕對定位頁面效果。打開教材提供的網(wǎng)頁案例，演示z-index定位頁面效果。打開教材提供的網(wǎng)頁案例，演示固定定位頁面效果。打開教材提供的網(wǎng)頁案例，演示浮動(dòng)廣告頁面效果。設(shè)疑：浮動(dòng)廣告有哪些特點(diǎn)？1、思考老師提出的問題，踴躍回答；2、分組討論。1、教師講解；2、頭腦風(fēng)暴；3、分組討論。1、多媒體2、課件設(shè)計(jì)意圖通過演示，引發(fā)學(xué)生思考，激發(fā)了學(xué)生的興趣，學(xué)生一下子就投入到課堂中，這激發(fā)了學(xué)生強(qiáng)烈的學(xué)習(xí)愿望和高漲的學(xué)習(xí)熱情。為接下來讓學(xué)生積極主動(dòng)地參與到學(xué)習(xí)活動(dòng)中來做好了情感上的準(zhǔn)備。步驟3：思政小課堂時(shí)間：5分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生搜索“Chrome前端調(diào)試技巧”相關(guān)學(xué)習(xí)視頻，明白冰凍三尺非一日之寒。1、引導(dǎo)學(xué)生通過網(wǎng)絡(luò)獲取并總結(jié)答案，設(shè)問并提出思考，組織學(xué)生進(jìn)行討論和分享；2、通過課件進(jìn)行歸納小結(jié)。1、思政小課堂討論、分享；2、對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、分析歸納。1、視頻2、課件設(shè)計(jì)意圖將思政內(nèi)容融入到課程學(xué)習(xí)中，以“知識(shí)傳授與價(jià)值引領(lǐng)相結(jié)合”為宗旨，使思想政治理論教育與專業(yè)教育協(xié)調(diào)同步、相得益彰，真正實(shí)現(xiàn)在課堂教學(xué)主渠道中全方位、全過程、全員立體化育人。步驟4：知識(shí)探究時(shí)間：20分鐘教學(xué)內(nèi)容師生活動(dòng)教學(xué)方法教學(xué)手段教師學(xué)生相對定位；絕對定位；z-index定位；固定定位；浮動(dòng)廣告；Chrome瀏覽器調(diào)試基本技巧。1、引導(dǎo)學(xué)生借助在線課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、案例講解；3、通過課件進(jìn)行歸納小結(jié)。1、學(xué)生登錄網(wǎng)絡(luò)課程平臺(tái)獲取知識(shí)進(jìn)行自主探究；2、認(rèn)真觀察教師講解演示，對于教師的歸納，仔細(xì)聽講、思考、記錄筆記。1、問題引導(dǎo)；2、分組討論；3、講解演示；4、分析歸納。1、課程在線教學(xué)平臺(tái)2、課件設(shè)計(jì)意圖通過引例引入本節(jié)課所需要學(xué)習(xí)的知識(shí)點(diǎn)，為了讓學(xué)生能夠直觀感性地理解知識(shí)點(diǎn)，由教師首先進(jìn)行講解演示，結(jié)合知識(shí)點(diǎn)講解案例，為接下來的學(xué)生實(shí)踐訓(xùn)練提前做好鋪墊。步驟5：實(shí)踐訓(xùn)練