- 1、本文档共2页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
课题名称
教学设计互联网数据——网页的数据呈现
教学设计
备课教师
评课教师
年级
九年级
课时
1
教学目标
1.通过体验CSS设置的效果,认识样式表,了解样式表的作用。
2.通过网页中添加样式,掌握样式表的基本结构。
3.能理解使用CSS降低网页代码耦合度所带来的便利性。
教学重点
通过网页中添加样式,掌握样式表的基本结构。
教学难点
理解使用CSS降低网页代码耦合度所带来的便利性。
教学过程
备注
“导”(6分钟)
老师这里有一个介绍“人工智能应用”的网页设计,请同学们思考这个页面有什么问题?内容样式不协调统一、缺乏整体性。针对这样的呈现问题,那么如何对网页的数据内容进行样式设置呢?复习上节课通过HTML标签中属性设置样式:给每个元素的标签中声明一个或多个属性来设置样式,比较直观,便于单个修改,但是缺点是同类别的元素样式设置会出现代码重复性,造成代码冗余,当网页数据较多时,一定程度上会影响浏览器的解析(呈现)速度。
引出本节课的内容:使用CSS设置样式。
“思”(12分钟)
什么是CSS呢?阅读p39页内容。
CSS的样式
字号、字体、颜色、位置以及图片的大小......
CSS的优点
1、样式与内容分离
2、网页加载速度快
3、一致的样式设计
4、容易维护和更新
5、响应式设计
6、可扩展性
接下来我们通过任务活动来认识并学习使用CSS,在同学们的桌面上有一个“index.html”半成品网页,打开看看哪些内容的样式需要调整?怎么调整?(大标题的颜色;三个小标题的位置、字体、字号、颜色;三张图片的大小;背景色等)
任务一:修改大标题的颜色、修改图片的大小、设置三个小标题的样式。
阅读课本p41页样式表的基本结构:
1.CSS语法结构:
选择符{样式属性1:属性值1;样式属性2:属性值2;样式属性……}选择符:用来选择要定义样式的对象。
2.CSS的类型:内部样式表、外部样式表、内联样式表。
优先级:内联样式>内部样式>外部样式
任务二:美化页面——给三个标题单元格及网页添加合适的背景。
学习背景样式的设置。(可设置背景色,也可设置背景图。颜色可借助“颜色代码”网站来设置属性值。)展示学生作品,师生点评页面效果。
“议”(7分钟)
任务三:CSS是专门用来设置样式的,使用它可以将内容结构和样式设置分离,那么如果有多个页面需要应用同一种样式,该如何呢?以小组为单位,观察教师展示网页文件范例的代码,里面没有对元素有样式设置的代码,却有页面样式效果,讨论这是为什么?
“展”(7分钟)
教师请小组展示讨论结果:在head标签中出现了一个link标签,页面的样式就是通过link标签这个语句来实现。这样多个页面应用同一个CSS,只要通过一句link标签语句行就可以实现,且只要修改这个CSS文件,就可以更新所有页面的样式。
“评”(8分钟)
1.教师对勇于展示的同学进行鼓励,并鼓励其他学生质疑、挑战、纠错、补充。
2.师生共同总结本节课收获:
①认识了CSS(层叠样式表)
②CSS语法结构:
选择符{样式属性1:属性值1;样式属性2:属性值2;样式属性……}选择符:用来选择要定义样式的对象。
③CSS的类型:内部样式表、外部样式表、内联样式表。
优先级:内联样式>内部样式>外部样式
④分离式的CSS优点:提高网页加载速度易于维护和更新提高开发效率,利用CSS可以实现多样的页面样式效果
六、“练”(5分钟)
1.用CSS样式表美化网页。
2.尝试使用图像标签,在网页里加入一张平铺模式的背景图。
教学板书
一、网页数据呈现的方式
二、CSS
三、样式表的基本结构
教学反思
本节课内容比较抽象枯燥,但也是本单元核心知识点,注意讲解与布置任务时要分解成小任务,确保学生都能学会、完成,逐步攻破难点。
您可能关注的文档
- 第6课《互联网应用中的数据》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第一单元第七节 谁的销售情况更好 用分类汇总做统计 课件 西交大版(2024)初中信息技术八年级上册.pptx
- 第二单元 直播网络我来建 第四课 数据分包灵活传 教学设计 人教版(2024)初中信息技术七年级全一册.docx
- 第15课《个人数据安全宣传》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第14课《网络身份认证》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第13课《网络安全防范》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第12课《数据解密》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第10课《网页的编辑与发布》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第7课《网页的数据组织》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册.docx
- 第二单元第2课 信息传输新体验 课件 西交大版(2024)初中信息技术七年级上册.pptx
文档评论(0)