1、 本次課設計課時為2課時。二教材分析（一）知識內容分析本課內容選自高等教育出版社的網頁設計與制作（HTML+CSS+JavaScript），第四章CSS的應用，設計課時為2個課時。本章在整個課程體系里起到承上啟下的作用，它既是對前面的基礎章節的綜合深化，又開啟了后續DIV+CSS知識對接。在本課之前，學生基本掌握網頁制作的主要知識點，有一定的代碼基礎。而本課內容CSS樣式表的使用是學生進行網頁設計的基礎和提高。學生通過理解CSS樣式、選擇器的概念，掌握應用外部CSS樣式表、修改CSS選擇器屬性的方法來設計和美化網頁，并能對所設計的作品進行評價，培養學生的設計、審美能力及職業素養和創新精神。本次

2、教學活動對學生的網頁制作與設計起著基礎、提高作用。（二）我對教材的處理方法1、把教材所涉及的知識點進行分層，使學生由簡入深理解和掌握CSS樣式表的使用。2、對教材內容進行二次處理，制作原創案例，使內容更加適合我班學生學習。3、由CSS樣式表的使用引導學生對網頁界面設計的分析。三學生分析教學對象為我校計算機應用專業中職二年級的學生。學生學習網頁制作已有一個學期，對這節課之前的學生情況分析如下：（一）學生知識能力分析1、學生能熟練使用Dreamweaver軟件2、對于靜態頁面的設計有一定的基礎3、學生有簡單的代碼基礎4、在以往的學習過程中有簡單接觸過嵌入式的CSS樣式5、學生缺乏動手能力6、對作品

3、的評價缺乏系統的認識和理解7、學生技能水平出現分化現象（二）學生自學能力分析我在課堂教學過程中，注重在學生認知水平能夠承受的前提下安排一些適合自學的內容讓學生自己掌握，從中培養學生的自學能力。開始自學的內容簡單，等學生認為自學不是一件很難的事情且樂于參與時，再適當加大自學的難度。在教學過程中，長期滲透自學理念，學生們已經有了較強的自學能力和良好的課前預習習慣。因此，盡管本課是一節綜合項目設計課程，我還是在教學方法中滲透自主探究學習法，相信學生有能力獲得成功。（三）學生個性特點分析可以通過4個詞語來高度概括：“樂于探索”、“喜歡挑戰”、“個性鮮明”、但卻“缺乏毅力”。四教學目標（一）知識與技能1

4、、理解CSS樣式表、CSS選擇器的概念。2、學會為HTML頁面添加外部CSS樣式表。3、修改CSS樣式表的屬性值。（二）過程與方法依托班級學習網站、校園網資源庫、藍墨云班課移動教學平臺為載體，使用交互式課件、三維動畫、微課視頻輔助教學，通過小組合作探究、自主學習等方式，讓學生掌握添加CSS樣式表的過程和修改屬性值的方法。（三）情感目標在輔導學生完成任務的過程中，激發學生的審美情操，創設與實際崗位相結合的情境，培養學生的職業素養。五教學重點及難點（一）教學重點外部CSS樣式表的添加應用。（二）教學難點修改CSS樣式表的屬性值。六教法與學法（一）教學思想當前職業中學計算機專業教學的主流取向是以建構

5、主義的教學思想與學習理論為指導去組織和實施各項教學活動。在探索基于建構主義理論的教學模式的過程中，本次教學活動采用信息化教學設計理念，利用信息技術創設情景、開發教學資源學習網站，利用移動教學平臺，以學生為中心，學生在老師精心創設的情境、自主探究空間、交流與協作活動、自我評價體系等學習環境中充分發揮自身的主動性和積極性，對所學的知識進行意義建構，并用其所學解決實際問題。（二）教學策略1、課堂融入信息化手段微課視頻、三維動畫、交互式課件，依托班級學習網、藍墨云班課移動學習平臺為載體，引導學生積極主動參與到教學活動中，激發學生學習的興趣和求知欲。2、通過采用任務驅動、小組合作學習的教學方法，引導學生

6、在共同完成作品的模仿和創作過程中，培養“互幫互學、寬容待人、榮辱與共”的合作精神。3、通過采用自主探究學習的教學方法，引導學生充分利用教學資源網站完成自己的課前任務，從而增強學生自主探究學習的精神和解決問題的能力。4、通過學生對作品的相互評價，培養他們客觀、辯證地判別事物的能力，又有利于老師掌握教學信息的反饋，及時調整和改進教學方法。5、我將混合教學模式運用于此次課程教學中，很好地銜接了“課前課堂課后”。讓學生充分發揮自己的自主探究能力，做好課前預習的功課；讓學生充分利用課下的時間來鞏固技能，提高創作能力；該模式的開展充分調動了學生的積極性、主動性和創造性。逐步讓學生從被動學習，轉變成主動學習

7、。七教學媒體班級學習網站、藍墨云移動學習平臺、交互式課件、場景動畫、微課視頻、班級學習網、音樂、極域教室系統、多媒體網絡教學平臺、計算機整個教學過程實施，主要分三部分：一）課前準備二）課堂教學三）課后拓展自主砂秦偶導入J新裸講匿誼戲小垢交流拓展第一部分：【課前準備】一）教師準備1、制作準備本課主要知識點，提前把本課學習資源發放到藍墨云班課學習平臺上。2、在藍墨云班課學習平臺及班級學習網先發布學習問題供學生預習思考，并收集學生在網上提交的問題回答，充分了解學生對本節課的預習情況。3、制作準備CSS樣式表的使用交互式課件。4、制作準備CSS樣式的使用系列微課視頻一一添加外部CSS樣式表、CSS樣式

8、屬性值的修改等。5、制作準備美美的換裝秀、美美的搭配秀系列的動畫。6、制定學生課堂表現評價量規表以及設計作品的評價量規表。7、在平常的教學過程中，就有意識地根據水平差異讓學生結成學習伙伴，形成了相對固定的合作小組。（二）學生準備1、自主預習CSS樣式表的使用交互式課件，觀看微課視頻，完成微課配套問題。2、課前按要求嘗試解釋什么是CSS樣式表，并思考教師在藍墨云班課學習平臺上發布的學習思考問題。3、全體學生按“異質分組”的方法進行分組，為小組協作學習做好準備。本次課將學生分為6個小組，每小組7人左右，每組1名組長。課前準備教師活動學生活動設計意圖根據學情準備以下學習資源，設計課前預習題1、在手機

9、端上，使用藍墨云班課學生已經有課前預習目，讓學生做好課前任務:平臺瀏覽教師推送的學習資料的良好習慣。利用藍墨云班級學習網班級學習部落略S.H|.F,L.n生已經習慣了這種預習模式，在課堂上學習新知事班課學習平臺，幫助充分利用課余時間，學習平臺界面美觀，操作方便。學半功倍。教師活動小組評價平臺爭鋼額！css樣式表系列微課交互式課件學生任務手冊忙主任務手腑處三輙:埜遷刖霉三直.EMubrh.Ph口?7才rtaih.13亡:?界二汨.屯寺訂Nr為h哦黑出ftifi!-SMmzrfmunJ：訐就盟二5吠云駛-i胡:戶卄p孚世IWFHF巾廿矗疥I*翳樣?MMiJHIHiR匚*iWUM課前準備學生活動2、

10、觀看微課視頻美美的換裝秀視頻中利用類比的方法，把小姑娘比作是沒有換裝前的網頁界面，美麗的服飾比作CSS樣式表，通過選擇不同的服飾（CSS樣式表），來裝扮小姑娘（網頁界面），使得小姑娘體驗了一場“換裝秀”學生完成觀看以下兩個觀看任務：問題一：視頻中的小女孩在做什么？她和CSS樣式表有什么關系？問題二：請結合其他學習材料，寫出CSS樣式表的概念。并把問題答案準備好，帶到課堂上，教師進行檢查。3、下載學生任務手冊，提前預習本節課的知識重點和難點。重點：外部樣式表的添加應用；難點：修改CSS樣式表的屬性值。4、學生按“異質分組”的方法進行分組，為小組協作學習做好準備。設計意圖動畫微課由教師自己設計與制

11、作，靈活度高、適用性強，恰當地詮釋CSS樣式表的概念及作用，學生容易理解與接收。利用學生有課前預習習慣這一特點，讓學生帶著問題觀看視頻，并要求在課堂上會進行檢查，學生主動進行探索，把課堂講授模式變成學生課前的自主探究，即提高了課堂的效率，學生也學得快，記得牢。逐步向“翻轉課堂”模式靠攏，讓課堂學習更加高效，有效。在平常的教學過程中，就有意識地根據水平差異讓學生結成學習伙伴，形成了相對固定的合作小組，在突破教學難點時，小組內的“小講師”也起到了非常大的作用，既幫助了其他同學，帶動了課堂的氣氛，也促進了同學之間的交流互動。第二部分：【課堂教學】教師活動課堂教學學生活動設計意圖案例導入：教師先向學生

12、展示排版混亂、還沒有美化的HTML網頁：案例導入接著教師僅僅用了一個操作，幫網頁添加了一個CSS樣式表，便幫網頁搖身一變，變成同學們所熟悉的淘寶網首頁。觀察學生反映，了解學生的課前預習情況。解讀案例：理解教師給出的案例，認真分析。學生聚精會神，欣賞教師變的“小魔術”集中注意力，回顧課前預習的內容。課前預習的微課通過案例的導入，學生進行頭腦風暴，大膽討論，對接下來的新課做鋪墊，也順利導入今天的新課程。用案例引起學生思考，搖身一變的網頁能很好地引起學/r.、宀生注意。課堂教學教學環節教師活動學生活動設計意圖任務一：檢查課前預習一認識CSS樣式表學生們已經做了鼓勵學生說出課前預(1)提問：老師剛才做

13、了什么操作？充分的課前預習習的知識，同時在上鼓勵學生說出自己的想法；工作，充滿信心課的開始就把氣氛調肯定學生的回答并給予贊許和表揚，讓學生繼續保持回答：“幫頁面添動起來，提高課堂效課前預習的好習慣；加了CSS樣式率。觀察學生預習情況，留意課前功課未完成的學生。表!”。(2)趁熱打鐵，再次提問：“CSS樣式表這么神奇，學生回顧課前教把課堂上枯燥的代碼有沒有同學知道它的概念？”師布置的兩個問概念講解轉變成學生引導學生回顧課前預習內容，把教師講”轉變成題，嘗試把CSS課前的自主探究和課“學生說”。樣式表的概念說堂的交流互動。(3)教師檢査并歸納總結學生的回答出來。新完成今天課堂的第一個任務：理解CS

14、S樣式表的概課前動畫視頻的引課念。入，把枯燥、難理解講歸納總結CSS樣式表的概念：認真聽教師歸納的CSS樣式表很好地1、CSS是用于布局與美化網頁的。總結同學回答的類比成日常所見的授2、CSS樣式表和HTML頁面是可以分離的。問題，結合自己“換裝”，幫助學生攻3、CSS是CascadingStyleSheets的央文縮與，即層疊樣式的課前預習，正破理論知識難關。表。確理解CSS樣式先讓學生充分理解樣4、CSS語言是一種標記語言，因此不需要編譯，可以直接由表的概念。式表的概念和了解樣瀏覽器執行(屬于瀏覽器解釋型語言)。式表的種類，對接下5、CSS文件是一個文本文件，它包含了一些CSS標記,CSS

15、來添加外部樣式表有文件必須使用css為文件名后綴。初步的了解。6、CSS是大小寫不敏感的,CSS與css是一樣的。CSS的分類：外部樣式表內部樣式表內聯樣式課堂教學課堂教學 教學環節教師活動學生活動設計意圖任務二：體驗“換裝秀”添加外部樣式表學生認真聽教師交互式課件融入到傳學生已經了解了CSS樣式表的概念及分類，準備動手體驗網頁的“換裝”(1)教師結合交互式課件示范案例，課堂演示Hft片網頁換裝秀教師一邊操作一邊講解如何在頁面中導入CSS外部講解操作步驟。回憶課前預習的知識點，認真聽課，找出預習時遇到的難題的解答。統的講授模式中，輔助了教師的課堂教學，也讓講解更加清晰明了，能很好地抓住學生的課

16、堂注意力。學生已經理解CSS樣樣式表:第一步:點擊CSS樣式面板附加樣式表第二步:在彈出對話框中點擊瀏覽按鈕，選擇指定文件毗ISMI*第三步：保存網頁，刷新，觀察瀏覽器中網頁的變化。式表的概念，此時利用交互式課件繼續示范案例，良好的交互頁面吸引學生的注意力，教師邊播放課件邊實際操作，加深學生的印象。教學環節教師活動學生活動設計意圖(2)播放“添加外部CSS樣式表”微課視頻新課講授教師演示完畢，播放添加外部CSS樣式表相關知識點的微課視頻，幫助學生更好地記住操作步驟。(3)學生小試牛刀，微課相輔任務要求：1、下載素材，在原始的網頁界面添加外部CSS樣式表2、對比添加不同的CSS樣式表，頁面的變化

17、如何？教師進行分層指導：1、學習能力強一一利用交互式課件獨立完成任務；2、學習能力一般一一教師巡堂時給予輔導；3、學習能力弱一一在極域電子課室舉手，教師再次演示，反復觀看微課視頻，掌握知識點。任務三：化身“服裝設計師”一修改CSS選擇器屬性值學生發現，添加外部樣式表后的網頁存在幾個局部問題。引導學生發現網頁存在的問題，鼓勵學生大膽說出解決方法。同學們在添加外部CSS樣式表后，對于網頁上一些不滿意的局部，該怎么去修改？是否添加外部css樣式表后就不能改動？如何提高靈活度？引入CSS選擇器屬性值概念，動畫視頻幫助理解。認真觀看微課，熟記幾個重要的操作步驟。下載素材，觀察還沒添加CSS樣式表之前的網

18、頁界面；借助微課,邊學邊做，觀察添加CSS后的頁面變化。跟不上學習進度的學生可以在電子舉手，觀看教師的再次演示。*基a”.I-*-*-IJ1觀察添加CSS樣式表的頁面，發現與界面格格不入的地方，并思考用什么方法改進。觀看美美的搭配秀，思考微課的類比關系微課更加直觀直接地傳授操作步驟知識點，容易操作，學生可反復觀看，利用微課視頻攻克自己的學習弱點。分層次地指導學生完成任務，有效地提高了學生吸收知識的效率，既可以讓學習能力強的學生保持自主探究的好習慣，也可以保證其他學生正常學習基礎知識，跟得上學習的進度。分層次指導學生也能改善了教師與學生的關系，從而提咼師生合作、交流的效率。讓學生自己“發現問題”

19、由問題引出下一個知識點。教學環節教師活動學生活動設計意圖新課講授教師播放動畫微課，微課還是把網頁類比成小姑娘，這次的視頻不同于前面視頻的是小姑娘的服裝已經不是固定的套裝，而是一件件上衣、裙子、褲子、鞋子等服飾單品，可以自由地搭配，準確地說明了CSS選擇器屬性值的概念及作用。(4)交互課件，展示CSS選擇器屬性值的修改交互式課件分步驟演示了CSS選擇器屬性值的修改及完成結果，幫助學生熟悉操作過程。1、修改網頁字體第一步：在Dreamweaver中打開reset.css樣式表第二步：找到名稱為body的CSS選擇器bodyfont-fami1y:verdanafArial;font-size:22

20、px;line-height:1;backgrcmnd:#fff;第三步：對font-size:22px進行修改tody；:Eon匸一family:工厲3/1己fArial;fontsize:lpx;lineheight:1;bac.kgroand;2、修改布局大小第一步：在Dreamweaver中打開style.css樣式表第二步：找到名稱為two-code的CSS選擇器觀看三維動畫時與第一個動畫做對比，思考兩個視頻的相同之處與不同之處。認真聽講，結合教師播放的交互式課件，學習CSS選擇器屬性值修改的步驟。同學間可以適當地討論，修改任務二中的頁面設計。下載素材，利用信息化教學資源，集中精神學

21、習本節課的知識難點。動畫微課畫面美觀可愛，和學生平時所接觸的動畫人物類似，此時學生完成任務一和任務二會有點松散，生動的三維動畫視頻很好地引起學生們的注意。CSS選擇器屬性值的修改是本次課的難點，發放微課視頻和學生練習手冊幫助學生突破學習難點，扎實地掌握學習重點。課堂教學 教學環節I教師活動學生活動設計意圖.two-codefloat;riglLt;posi七rela七Vidth.：200px：ii皂iaht:SOOpx;l已x匸一ail1gn:center;border:lpxsolid#亡ee;第三步：對width和height進行修改tw一匚口厲巳float:right;position:

22、relativ皂；width:94px;h皂ight:112px;t皂xt-align:center;border:lpxsolid#eee;（4）發放學生練習手冊和微課視頻，學生分組完成任務新課講授學生之間進行討論，對任務二練習中網頁界面不協調的地方進行討論、修改，學習過程中借助教師的練習手冊和微課視頻，達到學習目標。返回學生任務手冊下載任務手冊，針對任務二的知識點反復練習，直到掌握該知識點為止。任務手冊給學生清晰明了的操作任務，要求學生修改指定的屬性值，在合理地美化頁面，由淺入深幫助學生突破難點。步宙一iETr*uii*waRSPURr*i*i.rt33tT-fileraSUB-Sffra

23、fc-aax-i.Eajlj廿R?拠Hjgr-:iI亠和i51AMill-5*i二Ml-接受老師和同學的點評4、作品展示，教師點評教師及時的點評、肯定，給予學生繼續學習的動力。教師及時對學生作品進行點評、肯定及表揚。課堂教學教學環節教師活動學生活動設計意圖1、情景創設每個小組長對組情境創設模擬真實企A公司請了網站設計公司設計一個公司的宣傳網站，內人員進行分業項目幫助學生鞏固網站設計公司已經設計了初稿，現在A公司對該網站進配。提升，培養職業素養。行初步的驗收。融入自己的角本環節是學生喜歡的人員分配：色，積極討論發環節，此時學生可以1、全體學生按“異質分組”的方法進行分組表意見，把本課大膽提出意見

24、，發揮2、組內選出兩位冋學為A公司的網站驗收人員，對學習的知識點用自己的創意，同時激情公司網站進行驗收，指出網頁需要修改的地方。到本環節中來。發學生的審美情操。境3、組內選出兩位冋學為網站設計公司的設計師，針創對A公司提出的要求，對網站進行修改。小組下載素材，發放的任務手冊所涉2、發放素材，學生開始模擬情景組內成員輪流分及的知識點更廣更設情境模擬過程中，教師發放任務手冊在學習平臺上，配角色，體驗實深，同時開放網絡，開放網絡讓學生在互聯網上瀏覽收集更多學習資源。際生活中網頁設讓學生自主地上網搜鞏教師巡堂，對于學生的疑問及時指導與解決。計公司與客戶之索，有選擇性地利用3、小組互評，教師點評間的交流

25、溝通，資源更好完成作品。固登錄14計算機評價平臺，小組長把小組作品上傳到并把作品做到最提平臺上，其他小組對所有的小組作品在科學性、思想性、好。該評價平臺交互性升技術性、藝術創作性等方面進行評價打分。2、登錄14計算強，學生評分后能馬每個小組都能看到分數的詳細情況和所有投票排行。機評價平臺，上上看到自己和其他小傳小組作品，同組的得分詳細情況，時對其它小組作通過組間溝通，能促品進行打分。進小組合作意識，培冊;grapHg.!,IUW,rtM*iR樂1養學生與他人合作的fi-i：a1Wlti：扌17”尺財邸-4V醫-ivttmimFfii|能力。“ul1It-W-Ki:石*tEZ呻KH-RSViUH

26、-lSS.r獎勵機制給予學生榮矍：*力-jii.AsE4i!taHwaim*&jm*mswfli9-ikkiiiuija-a:譽感和學習成就感，獲得投票排行第一的小組可獲得“本日設計之星”頭鼓勵學生不斷進步。銜，教師在平時成績中加分。教學環節教師活動學生活動設計意圖課1、交互課件快問快答梳理知識點1、小組競爭玩游幫助學生對所學的知堂通過交互式課件中的答題環節,與學生進行快問快答戲，復習本節課識進行總結歸納，理大考驗的游戲。學生“闖關”成功后便可進入到下一個環的知識要點。清思路。小節。3、思考教師預留讓教師能夠掌握學生結幫助學生梳理基礎知識點時，留意不同層次學生的的思考問題，為本節課的學習情況，

27、學習情況。下節課的學習做做好后續的備課工設計難度較大的題目，為下節課的知識點埋下鋪墊。好準備。作。拓課后登錄班級學習網，欣賞作品登錄班級學習加強學生父流，培養展學生作品上傳到班級學習網上，學生在學習網上交網，欣賞同學的學生審美情操。收集流、評論，并根據自己的喜好進行投票點贊。教師整理投個人作品，交流學生的“贊”，鼓勵被交票排行，把優秀作品展示在班級學習網首頁，培養學生的互動，投票點贊。“贊”學生繼續創作，流審美情操，鼓勵學生不斷創作。隨時作品分享。1給予學習成就感。瀏覽課件中的課學生掌握知識的程度IMCSSjMfcDOW卜諫后作業教師在課件中發放“今日作業”基吧性題目:1.巒也云Mill上#人

28、今天的理ifi劃換回.字生遷下冃到諏中；CS5站16申的民性fl；還鼻些星？Hlil的II性,們弔更iiMLXKl同予忙I甘陀后作業一欄，認真聽老師提出的作業要求。不同，所以能完成的作業強度也不同。分層次布置作業體現了因材施教的理念，學生不會因作業難度過大而放棄完成。基礎性的作業有助于作業的布置分層次，包括基礎性題目和提高性題目。基礎性題目：1、教師在云班課上導入今天的理論知識題目，學生課下隨時隨地可以完成。2、在云班課資源庫中下載素材，按要求把CSS樣式表應用到網頁中;提高性題目：CSS選擇器中的屬性你還知道哪些呢？請您收集好您所知道的屬性，下節課把它們帶到課堂上來和同學們分享吧!學生鞏固知

29、識點，提高性的作業幫助學生提升技能水平。 第三部分：【課后拓展】課后拓展教學環節教師活動學生活動設計意圖1、“頭腦風暴”活動，學生暢所欲言教師整理學生在本節課所遇到的問題，以“頭腦風暴”的活動形式發布在移動學習瀏覽老師在手機平臺上發布的交流問題，積極發言。平臺上，學生在活動中暢所欲言。課后延伸拓展技能討呂洋出ISacSSRtSM.州十也合出現閃弗式平起昨用前佶;卍1話司寧門聊段抿宮I魅芳犬二通昉時慣卷直劍了遠亍問軽.不過還甘我對麗饑CSM?式蕭不起郢覧是麻斥審f3016G-&13這木毎M有舁高嫡次咒上檔復了妞搭詛書抽卻戲訐底謝燈帛貳吝11T.不16用了”1,應誦曲星這禪，曆螳齢對學生的發言情況

30、給予點贊和打分。2、移動平臺發布試題，隨時隨地測試根據學生學習情況，教師在移動學習平臺上發布鞏固本節課知識點的理論題目，學生進行測試，教師隨時隨地掌握學生學習情況和學習進度。瀏覽其他同學的答案，思考與自己的答案是否一樣，集思廣益，交流學習。留意云班課學習平臺的消息，按時完成教師布置的試卷題目。課下發布“頭腦風暴”活動，就課堂上學生所遇到的難題，集思廣益，讓學生暢所欲言，培養學生的探索能力和解決問題的能力。對學生的回答給予一定的獎勵，幫助學生整理課下碎片時間，保證學習的連貫性。教學環節教師活動課后拓展近回CSSt式表巳用：00;16巳吾匚4/20（扶分）學生活動在手機學習平臺上做測試題，查看分數，研究答案解析，鞏固知識。課后延伸拓展技能下列嘟個職離性能夠設盍盤棋型的円補丁10.20.30.40隠時針方向)?A.padcirngilOpZDpxSCfcw40aB.paddirhgJDpxipKC.padding:5px20psBithl(57JCl倩工霽力駅舉思號.站井寺心騙i#耐at*岡皆苫関冬Hl的MlfirHJKffdMI十爼合悴學習的皚:B,5-?)Ci卅俺