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

《第17课 制作网页展活动》导学案 版本 人教版《信息技术》七年级全一册 信息意识：感知网页信息呈现形式，学会筛选、整理校园活动素材，精准匹配网页展示需求。 计算思维：掌握网页制作流程，理解HTML标签与CSS样式的逻辑关系，梳理网页搭建、美化、调试的步骤。 数字化学习与创新：自主运用代码工具制作、美化活动网页，结合创意优化页面布局。 信息社会责任：遵守网络信息规范，尊重素材版权，制作积极健康、合规合法的网络展示内容。 二、教学重点与难点 教学重点：掌握网页制作完整流程，熟练运用常用HTML标签搭建网页结构、填充图文素材，借助基础CSS样式优化网页外观，学会设置网页内部链接，掌握基础的网页调试方法。 教学难点：合理规划网页板块与布局，构建清晰的页面逻辑；精准排查代码书写错误、链接路径偏差等问题，实现网页实用性、规范性与美观性的统一。 三、教学内容设计 课前预习 （一）预习目标 1. 了解网页制作的基本流程，知晓网页规划、素材整理、代码制作、美化调试的核心环节。 2. 回顾常用HTML基础标签的功能与书写格式，初步认识CSS样式的作用。 3. 明确校园活动网页的制作主题，提前梳理可用于网页展示的活动素材类型。 （二）预习填空题 1. 完整的网页制作流程分为________、素材整理、代码搭建、________、网页调试五大环节。 2. HTML中，用于定义网页标题的标签是________，用于编辑段落内容的标签是________。 3. 网页中展示图片需要使用________标签，设置网页内部跳转需要配置________。 4. CSS样式的核心作用是________网页外观，优化字体、颜色、边距等页面效果。 5. 制作主题网页前，首先要确定________，保证网页内容聚焦、逻辑清晰。 （三）预习选择题 1. 下列不属于网页制作前期准备工作的是（ ） A. 确定网页主题 B. 搜集活动图文素材 C. 调试网页代码 D. 规划网页布局 2. 用于实现网页文字段落排版的HTML标签是（ ） A. <img> B. <p> C. <title> D. <a> 3. 下列关于网页制作的说法，正确的是（ ） A. 无需规划布局，直接编写代码即可 B. CSS样式可以美化网页界面 C. 图片素材可随意下载使用 D. 代码标签可以不闭合 （四）预习简答题 1. 简单说说制作校园活动展示网页的意义。 2. 预习后列举两种常用的网页美化方式。 教学过程：课中探究案 模块一 网页整体规划与素材准备 探究习题 填空题 1. 校园活动网页常见的页面板块包含导航栏、________、图片展示区、活动介绍区、________等基础区域。 2. 网页素材主要分为文字素材、图片素材、________三类，所有素材需保证________，杜绝侵权使用。 3. 规划网页布局时，需遵循________、层次清晰、重点突出的原则，贴合校园活动积极向上的主题风格。 4. 制作多页面活动网站时，需统一各页面的________风格，保证整体视觉协调统一。 5. 筛选活动图片素材时，优先选择画面清晰、________、贴合活动主题的高清图片。 选择题 1. 规划校园活动网页布局时，首要完成的工作是（ ） A. 编写HTML代码 B. 确定网页主题与核心内容 C. 美化网页样式 D. 设置网页链接 2. 下列网页素材使用行为符合信息伦理与版权规范的是（ ） A. 随意下载网络无版权标注图片使用 B. 使用自己拍摄的校园活动照片 C. 直接复制他人网页文字内容 D. 篡改网络素材后商用展示 3. 不属于校园活动网页核心展示内容的是（ ） A. 活动流程介绍 B. 活动精彩瞬间图片 C. 无关娱乐广告 D. 活动成果展示 判断题 1. 网页布局可以随意设计，无需遵循统一的排版逻辑。（ ） 2. 前期素材整理越规范，后续网页制作与调试的效率越高。（ ） 3. 校园活动网页只需摆放图片，无需搭配文字介绍内容。（ ） 4. 多页面网站的导航栏布局可以随意更改，无需保持统一。（ ） 简答题 1. 简述校园活动网页规划的具体步骤。 2. 制作校园科技节展示网页，需要准备哪些类型的专属素材？ 案例分析题 某同学制作校园运动会展示网页，未提前规划布局，直接上传大量杂乱图片，未搭配文字说明，且使用了网络下载的无授权高清图片，最终网页画面混乱、内容杂乱，存在版权隐患。请分析该同学在网页规划与素材准备环节存在的三处问题，并给出对应的改进方案。 模块二 HTML基础标签运用 探究习题 HTML标签是搭建网页结构的核心工具，所有网页图文内容、页面结构都需要通过对应标签实现，熟练掌握标签书写格式、功能与嵌套规则，是网页制作的核心基础。本模块习题聚焦常用基础标签的运用、书写规范、功能区分，强化代码书写的准确性与规范性。 填空题 1. HTML网页的整体结构由________、<head>、________三部分核心标签组成。 2. <h1>-<h6>标签用于设置________，其中________字号最大，________字号最小。 3. 图片标签的完整书写格式中，________属性用于指定图片的存储路径与来源。 4. 超链接标签________可实现网页内部或外部跳转，________属性用于设置跳转地址。 5. 所有HTML双标签必须遵循________原则，禁止出现标签遗漏、错乱嵌套的问题。 选择题 1. 下列标签中，属于单标签的是（ ） A. <p> B. <img> C. <title> D. <h2> 2. 用于设置网页页面标题，显示在浏览器标题栏的标签是（ ） A. <body> B. <head> C. <title> D. <a> 3. 下列标签功能对应正确的是（ ） A. <p> 设置标题 B. <img> 编辑段落文字 C. <a> 实现超链接 D. <h3> 插入图片 判断题 1. HTML标签区分大小写，大写标签无法正常识别。（ ） 2. <body>标签内部用于存放网页所有可见图文内容。（ ） 3. 图片标签书写时可以省略路径属性，网页可自动识别图片。（ ） 4. 标题标签层级清晰，可根据内容重要性选择对应层级标题。（ ） 简答题 1. 简述HTML网页核心结构三大标签的各自作用。 2. 书写插入校园活动图片的完整HTML代码基础格式。 代码纠错题 分析下列错误代码，找出问题并写出正确代码： 1. 错误代码：<title>校园艺术节活动展示 2. 错误代码：<p>本次运动会圆满落幕<a>查看详情 3. 错误代码：<img>sport.jpg 模块三 CSS样式网页美化 探究习题 单纯的HTML标签仅能搭建网页基础结构，CSS样式可以优化网页视觉效果，调整文字样式、颜色、边距、排版等，让校园活动网页更加美观规整。本模块习题聚焦基础CSS样式的语法、属性运用、美化效果，掌握简单的网页美化技巧。 填空题 1. CSS样式主要可以设置文字字体、________、字号、文本对齐方式、________等页面样式。 2. 文本居中对齐的CSS属性值是________，设置文字颜色的属性是________。 3. 网页边距调整可以通过________属性实现，让页面内容不紧贴浏览器边缘。 4. CSS样式与HTML结合的基础方式中，________样式可直接对单个标签进行美化设置。 5. 美化活动网页标题时，可通过调整字号、颜色、________，突出标题视觉效果。 选择题 1. 下列属于CSS样式功能的是（ ） A. 搭建网页结构 B. 美化网页文字与布局 C. 设置网页跳转 D. 插入图片素材 2. 想要将网页段落文字设置为红色，对应的CSS属性是（ ） A. font-size B. color C. text-align D. margin 3. 实现网页内容居中展示的属性值是（ ） A. left B. right C. center D. top 判断题 1. CSS样式可以让单调的HTML网页变得美观、整洁。（ ） 2. 所有网页标签的CSS样式效果无法统一设置，只能单独调整。（ ） 3. 调整网页边距可以有效优化页面排版，提升浏览体验。（ ） 4. CSS样式书写错误不会影响网页正常显示，仅美化效果失效。（ ） 简答题 1. 列举三种常用的CSS网页美化样式及对应的作用。 2. 简述HTML与CSS的分工关系。 实操分析题 某同学制作的活动网页文字大小统一、颜色单调，页面内容紧贴浏览器边缘，整体排版拥挤杂乱。请分析该网页存在的美化问题，并写出对应的CSS优化方案。 模块四 网页链接设置与页面联动 探究习题 完整的活动展示网站多由多个页面组成，通过网页内部链接可以实现页面之间的自由跳转，让网站形成完整的整体，方便浏览者查看完整的校园活动内容。本模块习题聚焦超链接设置、路径规范、链接故障排查等核心知识点。 填空题 1. 网页内部链接的核心是正确设置________，路径错误会导致链接跳转失效。 2. 超链接标签中，________标签内容为浏览者可点击的跳转文字或图片。 3. 校园活动网站中，常见的链接类型有首页链接、________、活动详情页链接等。 4. 设置链接时，需保证目标网页文件与主页文件________，方便路径统一设置。 5. 链接失效的常见原因是路径书写错误、________、文件位置移动。 选择题 1. 超链接标签的属性用于设置跳转地址的是（ ） A. src B. href C. color D. size 2. 下列操作会导致网页链接失效的是（ ） A. 正确书写文件路径 B. 移动目标网页文件位置 C. 统一文件存储文件夹 D. 规范文件命名 3. 网页内部链接的主要作用是（ ） A. 美化网页界面 B. 实现页面之间的联动跳转 C. 插入素材内容 D. 调整页面布局 判断题 1. 只要书写超链接标签，就可以实现正常页面跳转。（ ） 2. 规范的文件存储位置是链接正常生效的重要前提。（ ） 3. 校园活动网站可以通过链接整合多个页面，丰富展示内容。（ ） 4. 链接路径大小写书写偏差，不会影响跳转效果。（ ） 简答题 1. 简述网页内部链接的设置步骤。 2. 列举两种网页链接失效的常见原因及解决方法。 案例纠错题 某同学设置活动详情页链接后，点击无反应，排查发现：目标文件名为detail.html，链接路径书写为detaill.html，且目标文件被单独存放至桌面，与主页文件不在同一文件夹。请找出两处错误，并给出修正方案。 模块五 网页调试与问题排查 探究习题 网页制作完成后，调试是必不可少的环节，通过排查代码错误、素材显示异常、链接失效、排版错乱等问题，能够保障网页正常、美观、稳定展示。本模块习题聚焦常见网页故障、排查方法、修正思路，培养学生的问题解决能力。 填空题 1. 网页图片无法正常显示的常见原因有________错误、图片文件损坏、文件路径错误。 2. 网页排版错乱多是因为标签嵌套错误、________书写不规范、布局规划不合理。 3. 代码标签未________，是HTML代码最常见的基础错误。 4. 网页调试的核心流程是预览查看、________、修正错误、再次预览验证。 5. CSS样式失效通常是样式语法错误、________不匹配导致。 选择题 1. 网页图片显示为破损图标，最不可能的原因是（ ） A. 路径书写错误 B. 图片文件删除 C. 文字内容过多 D. 图片文件损坏 2. 下列问题中，属于网页代码错误的是（ ） A. 页面配色单调 B. 标签未闭合 C. 内容素材较少 D. 布局普通 3. 网页链接跳转错误，优先排查的内容是（ ） A. 文字颜色 B. 链接路径与文件名 C. 页面字号 D. 图片大小 判断题 1. 网页预览出现问题，无需排查代码，直接重新制作即可。（ ） 2. 规范的代码书写可以大幅减少网页故障问题。（ ） 3. CSS样式语法错误会直接导致网页美化效果失效。（ ） 4. 素材文件位置变动，会引发网页图片、链接等功能异常。（ ） 简答题 1. 简述网页制作完成后完整的调试流程。 2. 如何快速排查网页图片无法显示的问题？ 综合探究题 某学生完成校园读书节网页制作后，预览发现三大问题：一是网页标题不显示，二是活动图片全部无法加载，三是点击详情链接无跳转。请结合本节课所学知识，全面分析可能的错误原因，并写出对应的分步排查与修正方案。 参考答案 （一）课前预习案答案 填空题 1. 网页规划、网页美化 2. <title>、<p> 3. <img>、超链接路径 4. 优化美化 5. 网页主题 选择题 1. C 2. B 3. B 简答题 1. 可以线上展示校园活动风采，传播校园文化，方便师生随时浏览查看，留存活动资料，提升校园活动的传播范围与影响力。 2. 调整文字字体、颜色、字号；设置页面居中对齐；调整页面边距，优化整体排版。 （二）课中探究案答案 模块一 网页整体规划与素材准备 填空题 1. 内容主体区、页脚区 2. 音视频素材、版权合规 3. 简洁美观 4. 视觉排版 5. 主题贴合 选择题 1. B 2. B 3. C 判断题 1. × 2. √ 3. × 4. × 简答题 1. 首先确定网页展示主题与核心内容；其次规划网页板块与布局结构；再次筛选、整理合规的图文素材；最后确定网页整体风格，统一排版规范。 2. 科技节活动流程文字介绍、科技作品展示图片、活动现场实拍图片、获奖名单文字素材、活动精彩短视频素材等。 案例分析题 存在问题：①未提前规划网页布局，内容杂乱无章；②素材搭配不合理，仅有图片无文字解说，展示不完整；③使用无授权网络素材，存在版权问题。改进方案：①提前划分导航区、图片展示区、文字介绍区，规范布局；②为每张活动图片搭配对应文字解说，完善内容；③替换为自主拍摄、版权合规的校园活动素材。 模块二 HTML基础标签运用 填空题 1. <html>、<body> 2. 标题层级、<h1>、<h6> 3. src 4. <a>、href 5. 标签闭合 选择题 1. B 2. C 3. C 判断题 1. × 2. √ 3. × 4. √ 简答题 1. <html>：网页最外层框架，包裹整个网页内容；<head>：存放网页头部信息，包含网页标题、样式设置等；<body>：存放网页所有可见的图文、链接等展示内容。 2. <img src="活动图片路径" alt="校园活动展示"> 代码纠错题 1. 问题：标题标签未闭合；正确代码：<title>校园艺术节活动展示</title> 2. 问题：超链接标签未闭合；正确代码：<p>本次运动会圆满落幕<a href="路径">查看详情</a></p> 3. 问题：图片标签缺少src属性；正确代码：<img src="sport.jpg" alt="运动会展示"> 模块三 CSS样式网页美化 填空题 1. 文字颜色、页面边距 2. center、color 3. margin 4. 行内 5. 加粗样式 选择题 1. B 2. B 3. C 判断题 1. √ 2. × 3. √ 4. √ 简答题 1. ①color：设置文字颜色；②font-size：调整文字字号大小；③text-align：设置文本对齐方式，优化排版效果。 2. HTML负责搭建网页基础结构，实现图文、链接等内容的展示；CSS负责美化网页外观，优化样式与排版，二者配合实现网页结构完整、界面美观。 实操分析题 存在问题：文字样式单一无层次、页面无留白、排版拥挤杂乱。优化方案：通过CSS设置标题加大字号、更换主题颜色；设置body的margin属性调整页面边距；统一段落文字字号、颜色，设置文本居中或两端对齐，规整整体排版。 模块四 网页链接设置与页面联动 填空题 1. 文件路径 2. 超链接 3. 活动简介页链接 4. 存放于同一文件夹 5. 文件名书写错误 选择题 1. B 2. B 3. B 判断题 1. × 2. √ 3. √ 4. × 简答题 1. 确定跳转目标页面；获取目标文件准确路径；书写完整超链接标签；设置点击展示文字；预览测试跳转效果。 2. ①路径书写错误：核对文件路径，修正错误字符；②文件位置移动：将目标文件与主页放回同一文件夹，重新匹配路径。 案例纠错题 错误1：路径文件名书写错误，多写字母l；修正：将detaill.html改为detail.html。错误2：文件存放位置不统一；修正：将detail.html移动至主页文件所在文件夹，统一文件存储目录。 模块五 网页调试与问题排查 填空题 1. 文件名书写 2. CSS样式 3. 闭合 4. 排查错误原因 5. 标签选择器 选择题 1. C 2. B 3. B 判断题 1. × 2. √ 3. √ 4. √ 简答题 1. 网页整体预览，查看内容展示、排版、功能是否正常；逐一排查代码、素材、路径问题；针对性修正错误；再次预览验证，直至网页正常展示。 2. 首先检查图片标签路径与文件名是否准确；再查看图片文件是否存在、是否损坏；最后确认图片文件存放位置是否与路径匹配。 综合探究题 1. 标题不显示：原因大概率是<title>标签未闭合、标签书写错误或未放置在<head>标签内；修正：规范书写标题标签，确保完整闭合，放置在头部标签内。2. 图片无法加载：原因为图片路径错误、文件名写错、图片文件丢失或损坏；修正：核对路径与文件名，替换损坏图片，统一文件位置。3. 链接无跳转：原因是href路径错误、目标文件不存在；修正：修正链接路径，确认目标文件完整且位置正确，重新测试跳转效果。 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $