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