《2022年2022年广东省创新杯说课大赛计算机类一等奖作品：CSS样式表的使用教学设计方案 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年广东省创新杯说课大赛计算机类一等奖作品：CSS样式表的使用教学设计方案 .pdf（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1/11教学设计 网 页 换 装 秀 CSS 样 式 表 的 使 用名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛2/11一、【课时】：2课时二、【教材分析】：1、知识内容分析：本课程内容选自高等教育出版社教材网页设计与制作(HTML+CSS+JavaScript)第 4 单元 CSS的应用任务一 CSS的引用、任务二页面样式设置，设计课时为2 个课时。本章在整个课程体系里起到承上启下的作用，它既是对前面的基础章节的综合深化，又开启了后续DIV+CSS知识对接。在本课之前，学生基本掌握网页制作的主要知
2、识点，有一定的代码基础。而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。学生通过理解 CSS样式的概念，掌握用导入外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页，并能对所设计的作品进行评价，培养学生的设计、审美能力及职业素养和创新精神。本次教学活动对学生的网页制作与设计起着基础性作用。2、我对教材的处理方法：把教材所涉及的知识点进行分层，使学生由简入深理解和掌握CSS 样式表的使用。由 CSS样式表的使用引导学生对网页界面设计的分析。三、【学生分析】：教学对象为我校计算机应用专业中职二年级（上学期）学生。学生学习网页制作已有一个学期，对这节课之前的学生情况分析如下：1
3、、学生知识能力分析：学生能熟练使用Dreamweaver 软件 对于静态页面的设计有一定的基础。学生有简单的代码基础。在以往的学习过程中有简单接触过嵌入式的CSS样式 学生缺乏动手能力。对作品的评价缺乏系统的认识和理解。学生技能水平出现分化现象。2、学生自学能力分析：我在课堂教学过程中，注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握，从中培养学生的自学能力。开始自学的内容要少而简单，等学生认为自学不是一件很难的事情且乐于参与时，再适当加大自学的难度。在教学过程中，长期渗透自学理念，学生们已经有了较强的自学能力。因此，尽管本课是一节综合项目设计课程，我还是在教学方法中渗透
4、自主探究学习法，相信学生有能力获得成功。3、学生个性特点分析：可以通过4 个词语来高度概括：“乐于探索”、“喜欢挑战”、“个性鲜明”、但却“缺乏毅力”。四、【教学目标】：名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛3/111、知识与技能：理解 CSS样式表的概念、内外部样式表的应用；修改 CSS选择器属性值。2、过程与方法：使用蓝墨云班课移动教学、交互式课件、三维动画学习资源、微课视频辅助教学，通过小组合作探究、自主学习等实现教学目标。3、情感目标在辅导学生完成任务的过程中，激发学生的审美情操，创设
5、与实际岗位相结合的情境，培养学生的职业素养。五、【教学重点及难点】：1、教学重点：理解 CSS样式表的概念、添加外部样式表的应用；修改 CSS选择器属性值。2、教学难点：修改 CSS选择器属性值六、【教法与学法】：1、教学思想：当前职业中学计算机专业教学的主流取向是以建构主义的教学思想与学习理论为指导去组织和实施各项教学活动。在探索基于建构主义理论的教学模式的过程中，本次教学活动采用信息化教学设计理念，利用信息技术创设情景、开发教学资源动态网站，以学生为中心，学生在老师精心创设的情境、自主探究空间、交流与协作活动、自我评价体系等学习环境中充分发挥自身的主动性和积极性，对所学的知识进行意义建构，
6、并用其所学解决实际问题。2、教学策略：课堂融入信息化手段微课视频、三维动画、交互式课件，依托蓝墨云班课移动学习平台为载体，引导学生积极主动参与到教学活动中，激发学生学习的兴趣和求知欲。通过采用任务驱动、小组合作学习的教学方法，引导学生在共同完成作品的模仿和创作过程中，培养“互帮互学、宽容待人、荣辱与共”的合作精神。通过采用自主探究学习的教学方法，引导学生充分利用教学资源网站完成自己的任务，从而增强学生自主探究学习的精神和解决问题的能力。通过学生对作品的相互评价，培养他们客观、辩证地判别事物的能力，又有利于老师掌握教学信息的反馈，及时调整和改进教学方法。名师资料总结-精品资料欢迎下载-名师精心整
7、理-第 3 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛4/11 我将混合教学模式运用于此次课程教学中，很好地衔接了“课堂课下课后”。让学生充分利用课下的时间来巩固技能，提高创作能力；该模式的开展充分调动了学生的积极性、主动性和创造性。逐步让学生从被动学习，转变成主动学习。七、【教学媒体】：交互式课件、三维动画、微课视频、班级学习网、音乐、极域教室系统、多媒体网络教学平台、计算机八、【教学流程】：整个教学过程实施，主要分三部分：课前准备、课堂教学、课后拓展。第一部分：【课前准备】1、教师准备：制作准备本课主要知识点，提前把本课学习资源发放到蓝墨云班课学
8、习平台上。在蓝墨云班课学习平台上先发布学习问题供学生预习思考，并收集学生在网上提交的问题回答，充分了解学生对本节课的预习情况。制作准备 CSS样式表的使用交互式课件。制作准备CSS样式的使用 系列 微课视频 外部 CSS样式表的导入、CSS选择器属性值的修改等。制作准备美美的换装秀、美美的搭配秀系列的三维动画。制定学生课堂表现评价量规表以及设计作品的评价量规表。在平常的教学过程中，就有意识地根据水平差异让学生结成学习伙伴，形成了相对固定的合作小组。2、学生准备：自主预习 CSS样式表的使用交互式课件。课前按要求尝试解释什么是CSS样式表，并思考教师在蓝墨云班课学习平台上发布的学习思考问题。全体
9、学生按“异质分组”的方法进行分组，为小组协作学习做好准备。本次课将学生分为6 个小组，每小组7 人左右，每组1 名组长。第二部分：【课堂教学】课堂教学教学环节教师活动学生活动设计意图一实际案例：先向学生展示排版混乱、还没有美化的页面，接着我仅仅用了一个操作，便帮网页摇身一变，变成同学们所熟悉的淘宝网。1、解读案例：理解教师给出的案例，认真分析。2、小组热身：以小组为单位，分别说1、用案例引起学生思考，实际案例更能引起学生注意。2、通 过 问 题 的 设计，学生进行头脑名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设
10、计和说课大赛5/11实际案例提问导入问题：1、老师刚刚做了什么，怎么网页那么快就变了样呢？2、如果是同学们，你们会用什么方式来修改刚才的页面呢？出该组的“解决方案”。风暴，大胆讨论，对接下来的新课做铺垫，也顺利导入今天的新课程。课堂教学教学环节教师活动学生活动设计意图二新课讲授由浅入深1、任务一：观看“换装秀”认识CSS样式表（1）教师播放三维动画美美的换装秀视频中利用类比的方法，把小姑娘比作是没有换装前的网页界面，美丽的服饰比作CSS样式表，通过选择不同的服饰（CSS样式表），来装扮小姑娘（网页界面），使得小姑娘体验了一场“换装秀”。（2）教师根据视频提问问题仔细观看视频，视频中表达了什么信
11、息？视频中是否出现了文字等信息？通过视频，分组讨论你们认为的CSS样式表是什么？（3）通过学生的回答，教师趁热打铁，结合视频中的卡通人物来讲解CSS样式表的概念。CSS样式表的概念：CSS是用于布局与美化网页的。CSS是 Cascading Style Sheets的英文缩写,即层叠样式表。CSS 语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css 为文件名后缀。CSS是大小写不敏感的,CSS与 css 是一样的。CSS是由 W3C 的 CSS工作组产生和维护的。CSS的分类：?外部样式表
12、?内部样式表?内联样式2、任务二：体验“换装秀”导入外部样式表学生已经了解了CSS样式表的概念及分类，准备动手体验网页的“换装”。（1）教师结合交互式课件示范案例，课堂演示学生认真观看视频，观看视频前记清老师提问的问题，带着问题观看视频。小组讨论，回答教师问题。学生通过教师再次播放的视频，准确理解CSS样式表的概念及作用。学生认真听教师三维动画视频由教师自己设计与制作，灵活度高、适用性强，能恰当地诠释CSS样式表的概念及作用，学 生 容 易 理 解 与 接收。让学生带着问题观看视频，引起学生注意，提高课堂效率。三维动画视频的信息化教学手段的引入，把枯燥、难理解的CSS样式表很好地类比成日常所见
13、的“换装”，帮助学生攻破知识难点。学生已经理解CSS样式表的概念，此时利用交互式课件继续示范案例，良好的交互名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛6/11教师一边操作一边讲解如何在页面中导入CSS外部样式表。（2）播放“导入外部CSS样式表”微课教师演示完毕，播放导入外部CSS样式表相关知识点的微课视频，帮助学生更好地记住操作步骤。（3）学生小试牛刀，微课相辅任务要求：下载素材，在原始的网页界面导入外部CSS样式表，观察网页界面的变化。对比导入不同的CSS样式表，页面的变化如何？3、任务三：化
14、身“服装设计师”修改CSS选择器属性值学生在任务二学会了导入外部CSS样式表。（1）结合任务二，提出问题，知识点难度增大问题：同学们在导入外部CSS样式表后，对于网页上一些不满意的局部，该怎么去修改？是否导入外部CSS样式表后就不能改动？如何提高灵活度？（2）引入 CSS选择器属性值概念，三维动画视频帮助理解教师播放三维动画视频，该视频还是把网页类比成小姑娘，这次的视频不同于前面视频的是小姑娘的服装不是固定的套装，而是上衣、裙子、裤子、鞋子等可以自由地讲解操作步骤认真观看微课，熟记几个重要的操作步骤下载素材，观察还没导入CSS样式表之前的网页界面；借助微课视频，边学边做，观察导入CSS后的页面
15、变化。仔 细 观 察 导 入CSS 样式表的页面，发现与界面格 格 不 入 的 地方，并思考用什么方法改进。观看美美的搭配秀，结合网页设计，思考两者的类比关系页面吸引学生的注意力，教师边播放课件边实际操作，加深学生的印象。微课更加直观直接地传 授 操 作 步 骤 知 识点，容易操作，学生可反复观看，利用微课视频攻克自己的学习弱点。让学生自己“发现问题”，由问题引出下一个知识点。三维动画视频画面美观可爱，和学生平时所接触的动画人物类似，此时学生完成任名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛7/11
16、搭配，准确地说明了CSS选择器属性值的概念及作用。（3）交互课件，展示CSS选择器属性值的修改交互式课件分步骤演示了CSS 选择器属性值的修改及完成结果，帮助学生熟悉操作过程。（4）发放学生练习手册和微课视频，学生分组完成任务学生分组讨论，对任务二练习中网页界面不协调的地方进行讨论、修改，学习过程中借助教师的练习手册和微课视频，达到学习目标。4、作品展示，教师点评教师发放评价量规电子表格，学生小组互评。认真听讲，结合教师播放的交互式课件，学习 CSS选择器属性值修改的步骤。分组讨论，修改任务二中的页面设计。派出小组成员上台展示作品。务一和任务二会有点松散，生动的三维动画视频很好地引起学生们的注
17、意。CSS 选择器属性值的修 改 是 本 次 课 的 难点，发放微课视频和学生练习手册帮助学生突破学习难点，扎实地掌握学习重点。三创设情境巩固提高1、情景创设A公司请了网站设计公司设计一个公司的宣传网站，网站设计公司已经设计了初稿，现在 A公司对该网站进行初步的验收。人员分配：组内选出两位同学为A公司的网站验收人员，对公司网站进行验收，指出还需要修改的地方。组内选出三位同学为网站设计公司的设计师，针对 A公司提出的要求，对网站进行第二轮的修改。2、发放素材，学生开始模拟情景情境模拟过程中，教师发放任务手册在学习平台上，给与学生清晰明了的练习任务。开放网络让学生在互联网上浏览收集更多学习资源。教
18、师巡堂，对于学生的疑问及时指导与解决。3、小组互评，教师点评教师发放评价量规电子表格，学生小组互评。教师及时地对学生的作品进行点评、肯定及表扬，让学生有学习的成就感。4、学生登录蓝墨云课班学习平台，上传作品，投票评选“今日设计之星”教师在蓝墨云课班学习平台上启动本次课的交流互动活动，学生可以在活动中发布自己的作品，其他同学为自己喜欢的作品点赞投票。获得“点赞”次数最多的学生可获得“本日设计之星”头衔，教师在平时成绩中加分。每个小组长对组内 人 员 进 行 分配。融 入 自 己 的 角色，积极讨论发表意见，把本课学习的知识点用到本环节中来。小组下载素材，组内成员轮流分配角色，体验实际生活中网页设
19、计公司与客户之间的交流沟通，并把作品做到最好。2、登录蓝墨云班课，进入教师发布的交流活动，上传作品，并对自己喜欢的作品进行点赞投票。1、交互课件快问快答梳理知识点通过交互式课件中的答题环节，与学生进行快问快答1、小组竞争玩游戏，复习本节课1、实现了从实践到理论，从具体表象到深名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛8/11四课堂小结大考验的游戏。学生“闯关”成功后便可进入到下一个环节。2、交流拓展学生登录云班课学习平台，在交流区中发表自己今天上课的感受，交流学习到的知识点以及还有没解决的问题等等
20、。浏览教师发布的问题提问和头脑风暴，明确下课下的任务创作要求。的知识要点。3、明确课下项目创作任务。层本质的提升，从而解决了教学重点。2、帮助学生对所学的知识进行总结归纳，理清思路。为后面进行整体规划课下的小组的创作作品做好铺垫。五作业项目布置教师在蓝墨云课班上发放“今日作业”作业的布置分层次，包括基础性题目和提高性题目。基础性题目：1、教师在云班课上导入今天的理论知识题目，学生课下随时随地可以完成。2、在云班课资源库中下载素材，按要求把CSS样式表应用到网页中；提高性题目：CSS选择器中的属性你还知道哪些呢？请您收集好您所知道的属性，下节课把它们带到课堂上来和同学们分享吧！公布比拼结果，让学
21、生有竞争意识，增强自 我 价 值 感 和 成 就感。第三部分：【课后拓展】教学环节教师活动学生活动设计意图课后延伸拓展技能1、引导同学们拓展技能、提高创作水平：引导兴趣高的同学继续访问蓝墨云班课的“拓展技能”页面，继续学习更多美化网页的方法方式。提高技能。2、采取鼓励表扬机制：教师根据学生在云班课学习平台上上传的作品以及讨论、发表意见的活跃度、浏览学习资料的次数给学生打分，并加入到学生实际的平时成绩中。1、继续访问云班课进行技能拓展。2、随时作品分享。3、随时在网络平台上技术交流。1、通过引导同学们继续技能拓展，让学生意识到，一个好的网页需要不断修改和改进，不断提升技能，积累创作经验，从而才能
22、达到最佳效果。2、逐步转化学生思想观念：从“要我学”转变成我要学；从被动学习转变成主动学习。名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛9/11名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信息化教学设计和说课大赛10/11九、【教学附件】：附件：网页设计效果图的评价量规表（小组互评）评价项目评价指标得 分科学性（20 分）网页设计界面给人的视觉概念正确；（10）网页界面设计科学，不违背常理；（10）思想性（20 分）网页能很好地
23、吸引其他人，引起共鸣（10）很好地表达网站主题，内容健康、积极向上（5）语言通顺、文字规范（5）技术性（30 分）网页设计布局巧妙、能运用多种技术设计网页；(7)熟练运用CSS样式表，网站效果精致；(8)网页有一定的实用性；(7)能够运用比较前沿的网站设计技术，有简单的交互功能；（8）艺术、创意性（30 分）具有突出的主题形象，艺术表现力丰富（10）布局、颜色搭配合理、视觉效果强烈（10）网站贴近实际应用，整体效果佳（15）有创新性，构思新颖（15）总分作品点评（特色与不足）名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 11 页 -2016年广东省中等职业学校“创新杯”教师信
24、息化教学设计和说课大赛11/11附件 2：学生课堂表现评价量规表（自我评价）学号姓名总评评价项目评价内容及评级个人参与课堂学习及活动的状态A：优秀（810 分）B：良（57 分）C：尚需努力（03 分）积极思考，主动并准确回答老师提出的问题。专心听讲，能够基本回 答 老 师 提 出 的 问题。偶尔开小差。小组合作学习的参与情况A：优秀（810 分）良（B：57 分）C：尚需努力（03 分）积极参加小组合作学习，发挥主力作用。按要求参与小组合作学习，善于表达自己的观点。较少与他人讨论，合作。在设计网页中，对导入外部CSS样式表、修改CSS 选择器属性值的掌握情况A：优（810 分）良（B：57 分）C：尚需努力（03 分）熟练使用 CSS样式表，能很好地掌握不同CSS 样式的使用。能够掌握本节课所学知识，简单导入CSS样式表。还不能理解CSS 样式表的概念，不大有信心完成CSS 样式表在网页设计中的使用。名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 11 页 -