网页设计与制作项目式教程(HTML+CSS)电子教案 07.制作“古诗”“诗文释义”模块_第1页
网页设计与制作项目式教程(HTML+CSS)电子教案 07.制作“古诗”“诗文释义”模块_第2页
网页设计与制作项目式教程(HTML+CSS)电子教案 07.制作“古诗”“诗文释义”模块_第3页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页设计与制作教案授课教师授课班级授课日期课题制作“古诗推荐”模块计划学时教学目标知识目标掌握有序列表<ol>、无序列表<ul>、定义列表<dl>的HTML语法理解list-style-type属性对列表符号的控制方法掌握列表项间距与样式的CSS设置技巧能力目标能根据需求选择合适的列表类型实现内容排版能通过CSS灵活控制列表样式(符号、缩进、颜色等)能完成“古诗推荐”模块的结构搭建与样式美化素质目标通过古诗推荐模块开发,增强对传统文化的兴趣培养页面布局的逻辑性与审美能力教学重点三种列表的HTML结构与属性设置list-style-type属性的取值与效果列表项的间距控制(margin/padding)教学难点定义列表<dl>的嵌套使用列表与其他布局方式的结合应用教学模式及教学方法理实一体化、线上+线下混合教学模式项目教学法、任务驱动法、讲授法。教学活动及主要环节素质培养课前导学1.观看学习平台相关微课视频。2.让学生搜集经典古诗文作品3.完成课前测试题。课中践学【情景导入】互动游戏:展示网页截图(如古诗列表、商品目录、术语解释)学生分组抢答:“这些内容适合用哪种列表?为什么?”情境创设:展示“古诗推荐”模块效果图,提出核心问题:

“如何用列表结构清晰展示古诗信息?”【新知探究】活动1:有序列表大发现教师演示:HTML:<ol><li>《将进酒》-李白</li><li>《沁园春·雪》-毛泽东</li></ol>CSS:ol{list-style-type:upper-alpha;}学生实践:

将序号改为小写罗马数字,观察效果变化活动2:无序列表变形记小组竞赛:

用无序列表展示诗人朝代,要求:唐代诗人用实心方块宋代诗人用空心圆元代诗人用自定义符号(如◆)活动3:定义列表挑战案例分析:

展示古诗注释需求,引导学生设计定义列表:HTML:<dl><dt>词牌名</dt><dd>沁园春</dd><dt>创作背景</dt><dd>1936年毛泽东...</dd></dl>互动问答:

“定义列表的<dt>和<dd>可以嵌套其他列表吗?”(引导学生尝试)【项目实战】任务:完成“古诗推荐”模块1.结构搭建学生独立完成HTML结构2.样式美化教师引导:如何去除默认列表符号?如何调整列表项间距?如何实现“更多>>”右对齐?四、任务拓展布置拓展任务:思考如何用CSS定位实现“古诗推荐”模块的更多布局效果。(学生可在完成基本任务的前提下,完成拓展任务。)课后拓学1.完成任务3.3的课后练习。2.扫码观看任务3.4中的微课视频,预习新课。3.完成项目延伸任务,将结果文件上传至教学平台。通过学习平台学习相关内容,让学生养成自主学习的习惯。通过搜集并制作古诗推荐模块,让学生重温经典诗词作品,感受传统文化的魅力,增强民族自信。通过任务分析,锻炼学生分析问题的能力,以及用数字化、图形化的方式来呈现,培养其数

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论