第10课《网页的编辑与发布》教学设计 2024—2025学年浙教版（2023）初中信息技术八年级上册

教学设计 课程基本信息 学科 信息科技 年级 八年级 学期 秋季 课题 网页的编辑与发布 教学内容与学习对象分析 一、教学内容分析 本课是浙教版信息科技八上第二单元第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”）、Visual Studio Code（简称“VS Code”）、记事本等。 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标记和属性名称不区分大小写，一般使用小写字母编写。 4.诊断分析（案例剖析）：网站文件存放位置 （1）网站包含多网页，存放在同个文件夹中；网站的主页命名为index.html。 （2）保存主页：文件保存路径、保存扩展名为“.html”的文件、保存类型为“所有文件”、编码为“UTF-8”。 5.知识链接：网页字符编码 浏览器与服务器之间需要传递、处理的数据信息较复杂，为了便于使用与协同、实现正确识别，通常对网页进行统一字符编码，以免出现网页乱码。常见的网页字符编码有GB2312、GBK和UTF-8。 设计意图：通过具体分析诊断网页页面的设计内容和代码，使学生学会用记事本编写THML代码编辑网页，培养学生计算思维、数字化学习与创新。 四、发布网站 学习活动：实践Web服务器IIS发布主题网站。 学生活动：思考如何把制作的网页分享到互联网，了解发布网站的途径，完成自我探究三活动。 自我探究三：Web服务器IIS发布主题网站。 （1）在Windows系统计算机上安装Web服务器IIS。 （2）使用Web服务器IIS发布主题网站。 （3）访问发布的网站地址，浏览最终效果。 教师活动：讲解发布网站的概念及途径，分享Web服务器IIS发布网站。 1.发布网站：将编辑好的网站文件上传至服务器，完成配置后可发布浏览。 2.发布途经：申请个人网络空间、使用专用服务器、使用虚拟主机服务器。 3.Windows系统可用Web服务器IIS（Internet Information Service）发布网站。 4.分享交流：视频讲解如何安装IIS （1）右击“我的电脑”-单击“属性”，打开“控制面板”。 （2）打开“程序”-“启用或关闭Windows功能”。 （3）全部勾选“Internet Information Services”子选项，单击“确定”安装IIS。 （4）安装完毕后，在浏览器地址栏中输入localhost进行测试，出现产品页面表示IIS安装成功。 5.分享交流：视频讲解IIS如何发布网站 （1）打开“控制面板”-“系统和安全”-“管理工具”-“Internet Information Services(IIS)管理器”。 （2）右击“网站”-“添加网站”。 （3）在“添加网站”对话框中，输入网站名称、物理路径、IP地址等相关数据。 （4）在浏览器地址栏中输入本台计算机的IP地址进行访问，如果出现网站页面表示网站发布成功。 设计意图：通过Web服务器IIS发布网站的实践，分享有价值的数据和资源，培养学生信息意识、信息社会责任。 五、小结 学习活动：小结反思本课的学习内容。 学生活动：自我小结本课的知识点。 教师活动：梳理小结本课的知识点。 1.制作网站流程：确定网站主题、设计网站栏目、规划页面内容、编辑网页、发布网站。 2.网页开发工具：Dreamweaver、FrontPage、Visual Studio Code、记事本等。 3.记事本编写HTML代码制作主题网站。 4.网站发布途径：申请个人网络空间、使用专用服务器、使用虚拟主机服务器。 5.安装web服务器IIS。 6.web服务器IIS发布网站。 设计意图：学生完成网站制作并发布的实践活动，更好地理解互联网应用中数据发挥的作用，从而让学生梳理回顾本课知识点。 学科网（北京）股份有限公司 $$