python课件教案02_神奇的CSS教案.docxVIP

PAGE

PAGE1

神奇的“CSS”

——第2次课常规课

一、教学目标

1.知识与技能

（1）认识CSS，理解CSS与HTML的关系；

（2）掌握HTML代码中CSS的三种引入方式；

（3）掌握CSS选择器的使用。

2.过程与方法：

（1）通过一个个贴近生活的案例进行情景引入，激发学生对本节学习内容的兴趣，引发关联性的内容思考；

（2）每节课程开始前，对上节学习内容的知识点进行复习，加深印象；

（3）老师与学生间进行代码互动式的教学编写，带着孩子一步步完成任务。

3、情感态度与价值观：

（1）通过贴近生活的案例培养激发孩子的兴趣与爱好，在一个个生活案例中树立孩子正确的价值导向；

（2）代码的编写过程是精彩的，也是乏味的；是充满创造性的，也是一点点的基础前行；训练孩子逻辑思维、想象能力的同时，还磨练了孩子们的耐心，做到身心的锻炼。

二、教学重点、难点

【重点】CSS外链式与内嵌式的引入方式；选择器的使用；

【难点】CSS的三种选择器的切换使用

课时安排

课时安排：120分钟

四、上课准备

1. 课前检查所有学员电脑Python的安装情况，打开代码试运行。

2. 课前检查电脑、投影仪、网络是否有故障，及时修复。

3. 备课过程中预设上课的突发情况，想办法解决。

4. 备课过程中，以学生的视角去审视自己的课堂，及时做出改进。

5. 课前排查教学环境中所存在的安全隐患。

五、教学活动

1课前回顾（时间：3-5min）

注释 !--这是一段注释--

标题标签 h1一级标题/h1

段落标签 p/p

通用块容器标签 div/div

超链接标签 ahref=链接名文字/a

图片标签 imgsrc=images/pic.jpgalt=图片/

换行标签 br

2情景引入（时间：5-10min）

2.1上节课我们重新认识了网页的结构组成，知道了HTML的编程模式，知道了我们日常生活中，上网所浏览的页面都是由一行行html代码组成。HTML的代码中，又是由一个个标签组成的，认识了div，p，h1，br等标签，我们知道标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。并且上节课我们也动手也出了第一份个人的网页页面，但是是不是跟我们日常生活中所浏览的页面相比较，我们所书写的页面确是如此的单调呢？那些我们经常看到的酷炫页面都是怎么做出来的呢？【学生提问】

2.2那是因为我们所看到的标签并不是单单有标签就可以了，标签仅仅是提供页面上所展示的内容，为了让内容有更加酷炫、丰富的表现形式，我们还需要学习一种新的语言，CSS用来描述网页展示内容的样式效果！本节课呢，我们就要学习这一新的语言，CSS，学完了它，你们就可以初步的为标签内容提供稍有不同的展示效果了！注意哦，老师说的知识稍有不同，毕竟你们日常看到的那些酷炫的页面可是需要相当深厚的内功才能编写出来的呢！下面我们将要先了解什么是CSS，已经CSS的引入方式和选择器，听不懂没有关系，重点是接下来跟着老师一起学习完本节课就明白了！

3什么是CSS？（时间：15-20min）

3.1CSS是CascadingStyleSheets的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。 其实呢，想到网页页面达到很高的境界，除了html和css，还需要JS（JavaScript），三者bai的关系可以用房子来描述。如果说一个duhtml页面就是一个zhi房子的话，那么其中的html元素就好比建dao成房子的砖、木、土、钢、水泥、沙子等各种材料，css就是让房子看起来像怎样的设计规范或者图纸，javascript就是用来调整用css规范建成的房子的各个已经就位的元素，让它们能够灵活地移动或者活动，比如控制一个门是开着还是关着的，把桌子从左边移动到右边等等。html是基础,css是表态地规范html元素的位置大小颜色等等状态的，而javascript则可以动态地控制html元素。这就属于新的编程领域了，以后有这方面兴趣的同学，可以自行去了解哦！老师这里还准备些超级酷炫的网页效果展示视频，一起来欣赏一下吧！

3.2CSS的，一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。比如一个div标签，我们可以设置这个标签的宽、高以及背景颜色等等，这就是CSS的功能。选择器选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每