资源简介

一 课 时
本次课设计课时为2课时。
二 教材分析
（一）知识内容分析
本课内容选自高等教育出版社的《网页设计与制作（HTML+CSS+JavaScript）》，第四章《CSS的应用》，设计课时为2个课时。本章在整个课程体系里起到承上启下的作用，它既是对前面的基础章节的综合深化，又开启了后续DIV+CSS知识对接。在本课之前，学生基本掌握网页制作的主要知识点，有一定的代码基础。而本课内容CSS样式表的使用是学生进行网页设计的基础和提高。学生通过理解CSS样式、选择器的概念，掌握应用外部CSS样式表、修改CSS选择器属性的方法来设计和美化网页，并能对所设计的作品进行评价，培养学生的设计、审美能力及职业素养和创新精神。本次教学活动对学生的网页制作与设计起着基础、提高作用。
（二）我对教材的处理方法
把教材所涉及的知识点进行分层，使学生由简入深理解和掌握CSS样式表的使用。
对教材内容进行二次处理，制作原创案例，使内容更加适合我班学生学习。
由CSS样式表的使用引导学生对网页界面设计的分析。
三 学生分析
教学对象为我校计算机应用专业中职二年级的学生。学生学习网页制作已有一个学期，对这节课之前的学生情况分析如下：
（一）学生知识能力分析
学生能熟练使用Dreamweaver软件
对于静态页面的设计有一定的基础
学生有简单的代码基础
在以往的学习过程中有简单接触过嵌入式的CSS样式
学生缺乏动手能力
对作品的评价缺乏系统的认识和理解
学生技能水平出现分化现象
（二）学生自学能力分析
我在课堂教学过程中，注重在学生认知水平能够承受的前提下安排一些适合自学的内容让学生自己掌握，从中培养学生的自学能力。开始自学的内容简单，等学生认为自学不是一件很难的事情且乐于参与时，再适当加大自学的难度。在教学过程中，长期渗透自学理念，学生们已经有了较强的自学能力和良好的课前预习习惯。因此，尽管本课是一节综合项目设计课程，我还是在教学方法中渗透自主探究学习法，相信学生有能力获得成功。
（三）学生个性特点分析
可以通过4个词语来高度概括：“乐于探索”、“喜欢挑战”、“个性鲜明”、但却“缺乏毅力”。
四 教学目标
（一）知识与技能
1、理解CSS样式表、CSS选择器的概念。
2、学会为HTML页面添加外部CSS样式表。
3、修改CSS样式表的属性值。
（二）过程与方法
依托班级学习网站、校园网资源库、蓝墨云班课移动教学平台为载体，使用交互式课件、三维动画、微课视频辅助教学，通过小组合作探究、自主学习等方式，让学生掌握添加CSS样式表的过程和修改属性值的方法。
（三）情感目标
在辅导学生完成任务的过程中，激发学生的审美情操，创设与实际岗位相结合的情境，培养学生的职业素养。
五 教学重点及难点
（一）教学重点
外部CSS样式表的添加应用。
（二）教学难点
修改CSS样式表的属性值。
六 教法与学法
（一）教学思想
当前职业中学计算机专业教学的主流取向是以建构主义的教学思想与学习理论为指导去组织和实施各项教学活动。在探索基于建构主义理论的教学模式的过程中，本次教学活动采用信息化教学设计理念，利用信息技术创设情景、开发教学资源学习网站，利用移动教学平台，以学生为中心，学生在老师精心创设的情境、自主探究空间、交流与协作活动、自我评价体系等学习环境中充分发挥自身的主动性和积极性，对所学的知识进行意义建构，并用其所学解决实际问题。
（二）教学策略
1、课堂融入信息化手段微课视频、三维动画、交互式课件，依托班级学习网、蓝墨云班课移动学习平台为载体，引导学生积极主动参与到教学活动中，激发学生学习的兴趣和求知欲。
2、通过采用任务驱动、小组合作学习的教学方法，引导学生在共同完成作品的模仿和创作过程中，培养“互帮互学、宽容待人、荣辱与共”的合作精神。
3、 通过采用自主探究学习的教学方法，引导学生充分利用教学资源网站完成自己的课前任务，从而增强学生自主探究学习的精神和解决问题的能力。
4、通过学生对作品的相互评价，培养他们客观、辩证地判别事物的能力，又有利于老师掌握教学信息的反馈，及时调整和改进教学方法。
5、我将混合教学模式运用于此次课程教学中，很好地衔接了“课前—课堂—课后”。让学生充分发挥自己的自主探究能力，做好课前预习的功课；让学生充分利用课下的时间来巩固技能，提高创作能力；该模式的开展充分调动了学生的积极性、主动性和创造性。逐步让学生从被动学习，转变成主动学习。
七 教学媒体
班级学习网站、蓝墨云移动学习平台、交互式课件、场景动画、微课视频、班级学习网、音乐、极域教室系统、多媒体网络教学平台、计算机
八 教学流程
整个教学过程实施，主要分三部分：
（一）课前准备
（二）课堂教学
（三）课后拓展
第一部分：【课前准备】
（一）教师准备
制作准备本课主要知识点，提前把本课学习资源发放到蓝墨云班课学习平台上。
在蓝墨云班课学习平台及班级学习网先发布学习问题供学生预习思考，并收集学生在网上提交的问题回答，充分了解学生对本节课的预习情况。
制作准备《CSS样式表的使用》交互式课件。
制作准备《CSS样式的使用》系列微课视频——《添加外部CSS样式表》、《CSS样式属性值的修改》等。
制作准备《美美的换装秀》、《美美的搭配秀》系列的动画。
制定学生课堂表现评价量规表以及设计作品的评价量规表。
在平常的教学过程中，就有意识地根据水平差异让学生结成学习伙伴，形成了相对固定的合作小组。
（二）学生准备
自主预习《CSS样式表的使用》交互式课件，观看微课视频，完成微课配套问题。
课前按要求尝试解释什么是CSS样式表，并思考教师在蓝墨云班课学习平台上发布的学习思考问题。
全体学生按“异质分组”的方法进行分组，为小组协作学习做好准备。
本次课将学生分为6个小组，每小组7人左右，每组1名组长。
课 前 准 备
教师活动 学生活动 设计意图
根据学情准备以下学习资源，设计课前预习题目，让学生做好课前任务： 班级学习网 小组评价平台 CSS样式表系列微课 交互式课件 学生任务手册 1、在手机端上，使用蓝墨云班课平台浏览教师推送的学习资料 2、观看微课视频《美美的换装秀》，视频中利用类比的方法，把小姑娘比作是没有换装前的网页界面，美丽的服饰比作CSS样式表，通过选择不同的服饰（CSS样式表），来装扮小姑娘（网页界面），使得小姑娘体验了一场“换装秀”。学生完成观看以下两个观看任务： 问题一：视频中的小女孩在做什么？她和CSS样式表有什么关系？ 问题二：请结合其他学习材料，写出CSS样式表的概念。并把问题答案准备好，带到课堂上，教师进行检查。 3、下载学生任务手册，提前预习本节课的知识重点和难点。 重点：外部样式表的添加应用； 难点：修改CSS样式表的属性值。 4、学生按“异质分组”的方法进行分组，为小组协作学习做好准备。 学生已经有课前预习的良好习惯。利用蓝墨云班课学习平台，帮助充分利用课余时间，学习平台界面美观，操作方便。学生已经习惯了这种预习模式，在课堂上学习新知事半功倍。 动画微课由教师自己设计与制作，灵活度高、适用性强，恰当地诠释CSS样式表的概念及作用，学生容易理解与接收。 利用学生有课前预习习惯这一特点，让学生带着问题观看视频，并要求在课堂上会进行检查，学生主动进行探索，把课堂讲授模式变成学生课前的自主探究，即提高了课堂的效率，学生也学得快，记得牢。逐步向“翻转课堂”模式靠拢，让课堂学习更加高效，有效。 在平常的教学过程中，就有意识地根据水平差异让学生结成学习伙伴，形成了相对固定的合作小组，在突破教学难点时，小组内的“小讲师”也起到了非常大的作用，既帮助了其他同学，带动了课堂的气氛，也促进了同学之间的交流互动。
第二部分：【课堂教学】
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
案 例 导 入 案例导入：教师先向学生展示排版混乱、还没有美化的HTML网页： 接着教师仅仅用了一个操作，帮网页添加了一个CSS样式表，便帮网页摇身一变，变成同学们所熟悉的淘宝网首页。 观察学生反映，了解学生的课前预习情况。 解读案例：理解教师给出的案例，认真分析。 学生聚精会神，欣赏教师变的“小魔术”。 集中注意力，回顾课前预习的内容。 课前预习的微课 通过案例的导入，学生进行头脑风暴，大胆讨论，对接下来的新课做铺垫，也顺利导入今天的新课程。 用案例引起学生思考，摇身一变的网页能很好地引起学生注意。
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
新 课 讲 授 任务一：检查课前预习——认识CSS样式表 提问：老师刚才做了什么操作？ 鼓励学生说出自己的想法； 肯定学生的回答并给予赞许和表扬，让学生继续保持课前预习的好习惯； 观察学生预习情况，留意课前功课未完成的学生。 趁热打铁，再次提问：“CSS样式表这么神奇，有没有同学知道它的概念？”。 引导学生回顾课前预习内容，把“教师讲”转变成“学生说”。 教师检查并归纳总结学生的回答 完成今天课堂的第一个任务：理解CSS样式表的概念。 归纳总结CSS样式表的概念： 1、CSS是用于布局与美化网页的。 2、CSS样式表和HTML页面是可以分离的。 3、CSS是Cascading Style Sheets的英文缩写,即层叠样式表。 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样式表，页面的变化如何？ 教师进行分层指导： 学习能力强——利用交互式课件独立完成任务； 学习能力一般——教师巡堂时给予辅导； 学习能力弱——在极域电子课室举手，教师再次演示，反复观看微课视频，掌握知识点。 任务三：化身“服装设计师”——修改CSS选择器属性值 学生发现，添加外部样式表后的网页存在几个局部问题。 （1）引导学生发现网页存在的问题，鼓励学生大胆说出解决方法。 同学们在添加外部CSS样式表后，对于网页上一些不满意的局部，该怎么去修改？是否添加外部CSS样式表后就不能改动？如何提高灵活度？ （2）引入CSS选择器属性值概念，动画视频帮助理解。 认真观看微课，熟记几个重要的操作步骤。 下载素材，观察还没添加CSS样式表之前的网页界面；借助微课，边学边做，观察添加CSS后的页面变化。 跟不上学习进度的学生可以在电子举手，观看教师的再次演示。 观察添加CSS样式表的页面，发现与界面格格不入的地方，并思考用什么方法改进。 观看《美美的搭配秀》，思考微课的类比关系 微课更加直观直接地传授操作步骤知识点，容易操作，学生可反复观看，利用微课视频攻克自己的学习弱点。 分层次地指导学生完成任务，有效地提高了学生吸收知识的效率，既可以让学习能力强的学生保持自主探究的好习惯，也可以保证其他学生正常学习基础知识，跟得上学习的进度。 分层次指导学生也能改善了教师与学生的关系，从而提高师生合作、交流的效率。 让学生自己“发现问题”，由问题引出下一个知识点。
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
新 课 讲 授 教师播放动画微课，微课还是把网页类比成小姑娘，这次的视频不同于前面视频的是小姑娘的服装已经不是固定的套装，而是一件件上衣、裙子、裤子、鞋子等服饰单品，可以自由地搭配，准确地说明了CSS选择器属性值的概念及作用。 交互课件，展示CSS选择器属性值的修改 交互式课件分步骤演示了CSS选择器属性值的修改及完成结果，帮助学生熟悉操作过程。 修改网页字体 第一步：在Dreamweaver中打开reset.css样式表 第二步：找到名称为body的CSS选择器 第三步：对font-size:22px进行修改 修改布局大小 第一步：在Dreamweaver中打开style.css样式表 第二步：找到名称为two-code的CSS选择器 观看三维动画时与第一个动画做对比，思考两个视频的相同之处与不同之处。 认真听讲，结合教师播放的交互式课件，学习CSS选择器属性值修改的步骤。 同学间可以适当地讨论，修改任务二中的页面设计。 下载素材，利用信息化教学资源，集中精神学习本节课的知识难点。 动画微课画面美观可爱，和学生平时所接触的动画人物类似，此时学生完成任务一和任务二会有点松散，生动的三维动画视频很好地引起学生们的注意。 CSS选择器属性值的修改是本次课的难点，发放微课视频和学生练习手册帮助学生突破学习难点，扎实地掌握学习重点。
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
新 课 讲 授 第三步：对width和height进行修改 （4）发放学生练习手册和微课视频，学生分组完成任务 学生之间进行讨论，对任务二练习中网页界面不协调的地方进行讨论、修改，学习过程中借助教师的练习手册和微课视频，达到学习目标。 4、作品展示，教师点评 教师及时对学生作品进行点评、肯定及表扬。 下载任务手册，针对任务二的知识点反复练习，直到掌握该知识点为止。 接受老师和同学的点评 任务手册给学生清晰明了的操作任务，要求学生修改指定的属性值，在合理地美化页面，由浅入深帮助学生突破难点。 教师及时的点评、肯定，给予学生继续学习的动力。
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
情 境 创 设 巩 固 提 升 情景创设 A公司请了网站设计公司设计一个公司的宣传网站，网站设计公司已经设计了初稿，现在A公司对该网站进行初步的验收。 人员分配： 1、全体学生按“异质分组”的方法进行分组 2、组内选出两位同学为A公司的网站验收人员，对公司网站进行验收，指出网页需要修改的地方。 3、组内选出两位同学为网站设计公司的设计师，针对A公司提出的要求，对网站进行修改。 2、发放素材，学生开始模拟情景 情境模拟过程中，教师发放任务手册在学习平台上，开放网络让学生在互联网上浏览收集更多学习资源。 教师巡堂，对于学生的疑问及时指导与解决。 3、小组互评，教师点评 登录14计算机评价平台，小组长把小组作品上传到平台上，其他小组对所有的小组作品在科学性、思想性、技术性、艺术创作性等方面进行评价打分。 每个小组都能看到分数的详细情况和所有投票排行。 获得投票排行第一的小组可获得“本日设计之星”头衔，教师在平时成绩中加分。 每个小组长对组内人员进行分配。 融入自己的角色，积极讨论发表意见，把本课学习的知识点用到本环节中来。 小组下载素材，组内成员轮流分配角色，体验实际生活中网页设计公司与客户之间的交流沟通，并把作品做到最好。 2、登录14计算机评价平台，上传小组作品，同时对其它小组作品进行打分。 情境创设模拟真实企业项目帮助学生巩固提升，培养职业素养。 本环节是学生喜欢的环节，此时学生可以大胆提出意见，发挥自己的创意，同时激发学生的审美情操。 发放的任务手册所涉及的知识点更广更深，同时开放网络，让学生自主地上网搜索，有选择性地利用资源更好完成作品。 该评价平台交互性强，学生评分后能马上看到自己和其他小组的得分详细情况，通过组间沟通，能促进小组合作意识，培养学生与他人合作的能力。 奖励机制给予学生荣誉感和学习成就感，鼓励学生不断进步。
课 堂 教 学
教学环节 教师活动 学生活动 设计意图
课 堂 小 结 1、交互课件快问快答梳理知识点 通过交互式课件中的答题环节，与学生进行快问快答大考验的游戏。学生“闯关”成功后便可进入到下一个环节。 帮助学生梳理基础知识点时，留意不同层次学生的学习情况。 设计难度较大的题目，为下节课的知识点埋下铺垫。 1、小组竞争玩游戏，复习本节课的知识要点。 3、思考教师预留的思考问题，为下节课的学习做好准备。 帮助学生对所学的知识进行总结归纳，理清思路。 让教师能够掌握学生本节课的学习情况，做好后续的备课工作。
拓 展 交 流 课后登录班级学习网，欣赏作品 学生作品上传到班级学习网上，学生在学习网上交流、评论，并根据自己的喜好进行投票点赞。教师整理投票排行，把优秀作品展示在班级学习网首页，培养学生的审美情操，鼓励学生不断创作。 登录班级学习网，欣赏同学的个人作品，交流互动，投票点赞。 随时作品分享。 加强学生交流，培养学生审美情操。收集学生的“赞”，鼓励被“赞”学生继续创作，给予学习成就感。
作 业 布 置 教师在课件中发放“今日作业” 作业的布置分层次，包括基础性题目和提高性题目。 基础性题目：1、教师在云班课上导入今天的理论知识题目，学生课下随时随地可以完成。2、在云班课资源库中下载素材，按要求把CSS样式表应用到网页中； 提高性题目：CSS选择器中的属性你还知道哪些呢？请您收集好您所知道的属性，下节课把它们带到课堂上来和同学们分享吧！ 浏览课件中的课后作业一栏，认真听老师提出的作业要求。 学生掌握知识的程度不同，所以能完成的作业强度也不同。分层次布置作业体现了因材施教的理念，学生不会因作业难度过大而放弃完成。 基础性的作业有助于学生巩固知识点，提高性的作业帮助学生提升技能水平。
第三部分：【课后拓展】
课 后 拓 展
教学环节 教师活动 学生活动 设计意图
课 后 延 伸 拓 展 技 能 “头脑风暴”活动，学生畅所欲言 教师整理学生在本节课所遇到的问题，以“头脑风暴”的活动形式发布在移动学习平台上，学生在活动中畅所欲言。 对学生的发言情况给予点赞和打分。 移动平台发布试题，随时随地测试 根据学生学习情况，教师在移动学习平台上发布巩固本节课知识点的理论题目，学生进行测试，教师随时随地掌握学生学习情况和学习进度。 浏览老师在手机平台上发布的交流问题，积极发言。 浏览其他同学的答案，思考与自己的答案是否一样，集思广益，交流学习。 留意云班课学习平台的消息，按时完成教师布置的试卷题目。 课下发布“头脑风暴”活动，就课堂上学生所遇到的难题，集思广益，让学生畅所欲言，培养学生的探索能力和解决问题的能力。 对学生的回答给予一定的奖励，帮助学生整理课下碎片时间，保证学习的连贯性。
课 后 拓 展
教学环节 教师活动 学生活动 设计意图
课 后 延 伸 拓 展 技 能 采取鼓励表扬机制 教师根据学生在云班课学习平台上上传的作品以及讨论、发表意见的活跃度、浏览学习资料的次数给学生打分，并加入到学生实际的平时成绩中。 教师在蓝墨云班课平台上动态掌握学情 在手机学习平台上做测试题，查看分数，研究答案解析，巩固知识。 学生随时随地都可以用手机做试卷，反复观看知识点，答卷完成能马上看到分数与答案，还能看到错题分析，突破了传统考核的局限性，充分利用了学生的碎片时间。 教师可以随时掌握学生的答题情况，了解学习进度，动态地掌握学情。
九【教学反思】
（一）思得
移动教学平台推送微课视频、课件等教学资源到学生的移动设备上，课堂内外随时开展投票、头脑风暴等教学活动，打破传统教学局限性。
三维动画化枯燥为生动有趣，学生掌握理论知识再也不是难题。
微课视频在学生完成任务过程中帮助反复学习，提高学习效率。
交互课件有别于传统的ppt等教学课件，交互性强、操作方便、学生喜欢。
信息化手段巧妙地融入到了传统课堂教学中，以学生为中心，体现做中学做中教的教学理念，使学生高效地掌握CSS样式表的使用，达到教学目标。
通过统计学生自我评价调查表，大部分学生表示在知识点掌握度和课堂参与度上都能够达到优秀的水平，通过信息化手段的使用，解决了枯燥的代码带来的学习难题，也由原来的4个课时缩短为2个课时，大大提高了课堂的效率。
（二）思失
本节课也有需要改进的地方，例如让学生使用手机进行自主学习，但我班部分学生自控能力较弱，容易被其他手机软件所分神；上网搜索资料搜到一些与课程无关的信息时会被吸引，无法立刻回到课程中来。教师应正确引导学生对电子产品的使用，让电子产品真正地成为学习的工具。
十 教学附件
附件１：网页设计效果图的评价量规表（小组互评）
附件2：学生课堂表现评价量规表（自我评价）
学号 姓名 总评
评价项目 评价内容及评级
个人参与课堂学习及活动的状态 A：优秀（8—10分） B：良 （5—7分） C：尚需努力 （0—3分）
积极思考，主动并准确回答老师提出的问题。 专心听讲，能够基本回答老师提出的问题。 偶尔开小差。
小组合作学习的参与情况 A：优秀（8—10分） 良 （B：5—7分） C：尚需努力 （0—3分）
积极参加小组合作学习，发挥主力作用。 按要求参与小组合作学习，善于表达自己的观点。 较少与他人讨论，合作。
在设计网页中，对导入外部CSS样式表、修改CSS选择器属性值的掌握情况 A：优（8—10分） 良 （B：5—7分） C：尚需努力 （0—3分）
熟练使用CSS样式表，能很好地掌握不同CSS样式的使用。 能够掌握本节课所学知识，简单导入CSS样式表。 还不能理解CSS样式表的概念，不大有信心完成CSS样式表在网页设计中的使用。

展开更多......

收起↑