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

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

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

3、基礎(chǔ)4、在以往的學(xué)習(xí)過程中有簡單接觸過嵌入式的CSS樣式5、學(xué)生缺乏動手能力6、對作品的評價缺乏系統(tǒng)的認(rèn)識和理解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é)不是一件很難的事情 且樂于參與時，再適當(dāng)加大自學(xué)的難度。在教學(xué)過程中，長期滲透自學(xué)理念，學(xué)生們已經(jīng)有了較強(qiáng)的自學(xué)能力和良好的課前預(yù)習(xí)習(xí)慣。 因此，盡管本課是一節(jié)綜合項目設(shè)計課程， 我還是在教學(xué)方法 中滲透自主探究學(xué)習(xí)法，相信學(xué)生有能力獲得成功。（三）學(xué)生個性特點分析可以通過4個詞語來高

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

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

6、學(xué)生積極主動參與到教學(xué)活動中，激發(fā)學(xué)生學(xué)習(xí)的興趣和求知欲。2、通過采用任務(wù)驅(qū)動、小組合作學(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é)生對作品的相互評價，培養(yǎng)他們客觀、辯證地判別事物的能力，又有利于老師掌握 教學(xué)信息的反饋，及時調(diào)整和改進(jìn)教學(xué)方法。5、我將混合教學(xué)模式運用于此次課程教學(xué)中，很好地銜接了 “課前一課堂一課后”。讓學(xué)生充 分發(fā)揮自己的自主探究能力，做好課前預(yù)習(xí)的功課；讓學(xué)生充分利

7、用課下的時間來鞏固技能， 提高 創(chuàng)作能力；該模式的開展充分調(diào)動了學(xué)生的積極性、 主動性和創(chuàng)造性。逐步讓學(xué)生從被動學(xué)習(xí)， 轉(zhuǎn) 變成主動學(xué)習(xí)。七教學(xué)媒體班級學(xué)習(xí)網(wǎng)站、藍(lán)墨云移動學(xué)習(xí)平臺、交互式課件、場景動畫、微課視頻、班級學(xué)習(xí)網(wǎng)、音樂、 極域教室系統(tǒng)、多媒體網(wǎng)絡(luò)教學(xué)平臺、計算機(jī)八教學(xué)流程整個教學(xué)過程實施，主要分三部分：（一）課前準(zhǔn)備（二）課堂教學(xué)（三）課后拓展官主探究 *,互助答號 預(yù)辦新知課前準(zhǔn)備口， 獲取知識限新誤講撞一、/卜情境創(chuàng)設(shè)課堂0 / 1游戲小結(jié) 就學(xué)甩'交謹(jǐn)拓展展提高舄著事再耳內(nèi)學(xué)舞學(xué)恃7課后"拓展第一部分：【課前準(zhǔn)備】（一）教師準(zhǔn)備1、制作準(zhǔn)備本課主要知識點，提

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

9、。2、課前按要求嘗試解釋什么是CSS羊式表，并思考教師在藍(lán)墨云班課學(xué)習(xí)平臺上發(fā)布的學(xué)習(xí) 思考問題。3、全體學(xué)生按“異質(zhì)分組”的方法進(jìn)行分組，為小組協(xié)作學(xué)習(xí)做好準(zhǔn)備。本次課將學(xué)生分為6個小組，每小組7人左右，每組1名組長。課前準(zhǔn)備10教師活動學(xué)生活動根據(jù)學(xué)情準(zhǔn)備以下學(xué)習(xí)資源，設(shè)計課前預(yù)習(xí)題目，讓學(xué)生做好課前任務(wù)：班級學(xué)習(xí)網(wǎng)1、在手機(jī)端上，使用藍(lán)墨云班課平臺瀏覽教師推送的學(xué)習(xí)資料學(xué)生已經(jīng)有課前預(yù)習(xí) 的良好習(xí)慣。利用藍(lán)墨云 班課學(xué)習(xí)平臺，幫助充分 利用課余時間，學(xué)習(xí)平臺 界面美觀，操作方便。學(xué) 生已經(jīng)習(xí)慣了這種預(yù)習(xí)模 式，在課堂上學(xué)習(xí)新知事 半功倍。課前準(zhǔn)備教師活動學(xué)生活動設(shè)計意圖動畫微課由教師自己

10、2、觀看微課視頻美美的換日姜差七搭配賽mp4交互式課件學(xué)生任務(wù)手冊網(wǎng)頁倏裝秀裝秀，視頻中利用類比的方法,把小姑娘比作是沒有換裝前的網(wǎng)頁界面，美麗的服飾比作 CSS樣式表，通過選擇不同的服飾（ CSS樣式表），來裝扮小姑娘（網(wǎng)頁界面），使得小姑娘體驗了一場“換裝秀”。學(xué)生完成觀看以下兩個觀看任務(wù):問題一：視頻中的小女孩在做什么？她和 CSS樣式表有什么關(guān)系？問題二：請結(jié)合其他學(xué)習(xí)材料，寫出CSS樣式表的概念。并把問題答案準(zhǔn)備好，帶到課堂上，教師進(jìn)行檢查。3、下載學(xué)生任務(wù)手冊，提前預(yù)習(xí)本節(jié)課的知識重點和難點。重點：外部樣式表的添加應(yīng)用;難點：修改CSS樣式表的屬性值。4、學(xué)生按“異質(zhì)分組”的方法進(jìn)

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

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

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

14、的知識，同時在上 課的開始就把氣氛調(diào) 動起來，提高課堂效 率。把課堂上枯燥的代碼概念講解轉(zhuǎn)變成學(xué)生 課前的自主探究和課 堂的交流互動。課前動畫視頻的引 入，把枯燥、難理解講授歸納總結(jié)CSS樣式表的概念：1、CSS是肝f布局與美化網(wǎng)貝的。2、CSS樣式表和HTML頁面是可以分離的。3、CSS是Cascading Style Sheets的英文縮與，即層疊樣式 表。4、CSS語言是一種標(biāo)記語言，因此不需要編譯，可以直接由 瀏覽器執(zhí)行(屬于瀏覽器解釋型語言)。5、CSS文件是一個文本文件，它包含了一些 CSS標(biāo)記,CSS 文件必須使用css為文件名后綴。6、CSS是大小寫不敏感的，CSS與css是一

15、樣的。CSS的分類：?外部樣式表?內(nèi)部樣式表?內(nèi)聯(lián)樣式認(rèn)真聽教師歸納 總結(jié)同學(xué)回答的 問題，結(jié)合自己 的課前預(yù)習(xí)，正 確理解CSS樣式 表的概念。的CSS樣式表很好地 類比成日常所見的“換裝”，幫助學(xué)生攻 破理論知識難關(guān)。先讓學(xué)生充分理解樣 式表的概念和了解樣 式表的種類，對接下 來添加外部樣式表有初步的了解。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)教學(xué)環(huán)節(jié)教師活動學(xué)生活動任務(wù)二：體驗“換裝秀”一一添加外部樣式表學(xué)生已經(jīng)了解了 CSS樣式表的概念及分類，準(zhǔn)備動手體驗網(wǎng)頁的“換裝”。(1)教師結(jié)合交互式課件示范案例，課堂演示網(wǎng)頁換裝秀C 帖鉗*TJPTM學(xué)生認(rèn)真聽教師

16、講解操作步驟?；貞浾n前預(yù)習(xí)的 知識點，認(rèn)真聽 課，找出預(yù)習(xí)時 遇到的難題的解 答。設(shè)計意圖 交互式課件融入到傳 統(tǒng)的講授模式中，輔 助了教師的課堂教 學(xué)，也讓講解更加清 晰明了，能很好地抓 住學(xué)生的課堂注意 力。 A. Ip教師一邊操作一邊講解如何在頁面中導(dǎo)入CSS外部樣式表：第一步：點擊CSS樣式面板一一附加樣式表第二步：在彈出對話框中點擊瀏覽按鈕，選擇指定文件凸iul.dC玄小ET -1TT -S J第三步：保存網(wǎng)頁，刷新，觀察瀏覽器中網(wǎng)頁的變化。學(xué)生已經(jīng)理解CSS樣 式表的概念，此時利 用交互式課件繼續(xù)示 范案例，良好的交互 頁面吸引學(xué)生的注意 力，教師邊播放課件 邊實際操作，加深學(xué) 生

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

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

19、域電子課室舉手，教師再次演示，反復(fù)觀看微課視頻，掌握知識點。任務(wù)三：化身”服裝設(shè)計師”一一修改CSS選擇器屬性值學(xué)生發(fā)現(xiàn)，添加外部樣式表后的網(wǎng)頁存在幾個局部問題。(1)引導(dǎo)學(xué)生發(fā)現(xiàn)網(wǎng)頁存在的問題，鼓勵學(xué)生大膽說出解決方法。同學(xué)們在添加外部 CSS樣式表后，對于網(wǎng)頁上一些不滿意的局部，該怎么去彳改？是否添加外部CSS樣式表后就不能改動？如何提高靈活度？(2)引入CSS選擇器屬性值概念，動畫視頻幫助理解。教學(xué)環(huán)節(jié)教師活動教師播放動畫微課，微課還是把網(wǎng)頁類比成小姑娘，這次的視頻不同于前面視頻的是小姑娘的服裝已經(jīng)不是固定的套裝，而是一件件上衣、裙子、褲子、鞋子等服飾單品，可以自由地搭配，準(zhǔn)確地說明了C

20、SS選擇器屬性值的概念及作用。新課講授(4) 交互課件，展示 CSS選擇器屬性值的修改交互式課件分步驟演示了CSS選擇器屬性值的修改及完成結(jié)果，幫助學(xué)生熟悉操作過程。1、修改網(wǎng)頁字體第步： 在 Dreamweaver中打開 reset.csst羊式表第二步：找到名稱為body的CSS選擇器body font-family: verdana, 三工二al;font-size： 22px;line-height; 1;background;f;第三步：對font-size:22Px進(jìn)行修改body (t-n 七一 fy電工已己二 a., Ari al;font-size:line-height:1

21、;tac.kgrand； ifff ； 2、修改布局大小第一步： 在 Dreamweaver中打開 style.css樣式表第二步：找到名稱為two-code的CSS選擇器學(xué)生活動觀看三維動畫時 與第一個動畫做 對比，思考兩個 視頻的相同之處 與不同之處。認(rèn)真聽講，結(jié)合 教師播放的交互 式課件，學(xué)習(xí) CSS選擇器屬性 值修改的步驟。同學(xué)間可以適當(dāng) 地討論，修改任 務(wù)二中的頁面設(shè) 計。下載素材，利用信息化教學(xué)資源，集中精神學(xué)習(xí)本節(jié)課的知識難點。設(shè)計意圖 動畫微課畫面美觀可 愛，和學(xué)生平時所接 觸的動畫人物類似， 此時學(xué)生完成任務(wù)一 和任務(wù)二會有點松 散，生動的三維動畫 視頻很好地引起學(xué)生 們的注

22、意。CSS選擇器屬性值的 修改是本次課的難 點，發(fā)放微課視頻和 學(xué)生練習(xí)手冊幫助學(xué) 生突破學(xué)習(xí)難點，扎 實地掌握學(xué)習(xí)重點。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽18教學(xué)環(huán)節(jié)課堂教學(xué)教師活動學(xué)生活動floats right;vidth 200px- heiafit: SO-Urx: LteXL-silign c/yt; bcxder; Ipx aclld fcee;第三步：對width和height進(jìn)行修改.two-codefloat; xigJit;position: relative;width: Spx;hslqht: 112px；text-algn: center;b

23、order: Lpx solid 抬已e;新 課 講 授(4)發(fā)放學(xué)生練習(xí)手冊和微課視頻，學(xué)生分組完成任務(wù)學(xué)生之間進(jìn)行討論，對任務(wù)二練習(xí)中網(wǎng)頁界面不協(xié)調(diào) 的地方進(jìn)行討論、修改，學(xué)習(xí)過程中借助教師的練習(xí)手冊 和微課視頻，達(dá)到學(xué)習(xí)目標(biāo)。中國通40DQjOA套的州返回學(xué)生任務(wù)手冊由fi«二；作出3裸I, «Mdrru步 ! 4 hr«UM|rM 裝"桿 |««| r flflt'ft"W* ,jWri-Lp H-1陣占, jK-KLBB： 1390-fH-EEI甘F W r*mr-ir：ii: Z?F ,什j Jj*4 ：

24、11 :&*L -1*&譽(yù)L iF，Sht中 p生。-.互 Es-gi，?1）樸平中，rif iHlt-ftr步_ L ml電m 1-rrrii 的 il! ttJlB世三坪用1It*代4、作品展示，教師點評教師及時對學(xué)生作品進(jìn)行點評、肯定及表揚。下載任務(wù)手冊，針對任務(wù)二的知 識點反復(fù)練習(xí)， 直到掌握該知識 點為止。接受老師和同學(xué)的點評任務(wù)手冊給學(xué)生清晰 明了的操作任務(wù)，要 求學(xué)生修改指定的屬 性值，在合理地美化 頁面，由淺入深幫助 學(xué)生突破難點。教師及時的點評、肯 定，給予學(xué)生繼續(xù)學(xué) 習(xí)的動力。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽課堂教學(xué)21教學(xué)環(huán)節(jié)教師

25、活動學(xué)生活動設(shè)計意圖每個小組長對組內(nèi)人員進(jìn)行分配。融入自己的角色，積極討論發(fā)情境創(chuàng)設(shè)模擬真實企 業(yè)項目幫助學(xué)生鞏固 提升，培養(yǎng)職業(yè)素養(yǎng)。 本環(huán)節(jié)是學(xué)生喜歡的 環(huán)節(jié)，此時學(xué)生可以1、情景創(chuàng)設(shè)A公司請了網(wǎng)站設(shè)計公司設(shè)計一個公司的宣傳網(wǎng)站，網(wǎng)站設(shè)計公司已經(jīng)設(shè)計了初稿，現(xiàn)在A公司對該網(wǎng)站進(jìn)行初步的驗收。人員分配：1、全體學(xué)生按“異質(zhì)分組”的方法進(jìn)行分組表意見，把本課大膽提出意見，發(fā)揮2、組內(nèi)選出兩位同學(xué)為 A公司的網(wǎng)站驗收人員，對 公司網(wǎng)站進(jìn)行驗收，指出網(wǎng)頁需要修改的地方。學(xué)習(xí)的知識點用到本環(huán)節(jié)中來。自己的創(chuàng)意，同時激發(fā)學(xué)生的審美情操。境 創(chuàng) 設(shè)鞏 固 提 升3、組內(nèi)選出兩位同學(xué)為網(wǎng)站設(shè)計公司的設(shè)計師

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

27、登錄14計算 機(jī)評價平臺，上 傳小組作品，同 時對其它小組作 品進(jìn)行打分。發(fā)放的任務(wù)手冊所涉 及的知識點更廣更 深，同時開放網(wǎng)絡(luò)， 讓學(xué)生自主地上網(wǎng)搜 索，有選擇性地利用 資源更好完成作品。該評價平臺交互性 強(qiáng)，學(xué)生評分后能馬 上看到自己和其他小 組的得分詳細(xì)情況， 通過組間溝通，能促 進(jìn)小組合作意識，培 養(yǎng)學(xué)生與他人合作的 能力。獎勵機(jī)制給予學(xué)生榮 譽(yù)感和學(xué)習(xí)成就感， 鼓勵學(xué)生不斷進(jìn)步。瀏覽課件中的課 后作業(yè)一欄，認(rèn) 真聽老師提出的 作業(yè)要求。作業(yè)布置學(xué)生掌握知識的程度 不同，所以能完成的 作業(yè)強(qiáng)度也不同。分 層次布置作業(yè)體現(xiàn)了 因材施教的理念，學(xué) 生不會因作業(yè)難度過 大而放棄完成?；A(chǔ)性的

28、作業(yè)有助于 學(xué)生鞏固知識點，提 高性的作業(yè)幫助學(xué)生 提升技能水平。教學(xué)環(huán)節(jié)教師活動學(xué)生活動設(shè)計意圖課1、交互課件快問快答梳理知識點1、小組競爭玩游幫助學(xué)生對所學(xué)的知通過交互式課件中的答題環(huán)節(jié)，與學(xué)生進(jìn)行快問快答戲，復(fù)習(xí)本節(jié)課識進(jìn)行總結(jié)歸納，理堂大考驗的游戲。學(xué)生“闖關(guān)”成功后便可進(jìn)入到下一個環(huán)的知識要點。清思路。小節(jié)。3、思考教師預(yù)留讓教師能夠掌握學(xué)生結(jié)幫助學(xué)生梳埋基礎(chǔ)知識點時，留意不同層次學(xué)生的的思考問題，為本節(jié)課的學(xué)習(xí)情況，學(xué)習(xí)情況。下節(jié)課的學(xué)習(xí)做做好后續(xù)的備課工設(shè)計難度較大的題目，為下節(jié)課的知識點埋下鋪墊。好準(zhǔn)備。作。拓課后登錄班級學(xué)習(xí)網(wǎng)，欣賞作品登錄班級學(xué)習(xí)加強(qiáng)學(xué)生交流，培養(yǎng)學(xué)生作品上

29、傳到班級學(xué)習(xí)網(wǎng)上，學(xué)生在學(xué)習(xí)網(wǎng)上交網(wǎng)，欣賞同學(xué)的學(xué)生審美情操。收集展流、評論，并根據(jù)自己的喜好進(jìn)行投票點贊。教師整理投個人作品，交流學(xué)生的“贊”，鼓勵被交票排行，把優(yōu)秀作品展示在班級學(xué)習(xí)網(wǎng)首頁，培養(yǎng)學(xué)生的互動，投票點贊?！百潯睂W(xué)生繼續(xù)創(chuàng)作，流審美情操，鼓勵學(xué)生不斷創(chuàng)作。隨時作品分享。給予學(xué)習(xí)成就感。教師在課件中發(fā)放“今日作業(yè)”作業(yè)的布置分層次，包括基礎(chǔ)性題目和提高性題目?；A(chǔ)性題目：1、教師在云班課上導(dǎo)入今天的理論知識題目，學(xué)生課下隨時隨地可以完成。2、在云班課資源庫中下載素材，按要求把 CSS樣式表應(yīng)用到網(wǎng)頁中；提高性題目：CSS選擇器中的屬性你還知道哪些呢？請您 收集好您所知道的屬性，下節(jié)

30、課把它們帶到課堂上來和同 學(xué)們分享吧！2016全國中等職業(yè)學(xué)校“創(chuàng)新杯”教師信息化教學(xué)和說課大賽23教學(xué)環(huán)節(jié)課 后 延 伸拓 展 技 能第三部分：【課后拓展】課后拓展教師活動1、“頭腦風(fēng)暴”活動，學(xué)生暢所欲言教師整理學(xué)生在本節(jié)課所遇到的問題,以“頭腦風(fēng)暴”的活動形式發(fā)布在移動學(xué)習(xí)平臺上，學(xué)生在活動中暢所欲言。網(wǎng)站前臺讀術(shù)學(xué)生活動瀏覽老師在手機(jī)平臺上 發(fā)布的交流問題，積極 友口。瀏覽其他同學(xué)的答案， 思考與自己的答案是否 一樣，集思廣益，交流 學(xué)習(xí)。SE月詳情七什上我近式三生Kfr書P設(shè)計意圖課下發(fā)布“頭腦風(fēng)暴”活 動，就課堂上學(xué)生所遇到 的難題，集思廣益，讓學(xué) 生暢所欲言，培養(yǎng)學(xué)生的 探索能力

31、和解決問題的 能力。對學(xué)生的回答給予一定的獎勵，幫助學(xué)生整理課 下碎片時間，保證學(xué)習(xí)的 連貫性。對學(xué)生的發(fā)言情況給予點贊和打分。2、移動平臺發(fā)布試題，隨時隨地測試根據(jù)學(xué)生學(xué)習(xí)情況， 教師在移動學(xué)習(xí)平臺上發(fā)布鞏固本節(jié)課知識點的理論題目，學(xué)生進(jìn)行測試，教師隨時隨地掌握學(xué)生學(xué)習(xí)情況和學(xué)習(xí)進(jìn)度。留意云班課學(xué)習(xí)平臺的 消息，按時完成教師布 置的試卷題目。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽課后拓展25教學(xué)環(huán)節(jié)教師活動學(xué)生活動設(shè)計意圖逅回CSS樣式表交卷課 后 延 伸拓 展 技 能已有笛迷已誓 4 r?nag軌下列哪個血/悔推整窗,看鼻揖的內(nèi)樸丁的1配20. M, 40 （蚓制方面?

32、A . Meding： 10p< 20px QOpx <<pxB !pdodlr>g：iOp« ipxC DAOdir>gpx20px lOpxD. 3ndlnj!i0p<3、米取鼓勵表揚機(jī)制教師根據(jù)學(xué)生在云班課學(xué)習(xí)平臺上上 傳的作品以及討論、發(fā)表意見的活躍度、瀏 覽學(xué)習(xí)資料的次數(shù)給學(xué)生打分，并加入到學(xué)生實際的平時成績中。4、教師在藍(lán)墨云班課平臺上動態(tài)掌握學(xué)情css樣式裝m社由需?*X華初時藤崎ioo100IT-5100srstrJ 16KE If20150G43Kw才MUR2O1&06A155'B于Qt&DCA明SIS&#

33、39;9東事*匕a10KTSmi 劍 35期Lnw睚GINUI制KSMir 13王坪川asIlk14KK20, 5064口Afi在手機(jī)學(xué)習(xí)平臺上做測 試題，查看分?jǐn)?shù)，研究 答案解析，鞏固知識。學(xué)生隨時隨地都可以用 手機(jī)做試卷，反復(fù)觀看知 識點，答卷完成能馬上看 到分?jǐn)?shù)與答案，還能看到 錯題分析，突破了傳統(tǒng)考 核的局限性，充分利用了 學(xué)生的碎片時間。教師可以隨時掌握學(xué)生 的答題情況，了解學(xué)習(xí)進(jìn) 度，動態(tài)地掌握學(xué)情。2016全國中等職業(yè)學(xué)?！皠?chuàng)新杯”教師信息化教學(xué)和說課大賽九【教學(xué)反思】（一）思得移動教學(xué)平臺推送微課視頻、課件等教學(xué)資源到學(xué)生的移動設(shè)備上，課堂內(nèi)外隨時開展投票、 頭腦風(fēng)暴等教學(xué)活動

34、，打破傳統(tǒng)教學(xué)局限性。三維動畫化枯燥為生動有趣，學(xué)生掌握理論知識再也不是難題。微課視頻在學(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)計學(xué)生自我評價調(diào)查表，大部分學(xué)生表示在知識點掌握度和課堂參與度上都能夠達(dá)到優(yōu) 秀的水平，通過信息化手段的使用，解決了枯燥的代碼帶來的學(xué)習(xí)難題， 也由原來的4個課時縮短 為2個課時，大大提高了課堂的效率。時於向券就W爆月業(yè)式焉的枕依A配等K找14 ft s J7 4»13 懵ilW力(0-5把