全國計(jì)算機(jī)類說課大賽一等獎(jiǎng)：CSS樣式表的使用教學(xué)設(shè)計(jì)

1、2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽-課 時(shí)本次課設(shè)計(jì)課時(shí)為2課時(shí)。二教材分析（一）知識(shí)內(nèi)容分析本課內(nèi)容選自高等教育出版社的網(wǎng)頁設(shè)計(jì)與制作（HTML+CSS+JavaScript），第四章CSS 的應(yīng)用，設(shè)“裸時(shí)為2個(gè)課時(shí)。本章在整個(gè)課程體系里起到承上啟下的作用，它既是對(duì)前面的基 礎(chǔ)章節(jié)的綜合深化，又開啟了后續(xù)DIV+CSS知識(shí)對(duì)接。在本課之前，學(xué)生基本掌握網(wǎng)頁制作的主 要知識(shí)點(diǎn)，有一定的代碼基礎(chǔ)。而本課內(nèi)容CSS樣式表的使用是學(xué)生進(jìn)行網(wǎng)頁設(shè)計(jì)的基礎(chǔ)和提高。 學(xué)生通過理解CSS樣式、選擇器的概念，掌握應(yīng)用外部CSS樣式表、修改CSS選擇器屬性的方法 來設(shè)計(jì)和美化網(wǎng)頁，并能

2、對(duì)所設(shè)計(jì)的作品進(jìn)行評(píng)價(jià)，培養(yǎng)學(xué)生的設(shè)計(jì)、審美能力及職業(yè)素養(yǎng)和創(chuàng)新 精神。本次教學(xué)活動(dòng)對(duì)學(xué)生的網(wǎng)頁制作與設(shè)計(jì)起著基礎(chǔ)、提高作用。（二）我對(duì)教材的處理方法1、把教材所涉及的知識(shí)點(diǎn)進(jìn)行分層，使學(xué)生由簡入深理解和掌握CSS樣式表的使用。2、對(duì)教材內(nèi)容進(jìn)行二次處理，制作原創(chuàng)案例，使內(nèi)容更加適合我班學(xué)生學(xué)習(xí)。3、由CSS樣式表的使用引導(dǎo)學(xué)生對(duì)網(wǎng)頁界面設(shè)計(jì)的分析。三學(xué)生分析教學(xué)對(duì)象為我校計(jì)算機(jī)應(yīng)用專業(yè)相職二年級(jí)的學(xué)生、生季習(xí)網(wǎng)頁制作已有一個(gè)率期，對(duì)這獷 課之前的學(xué)生情況分析如下：（一）學(xué)生知識(shí)能力分析1、學(xué)生能熟練使用Dreamweaver軟件2、對(duì)于靜態(tài)頁面的設(shè)計(jì)有一定的基礎(chǔ)3、學(xué)生有簡單的代碼基礎(chǔ)4、在

3、以往的學(xué)習(xí)過程中有簡單接觸過嵌入式的CSS樣式5、學(xué)生缺乏動(dòng)手能力6、對(duì)作品的評(píng)價(jià)缺乏系統(tǒng)的認(rèn)識(shí)和理解7、學(xué)生技能水平出現(xiàn)分化現(xiàn)象（二）學(xué)生自學(xué)能力分析我在課堂教學(xué)過程中，注重在學(xué)生認(rèn)知水平能夠承受的前提下安排一些適合自學(xué)的內(nèi)容讓學(xué)生 自己掌握，從中培養(yǎng)學(xué)生的自學(xué)能力。開始自學(xué)的內(nèi)容簡單，等學(xué)生認(rèn)為自學(xué)不是一件很難的事情 且樂于參與時(shí)，再適當(dāng)加大自學(xué)的難度。在教學(xué)過程中，長期滲透自學(xué)理念，學(xué)生們已經(jīng)有了較強(qiáng) 的自學(xué)能力和良好的課前預(yù)習(xí)習(xí)慣。因此，盡管本課是一節(jié)綜合項(xiàng)目設(shè)計(jì)課程，我還是在教學(xué)方法 中滲透自主探究學(xué)習(xí)法，相信學(xué)生有能力獲得成功。（三）學(xué)生個(gè)性特點(diǎn)分析可以通過4個(gè)I群來高度概描“樂刊

4、猱”、“喜歡兆郵、“個(gè)懶糊”、但卻唯泛毅方'o四教學(xué)目標(biāo)（一）知識(shí)與技能1、理解CSS樣式表、CSS選擇器的概念。2、學(xué)會(huì)為HTML頁面添加外部CSS樣式表。3、修改CSS樣式表的屬性值。（二）過程與方法依托班級(jí)學(xué)習(xí)網(wǎng)站、校園網(wǎng)資源庫、藍(lán)墨云班課移動(dòng)教學(xué)平臺(tái)為載體，使用交互式課件、三維 動(dòng)畫、微課視頻輔助教學(xué)，通過小組合作探究、自主學(xué)習(xí)等方式，讓學(xué)生掌握添加CSS樣式表的 過程和修改屬性值的方法。（三）情感目標(biāo)在輔導(dǎo)學(xué)生完成任務(wù)的過程中，激發(fā)學(xué)生的審美情操，創(chuàng)設(shè)與實(shí)際崗位相結(jié)合的情境，培養(yǎng)學(xué) 生的職業(yè)素養(yǎng)。五教學(xué)重點(diǎn)及難點(diǎn)（一）教學(xué)量點(diǎn)外部CSS樣式表的添加應(yīng)用。（二）教學(xué)難點(diǎn)修改CS

5、S樣式表的屬性值。六教法與學(xué)法（一）教學(xué)思想當(dāng)前職業(yè)中學(xué)計(jì)算機(jī)專業(yè)教學(xué)的主流取向是以建構(gòu)主義的教學(xué)思想與學(xué)習(xí)理論為指導(dǎo)去組織 和實(shí)施各項(xiàng)教學(xué)活動(dòng)。在探索基于建構(gòu)主義理論的教學(xué)模式的過程中，本次教學(xué)活動(dòng)采用信息化教 學(xué)設(shè)計(jì)理念，利用信息技術(shù)創(chuàng)設(shè)情景、開發(fā)教學(xué)資源學(xué)習(xí)網(wǎng)站，利用移動(dòng)教學(xué)平臺(tái)，以學(xué)生為中心， 學(xué)生在老師精心創(chuàng)設(shè)的情境、自主探究空間、交流與協(xié)作活動(dòng)、自我評(píng)價(jià)體系等學(xué)習(xí)環(huán)境中充分發(fā) 揮自身的主動(dòng)性和積極性，對(duì)所學(xué)的知識(shí)進(jìn)行意義建構(gòu)，并用其所學(xué)解決實(shí)際問題。（二）教學(xué)策略1、課堂融入信息化手段微課視頻、三維動(dòng)畫、交互式課件，依托班級(jí)學(xué)習(xí)網(wǎng)、藍(lán)墨云班課移 動(dòng)學(xué)習(xí)平臺(tái)為載體，引導(dǎo)學(xué)生積極主動(dòng)參

6、與到教學(xué)活動(dòng)中，激發(fā)學(xué)生學(xué)習(xí)的興趣和求知欲。2、通過采用任務(wù)驅(qū)動(dòng)、小組合作學(xué)習(xí)的教學(xué)方法，引導(dǎo)學(xué)生在共同完成作品的模仿和創(chuàng)作過 程中，培養(yǎng)“互幫互學(xué)、寬容待人、榮辱與共”的合作精神。3、通過采用自主探究學(xué)習(xí)的教學(xué)方法，引導(dǎo)學(xué)生充分利用教學(xué)資源網(wǎng)站完成自己的課前任務(wù)， 從而增強(qiáng)學(xué)生自主探究學(xué)習(xí)的精神和解決問題的能力。4、通過學(xué)生對(duì)作品的相互評(píng)價(jià)，培養(yǎng)他們客觀、辯證地判別事物的能力，又有利于老師掌握 教學(xué)信息的反饋，及時(shí)調(diào)整和改進(jìn)教學(xué)方法。5、我將混合教學(xué)模式運(yùn)用于此次課程教學(xué)中，很好地銜接了 “課前課堂課后”。讓學(xué)生充 分發(fā)揮自己的自主探究能力，做好課前預(yù)習(xí)的功課；讓學(xué)生充分利用課下的時(shí)間來鞏固

7、技能，提高 創(chuàng)作能力；該模式的開展充分調(diào)動(dòng)了學(xué)生的積極性、主動(dòng)性和創(chuàng)造性。逐步讓學(xué)生從被動(dòng)學(xué)習(xí)，轉(zhuǎn) 變成主動(dòng)學(xué)習(xí)。七教學(xué)媒體班級(jí)學(xué)習(xí)網(wǎng)站、藍(lán)墨云移動(dòng)學(xué)習(xí)平臺(tái)、交互式課件、場景動(dòng)畫、微課麒、班級(jí)學(xué)習(xí)網(wǎng)、音樂、 極域教室系統(tǒng)、多媒體網(wǎng)絡(luò)教學(xué)平臺(tái)、計(jì)算機(jī)八教學(xué)流程整個(gè)教學(xué)過程實(shí)施，主要分三部分：（一）課前準(zhǔn)備（二）課堂教學(xué)（三）課后拓展自主.、I課前衛(wèi)- 準(zhǔn)備審案例導(dǎo)入 獲取知識(shí)新課講授 課堂口 /1遜西放學(xué)對(duì)'交流拓展-/課后拓展JK11第一部分：【課前準(zhǔn)備】(-)教師準(zhǔn)備1、制作準(zhǔn)備本課主要知識(shí)點(diǎn)，提前把本課學(xué)習(xí)資源發(fā)放到藍(lán)墨云班課學(xué)習(xí)平臺(tái)上。2、在藍(lán)墨云班課學(xué)習(xí)平臺(tái)及班級(jí)學(xué)習(xí)網(wǎng)先發(fā)布學(xué)

8、習(xí)問題供學(xué)生預(yù)習(xí)思考，并收集學(xué)生在網(wǎng)上 提交的問題回答，充分了解學(xué)生對(duì)本節(jié)課的預(yù)習(xí)情況。3、制作準(zhǔn)備CSS樣式表的使用交互式課件。4、制作準(zhǔn)備CSS樣式的使用系列微課視頻一一添加外部CSS樣式表、CSS樣式屬 性值的修改等。5、制作準(zhǔn)備美美的換裝秀、美美的搭配秀系列的動(dòng)畫。6、制定學(xué)生課堂表現(xiàn)評(píng)價(jià)量規(guī)表以及設(shè)計(jì)作品的評(píng)價(jià)量規(guī)表。7、在平常的教學(xué)過程中，就有意識(shí)地根據(jù)水平差異讓學(xué)生結(jié)成學(xué)習(xí)伙伴，形成了相對(duì)固定的 合作小組。(二)學(xué)生準(zhǔn)備1、自主預(yù)習(xí)CSS樣式表的使用交互式課件，觀看微課視頻，完成微課配套問題。2、課前按要求嘗試解釋什么是CSS樣式表，并思考教師在藍(lán)墨云班課學(xué)習(xí)平臺(tái)上發(fā)布的學(xué)習(xí) 思

9、考問題。3、全體學(xué)生按“異質(zhì)分組”的方法進(jìn)行分組，為小組協(xié)作學(xué)習(xí)做好準(zhǔn)備。本次課將學(xué)生分為6個(gè)小組，每小組7人左右，每組1名組長。課前準(zhǔn)備教師活動(dòng)11學(xué)生活動(dòng)1 設(shè)計(jì)意圖根據(jù)學(xué)情準(zhǔn)備以下學(xué)習(xí)資源，設(shè)計(jì)課前預(yù)習(xí)題1、在手機(jī)端上，使用藍(lán)墨云班課學(xué)生已經(jīng)有課前預(yù)習(xí)目，讓學(xué)生做好課前任務(wù)：班級(jí)學(xué)習(xí)網(wǎng)平臺(tái)瀏覽教師推送的學(xué)習(xí)資料5.H I F.L D.的良好習(xí)慣。利用藍(lán)墨云 班課學(xué)習(xí)平臺(tái)，幫助充分 利用課余時(shí)間，學(xué)習(xí)平臺(tái) 界面美觀，操作方便。學(xué) 生已經(jīng)習(xí)慣了這種預(yù)習(xí)模 式，在課堂上學(xué)習(xí)新知事 半功倍。10教師活動(dòng)小組評(píng)價(jià)平臺(tái)CSS樣式表系列微課交互式課件學(xué)生任務(wù)手冊三 F53 C55tl?«S

10、lE.B n球。際HR)=3二 Si.S*-rrr £ =電行白I I，umb 94a”. Lmal > I WILK JaSH.H 心 a：n. bgye.上lalm. .u，h 二 色，Uffi!»«-I二，石中與K ；.+冢工.上= :ia»zcv='7 »t?.=. ca ±±史«令我二：受殳布什,Ec-cccr叱匚M七與蛻. I4 包 >3： .仆5 I 口喳衣？，二1- FE膝A VK &徙.課前準(zhǔn)備學(xué)生活動(dòng)2、觀看微課視頻美美的換 裝秀，視頻中利用類比的方法， 把小姑娘比作

11、是沒有換裝前的網(wǎng) 頁界面，美麗的服飾比作CSS樣 式表，通過選擇不同的服飾（CSS 樣式表），來裝扮小姑娘（網(wǎng)頁界 面），使得小姑娘體驗(yàn)了一場“換 裝秀”。學(xué)生完成觀看以下兩個(gè)觀 看任務(wù)：問題一：視頻中的小女孩在做什 么？她和CSS樣式表有什么關(guān) 系？問題二：請(qǐng)結(jié)合其他學(xué)習(xí)材料，寫 出CSS樣式表的概念。并把問題 答案準(zhǔn)備好，帶到課堂上，教師進(jìn) 行檢查。3、下載學(xué)生任務(wù)手冊，提前預(yù)習(xí) 本節(jié)課的知識(shí)重點(diǎn)和難點(diǎn)。重點(diǎn)：外部樣式表的添加應(yīng)用； 難點(diǎn)：修改CSS樣式表的屬性值。 4、學(xué)生按“異質(zhì)分組”的方法進(jìn) 行分組，為小組協(xié)作學(xué)習(xí)做好準(zhǔn) 備。設(shè)計(jì)意圖動(dòng)畫微課由教師自己 設(shè)計(jì)與制作，靈活度高、 適用性

12、強(qiáng)，恰當(dāng)?shù)卦?CSS樣式表的概念及作 用，學(xué)生容易理解與接收。利用學(xué)生有課前預(yù)習(xí) 習(xí)慣這一特點(diǎn)，讓學(xué)生帶 著問題觀看視頻，并要求 在課堂上會(huì)進(jìn)行檢查，學(xué) 生主動(dòng)進(jìn)行探索，把課堂 講授模式變成學(xué)生課前的 自主探究，即提高了課堂 的效率，學(xué)生也學(xué)得快， 記得牢。逐步向“翻轉(zhuǎn)課 堂”模式靠攏，讓課堂學(xué) 習(xí)更加高效，有效。在平常的教學(xué)過程 中，就有意識(shí)地根據(jù)水平 差異讓學(xué)生結(jié)成學(xué)習(xí)伙 伴，形成了相對(duì)固定的合 作小組，在突破教學(xué)難點(diǎn) 時(shí)，小組內(nèi)的“小講師” 也起到了非常大的作用， 既幫助了其他同學(xué)，帶動(dòng) 了課堂的氣氛，也促進(jìn)了 同學(xué)之間的交流互動(dòng)。教學(xué)環(huán)節(jié)案例導(dǎo)入第二部分：【課堂教學(xué)】課堂教學(xué)教師活動(dòng)案

13、例導(dǎo)入：教師先向?qū)W生展示排版混亂、還沒有美化的HTML網(wǎng)頁：接著教師僅僅用了一個(gè)操作，幫網(wǎng)頁添加了一個(gè)CSS樣式表，便幫網(wǎng)頁搖身一變，變成同學(xué)們所熟悉的淘寶網(wǎng)首頁。CSS觀察學(xué)生反映，了解學(xué)生的課前預(yù)習(xí)情況。學(xué)生活動(dòng)解讀案例：理解教 師給出的案例，認(rèn) 真分析。學(xué)生聚精會(huì)神，欣 賞教師變的“小魔 術(shù)”。集中注意力，回顧課前預(yù)習(xí)的內(nèi)容。課前預(yù)習(xí)的微課設(shè)計(jì)意圖通過案例的導(dǎo)入， 學(xué)生進(jìn)行頭腦風(fēng) 暴，大膽討論，對(duì) 接下來的新課做鋪 墊，也順利導(dǎo)入今 天的新課程。用案例引起學(xué)生思 考，搖身一變的網(wǎng) 頁能很好地引起學(xué) 生注意。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)教學(xué)環(huán)節(jié)教師活動(dòng)

14、任務(wù)一：檢查課前預(yù)習(xí)一一認(rèn)識(shí)CSS樣式表(1) 提問：老師剛才做了什么操作？鼓勵(lì)學(xué)生說出自己的想法；肯定學(xué)生的回答并給予贊許和表揚(yáng)，讓學(xué)生繼續(xù)保持 課前預(yù)習(xí)的好習(xí)慣；觀察學(xué)生預(yù)習(xí)情況，留意課前功課未完成的學(xué)生。(2) 趁熱打鐵，再次提問：“CSS樣式表這么神奇， 有沒有同學(xué)知道它的概念？ ”。引導(dǎo)學(xué)生回顧課前預(yù)習(xí)內(nèi)容，把“教師講”轉(zhuǎn)變成“學(xué)生說” o(3) 教師檢查并歸納總結(jié)學(xué)生的回答學(xué)生活動(dòng)學(xué)生們已經(jīng)做了充分的課前預(yù)習(xí)工作，充滿信心回答：“幫頁面添加了 CSS樣式學(xué)生回顧課前教師布置的兩個(gè)問題，嘗試把CSS樣式表的概念說出來。設(shè)計(jì)意圖鼓勵(lì)學(xué)生說出課前預(yù)習(xí)的知識(shí),，同時(shí)在上課的開始就把氣氛調(diào)動(dòng)

15、起來，提高課堂效率。把課堂上枯燥的代碼概念講解轉(zhuǎn)變成學(xué)生課前的自主探究和課堂的交流互動(dòng)。12新課講授認(rèn)真聽教師歸納 總結(jié)同學(xué)回答的 問題，結(jié)合自己 的課前預(yù)習(xí)，正 確理解CSS樣式 表的概念。課前動(dòng)畫視頻的引 入，把枯燥、難理解 的CSS樣式表很好地 類比成日常所見的“換裝"，學(xué)生攻 破理論知識(shí)難關(guān)。 先讓學(xué)生充分理解樣 式表的概念和了解樣 式表的種類，對(duì)接下 來添加外部樣式表有 初步的了解。完成今天課堂的第一個(gè)任務(wù)：理解css樣式表的概念。歸納總結(jié)CSS樣式表的概念：1、CSS是用于布局與美化網(wǎng)頁的。2、CSS樣式表和HTML頁面是可以分離的。3、CSS是Cascading Sty

16、le Sheets的英文縮寫，即層疊樣式 表。4、CSS語言是一種標(biāo)記語言，因此不需要編譯，可以直接由 瀏覽器執(zhí)行(屬于瀏覽器解釋型語言)。5、CSS文件是一個(gè)文本文件，它包含了一些CSS標(biāo)記,CSS 文件必須使用css為文件名后綴。6、CSS是大小寫不敏感的,CSS與css是一樣的。CSS的分類： 外部樣式表 內(nèi)部樣式表 內(nèi)聯(lián)樣式2016全國中等職業(yè)學(xué)校“創(chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖任務(wù)二：體驗(yàn)“換裝秀”一一添加外部樣式表學(xué)生認(rèn)真聽教師交互式課件融入到傳學(xué)生已經(jīng)了解了 CSS樣式表的概念及分類，準(zhǔn)備動(dòng)于體驗(yàn)網(wǎng)頁的“換裝”。(1)教師結(jié)合交互式課件示

17、范案例，課堂演示講解操作步驟?；貞浾n前預(yù)習(xí)的 知識(shí)點(diǎn)，認(rèn)真聽 課，找出預(yù)習(xí)時(shí) 遇到的難題的解統(tǒng)的講授模式中，輔 助了教師的課堂教 學(xué)，也讓講解更加清 晰明了，能很好地抓 住學(xué)生的課堂注意 力。新課講授教師一邊操作一邊講解如何在頁面中導(dǎo)入css外部樣式表：第一步：點(diǎn)擊CSS樣式面板一一附加樣式表第二步：在彈出對(duì)話框中點(diǎn)擊瀏覽按鈕，選擇指定文件E款M中至胖譯業(yè)即3蕾學(xué)生已經(jīng)理解CSS樣 式表的概念，此時(shí)利 用交互式課件繼續(xù)示 范案例，良好的交互 頁面吸引學(xué)生的注意 力，教師邊播放課件 邊實(shí)際操作，加深學(xué) 生的印象。第三步：保存網(wǎng)頁，刷新，觀察瀏覽器中網(wǎng)頁的變化。17（2）播放“添加外部CSS樣式表

18、”微課視頻新課講授認(rèn)真觀看微課， 熟記幾個(gè)重要的 操作步驟。下載素材，觀察 還沒添加CSS樣 式表之前的網(wǎng)頁 界面；借助微課, 邊學(xué)邊做，觀察 添加CSS后的頁 面變化。跟不上學(xué)習(xí)進(jìn)度 的學(xué)生可以在電 子舉手，觀看教 師的再次演示。觀察添加CSS樣 式表的頁面，發(fā) 現(xiàn)與界面格格不 入的地方，并思 考用什么方法改 進(jìn)。觀看美美的搭 酉揚(yáng)一思考微課 的類比關(guān)系微課更加直觀直接地 傳授操作步驟知識(shí) 點(diǎn)，容易操作，學(xué)生 可反復(fù)觀看，利用微 課視頻攻克自己的學(xué) 習(xí)弱點(diǎn)。分層次地指導(dǎo)學(xué)生完 成任務(wù)，有效地提高 了學(xué)生吸收知識(shí)的效 率，既可以讓學(xué)習(xí)能 力強(qiáng)的學(xué)生保持自主 探究的好習(xí)慣，也可 以保證其他學(xué)生正

19、常 學(xué)習(xí)基礎(chǔ)知識(shí)，跟得 上學(xué)習(xí)的進(jìn)度。分層次指導(dǎo)學(xué)生也能 改善了教師與學(xué)生的 關(guān)系，從而提高師生 合作、交流的效率。讓學(xué)生自己“發(fā)現(xiàn)問 題”，由問題引出下一 個(gè)知識(shí)點(diǎn)。教師演示完畢，播放添加外部CSS樣式表相關(guān)知識(shí) 點(diǎn)的微課視頻，幫助學(xué)生更好地記住操作步驟。（3）學(xué)生小試牛刀，微課相輔任務(wù)要求：1、下載素材，在原始的網(wǎng)頁界面添加外部CSS樣式表2、對(duì)比添加不同的CSS樣式表，頁面的變化如何？教師進(jìn)行分層指導(dǎo)：1、學(xué)習(xí)能力強(qiáng)一一利用交互式課件獨(dú)立完成任務(wù)；2、學(xué)習(xí)能力一般一一教師巡堂時(shí)給予輔導(dǎo)；3、學(xué)習(xí)能力弱一一在極域電子課室舉手，教師再次演 示，反復(fù)觀看微課視頻，掌握知識(shí)點(diǎn)。任務(wù)三：化身&qu

20、ot;服裝設(shè)計(jì)師”一一修改CSS選擇 器屬性值學(xué)生發(fā)現(xiàn)，添加外部樣式表后的網(wǎng)頁存在幾個(gè)局部問題。 （1）引導(dǎo)學(xué)生發(fā)現(xiàn)網(wǎng)頁存在的問題，鼓勵(lì)學(xué)生大膽說出 解決方法。同學(xué)們在添加外部CSS樣式表后，對(duì)于網(wǎng)頁上一些 不滿意的局部，該怎么去修改？是否添加外部CSS樣式 表后就不能改動(dòng)？如何提高靈活度？（2）引入CSS選擇器屬性值概念，動(dòng)畫視頻幫助理解。教師播放動(dòng)畫微課，微課還是把網(wǎng)頁類比成小姑娘，觀看三維動(dòng)畫時(shí)這次的視頻不同于前面視頻的是小姑娘的服裝已經(jīng)不是與第一個(gè)動(dòng)畫做固定的套裝，而是一件件上衣、裙子、褲子、鞋子等服飾對(duì)比，思考兩個(gè)單品，可以自由地搭配，準(zhǔn)確地說明了 CSS選擇器屬性值的概念及作用。（

21、4） 交互課件，展示CSS選擇器屬性值的修改新課講授交互式課件分步驟演示了 CSS選擇器屬性值的修改及完成結(jié)果，幫助學(xué)生熟悉操作過程。1、修改網(wǎng)頁字體第一步：在Dreamweaver中打開resetcss樣式表第二步：找到名稱為Ily的CSS選擇器boc3y £faiT.lly: verdanaf Arial; fonc-siae!Une-helQnt.: 1;hack:graLin.d:f f;第三步：對(duì)font-size:22Px進(jìn)行修改kodY (f-nt-family: vet da nat, Arial j | fanr-m二|llne-elgnr:2;bSGkgxound

22、;ff;2、修改布局大小第一步：在Dreamweaver中打開style.css樣式表第二步：找到名稱為twoYode的CSS選擇器視頻的相同之處 與不同之處。認(rèn)真聽講，結(jié)合 教師播放的交互 式課件，學(xué)習(xí) CSS選擇器屬性 值修改的步驟。同學(xué)間可以適當(dāng) 地討論，修改任 務(wù)二中的頁面設(shè) 計(jì)。下載素材，利用 信息化教學(xué)資 源，集中精神學(xué) 習(xí)本節(jié)課的知識(shí) 難點(diǎn)。動(dòng)畫微課畫面美觀可 愛，和學(xué)生平時(shí)所接 觸的動(dòng)畫人物類似， 此時(shí)學(xué)生完成任務(wù)一 和任務(wù)二會(huì)有點(diǎn)松 散，生動(dòng)的三維動(dòng)畫 視頻很好地引起學(xué)生 們的注意。CSS選擇器屬性值的 修改是本次課的難 點(diǎn)，發(fā)放微課視頻和 學(xué)生練習(xí)手冊幫助學(xué) 生突破學(xué)習(xí)難點(diǎn)

23、，扎 實(shí)地掌握學(xué)習(xí)重點(diǎn)。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖.tv -code:; float: rzght; 察匚目 jtiqru islativsrhe3.ah5: 3«O0ck; text-aiigs: eearer; bcrdcr: lpx ziclid *匚uu;t第三步：對(duì)width和height進(jìn)行修改.rwo-code ifloac; righL； position; relative; width: 94px;height! 112px; texc-align: center; border: ipx s

24、olid #eee;19新課講授（4）發(fā)放學(xué)生練習(xí)手冊和微課視頻，學(xué)生分組完成任務(wù) 學(xué)生之間進(jìn)行討論，對(duì)任務(wù)二練習(xí)中網(wǎng)頁界面不協(xié)調(diào) 的地方進(jìn)行討論、修改，學(xué)習(xí)過程中借助教師的練習(xí)手冊 和微課視頻，達(dá)到學(xué)習(xí)目標(biāo)。，口中國瞌通4G00：0解89%這回學(xué)生任務(wù)手冊自上黃三甯戌65培拜焦國生出a,華小阿皿字體學(xué)單一 生口rmPF 中匕斤件或哀學(xué)電二倒右眇口時(shí)狗工5法瘀5唐麻鼻餐下載任務(wù)手冊， 針對(duì)任務(wù)二的知 識(shí)點(diǎn)反復(fù)練習(xí)， 直到掌握該知識(shí) 點(diǎn)為止。任務(wù)手冊給學(xué)生清晰 明了的操作任務(wù)，要 求學(xué)生修改指定的屬 性值，在合理地美化 頁面，由淺入深幫助 學(xué)生突破難點(diǎn)。2s 13k再國大小號(hào)* 主 Kf-Mfl

25、r 斗£阡 El- 于二 j rwaK -»«-mcs tteta.接受老師和同學(xué)的點(diǎn)評(píng)4、作品展示，教師點(diǎn)評(píng)教師及時(shí)的點(diǎn)評(píng)、肯 定，給予學(xué)生繼續(xù)學(xué) 習(xí)的動(dòng)力。教師及時(shí)對(duì)學(xué)生作品進(jìn)行點(diǎn)評(píng)、肯定及表揚(yáng)。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽21教學(xué)環(huán)節(jié)情 境 創(chuàng) 設(shè)鞏 固 提 升堂教學(xué)教師活動(dòng)1、情景創(chuàng)設(shè)A公司請(qǐng)了網(wǎng)站設(shè)計(jì)公司設(shè)計(jì)一個(gè)公司的宣傳網(wǎng)站， 網(wǎng)站設(shè)計(jì)公司已經(jīng)設(shè)計(jì)了初稿，現(xiàn)在A公司對(duì)該網(wǎng)站進(jìn) 行初步的驗(yàn)收。人員分配：1、全體學(xué)生按“異質(zhì)分組”的方法進(jìn)行分組2、組內(nèi)選出兩位同學(xué)為A公司的網(wǎng)站驗(yàn)收人員，對(duì) 公司網(wǎng)站進(jìn)行驗(yàn)收，指出網(wǎng)頁需要修改的

26、地方。3、組內(nèi)選出兩位同學(xué)為網(wǎng)站設(shè)計(jì)公司的設(shè)計(jì)師，針 對(duì)A公司提出的要求，對(duì)網(wǎng)站進(jìn)行修改。2、發(fā)放素材，學(xué)生開始模擬情景情境模擬過程中，教師發(fā)放任務(wù)手冊在學(xué)習(xí)平臺(tái)上, 開放網(wǎng)絡(luò)讓學(xué)生在互聯(lián)網(wǎng)上瀏覽收集更多學(xué)習(xí)資源。教師巡堂，對(duì)于學(xué)生的疑問及時(shí)指導(dǎo)與解決。3、小組互評(píng)，教師點(diǎn)評(píng)登錄14計(jì)算機(jī)評(píng)價(jià)平臺(tái)，小組長把小組作品上傳到 平臺(tái)上，其他小組對(duì)所有的小組作品在科學(xué)性、思想性、 技術(shù)性、藝術(shù)創(chuàng)作性等方面進(jìn)行評(píng)價(jià)打分。每個(gè)小組都能看到分?jǐn)?shù)的詳細(xì)情況和所有投票排行。獲得投票排行第一的小組可獲得“本日設(shè)計(jì)之星”頭 銜，教師在平時(shí)成績中加分。學(xué)生活動(dòng)每個(gè)小組長對(duì)組 內(nèi)人員進(jìn)行分 配。融入自己的角 色，積極討

27、論發(fā) 表意見，把本課 學(xué)習(xí)的知識(shí)點(diǎn)用到本環(huán)節(jié)中來。小組下載素材， 組內(nèi)成員輪流分 配角色，體驗(yàn)實(shí)際生活中網(wǎng)頁設(shè) 計(jì)公司與客戶之 間的交流溝通， 并把作品做到最 好。2、登錄14計(jì)算 機(jī)評(píng)價(jià)平臺(tái)，上傳小組作品，同 時(shí)對(duì)其它小組作 品進(jìn)行打分。設(shè)計(jì)意圖情境創(chuàng)設(shè)模擬真實(shí)企 業(yè)項(xiàng)目幫助學(xué)生鞏固 提升，培養(yǎng)職業(yè)素養(yǎng)。 本環(huán)節(jié)是學(xué)生喜歡的 環(huán)節(jié)，此時(shí)學(xué)生可以 大膽提出意見，發(fā)揮 自己的創(chuàng)意，同時(shí)激 發(fā)學(xué)生的審美情操。發(fā)放的任務(wù)手冊所涉 及的知識(shí)點(diǎn)更廣更 深，同時(shí)開放網(wǎng)絡(luò)， 讓學(xué)生自主地上網(wǎng)搜 索，有選擇性地利用 資源更好完成作品。該評(píng)價(jià)平臺(tái)交互性 強(qiáng)，學(xué)生評(píng)分后能馬 上看到自己和其他小 組的得分詳細(xì)情況，

28、 通過組間溝通，能促 進(jìn)小組合作意識(shí)，培 養(yǎng)學(xué)生與他人合作的 能力。獎(jiǎng)勵(lì)機(jī)制給予學(xué)生榮 譽(yù)感和學(xué)習(xí)成就感， 鼓勵(lì)學(xué)生不斷進(jìn)步。2016全國中等職業(yè)學(xué)校“創(chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)設(shè)計(jì)意圖24拓 展 交 流1、交互課件快問快答梳理知識(shí)點(diǎn)通過交互式課件中的答題環(huán)節(jié)，與學(xué)生進(jìn)行快問快答 大考驗(yàn)的游戲。學(xué)生“闖關(guān)”成功后便可進(jìn)入到下一個(gè)環(huán) 節(jié)。幫助學(xué)生梳理基礎(chǔ)知識(shí)點(diǎn)時(shí)，留意不同層次學(xué)生的 學(xué)習(xí)情況。1、小組競爭玩游戈，復(fù)習(xí)本節(jié)課的知識(shí)要點(diǎn)。3、思考教師預(yù)留的思考問題，為下節(jié)課的學(xué)習(xí)做設(shè)計(jì)難度較大的題目，為下節(jié)課的知識(shí)點(diǎn)埋下鋪墊。好準(zhǔn)備。課后登錄班級(jí)學(xué)習(xí)網(wǎng)，欣賞作品

29、學(xué)生作品上傳到班級(jí)學(xué)習(xí)網(wǎng)上，學(xué)生在學(xué)習(xí)網(wǎng)上交流、評(píng)論，并根據(jù)自己的喜好進(jìn)行投票點(diǎn)贊。教師整理投幫助學(xué)生對(duì)所學(xué)的知識(shí)進(jìn)行總結(jié)歸納，理清思路。讓教師能夠掌握學(xué)生本節(jié)課的學(xué)習(xí)情況，做好后續(xù)的備課工作。登錄班級(jí)學(xué)習(xí)網(wǎng)，欣賞同學(xué)的個(gè)人作品，交流票排行，把優(yōu)秀作品展示在班級(jí)學(xué)習(xí)網(wǎng)首頁，培養(yǎng)學(xué)生的 a動(dòng)，投票點(diǎn)贊。審美情操，鼓勵(lì)學(xué)生不斷創(chuàng)作。隨時(shí)作品分享。加強(qiáng)學(xué)生交流，培養(yǎng)學(xué)生審美情操。收集學(xué)生的“贊”，鼓勵(lì)被'贊”學(xué)生繼續(xù)創(chuàng)作,給予學(xué)習(xí)成就感。教師在課件中發(fā)放“今日作業(yè)”作業(yè)的布置分層次，包括基礎(chǔ)性題目和提高性題目?；A(chǔ)性題目：1、教師在云班課上導(dǎo)入今天的理論知識(shí)題目，學(xué)生課下隨時(shí)隨地可以完成。2

30、、在云班課資源庫中下載素材，按要求把CSS樣式表應(yīng)用到網(wǎng)頁中；提高性題目：CSS選擇器中的屬性你還知道哪些呢？請(qǐng)您 收集好您所知道的屬性，下節(jié)課把它們帶到課堂上來和同學(xué)們分享吧!瀏覽課件中的課 后作業(yè)一欄，認(rèn) 真聽老師提出的 作業(yè)要求。學(xué)生掌握知識(shí)的程度 不同，所以能完成的 作業(yè)強(qiáng)度也不同。分 層次布置作業(yè)體現(xiàn)了 因材施教的理念，學(xué) 生不會(huì)因作業(yè)難度過 大而放棄完成?；A(chǔ)性的作業(yè)有助于 學(xué)生鞏固知識(shí)點(diǎn)，提 高性的作業(yè)幫助學(xué)生 提升技能水平。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽第三部分：【課后拓展】教師整理學(xué)生在本節(jié)課所遇到的問題,發(fā)布的交流問題，積極動(dòng)，就課堂上學(xué)生所遇到

31、以“頭腦風(fēng)暴”的活動(dòng)形式發(fā)布在移動(dòng)學(xué)習(xí)發(fā)言。的難題，集思廣益，讓學(xué)平臺(tái)上，學(xué)生在活動(dòng)中暢所欲言。生暢所欲言，培養(yǎng)學(xué)生的瀏覽其他同學(xué)的答案,探索能力和解決問題的臺(tái)匕目匕思考與自己的答案是否一樣，集思廣益，交流學(xué)習(xí)。能力。對(duì)學(xué)生的回答給予一定的獎(jiǎng)勵(lì)，幫助學(xué)生整理課下碎片時(shí)間，保證學(xué)習(xí)的連貫性。課后拓展教學(xué)環(huán)節(jié)教師活動(dòng)1學(xué)生活動(dòng)設(shè)計(jì)意圖瀏覽老師在手機(jī)平臺(tái)上課下發(fā)布“頭腦風(fēng)暴”活“頭腦風(fēng)暴”活動(dòng)，學(xué)生暢所欲言1、31對(duì)學(xué)生的發(fā)言情況給予點(diǎn)贊和打分。2、移動(dòng)平臺(tái)發(fā)布試題，隨時(shí)隨地測試留意云班課學(xué)習(xí)平臺(tái)的根據(jù)學(xué)生學(xué)習(xí)情況，教師在移動(dòng)學(xué)習(xí)平消息，按時(shí)完成教師布臺(tái)上發(fā)布鞏固本節(jié)課知識(shí)點(diǎn)的理論題目，學(xué)置的試卷題

32、目。生進(jìn)行測試，教師隨時(shí)隨地掌握學(xué)生學(xué)習(xí)情 況和學(xué)習(xí)進(jìn)度。教學(xué)環(huán)節(jié)教師活動(dòng)返回CSS樣式表課后拓展課 后 延 伸拓 展 技已密：00.16己等 4/20 （具1CD方I下列嘲個(gè)C55展性能招設(shè)黃含福型的內(nèi)補(bǔ)丁為20 30. 401 U顧時(shí)針方向）?A. pac'd（陽 10pK 20px 3Qpx 3pxB paodingn。即 ipxC . 3C0ng;5pK2Qpx IQpxD . ooddi n?gi；1DpK學(xué)生活動(dòng)在手機(jī)學(xué)習(xí)平臺(tái)上做測 試題，查看分?jǐn)?shù)，研究 答案解析，鞏固知識(shí)。設(shè)計(jì)意圖學(xué)生隨時(shí)隨地都可以用 手機(jī)做試卷，反復(fù)觀看知 識(shí)點(diǎn)，答卷完成能馬上看 到分?jǐn)?shù)與答案，還能看到

33、 錯(cuò)題分析，突破了傳統(tǒng)考 核的局限性，充分利用了 學(xué)生的碎片時(shí)間。3、采取鼓勵(lì)表揚(yáng)機(jī)制教師根據(jù)學(xué)生在云班課學(xué)習(xí)平臺(tái)上上 傳的作品以及討論、發(fā)表意見的活躍度、瀏 覽學(xué)習(xí)資料的次數(shù)給學(xué)生打分，并加入到學(xué) 生實(shí)際的平時(shí)成績中。4、教師在藍(lán)墨云班課平臺(tái)上動(dòng)態(tài)掌握學(xué)情-9as學(xué)弓將分9即11gr 1 U 14等電華»150640100n52O1&D6WIPOFW盥相2016064395Ik7貧謔民2015064195：rsr耳予第2Q15DSJ9955W等2Q1SQO»93!S54WBfcTfl?2O15D425901I'U-11皿R20150644905w12的湖“

34、201SQ64&9aty13王皓用20150412051熔14201506*105I卞，教師可以隨時(shí)掌握學(xué)生 的答題情況，了解學(xué)習(xí)進(jìn) 度，動(dòng)態(tài)地掌握學(xué)情。九【教學(xué)反思】(-)思得移動(dòng)教學(xué)平臺(tái)推送微課視頻、課件等教學(xué)資源到學(xué)生的移動(dòng)設(shè)備上，課堂內(nèi)外隨時(shí)開展投票、 頭腦風(fēng)暴等教學(xué)活動(dòng)，打破傳統(tǒng)教學(xué)局限性。三維動(dòng)畫化枯燥為生動(dòng)有趣，學(xué)生掌握理論知識(shí)再也不是難題。微課視頻在學(xué)生完成任務(wù)過程中幫助反復(fù)學(xué)習(xí)，提高學(xué)習(xí)效率。交互課件有別于傳統(tǒng)的PPt等教學(xué)課件，交互性強(qiáng)、操作方便、學(xué)生喜歡。信息化手段巧妙地融入到了傳統(tǒng)課堂教學(xué)中，以學(xué)生為中心，體現(xiàn)做中學(xué)做中教的教學(xué)理念, 使學(xué)生高效地掌握CSS樣式表的使用，達(dá)到教學(xué)目標(biāo)。通過統(tǒng)計(jì)學(xué)生自我評(píng)價(jià)調(diào)查表，大部分學(xué)生表示在知識(shí)點(diǎn)掌握度和課堂參與度上都能夠達(dá)到優(yōu) 秀的水平，通過信息化手段的使用，解決了枯燥的代碼帶來的學(xué)習(xí)難題，也由原來的4個(gè)課時(shí)縮短 為2個(gè)課時(shí)，大大提高了課堂的效率。器臥項(xiàng)目評(píng)價(jià)內(nèi)容及評(píng)鍛1麴動(dòng)構(gòu)織片B