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