CSS样式表的使用创新说课大赛教学设计

2016全国中等职业学院“创新杯”教师信息化教学和教案大赛一课时本次课设计课时为2课时。二教材分析（一）知识内容探讨本课内容选自高等教育出版社的《网页设计与制作（HTML+CSS+JavaScript）》，第四章《CSS的应用》，设计课时为2个课时。本章在整个课程模式里起到承上启下的作用，它既是对上面的基础章节的综合推进，又进入了后续DIV+CSS知识对接。在本课之前，学生基本掌握网页制作的主要知识点，有一定的代码基础。而本课内容CSS样式表的使用是学生进行网页设计的基础跟减少。学生借助理解CSS样式、选择器的概念，掌握应用内部CSS样式表、修改CSS选择器属性的方式来设计跟美化网页，并可对所设计的作品进行评判，培养教师的设计、审美素质及职业能力跟创新精神。本次教学活动对教师的网页制作与设计起着基础、提高作用。（二）我对教材的处理方式1、把教材所涵盖的知识点进行分层，使学生由简入深理解跟掌握CSS样式表的使用。2、对教材内容进行二次处理，制作原创案例，使内容非常适合我班学员学习。3、由CSS样式表的使用引导学生对网站界面设计的剖析。三教师预测教学对象为我校计算机应用专业中职二年级的教师。

学生学习网站制作已有一个学期，对这节课之前的学员情况预测如下：（一）学生知识素养分析1、学生可熟练使用Dreamweaver软件2、对于静态页面的设计有一定的基础3、学生有简单的代码基础4、在以前的学习过程中有简单接触过嵌入式的CSS样式5、学生缺少动手能力6、对作品的评判缺乏平台的了解跟理解7、学生技能水准发生分化现象（二）学生自学能力预测我在课堂教学过程中，注重在学生思维水平无法承受的前提下安排一些合适自学的内容使教师自己把握，从中培养教师的自学能力。开始自学的内容简单，等教师认为自学不是一件很难的事情且善于参与时，再适当加大自学的难度。在教学过程中，长期渗透自学理念，学生们已经有了较强的自学能力跟良好的课前预习习惯。因此，尽管本课是一节综合项目设计课程，我还是在教学方法中渗透自主研究学习法，相信学生有能力取得成功。（三）学生个性特征分析可以借助4个词语来高度概括：“乐于探索”、“喜欢挑战”、“个性鲜明”、但仍“缺乏自信”。四教学目标（一）知识与技能1、理解CSS样式表、CSS选择器的概念。2、学会为HTML页面添加内部CSS样式表。3、修改CSS样式表的属性值。（二）过程与技巧依托学校学习网站、校园网资源库、蓝墨云班课移动教学系统为载体，使用交互式课件、三维动画、微课视频辅助教学，通过小组合作研究、自主学习等方法，让学员把握添加CSS样式表的过程跟修改属性值的方式。

（三）情感目标在培训教师完成任务的过程中，激发师生的审美情操，创设与实际岗位相结合的情景，培养教师的职业能力。五教学重点及难点（一）教学重点外部CSS样式表的添加应用。（二）教学难点修改CSS样式表的属性值。六教法与学法（一）教学思想当前职业中学计算机专业教学的主流取向是以建构主义的课堂思想与学习理论为指导去组织跟实施各项教学活动。在构建基于建构主义理论的课堂模式的过程中，本次教学活动采取信息化教学设计模式，利用信息技术创设情景、开发教学资源学习网站，利用移动教学系统，以教师为中心，学生在教授精心营造的情景、自主研究空间、交流与协同活动、自我评价机制等学习环境中充分发挥自身的主动性和积极性，对所学的常识进行涵义建构，并用其所学解决实际问题。（二）教学思路1、课堂融入信息化手段微课视频、三维动画、交互式课件，依托学校学习网、蓝墨云班课移动学习系统为载体，引导学员积极主动参加到课堂活动中，激发师生学习的兴趣跟求知欲。2、通过引入任务驱动、小组合作学习的教学方法，引导学员在一同完成新作的模仿和作画过程中，培养“互帮互学、宽容待人、荣辱与共&r

dquo;的合作精神。3、通过引入自主研究学习的教学方法，引导学员充分利用教学资源网站完成自己的课前任务，从而提高教师自主研究学习的精神和缓解问题的素质。4、通过学生对作品的互相评价，培养人们客观、辩证地判断事物的素养，又有利于老师掌握教学信息的反馈，及时调整跟改进教学方法。5、我将混合教学方式采用于这次课程课堂中，很好地衔接了“课前—课堂—课后”。让学员充分发挥自己的自主研究素养，做好课前备课的功课；让学员充分利用课下的时间来巩固技能，提高创作能力；该体系的加强充分激发了学生的积极性、主动性和创造性。逐步使学生从被动学习，转变成主动学习。七教学媒体学校学习网站、蓝墨云移动学习系统、交互式课件、场景动画、微课视频、班级学习网、音乐、极域教室系统、多媒体网络教学平台、计算机八教学步骤整个教学过程实施，主要分三个别：（一）课前准备（二）课堂教学（三）课后拓展第一部分：【课前准备】（一）教师准备1、制作准备本课主要知识点，提前把本课学习资源发放到蓝墨云班课学习系统上。2、在蓝墨云班课学习系统及学校学习网先发布学习难题供学员预习思考，并搜集学生在网上提交的疑问回答，充分认识学生对本节课的预习情况。

3、制作准备《CSS样式表的使用》交互式课件。4、制作准备《CSS样式的使用》系列微课视频——《添加外部CSS样式表》、《CSS样式属性值的设置》等。5、制作准备《美美的换装秀》、《美美的搭配秀》系列的动画。6、制定学生教学表现评价量规表或者设计作品的评判量规表。7、在平时的教学过程中，就有意识地按照水平差距使学员结成学习伙伴，形成了相对固定的合作小组。（二）学生准备1、自主预习《CSS样式表的使用》交互式课件，观看微课视频，完成微课配套问题。2、课前按规定尝试解释什么是CSS样式表，并探讨学生在蓝墨云班课学习系统上发布的学习思考问题。3、全体学生按“异质分组”的方式进行分组，为小组协同学习做好准备。本次课将学员分为6个小组，每小组7人左右，每组1名组长。课前准备教师活动学生活动设计动机根据学情准备以下学习资源，设计课前备课题目信息化大赛教案格式，让学员做好课前任务：班级学习网小组评价系统CSS样式表系列微课交互式课件学生任务手册1、在手机端上，使用红墨云班课平台浏览学生推送的学习资料2、观看微课视频《美美的换装秀》，视频中运用类比的方式，把小姑娘比作是没有换装前的网页图标，美丽的服饰比作CSS样式表，通过选取不同的服饰（CSS样式表），来装扮小姑娘（网页图标），使得小姑娘体验了一场“换装秀”。

学生完成观看下面两个观看任务：问题一：视频中的小女孩在做哪些？她跟CSS样式表有哪些关系？问题二：请结合其它学习材料，写出CSS样式表的概念。并把疑问答案准备好，带到教学上，教师进行检查。3、下载学生任务手册，提前备课本节课的知识重点和难点。重点：外部形状表的添加应用；难点：修改CSS样式表的属性值。4、学生按“异质分组”的方式进行分组，为小组协同学习做好准备。学生即将有课前预习的良好习惯。利用红墨云班课学习平台，帮助充分利用课余时间，学习系统图标美观，操作便捷。学生将要习惯了这些预习模式，在教学上学习新知事半功倍。动画微课由学生自己设计与制作，灵活度高、适用性强，恰当地展现CSS样式表的概念及作用，学生易于理解与接收。利用学生有课前备课习惯这一缺点，让学生带着问题观看视频，并要求在课堂上会进行检查，学生主动进行构建，把教学讲授模式成为教师课前的自主研究，即增加了教学的强度，学生也学得快，记得牢。逐步向“翻转课堂”模式靠拢，让教学学习非常高效，有效。在平时的教学过程中，就有意识地按照水平差距使学员结成学习伙伴，形成了相对固定的合作小组，在突破教学难点时，小组内的“小讲

师”也起至了相当大的作用，既帮助了其它朋友，带动了课堂的氛围，也促使了朋友之间的交流互动。第二部分：【课堂教学】课堂教学教学环节教师活动学生活动设计动机案例导入实例导入：教师先向师生展现排版混乱、还没有美化的HTML网页：接着教师只是用了一个操作，帮网页添加了一个CSS样式表，便给网页摇身一变，变成同学们所熟知的淘宝网首页。观察学生反映，了解学员的课前预习情况。解读案例：理解学生给出的实例，认真探讨。学生聚精会神，欣赏教师变的“小魔术”。集中注意力，回顾课前备课的内容。课前备课的慕课通过实例的导出，学生进行头脑风暴，大胆探讨，对接下来的新课做铺垫，也成功导入最近的新课程。用案例引发教师思考，摇身一变的网页可较好地造成教师注意。课堂教学教学环节教师活动学生活动设计动机新课讲授任务一：检查课前预习——认识CSS样式表（1）提问：老师刚才做了哪些操作？鼓励学员说出自己的看法；肯定学生的提问并予以赞扬和褒奖，让学员再次保持课前备课的好习惯；观察教师备课情况，留意课前功课未完成的教师。（2）趁热打铁，再次回答：“CSS样式表这么神奇，有没有同学了解它的概念？”。引导学员回顾课前备课内容，把“教师讲”转变成“学生说”。

（3）教师检查并归纳总结学生的提问完成现在教学的第一个任务：理解CSS样式表的概念。归纳总结CSS样式表的概念：1、CSS是用于布局与美化网页的。2、CSS样式表和HTML页面是可以分离的。3、CSS是CascadingStyleSheets的中文简写,即层叠样式表。4、CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。5、CSS文件是一个文本文件,它包括了一些CSS标记,CSS文件需要使用css为文件名后缀。6、CSS是大小写不敏感的,CSS与css是一样的。CSS的分类：外部形状表内部颜色表内联样式学生们已经做了充分的课前预习工作，充满信心回答：“帮页面添加了CSS样式表！”。学生回顾课前校长布置的两个问题，尝试把CSS样式表的概念说出来。认真听学生归纳总结同学提问的疑问，结合自己的课前预习，正确理解CSS样式表的概念。鼓励教师说出课前备课的知识，，同时在上课的起初就把氛围激发出来，提高教学效率。把课堂上枯燥的代码概念讲解转变成学生课前的自主研究跟教学的交流互动。课前漫画视频的引入，把枯燥、难理解的CSS样式表很好地类比成日常所见的“换装”，帮助学员攻破理论常识难关。

先使学生充分理解样式表的概念跟认识样式表的特点，对接下来添加内部样式表有初步的知道。课堂教学教学环节教师活动学生活动设计动机新课讲授任务二：体验“换装秀”——添加内部样式表学生已经知道了CSS样式表的概念及分类，准备动手体验网页的“换装”。（1）教师结合交互式课件示范案例，课堂演示学生一边操作一边讲解怎样在页面中导出CSS外部样式表：第一步：点击CSS样式面板——附加样式表第二步：在跳出对话框中点击浏览按钮，选择指定文件第三步：保存网站，刷新，观察浏览器中网页的变化。学生扎实听老师讲解操作方法。回忆课前备课的知识点，认真听课，找出预习时见到的问题的解答。交互式课件融入到传统的讲授模式中，辅助了学生的课堂教学，也使讲解更加清晰明了，能较好地把握学生的教学注意力。学生已经理解CSS样式表的概念，此时借助交互式课件继续示范案例，良好的交互页面吸引学员的注意力，教师边播放课件边实际操作，加深学生的印象。课堂教学教学环节教师活动学生活动设计意图新课讲授（2）播放“

添加外部CSS样式表”微课视频教师演示完毕，播放添加内部CSS样式表相关知识点的微课视频，帮助学员更好地记住操作方法。（3）学生小试牛刀，微课相辅任务要求：1、下载素材，在原始的网站界面添加内部CSS样式表2、对比添加不同的CSS样式表，页面的差异怎么？教师进行分层指导：1、学习能力强——利用交互式课件独立完成任务；2、学习能力一般——教师巡堂时予以辅导；3、学习能力弱——在极域电子教室举手，教师再次演示，反复观看微课视频，掌握知识点。任务三：化身“服装设计师”——修改CSS选择器属性值学生发现，添加内部样式表后的网站存在几个局部问题。（1）引导学生看到网页存在的疑问，鼓励学生大胆说出解决办法。同学们在添加内部CSS样式表后，对于网页上一些不满意的局部，该如何去更改？是否添加内部CSS样式表后就不能改动？如何提升灵活度？（2）引入CSS选择器属性值概念，动画视频帮助理解。认真观看微课，熟记几个重要的操作方法。下载素材，观察还没添加CSS样式表之前的网站界面；借助微课，边学边做，观察添加CSS后的页面变化。跟不上学习进度的学员可以在电子举手，观看老师的重新演示。观察添加CSS样式表的页面，发现与图标格格不入的地方，并探讨用哪个方法优化。

观看《美美的搭配秀》，思考微课的类比关系微课更加直观直接地传授操作方法知识点，容易操作，学生能反复观看，利用微课视频攻克自己的学习弱点。分层次地指导学员完成任务，有效地提高了学员吸收知识的强度，既可以使学习能力强的学生保持自主研究的好习惯，也可以确保其他学员正常学习基础知识，跟得上学习的进度。分层次指导学员也可提升了校长与教师的关系，从而提升师生合作、交流的效率。让学生自己“发现问题”，由问题引出下一个知识点。课堂教学教学环节教师活动学生活动设计意图新课讲授教师播放漫画微课信息化大赛教案格式，微课还是把网页类比成小姑娘，这次的视频不同于前面视频的是小姑娘的服饰已经不是固定的外套，而是一件件上衣、裙子、裤子、鞋子等服装单品，可以自由地搭配，准确地说明了CSS选择器属性值的概念及作用。（4）交互课件，展示CSS选择器属性值的更改交互式课件分方法演示了CSS选择器属性值的更改及完成结果，帮助学生熟悉操作过程。1、修改网站字体第一步：在Dreamweaver中开启reset.css样式表第二步：找到名称为body的CSS选择器第三步：对font-size:22px进行更改2、修改布局大小第一步：在Dreamweaver中开启style.css样式表第二步：找到名称为two-code的CSS选择器观看三维动画时与第一个动画做对比，思考两个视频的相似之处与不同之处。

认真听讲，结合学生播放的交互式课件，学习CSS选择器属性值修改的方法。同学间可以适当地讨论，修改任务二中的页面设计。下载素材，利用信息化教学资源，集中精神学习本节课的知识难点。动画微课画面简洁漂亮，和学生经常所接触的动画人物类似，此时学生完成任务一跟任务二会有点松散，生动的三维动画视频很好地造成学生们的注意。CSS选择器属性值的更改是本次课的难点，发放微课视频和教师训练手册帮助学员突破学习难点，扎实地把握学习重点。课堂教学教学环节教师活动学生活动设计动机新课讲授第三步：对width和height进行更改（4）发放教师训练手册和微课视频，学生分组完成任务学生之间进行探讨，对任务二训练中网页图标不协调的地方进行探讨、修改，学习过程中通过学生的训练手册和微课视频，达到学习目标。4、作品展示，教师点评教师及时对学员作品进行点评、肯定及表扬。下载任务手册，针对任务二的知识点反复训练，直到掌握该知识点为止。接受教师和朋友的点评任务手册给学员清晰明了的操作任务，要求学生设置指