广东省创新杯说课大赛计算机类一等奖作品：《CSS样式表的使用》说课稿.pdfVIP

广东省创新杯说课大赛计算机类一等奖作品：《CSS样式表的

使用》说课稿

《网页换装秀》——CSS样式表的使用

讲解稿

尊敬各位专家、各位评委：

大家好！今天我给大家带来的信息化教学设计是《网页换装秀》

——CSS样式表的使用。下面我将从五个方面阐述我的教学设计。

一、教材分析

教材出处与地位：本课程选用教材为高等教育出版社的《网页设

计与制作(HTML+CSS+JavaScript)，本课内容为第4单元《CSS的应

用》任务一CSS的引用、任务二页面样式设置。本章对前面的基础章

节的做了综合深化，又开启了后续DIV+CSS知识对接，起到承上启下

的作用。

教学目标：根据专业培养目标，我将达到以下三方面的教学目标。

教学重难点：经过分析，本课的教学重点为理解CSS样式表的概

念、外部样式表的应用；

难点为CSS选择器属性值的修改。

二、学情分析

我所教授的对象为计算机应用中职二年级的学生，学生能熟练使

用DW软件独立制作简单的网页，有一定的代码基础。但是在美化页

面这方面的知识较为欠缺，学习代码缺乏耐心。

三、教法学法

经过以上教材与学情的分析，本课采用以下教法与学法。

四、教学流程

教学流程分为三大模块：课前准备课堂教学课后拓展

课前准备：课前，我准备了微课视频，三维动画，交互课件，任

务手册，利用蓝墨云班课移动学习平台为载体，学生自主地在平台上

预习、观看微课、讨论问题。

一切准备就绪，开始进入我们的《网页换装秀》。

课堂教学：我将信息化手段融入于导入、新授、提升、小结、交

流五个环节，从而达到教学目标。

导入：首先，我向学生展示了一个没有美化的网页界面，接着仅

用了一个操作，便把刚才的界面摇身一变，变成了同学们再熟悉不过

的淘宝网首页。接着我提出问题，如果是你们，会用什么方法来修改

这个页面呢？同学们纷纷提出自己的想法。带着疑问，我领着学生走

进我们的新课讲授环节。

新课讲授分为三个任务，层层递进

任务一：观看《美美的换装秀》，认识CSS样式表的概念

理论知识讲解在中职课堂上往往是学生较为排斥的，加上该知识

点以代码为基础，学生的学习积极性更是大打折扣。在这里，我制作

了《美美的换装秀》三维动画帮助学生理解CSS样式表的概念。

任务二：看完有趣的三维动画，我趁热打铁引入今天的任务二—

—添加外部CSS样式表，利用交互式课件分步骤讲解如何在DW中添

加外部CSS样式表，该课件有良好的交互界面，能被学生反复地操作

观看知识点步骤，帮助学生扎实地掌握学习重点。

学生开始实操。操作过程中，我发放了微课视频，帮助学生掌握

重点，任务二不用接触代码，学生通过可视化的点击操作便能轻松地

帮网页换装，效果明显，学生兴趣激发。

任务三：进而我再提出问题，仔细观看你们添加CSS样式表后的

网页，有什么需要改进的地方吗？

学生们纷纷讨论提出自己的意见，例如页面字体过大，图片不符

等等。此时，我抛出本节课的第三个任务：修改CSS选择器属性值。

任务三为本课学习难点，为了先让学生理解什么是CSS选择器，我又

请美美来帮忙讲解。

学生们正确理解CSS选择器后，我利用交互式课件讲解修改选择

器属性值的操作步骤，同时发放学生任务手册，给学生清晰明了的操

作任务，要求学生修改指定的属性值，再合理地美化页面，由浅到深

帮助学生突破学习难点。考虑到部分学生掌握地较慢，我发放第二个

微课视频，帮学生克服难点。

学生完成任务，教师发放评价量规电子表格，学生小组互评，教

师及时地给予点评、肯定及表扬。

巩固提升：

三个任务完成后，我创设了情景，模拟真实企业项目帮助学生巩

固提升