第17课 制作网页展活动 课件 2025-2026学年人教版初中信息科技七年级全一册

第17课：制作网页展活动 第四单元：校园活动线上展 义务教育2024 七年级全一册 这些页面属于什么？它们之间有什么共同点？我们可以通过什么方式访问这些页面？ 这些页面属于**网站**，由多个主题一致、风格统一的网页组成，可通过浏览器地址栏输入网址访问 如何建设一个网站 ? 网站一般由多个网页组成，这些网页通常围绕同一主题，拥有同类设计风格 网站中的网页一般通过网址或IP地址来访问 访问网站时，默认显示的第一个网页叫作主页 网站需要一个统一的风格（如字体、颜色、排版方式） ! 首页 目录页 文章页 统一的网站风格有助于让我们的网站更有整体性和观赏性 网站中的网页一般通过网址或IP地址来访问 ! 在浏览器的地址栏中输入网站或IP地址，就可以访问网站。地址栏一般都在浏览器的菜单下面。 访问网站时，默认显示的第一个网页叫主页 ! 一般网站默认的主页文件的主文件名有以下几种： index default 网站主页的扩展名根据服务器的运行环境，可以有不同的文件类型，主要有html、htm、asp、aspx、php、jsp等。 制作网站的基本流程 一 确定 主题 搜集素材 确定结构 制作网页 美化网页 发布网站 网站的内容 文字 图像 视频 等 网站需要哪些栏目 将文字、图像等素材制作成网页 调整网页的显示效果 把网站上传到服务器 图像位置的控制 一 <img>标签中的align属性，可以控制图像的位置。 <img src='logo.png' align='left'> <img src='logo.png' align='right> 网站文件夹的规划 二 文件夹名 文件夹主要存放的文件类型 images 网站的图像、视频等素材文件 css 网站的样式表文件 data 网站的数据库文件 admin 网站的管理后台文件 upfile 上传的文件 活动练习：制作一个简单的网页 中国植树节网页 （1）观察老师展示的网页，分析网页中每个元素（文字和图像）的关系（大小、位置）。 （2）用记事本打开lesson17-1.htm网页源代码 （3）网页正文的标题居中。 （4）把图像标签<img>的属性补充完整。 （5）把网页正文部分的段落标签<p>补充完整。 扩展提升 中国植树节网页 （1）让模型解答更多关于网页制作的疑问，例如，如何使网页中的图像保持大小一致。 （2）把感兴趣的网页代码提交给人工智能模型，让它解读代码的功能。 扩展提升 使用人工智能平台修改网页代码： ! 在浏览器中打开“文心一言”人工智能平台： https://yiyan.baidu.com 把网页代码复制粘贴到输入框中，让平台帮你修改网页代码： 你的HTML代码基本结构清晰，描述了中国植树节的相关信息，但可以稍作优化和改进，以下是一些建议： 1、增加alt属性：为图片增加alt属性，以便在图片无法加载时提供替代文本，同时对SEO和无障碍访问友好。 2、语义化标签：可以考虑使用<section>或<article>标签来包裹内容，增加语义化。 3、格式优化：缩进和格式调整使代码更易读。 4、添加元信息：增加<meta>标签，如描述和关键词，有助于SEO。 5、字符编码：确保HTML文件以UTF-8编码保存，以避免字符显示问题。 活动练习：用人工智能修改网页代码 作业内容 用记事本打开lesson17_2.html文件，修改网页文件： （1）给网页代码中的文字部分加上分段标签：<p></p> （2）修改源代码中图片的大小：把图片的宽度设置为200，高度设置为120，然后观察图像的大小变化。 （3）把网页代码复制到百度“文心一言”中进行一下代码优化，注意观察人工智能平台为你提出的修改建议和修改后的代码。 课堂小结，梳理收获 “问答式”梳理： - 网站的基本组成？主页的常见文件名？ - 制作网站的6大流程？ - 控制图像位置和大小的`<img>`属性分别是什么？ - 网站中图片素材应存放在哪个文件夹？ $