初中信息技术浙教版八年级上册：第10课 网页的编辑与发布-教学设计.docx

教学设计

课程基本信息

学科

信息科技

年级

八年级

学期

秋季

课题

网页的编辑与发布

教学内容与学习对象分析

一、教学内容分析

本课是浙教版信息科技八上第二单元第10课《网页的编辑与发布》，主要内容包括记事本编写HTML代码制作网页并发布网站，重点学习的大概念是“编码和解码是数据存储和传输过程中不可或缺的步骤”、“网络中数据编码、传输和呈现需要遵循特定的规则”。本课首先介绍制作网站的一般流程、网页编辑软件；然后解析HTML代码呈现的网页内容，通过案例诊断分析编辑网页时出现的问题；最后探究Web服务器IIS发布网站。

本课是第二单元的最后一课，编辑网页是对前4课知识的综合运用，发布网站是分享和贡献有价值的数据。网站从制作到发布是一个完整的过程，让学生体验这一过程非常有意义。网站发布能让更多人欣赏作品，网页制作完成后需要发布网站进行分享。本课旨在帮助学生梳理使用HTML代码编辑网页、发布网站的过程。梳理这一过程不仅有助于体现网页背后数据的编码、传输与呈现，同时也可以帮助学生探究原理与本质。

二、学习对象分析

学生在四年级学习了数据呈现形式、数据与编码的关系、编码的多种呈现方式等内容；在七年级学习了互联网服务（Web服务）、互联网应用协议（HTTP协议）等内容，初步了解互联网的基本原理和功能。这为本课用数字化工具对网页进行编辑、对网站发布提供了技能支撑，为认识互联网数据在互联网应用中的重要作用提供了认识基础，同时也为八下第一单元数据在人工智能技术中的作用等内容学习打下了知识基础。八年级学生已经具有抽象、建模、算法设计等思维能力，能通过知识的迁移解决相关问题，但他们对网站从制作到发布完整过程的认知仍有一定的难度。

教学目标分析（含核心素养导向）

教学目标：

1.通过使用记事本编写HTML代码，学会网页的编辑，培养学生计算思维、数字化学习与创新。

2.通过网站发布的实践，分享有价值的数据和资源，培养学生信息意识、信息社会责任。

教学难点：记事本编写HTML代码、网页的编辑。

教学难点：网站的发布。

教学过程

一、制作网站流程

学习活动：通过表格梳理网站从制作到发布的完整流程。

学生活动：完成自我探究一活动。

自我探究一：填写表格完成制作网站的前三流程：确定网站主题、设计网站栏目、规划页面内容。

流程

事项

1.确定网站主题

2.设计网站栏目

3.规划页面内容

4.编辑网页

选择网页开发工具编辑网页

5.发布网站

将编辑好的网站文件上传至服务器

教师活动：讲解制作网站的一般流程，以“人工智能”主题为例确定相关内容事项。

流程

事项

1.确定网站主题

人工智能

2.设计网站栏目

走进人工智能（主页）、人工智能的历史、人工智能的发展

3.规划页面内容

走进人工智能：相关图文、视频等

人工智能的历史：相关图文等

人工智能的发展：相关图文等

4.编辑网页

选择网页开发工具编辑网页

5.发布网站

将编辑好的网站文件上传至服务器

设计意图：通过表格梳理网站制作流程，让学生对网站从制作到发布的完整过程有一定认知，从而引出下一个环节：选择网页开发工具编辑网页。

二、网页开发工具

学习活动：梳理常用的网页开发工具。

学生活动：思考哪些软件能编辑网页，了解常见网页开发工具、网页开发工具多样化。

教师活动：讲解网页开发工具。

1.常见网页开发工具：Dreamweaver（简称：“DW”）、FrontPage（简称：“FP”）、VisualStudioCode（简称“VSCode”）、记事本等。

2.网页开发工具多样化：可视化设计编辑的软件、自动生成成对标签的专业HTML编辑器。

设计意图：通过讲解常见网页开发工具，让学生对编辑网页有一定的直观了解，从而引出下一个环节：记事本编写HTML代码制作主题网站。

三、编写网页

学习活动：使用记事本编写HTML代码，学会网页的编辑。

学生活动：完成自我探究二活动。

自我探究二：用记事本编写HTML代码制作主题网站。

（1）通过HTML标签、CSS样式等方式编辑美化网页。

（2）设置并调试各网页之间的超链接。

教师活动：分享交流各网页页面的设计内容，诊断分析出错代码。

1.分享交流（图文讲解）：“走进人工智能”（主页）页面代码

（1）设置网页标题、网页背景图片（CSS样式）、超链接（CSS样式）；添加视频、文字（CSS样式）。

（2）换行符（br）；不换行空格（nbsp;）。

2.诊断分析（案例剖析）：“人工智能的历史”页面代码

（1）正确嵌套HTML标记，确保打开的标记都有相应的关闭标记，保持良好的层次结构。

（2）对属性值使用英文输入法的引号进行包裹。

3.诊断分析（案例剖析）：“人工智能的发展”页面代码

（1）使用空格或制表符（Tab键）进行缩进，提高代码的可读性。

（2）HTML标记和属性名称不区分