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