南京师范大学教育实习教案

实习生姓名李玉凤指导教师审阅签名王圆2019年10月24日实习学校南京市第三高级中学年级和班级高二(5)班实习学科信息技术课程题目CSS样式表与JavaScript教学目的知识与技能:1、理解什么是CSS样式表;2、掌握在HTML中加入CSS样式表的方法;3、掌握简单的CSS样式表代码;过程与方法:1、通过对CSS样式表的学习,能够运用CSS样式表优化网页制作;2、学会正确、合理地运用技术;情感态度价值观:1、培养学生独立思考、动手实践的能力;2、激发学生学习网页制作的兴趣,通过师生、生生互动,学生自主学习,增进学生的自主性和合作精神.
教学重难点重点:CSS样式表的三种应用方式;难点:三种CSS样式表选择应用;课程类型与教学模式、方法课程类型:新授课教学方法:讲授法,演示法教学用具与媒体机房多媒体设备(教师机、学生机)、ppt课件教学过程与时间分配教学设计与教学内容教学设计意图新课导入(6min)在学习CSS样式表和JavaScript这部分内容之前,我带大家先理清对于网页制作我们需要学习哪些内容.
根据W3C标准,一个网页主要由三部分组成:结构、表现、行为,这三部分所对应的技术是,结构——HTML,表现——CSS,行为——JavaScript.
那什么是结构、表现、行为呢结构:HTML用来描述页面的结构表现:CSS用于控制页面中的元素的样式行为:JavaScript用于响应用户的操作展示一组类比人的图片理解三者之间的关系.
在前面我们已经学习了HTML语言,完成了结构这部分内容,那接下来我们就重点学习一下CSS样式表和JavaScript语言.
那到底什么是CSS样式表什么又是梳理网页的组成结构,明确学习内容及各自之间的关系.
视频导入,激发学生的学习兴趣,吸引学生的注意力.
让学生更加直观的理解CSS以及JavaScript的JavaScript呢下面我们带着这两个问题来看一段小视频.
概念及其之间的关系.
CSS样式表的概念(1min)CSS(CascadingStylesheets),全称层叠样式表.
作用:给被HTML标记的内容加上装饰,美化页面.
常见属性:color:改变文字的颜色font-size:改变文字的大小background-color:添加背景颜色border:添加边框float:使文字浮动了解CSS样式表的概念、作用及其常见的属性.
CSS样式表的三种应用方式(14min)CSS运用的方式有三种:1、嵌入式2、内联式3、外联式一、CSS嵌入式CSS代码嵌入进HTML的标记内,这种方式叫嵌入式样式表.
格式:如:作用范围:只作用于某一标签实践一:利用CSS嵌入式的方法,将index.
html这个网页中的第二段文字做以下修改:字体(font-family):宋体大小(font-size):18pt颜色(color):blue提出问题:如果我想要index.
html这个网页的所以内容都具备第二段的风格,应该怎么办二、CSS内联式内联式样式表就是把样式表定义语句放在标签和中,并把这一部分语句放在HTML文件的标签之前.
(即把需要加入的CSS代码放在head区域)定义格式:引用格式:样式名>例如:body{font-family:"黑体";font-size:24px;color:yellow;background-color:green;}作用范围:当前页面(定义在head区,引用在body区)实践二:利用CSS内联式的方法,将index.
html这个网页中所有段落的文字都具备以下风格:字体(font-family):宋体大小(font-size):18pt颜色(color):blue我们知道一个网站不只一个网页,那如果我们想要这个网站的每个网页都具有同样的风格,应该怎么做呢三、CSS外联式外联式是将CSS代码单独保存成一个扩展名为.
css的文件,从而每一个网站中的页面都可以调用该文件.
调用代码:在head区域加入:作用范围:可以将一个*.
css文件让多个页面应用.
演示三:如何运用CSS外联样式表第一步:定义一个*.
css文件在记事本中输入p{font-family:宋体;font-size:12pt;color:blue;}保存为:"style.
css"文件第二步:引用在head区域加入代码:演示操作,让学生直观感受内联式式CSS样式表的应用.
引入CSS样式表的第三种应用方式:外联式.
了解CSS外联式的概念、格式.
通过演示操作,让学生更加直观地掌握CSS外联样式表的应用.
提出问题:假如我要把页面的呈现风格改为字体为黑体,字体大小为20pt,字体颜色为绿色,并添加背景颜色为粉色,应该怎么做演示操作,解决上述问题.
CSS样式表的特点:只需修改一个CSS代码就可以改变页数不定的网页外观和格式,从而使应用了样式的网页具有相同的风格,提高了网页编辑效率.
可以"随心所欲"地控制网页布局和外观.
在所有浏览器和平台之间上具有较好的兼容性.
精简网页,提高下载速度.
引发学生思考,检验学生对CSS样式表运用方式的掌握.
通过演示操作让学生直观感受到使用CSS样式表去修改网页风格的便捷.