项目2-1段落、图片与区域标签_第1页
项目2-1段落、图片与区域标签_第2页
项目2-1段落、图片与区域标签_第3页
项目2-1段落、图片与区域标签_第4页
项目2-1段落、图片与区域标签_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

项目2中华优秀传统文化网站-揭秘自然规律课程名称授课内容授课学期2024-2025（1）学期授课班级授课时间授课地点授课形式理论+实践授课课时学情分析授课对象计算机应用技术专业大一学生，已完成开发环境HBuilder和HTML基础结构的学习，对网页制作有初步认知。学生知识经验分析学生已了解HTML基本文档结构（<html>,<head>,<body>），但尚未系统学习用于组织内容的具体标签；对于如何在网页中结构化地呈现文本缺乏实践经验，对CSS控制布局的概念模糊。学生学习能力分析学生能创建简单HTML文件，但页面内容组织杂乱，无法实现图文并茂的排版，编写代码的规范性有待加强。学生思想状况分析部分学生认为基础标签简单，可能产生轻视心理，需引导其认识到“基础是创新的基石”。教学目标知识目标掌握<p>段落标签的作用、语法及基本属性（如align,title）；掌握<img>图片标签的作用、核心属性（src,alt,title,width,height）及图片路径（相对路径）的概念；掌握<div>区域标签的容器作用及其在网页布局中的意义。能力目标能够使用<p>标签合理分段网页文本内容；能够使用<img>标签正确插入并基本控制图片显示；能够使用<div>标签划分网页逻辑区域，为后续CSS布局打下基础。价值目标通过制作“揭秘自然规律-二十四节气”页面，引导学生感悟中国古代劳动人民的智慧，理解“道法自然”的哲学思想，增强文化自信和民族自豪感；通过标签的规范使用，培养学生严谨、细致的编码习惯和工匠精神；通过项目实践，树立“技术是传承与弘扬文化的有效工具”的正确价值观。重点难点解决策略：1.通过大量对比练习（同目录、子目录、上级目录）巩固路径概念；思政资源教学方法线上线下混合式教学、任务驱动教学法、自主探究学习法、VR体验法教学手段多媒体、VR、动画视频等课程资源智慧树线上课程资源清华在线教学平台教学视频教学照片课程案例观看动画授课照片教学实施教学内容教师活动学生活动意义课前引入1.在智慧树平台观看短片《智慧的结晶——二十四节气》；2.思考：一个介绍“立春”节气的网页，应该包含哪些基本元素？（文字、图片如何组织？）。1.发布预习任务：观看文化短片，思考“节气如何体现古人对自然规律的把握？”；2.引导学生从内容角度过渡到技术实现角度，思考网页的构成要素。1.观看视频，思考问题；2.在平台讨论区简要回复网页构成想法。1.思政元素：感悟先人智慧，理解“道法自然”，激发文化自信和学习内驱力；2.激发兴趣，建立文化认同感，为项目主题铺垫。学习目标掌握三种核心内容标签（<p>,<img>,<div>）的用法；能制作一个简单的“节气介绍”图文页；3.培养结构化思维和严谨的编码习惯。1.清晰展示本课知识、能力、价值三维目标；2.强调“规范编码”与“文化表达”同样重要。1.明确本节课需要掌握的关键技能和要完成的任务；2.记录核心知识点。使学生带着目标学习，提高学习效率。课前测验智慧树平台发布课前小测：1.HTML基本结构回顾；2.对网页内容组织的初步认知。教师通过智慧树发布线上问答和课前测验。1.独立完成线上测验；2.对存疑知识点进行标记。摸底学情，了解学生对HTML基础和前序知识的掌握情况，便于调整讲解侧重点。参与式学习-VR体验（5分钟）参与式学习-<p>段落标签学习（10分钟）智慧树平台学习任务：

学习<p>段落标签：1.作用：定义文本段落，自带上下边距；2.语法：<p>内容</p>；3.属性：align（对齐），title（提示文本）。引出知识点：1.讲解<p>标签语义、语法；2.强调标签闭合的重要性及属性（align,title）的用法；3.对比有无<p>标签的页面显示差异，说明其语义化价值。明确知识点：1.在HBuilder中跟随教师输入代码，观察效果；2.尝试修改align属性值，观察段落对齐方式变化。思政元素：<p>标签通过为节气文字分段，体现内容的条理性和层次性，培养学生严谨、有序的思维习惯，寓意“做事有章法”。参与式学习-<img>图片标签学习（15分钟）智慧树平台学习任务：

学习<img>图片标签：1.作用：在网页中嵌入图像；2.核心属性：src（源文件路径）、alt（替代文本）、title（提示文本）、width/height（宽高）；3.路径详解：相对路径vs绝对路径，重点练习相对路径。引出知识点：1.讲解<img>标签为单标签，强调src属性的核心地位；2.重点详解相对路径概念，使用图示法讲解“./”,“../”的含义，通过多个例子（同目录、子目录img/、上级目录../）反复练习；3.解释alt和title属性的区别与重要性（可访问性、SEO）。明确知识点：1.练习插入本地图片，确保路径正确；2.完成路径练习题；3.为插入的图片添加恰当的alt和title文本。思政元素：<img>标签通过展示节气美景，将抽象的智慧转化为直观的视觉形象，感受“天人合一”的和谐之美，提升审美素养。参与式学习-<div>区域标签学习（10分钟）智慧树平台学习任务：学习<div>区域标签：1.作用：无语义的块级容器，用于组合内容、布局网页；2.语法：<div>内容</div>；3.应用：使用<div>初步划分页面结构。引出知识点：1.讲解<div>的容器特性（默认占满一行）；演示示例2-4；2.比喻：<div>像一个个“盒子”或“积木”，用于搭建页面框架；3.介绍通过id或class属性为<div>命名，以便后续CSS样式化。明确知识点：1.使用多个<div>划分页面区域，如“头部”、“节气介绍区”、“底部”；2.理解<div>是布局的骨架，内容（<p>,<img>）是血肉;3.为主要的<div>添加id或class属性，如id="header"。思政元素：<div>标签将复杂页面划分为清晰区域，蕴含“化整为零”“统筹规划”的哲学思想和工作方法，培养系统化解决问题的能力。参与式学习-任务实践：构建“立春”节气介绍页（30分钟）智慧树平台学习任务：综合运用所学三个标签，创建一个介绍“立春”节气的简单图文页面。页面结构建议：1.一个<div>作为容器；2.内部包含标题（可用<p>模拟）、图片<img>、多个说明段落<p>。引出知识点：1.提供“立春”文字介绍和图片素材；2.巡视课堂，个别指导，解决路径错误、标签未闭合等常见问题；3.鼓励学生互帮互助，分享经验；4.强调代码格式（缩进）的规范性，培养良好习惯。明确知识点：1.新建HTML文件lichun.html；2.使用<div>划分页面结构（如：顶部标题区、中部图文区）；3.在图文区使用<p>标签分段输入“立春”介绍文字；4.使用<img>标签插入“立春”节气图片，并设置合适宽高。1.思政元素：在动手实践中深化对节气文化的理解，用代码“书写”传统文化，体验技术赋能文化传播的乐趣，增强将所学服务于社会的使命感;2.巩固三种标签的语法和使用场景。参与式学习-总结提高（5分钟）课堂总结：1.回顾三种标签的核心知识点（<p>分段、<img>插图的路径、<div>布局）；2.展示并点评学生完成的“立春”页面。点明任务：1.教师快速总结重难点，展示2-3份具有代表性的学生作品（包括一份规范作品和一份有典型错误的作品进行对比讲解）；2.再次强调规范编码和文化结合的意义。明确任务：1.聆听总结，对照自己的作品进行反思；2.欣赏同学作品，汲取优点。1.强化记忆，纠正误区；2.获得正向反馈，激发持续学习动力。课后测试（5分钟）智慧树平台发布课后测试：1.在智慧树平台提交lichun.html文件截图以及另一个节气的网页文件；2.预习任务：阅读2.2.4

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论