《2022年《网页格式刷》教学案例.docx》由会员分享，可在线阅读，更多相关《2022年《网页格式刷》教学案例.docx（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -优秀学习资料 欢迎下载教学案例基本信息设计者 单位 高级中学案例名称网页格式化 CSS 样式表教学案例适应范畴（标明年级和模块）高一 网络技术应用（选修）课时网页格式刷CSS样式表教学案例【教材分析】“CSS 样式表” 是高中信息技术选修网络技术应用的第五章“ 动态网页制作” 中的内容；教材中将这块内容分为“ 什么是CSS” 、“ CSS 实现” 、“ 在 HTML 中加入 CSS” 三部分；本节内容的重点应当是“ 运用 CSS 进行样式设置的方法和格式” 及“ 在 HTML 中加入 CSS 的三种方法” ；
2、因此我认为将“CSS 实现” 与“ 在 HTML 中加入 CSS” 两部分结合在一起讲比较好；此外,我认为“ 体会 CSS 样式表的优点” 也应当是一个教学重点；同学以往用FrontPage 做网页都习惯用工具按钮、菜单命令来进行网页外观设置,使用代码对同学来说是件令他们头疼的事,所以我认为有必要通过 让同学体会 CSS 样式表的优点让同学明白为何我们要学习这部分内容；【教学目标分析】1、学问与技能 1什么是 CSS 样式表；2CSS 样式表的优点；3嵌入式、内联式、外联式三种样式表的使用方法；4通过对三种样式表的亲身实践,感受这三种样式表的优缺点；2、过程与方法1通过 WORD 排版中的“
3、格式刷” 引入网页中的“CSS 样式表” ,通过类比,使同学初步明白CSS样式表的作用,激发学习爱好；2对于 CSS 样式表的概念和优点主要由老师讲解,并让同学在实践操作中感受样式表的优点；3对于嵌入式、内联式、外联式三种样式表的使用,由老师讲授方法和代码的书写格式要求,由学 生依据实例要求自我实践操作；4在同学的实践操作过程中,让完成较快的同学充当小老师,帮忙其他同学发觉和改成错误；3、情感态度与价值观 1通过 CSS 样式表的学习,提高同学美化网页的技能；2培育同学的探究、实践才能；3通过实践过程中的“ 小老师” 角色,让同学感受同学之间的互助友爱,团结协作；【学情分析】通过前阶段的学习,
4、同学已经熟悉了动态网页,并对HTML的标签及属性也有了明白；考虑到我所在学校的同学学习才能、领会才能比较强；因此虽然CSS 样式表对于同学来说是全新的内容,但假如老师采纳“ 讲授概念操作演示同学操作” 的模式上课,将无法激发同学自主探究学习的 爱好和热忱,所以我采纳了老师讲授概念和方法,然后由同学自主探究实践操作,使同学的学习更 具挑战性；【教学重点、难点分析】细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 5 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -优
5、秀学习资料 欢迎下载1、教学重点 1CSS 样式表的概念；2体会 CSS 样式表的优点；3嵌入式、内联式、外联式三种样式表的使用方法；4CSS 代码的书写格式,输入的精确性；2、教学难点 1三种样式表在使用上区分；2CSS 代码的书写格式；【教学过程】新课导入： 老师活动：老师展现两篇 WORD 文档 A 和文档 B,文档 A 已经进行了文字字号、字体、颜色、行 距、首行缩进等排版,文档 B 未进行任何排版；A 的字 老师提问：同学们,在 WORD 编辑中,有什么方法能让文档 B 以最快捷的速度排版成文档号、字体、颜色、行距呢？同学活动：部分同学摸索后回答“ 格式刷”；A 的排版外观；老师活动
6、：老师快速的利用格式刷将文档B 设置成文档老师活动：老师展现两张网页,网页A 已经进行了文字字号、字体、颜色、文字链接动态成效、彩色滚动条等外观设置,网页 B 未进行任何设置；老师提问：现在老师想把网页 B 也设置成网页 A 的外观,有什么方法能够快捷而便利地帮我们做到呢？同学活动：部分同学回答说“ 格式刷”；“ 格式刷” ,是不是就能很便利的将网页B 设置成老师提问：假如我们在做网页的过程中,也有一把网页 A 的外观呢？网页制作中,究竟有没有这样的“ 格式刷” 呢？老师操作：打开网页A 的源代码,将CSS 样式代码复制到网页B,马上使网页B 具有了与网页A相同的外观；老师提问：老师刚才复制粘
7、贴的那段代码是不是具有与“ 格式刷” 相同的作用？今日我们就来学习“ 网页中的格式刷” CSS 样式表；新课讲授： 一：什么是 CSS 样式表？老师活动：讲授 CSS 样式表的概念；用一个指定的名字来标识和储存的一组相关字符和段落格式的选项集合；让同学明白 CSS 样式表的优点；结合实例 1、防止在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、 字号、颜色）,从而使应用该样式的网页具有相同的风格；2、只需要修改一个 率；CSS 代码就可以转变页数不定的网页外观和格式,提高网页编辑效3、可以“ 随心所欲” 地掌握页面布局和外观；4、在全部浏览器和平台之间具有较好的兼容性；二：如何在
8、HTML 中加入样式？1、嵌入式样式表 老师活动：老师讲授嵌入式样式表的使用方法；细心整理归纳 精选学习资料 方法：只需在每个要应用样式的HTML的标记后写上CSS 属性就可以了；” 第 2 页,共 5 页 CSS 属性书写格式：style= “ color:red;font-family:黑体 ;font-size:24pt留意： color 的属性值仍可以用颜色代码,如：#ff0000 ； - - - - - - - - - - - - - - - - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -老师活动：布置课堂练
9、习题1；优秀学习资料欢迎下载打开 example1 文件夹下的qzwx.htm ,将网页中文章标题文字“ 秋天的童话 如梦” 用嵌入式样式表设置成：#ff9900 ,30pt,黑体；（成效如下图）同学活动：依据老师讲的方法,进行练习；老师活动：巡回辅导,提示同学输入字母、标点肯定要精确；老师提问：假如用嵌入式样式表来为网页中的文字设置外观,方不便利？同学回答：不便利；老师活动：总结嵌入式样式表的不足；嵌入式样式表主要用于对详细的标签作详细的调整,其作用的范畴只限于本标签；这种 样式表并不能充分表达出 CSS 样式表的优越性；引入内联式样式表；2、内联式样式表（1）作用于网页中的部分文字 老师活
10、动：老师讲授第一种内联式样式表的使用方法；方法： 1 在网页的 定义样式,如： 黑体 .a1 color:green;font-size:14pt;font-family: 2 在要设置此样式的文字头插入 , 文字尾插入 , 如：1、提示一些不相干的话； 留意： a1 为定义的样式名,不同的网页,样式名可以不同；老师活动：布置课堂练习题2；bingdu.htm ,用内联式样式将网页中的9 个小标题字体设置打开 example2 文件夹下的为：绿色、 14pt 、黑体；（成效如下图）同学活动：依据老师讲的方法,进行练习；老师活动：巡回辅导,提示同学定位插入点要精确,样式名前的点不能丢,输入字母、
11、标点也肯定 要精确；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 5 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -优秀学习资料 欢迎下载老师活动：发觉许多同学的错误都来自输入错误,自己检查半天也查不出来,于是提议让同桌同学 帮忙找错；同学活动：同学很仔细的帮同学找错；老师提问：假如要把“bingdu.htm ” 网页中的小标题的颜色由绿色改为蓝色,想一想该如何做？同学回答：只要在定义样式的代码中将“green” 改为“blue” 就行了；老师提问：但是假如
12、我们没有用内联式样式表,那又该如何做？同学回答：那就得九个标题一个一个改颜色,改九次；老师活动：引导同学体会样式表的使用提高了我们修改网页的效率！（2）作用于整个网页 老师活动：老师讲授第一种内联式样式表的使用方法；方法：在网页的 插入代码：“ text/css” style type= 样式表 CSS内容 老师活动：布置课堂练习题 3；打开 example3 文件夹下的teacher.htm,用内联式样式表制作超链接文字的动态成效：当鼠标划过时,设为超连接的文字,变成橘黄色,并显现下划线；（成效如下图）此题代码由老师供应代码图片,同学自己输入；同学活动：依据老师讲的方法,进行练习；老师活动：
13、巡回辅导,提示同学定位插入点要精确,输入字母、标点也肯定要精确；提示同学利用 复制粘贴相同代码后修改,提高自己的输入速度；连续勉励同学相互帮忙找错误；老师提问：假如网站内有几十网页都要用到此浮动链接成效,该如何做呢？同学回答：每张网页都插入同样的 CSS 代码；老师提问：有没有什么方法可以简化这项操作呢？既然几十张网页都要用同样的代码,能不能把这 段代码制作成一个独立的文件,然后由每张网页调用呢？3、外联式样式表细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 5 页 - - - - - - - - - 名师归纳总结 精品学习资料 - -
14、- - - - - - - - - - - - -优秀学习资料 欢迎下载老师活动：老师讲授外联式样式表的使用方法；方法： 1将样式定义成一个“.css ” 的文件：可在记事本中输入样式代码,然后储存为扩展名为“2 在网页的 head 区插入引用代码：.css ” 的文件； 留意：标签中的属性没有前后次序要求；老师活动：布置课堂练习题 4；打开 example4 文件夹下的teacher.htm,用外联式样式表制作超链接文字的动态成效：当鼠标划过时,设为超连接的文字,变成橘黄色,并显现下划线；同学活动：依据老师讲的方法,进行练习；老师活动：巡回辅导,提示同学定位插入点要精确,输入字母、标点也肯定
15、要精确；样式文件和网 页文件要储存于同一个文件夹内；课堂小结： 老师活动：通过两节课的学习,同学们知道了什么是 CSS 样式表,把握了三种 CSS 样式表的使用；同学们通过实践操作,也体会到了使用 CSS 样式表可以防止许多重复操作,从而提高网 CSS 样式表来美 页编辑和修改的效率；期望同学们以后在自己制作网站时,能敏捷运用 化自己的网页；【自我评析】本节内容假如但看教学内容,感觉1 课时就可以完成,但是考虑到高二会考对CSS 代码的输入有肯定的要求,所以我打算全部练习题的代码都由同学自己输入,由于同学的输入速度及精确性问 题,比估计多用了一课时；虽然多用了一课时,但是由于学问点讲得比较清楚
16、,给同学练习的时间 比较充裕,自我感觉同学的学习成效比较好；虽然课题引入用去的时间比较多,但是通过WORD 文档中的“ 格式刷” 类比引入,给了同学很直观的感受,很好的激发了同学们的学习爱好；在讲授三种 CSS 样式表的使用方法时,采纳通过实 践前一种,感受总结不足,引出其次种,使同学对于三种使用方法的区分有了比较深刻的熟悉；在同学实践过程中,虽然老师已经一再提示代码中的字母、冒号、分号、引号不能输错,但学 生仍是会显现输入错误,而且自我检查不简单找到错误；于是我就让同桌同学相互帮忙找错,既让 同学感受了同学互助,又收到了很好的学习成效；细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页,共 5 页 - - - - - - - - -