《CSS样式表的使用创新说课大赛教学设计》由会员分享，可在线阅读，更多相关《CSS样式表的使用创新说课大赛教学设计（18页珍藏版）》请在金锄头文库上搜索。
1、2016全国中等职业学校“创新杯”教师信息化教学和说课大赛一 课 时本次课设计课时为2课时。二 教材分析（一）知识内容分析本课内容选自高等教育出版社的网页设计与制作（HTML+CSS+JavaScript），第四章CSS的应用，设计课时为2个课时。本章在整个课程体系里起到承上启下的作用，它既是对前面的基础章节的综合深化，又开启了后续DIV+CSS知识对接。在本课之前，学生基本掌握网页制作的主要知识点，有一定的代码基础。而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。学生通过理解CSS样式、选择器的概念，掌握应用外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页，并能对所设
2、计的作品进行评价，培养学生的设计、审美能力及职业素养和创新精神。本次教学活动对学生的网页制作与设计起着基础、提高作用。（二）我对教材的处理方法1、 把教材所涉及的知识点进行分层，使学生由简入深理解和掌握CSS样式表的使用。2、 对教材内容进行二次处理，制作原创案例，使内容更加适合我班学生学习。3、 由CSS样式表的使用引导学生对网页界面设计的分析。三 学生分析教学对象为我校计算机应用专业中职二年级的学生。学生学习网页制作已有一个学期，对这节课之前的学生情况分析如下：（一）学生知识能力分析1、 学生能熟练使用Dreamweaver软件2、 对于静态页面的设计有一定的基础3、 学生有简单的代码基础
3、4、 在以往的学习过程中有简单接触过嵌入式的CSS样式5、 学生缺乏动手能力6、 对作品的评价缺乏系统的认识和理解7、 学生技能水平出现分化现象（二）学生自学能力分析我在课堂教学过程中，注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握，从中培养学生的自学能力。开始自学的内容简单，等学生认为自学不是一件很难的事情且乐于参与时，再适当加大自学的难度。在教学过程中，长期渗透自学理念，学生们已经有了较强的自学能力和良好的课前预习习惯。因此，尽管本课是一节综合项目设计课程，我还是在教学方法中渗透自主探究学习法，相信学生有能力获得成功。（三）学生个性特点分析可以通过4个词语来高度概括
4、：“乐于探索”、“喜欢挑战”、“个性鲜明”、但却“缺乏毅力”。四 教学目标（一）知识与技能1、理解CSS样式表、CSS选择器的概念。2、学会为HTML页面添加外部CSS样式表。3、修改CSS样式表的属性值。（二）过程与方法依托班级学习网站、校园网资源库、蓝墨云班课移动教学平台为载体，使用交互式课件、三维动画、微课视频辅助教学，通过小组合作探究、自主学习等方式，让学生掌握添加CSS样式表的过程和修改属性值的方法。（三）情感目标在辅导学生完成任务的过程中，激发学生的审美情操，创设与实际岗位相结合的情境，培养学生的职业素养。五 教学重点及难点（一）教学重点外部CSS样式表的添加应用。（二）教学难点修
5、改CSS样式表的属性值。六 教法与学法（一）教学思想当前职业中学计算机专业教学的主流取向是以建构主义的教学思想与学习理论为指导去组织和实施各项教学活动。在探索基于建构主义理论的教学模式的过程中，本次教学活动采用信息化教学设计理念，利用信息技术创设情景、开发教学资源学习网站，利用移动教学平台，以学生为中心，学生在老师精心创设的情境、自主探究空间、交流与协作活动、自我评价体系等学习环境中充分发挥自身的主动性和积极性，对所学的知识进行意义建构，并用其所学解决实际问题。（二）教学策略1、课堂融入信息化手段微课视频、三维动画、交互式课件，依托班级学习网、蓝墨云班课移动学习平台为载体，引导学生积极主动参与
6、到教学活动中，激发学生学习的兴趣和求知欲。2、通过采用任务驱动、小组合作学习的教学方法，引导学生在共同完成作品的模仿和创作过程中，培养“互帮互学、宽容待人、荣辱与共”的合作精神。3、 通过采用自主探究学习的教学方法，引导学生充分利用教学资源网站完成自己的课前任务，从而增强学生自主探究学习的精神和解决问题的能力。4、通过学生对作品的相互评价，培养他们客观、辩证地判别事物的能力，又有利于老师掌握教学信息的反馈，及时调整和改进教学方法。5、我将混合教学模式运用于此次课程教学中，很好地衔接了“课前课堂课后”。让学生充分发挥自己的自主探究能力，做好课前预习的功课；让学生充分利用课下的时间来巩固技能，提高
7、创作能力；该模式的开展充分调动了学生的积极性、主动性和创造性。逐步让学生从被动学习，转变成主动学习。七 教学媒体班级学习网站、蓝墨云移动学习平台、交互式课件、场景动画、微课视频、班级学习网、音乐、极域教室系统、多媒体网络教学平台、计算机八 教学流程整个教学过程实施，主要分三部分：（一）课前准备（二）课堂教学（三）课后拓展第一部分：【课前准备】（一）教师准备1、 制作准备本课主要知识点，提前把本课学习资源发放到蓝墨云班课学习平台上。2、 在蓝墨云班课学习平台及班级学习网先发布学习问题供学生预习思考，并收集学生在网上提交的问题回答，充分了解学生对本节课的预习情况。3、 制作准备CSS样式表的使用交
8、互式课件。4、 制作准备CSS样式的使用系列微课视频添加外部CSS样式表、CSS样式属性值的修改等。5、 制作准备美美的换装秀、美美的搭配秀系列的动画。6、 制定学生课堂表现评价量规表以及设计作品的评价量规表。7、 在平常的教学过程中，就有意识地根据水平差异让学生结成学习伙伴，形成了相对固定的合作小组。（二）学生准备1、 自主预习CSS样式表的使用交互式课件，观看微课视频，完成微课配套问题。2、 课前按要求尝试解释什么是CSS样式表，并思考教师在蓝墨云班课学习平台上发布的学习思考问题。3、 全体学生按“异质分组”的方法进行分组，为小组协作学习做好准备。本次课将学生分为6个小组，每小组7人左右，
9、每组1名组长。课 前 准 备教师活动学生活动设计意图根据学情准备以下学习资源，设计课前预习题目，让学生做好课前任务： 班级学习网小组评价平台 CSS样式表系列微课交互式课件学生任务手册1、在手机端上，使用蓝墨云班课平台浏览教师推送的学习资料2、观看微课视频美美的换装秀，视频中利用类比的方法，把小姑娘比作是没有换装前的网页界面，美丽的服饰比作CSS样式表，通过选择不同的服饰（CSS样式表），来装扮小姑娘（网页界面），使得小姑娘体验了一场“换装秀”。学生完成观看以下两个观看任务：问题一：视频中的小女孩在做什么？她和CSS样式表有什么关系？问题二：请结合其他学习材料，写出CSS样式表的概念。并把问题
10、答案准备好，带到课堂上，教师进行检查。3、下载学生任务手册，提前预习本节课的知识重点和难点。重点：外部样式表的添加应用；难点：修改CSS样式表的属性值。4、学生按“异质分组”的方法进行分组，为小组协作学习做好准备。学生已经有课前预习的良好习惯。利用蓝墨云班课学习平台，帮助充分利用课余时间，学习平台界面美观，操作方便。学生已经习惯了这种预习模式，在课堂上学习新知事半功倍。动画微课由教师自己设计与制作，灵活度高、适用性强，恰当地诠释CSS样式表的概念及作用，学生容易理解与接收。利用学生有课前预习习惯这一特点，让学生带着问题观看视频，并要求在课堂上会进行检查，学生主动进行探索，把课堂讲授模式变成学生
11、课前的自主探究，即提高了课堂的效率，学生也学得快，记得牢。逐步向“翻转课堂”模式靠拢，让课堂学习更加高效，有效。在平常的教学过程中，就有意识地根据水平差异让学生结成学习伙伴，形成了相对固定的合作小组，在突破教学难点时，小组内的“小讲师”也起到了非常大的作用，既帮助了其他同学，带动了课堂的气氛，也促进了同学之间的交流互动。第二部分：【课堂教学】课 堂 教 学教学环节教师活动学生活动设计意图案例导入案例导入：教师先向学生展示排版混乱、还没有美化的HTML网页：接着教师仅仅用了一个操作，帮网页添加了一个CSS样式表，便帮网页摇身一变，变成同学们所熟悉的淘宝网首页。 观察学生反映，了解学生的课前预习情
12、况。解读案例：理解教师给出的案例，认真分析。学生聚精会神，欣赏教师变的“小魔术”。集中注意力，回顾课前预习的内容。课前预习的微课通过案例的导入，学生进行头脑风暴，大胆讨论，对接下来的新课做铺垫，也顺利导入今天的新课程。用案例引起学生思考，摇身一变的网页能很好地引起学生注意。课 堂 教 学教学环节教师活动学生活动设计意图新课讲授任务一：检查课前预习认识CSS样式表（1） 提问：老师刚才做了什么操作？鼓励学生说出自己的想法；肯定学生的回答并给予赞许和表扬，让学生继续保持课前预习的好习惯；观察学生预习情况，留意课前功课未完成的学生。（2） 趁热打铁，再次提问：“CSS样式表这么神奇，有没有同学知道它
13、的概念？”。引导学生回顾课前预习内容，把“教师讲”转变成“学生说”。（3） 教师检查并归纳总结学生的回答完成今天课堂的第一个任务：理解CSS样式表的概念。归纳总结CSS样式表的概念：1、CSS是用于布局与美化网页的。2、CSS样式表和HTML页面是可以分离的。3、CSS是Cascading Style Sheets的英文缩写,即层叠样式表。4、CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。5、CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。6、CSS是大小写不敏感的,CSS与css是一样的。CSS的分类： 外部样
14、式表 内部样式表 内联样式学生们已经做了充分的课前预习工作，充满信心回答：“帮页面添加了CSS样式表！”。学生回顾课前教师布置的两个问题，尝试把CSS样式表的概念说出来。认真听教师归纳总结同学回答的问题，结合自己的课前预习，正确理解CSS样式表的概念。鼓励学生说出课前预习的知识，同时在上课的开始就把气氛调动起来，提高课堂效率。把课堂上枯燥的代码概念讲解转变成学生课前的自主探究和课堂的交流互动。课前动画视频的引入，把枯燥、难理解的CSS样式表很好地类比成日常所见的“换装”，帮助学生攻破理论知识难关。先让学生充分理解样式表的概念和了解样式表的种类，对接下来添加外部样式表有初步的了解。课 堂 教 学教学环节教师活动学生活动设计意图新课讲授任务二：体验“换装秀”添加外部样式表学生已经了解了CSS样式表的概念及分类，准备动手体验网页的“换装”。（1）教师结合交互式课件示范案例，课堂演示教师一边操作一边讲解如何在页面中导入CSS外部样式表：第一步：点击CSS样式面板附加样式表第二步：在弹出对话框中点击浏览按钮，选择指定文件第三步：保存网页，刷新，观察浏览器中网页的变化。学生认真听教师讲解操作步骤。回忆课前预习的知识点，认真听课，找出预习时遇到的难题的解答。交互式课件
