高中一年级信息技术必修1第6章第2节网页制作教学设计_第1页
高中一年级信息技术必修1第6章第2节网页制作教学设计_第2页
高中一年级信息技术必修1第6章第2节网页制作教学设计_第3页
高中一年级信息技术必修1第6章第2节网页制作教学设计_第4页
高中一年级信息技术必修1第6章第2节网页制作教学设计_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

高中一年级信息技术必修1第6章第2节网页制作教学设计一、教材分析本节内容选自浙教版高中信息技术必修1《数据与计算》第六章“网页的编辑与发布”中的第二节“网页制作”。教材在前一节介绍了网页的基本概念、HTML的基本结构之后，本节聚焦于使用HTML标记语言编写简单网页，涉及网页标题设置、文字与段落格式、图片插入、超链接建立以及表格的基本应用。本节是全书从“数据加工”走向“信息表达”的关键一课，既是对前面算法与程序设计知识的应用延伸，也是学生数字化学习与创新素养的直接落点。从知识体系看，学生已经掌握了程序设计的基本思想，对“代码—执行—结果”的逻辑有初步体验，这为接受HTML标记的成对出现、属性写在开始标记中等约定奠定了认知基础。同时，本节内容与第三册选修模块中网站设计的内容衔接紧密，本节教学的成败直接影响学生后续学习的兴趣走向与深度。二、学情分析授课对象为高一年级学生。他们日常频繁接触网页，是网页的使用者而非生产者，对“网页背后是什么”存在天然好奇，这是本课最有利的教学资源。通过前期学习，学生已具备键盘录入、文件管理、文本编辑器使用等基本操作能力，理解二进制与编码的概念，能够读懂简单代码。可能的困难集中在三处：一是从自然语言思维切换到标记语言的精确书写，容易出现标记不成对、中英文符号混用的错误；二是对文件路径尤其是相对路径的理解存在障碍；三是部分学生习惯可视化的所见即所得工具，对纯代码方式产生畏难情绪。教学设计中需要针对这三处困难设置脚手架。三、教学目标1.信息意识：认识网页作为信息表达载体的结构与组织方式，能从源代码层面理解网页的构成，形成“内容—结构—表现”分离的初步认识。2.计算思维：通过编写HTML代码，体验用形式化、结构化的方式描述信息的过程，能通过调试定位标记书写错误，养成成对书写、层级缩进的规范习惯。3.数字化学习与创新：能独立使用记事本类工具编写一个包含标题、段落、图片、超链接的个人简介网页，并对网页进行有创意的个性化加工。4.信息社会责任：在引用网络图片与素材时建立版权意识，规范标注来源，在网页内容表达中遵循真实、友善的基本原则。四、教学重点与难点教学重点：HTML基本标记的使用，包括标题、段落、换行、图片、超链接标记；网页文件的保存与浏览验证。教学难点：标记的成对嵌套关系，图片路径（相对路径）的正确书写，错误代码的调试方法。五、教学策略采用“任务驱动＋对比发现＋分层实践”的策略。以学生熟悉的网页为切入点，通过“同一网页的两个视角”（浏览器视图与源代码视图）制造认知冲突，引出标记语言的概念；以“为自己制作一张网络名片”为主线任务贯穿全课；提供半成品代码与微视频作为分层支架，确保基础薄弱学生能跟上，学有余力学生能深入。机房采用两人相邻、独立操作的安排，便于同伴互助。六、教学准备教师准备：教学演示网页一个（含明显排版问题供纠错用）、半成品代码包、微课视频三个（标记入门、图片路径、超链接）、学生自评量规。学生准备：每人一个以学号命名的文件夹，内含教师预设的图片素材images子文件夹。七、教学过程（一）情境导入：网页的另一面（约5分钟）教师在大屏幕展示“校园科技节”主题网页，提问：这个页面我们在浏览器里看到了图文混排的效果，它的本来面目是什么？随后右击页面选择“查看网页源代码”，屏幕上出现成片的尖括号代码。学生直观看到同一个网页的两种形态。教师引导：浏览器像一位翻译官，它读到这些带尖括号的记号，就按照约定把内容排版出来。这种记号语言叫HTML，即超文本标记语言。今天我们就当一回网页的作者，亲手写出能被浏览器读懂的代码。设计意图：利用“两个视角”的对比制造认知冲突，把抽象的标记语言概念锚定在具体的视觉经验上，同时以“当作者”的角色定位激发创作动机。（二）新知建构：标记的规则（约10分钟）教师在记事本中现场输入一个最小网页，边写边讲：<html>与</html>界定整个网页；<head>区放标题，用<title>我的主页</title>设置浏览器标签页文字；<body>区放正文内容。保存时文件名取index.html，保存类型选“所有文件”。双击该文件，浏览器中出现了刚才写的内容。教师强调三条书写约定：标记用英文尖括号包围；绝大多数标记成对出现，结束标记多一个斜杠；标记可以嵌套但必须层次分明，书写时用缩进体现层级。随即安排“找茬”活动：大屏幕上给出一段含有三处错误的代码（<title>缺结束标记、<body>拼写成<bady>、标记交叉嵌套），学生分组在1分钟内找出错误并说明理由。教师点评时揭示调试的一般方法：浏览器显示异常时，回到代码自上而下逐对检查标记。设计意图：示范过程采用“最小可运行实例”，让学生第一眼看懂全貌。找茬活动把易错点前置暴露，培养学生审读代码的习惯，这比教师反复强调更有效。（三）任务驱动：制作我的网络名片（约18分钟）发布总任务：为自己制作一张网络名片网页，要求包含三级目标。基础层：网页有标题；正文包含用<p>分段的两段自我介绍文字；使用<h1>到<h3>之间的至少一种标题标记突出姓名。提高层：用<imgsrc="images/photo.jpg">插入本人或自选图片，设置width属性控制显示大小；用<ahref="网址">文字</a>建立一条指向学校网站的超链接。挑战层：用<table>、<tr>、<td>制作一个三行两列的个人信息表格；尝试用<hr>水平分割线和<fontcolor>标记美化页面。教师巡堂时重点观察两类问题：图片不显示的情况，引导学生检查图片是否确实在images文件夹内、文件名大小写是否一致、src路径书写是否正确；中文出现乱码的情况，指导学生在<head>区加入<metacharset="utf8">。对于进度快的学生，引导其思考：为什么修改代码后要在浏览器中刷新才能看到变化？帮助他们建立“源代码—保存—浏览器解释执行”的工作流认识。对于遇到困难的学生，提示其打开对应的微课视频或半成品代码进行比对。设计意图：三级任务把全体学生的最近发展区纳入同一主题之下，保底有底线、拔高有空间。巡堂指导聚焦路径与编码两个顽固易错点，用问题引导代替直接代劳，训练调试能力。（四）展示交流：互评与提升（约8分钟）随机抽取三位学生的作品，通过教师机广播展示。评价采用“两星一建议”方式：每位评议者说出两个亮点、一条改进建议。教师引导评价不只停留在“好不好看”，而要追问“代码是怎么实现这个效果的”，并请作者现场打开源代码展示对应行。教师顺势补充一条社会责任话题：有同学用了网络上的图片，这涉及版权问题，建议尽量使用自拍照片、免费正版图库素材，并在网页下方注明素材来源。设计意图：互评环节把评价权交给学生，“代码溯源”的追问防止评价浮于表面，版权教育在真实情境中自然发生而不显生硬。（五）课堂小结与延伸（约4分钟）师生共同梳理本课知识脉络：HTML是标记语言，标记成对出现、可以嵌套；常用标记包括标题、段落、图片、超链接、表格；工作流是“编写—保存—刷新验证—调试”。布置延伸任务：课后访问任意一个喜欢的网站，查看其源代码，找出三个本课学过的标记并截图记录；思考今天的网页虽然内容完整但样式单调，有什么办法能让它更美观，为下一节学习埋下伏笔。八、板书设计主板书以结构图呈现HTML文档骨架：<html>统领<head>与<body>两大部分，右侧列出常用标记表（p、h1h6、img、a、table），下方写工作流四步曲。副板书实时记录巡堂中发现的典型错误及修正方法。九、作业设计基础作业：完善课堂上的网络名片，至少再添加两项本课学过的元素，下节课以2分钟微展示分享。拓展作业：以小组为单位规划“班级风采”网站，画出栏目结构草图，标注每个页面需要的素材清单，为后续多页面网站学习做准备。十、教学评价采用过程性评价与作品评价相结合。过程性评价依据教师巡堂记录，关注学生的调试行为与求助方式；作品评价采用四维量规：结构完整（标记正确成对、骨架齐全）、内容丰富（图文链接齐备）、规范美观（缩进清晰、排版合理）、创新合规（有个性设计、素材来源合规），每维分三级赋分。学生先自评、再互评，教师综评，评价结果计入单元学习档案。十一、教学反思预设本课时间分配的关键在新知建构环节，示范若

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

温馨提示

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

最新文档

评论

0/150

提交评论