第20课 组建网站跟我做（教案） - 2024—2025学年人教版（2024）初中信息科技七年级全一册

第20课 组建网站跟我做 一、教学目标 1.学生能够熟练掌握超链接的用法。 2.明确评测网站时需要关注的关键因素。 3.掌握在局域网中自建服务器展示网站的方法。 二、教学重点与难点 教学重点 1.让学生深入理解超链接在网站构建中的重要作用。 2.帮助学生掌握在局域网中搭建服务器展示网站的基本流程。 教学难点 1.在设置超链接时，如何引导学生正确理解相对路径和绝对路径的概念。 2.在网站评测过程中，如何培养学生从多个角度综合评估网站的能力。 三、教学准备 1.计算机教室，准备好各小组之前制作的网页文件，制作教学PPT。 四、教学过程 （一）导入新课 1.展示已完成的网页页面 通过多媒体展示各小组之前制作的关于科技节的独立网页页面，包括主页、3D打印项目页、机器狗项目页、风力发电项目页等，引导学生回顾之前的制作过程和网页内容。 提问学生：“这些网页都做得非常精美，但现在它们是分散的，怎样才能让用户方便地从一个网页跳转到另一个相关网页，形成一个完整的网站呢？”引发学生思考，引出本节课的主题“组建网站跟我做”。 2.回顾超链接概念 简单回顾超链接的基本概念，提问学生在之前的上网浏览过程中遇到的超链接形式（如文字超链接、图片超链接等）以及超链接的作用（实现页面跳转、获取更多相关信息等），帮助学生巩固旧知识，为学习超链接在网站建设中的应用做好铺垫。 （二）新课讲解 1.用超链接组织网站中的网页 超链接的重要性和类型 以常见的大型网站（如新浪网、淘宝网等）为例，讲解超链接在网站中的重要作用。超链接就像桥梁，将网站中的各个页面紧密连接在一起，使用户能够方便快捷地在不同页面之间进行浏览和交互，是构建网站导航结构的关键元素。如果没有超链接，网站将成为一个个孤立的页面，用户无法全面了解网站内容，体验感极差。 介绍本节课主要学习的两种超链接类型：文本超链接和图像超链接。文本超链接是最常见的超链接形式，通过点击特定的文字可以跳转到其他页面；图像超链接则是将图片作为链接载体，当用户点击图片时触发页面跳转。这两种超链接形式在网页设计中各有优势，可以根据实际需求灵活运用，如在导航菜单中通常使用文本超链接，而在展示产品图片时可以使用图像超链接，增加网页的美观性和交互性。 超链接的创建方法 文本超链接 结合表20.1中的代码举例，详细讲解文本超链接的创建语法。在HTML中，使用<a>标签来创建超链接，href属性用于指定链接的目标地址，其取值可以是相对路径或绝对路径（重点讲解相对路径的使用方法，因为在网站内部链接中相对路径更为常用且不易出错）。例如，<a href="about.html">关于我们</a>，当用户点击“关于我们”这几个文字时，页面将跳转到与当前页面处于同一目录下的“about.html”页面。 在讲解过程中，通过实际操作演示，在网页代码中添加文本超链接，并在浏览器中实时预览效果，让学生直观感受超链接的创建过程和跳转效果。同时，提醒学生注意超链接文字的颜色和样式通常会有默认设置，但可以通过CSS样式表进行自定义，以使其与网页整体风格相匹配。 图像超链接 同样依据表20.1，讲解图像超链接的创建方法。图像超链接的代码结构是在<a>标签内嵌套<img>标签，<img>标签的src属性用于指定图片的路径，<a>标签的href属性指定点击图片后要跳转的链接地址。例如，<a href="product.html"><img src="product.jpg"></a>，表示当用户点击名为“product.jpg”的图片时，页面将跳转到“product.html”页面。 强调在设置图像超链接时，要确保图片路径和链接地址的准确性，否则图片无法正常显示或超链接无法正常跳转。同时，引导学生思考如何选择合适的图片作为超链接，一般来说，具有代表性、清晰且能够吸引用户点击的图片是较好的选择。 相对路径和绝对路径的概念及应用 详细讲解相对路径和绝对路径的概念。绝对路径是指文件在计算机系统中的完整路径，从根目录开始一直到文件本身，例如“C:\Users\Admin\Documents\website\image\logo.jpg”就是一个绝对路径。但在网站建设中，使用绝对路径存在诸多不便，如在将网站迁移到其他服务器或目录时，所有绝对路径都需要重新修改，否则会导致链接失效。 相对路径则是相对于当前文件的路径，它更加灵活和方便。例如，如果当前HTML文件与要链接的页面或图片在同一目录下，直接写文件名即可（如“about.html”）；如果要链接的文件在当前目录的子目录中，则需要先写子目录名，再加上斜杠和文件名（如“images/product.jpg”表示当前目录下的“images”子目录中的“product.jpg”文件）；如果要链接到上级目录中的文件，则使用“../”表示上级目录（如“../index.html”表示当前目录的上级目录中的“index.html”文件）。 通过实际案例演示，在不同目录结构下如何正确使用相对路径创建超链接，让学生理解并掌握相对路径的使用技巧，避免在设置超链接时因路径问题出现错误。 网站内部超链接的规划与设置 以科技节网站为例，引导学生规划网站内部的超链接结构。主页通常是网站的入口，应设置清晰的导航菜单，通过文本超链接引导用户访问各个主要页面（如3D打印项目页、机器狗项目页、风力发电项目页等）。在每个项目页面中，除了返回主页的超链接外，还可以根据内容相关性设置指向其他相关项目页面或详细介绍页面的超链接，方便用户深入了解相关信息。例如，在3D打印项目页中，可以设置超链接到介绍3D打印技术原理的页面、展示3D打印作品的页面等。 强调在设置超链接时要考虑用户的浏览习惯和网站的逻辑结构，使超链接的布局合理、易于操作。同时，要对超链接的文字或图片进行适当的描述和提示，让用户在点击之前能够清楚地知道链接的目标内容，提高用户体验。 2.展示网站 局域网自建服务器展示网站的原理 简单介绍服务器的概念，服务器是为网络中的其他计算机提供服务的计算机设备，在网站展示中，它负责存储和传输网页文件，当用户在浏览器中输入网站地址时，服务器会将相应的网页文件发送给用户的浏览器进行解析和显示。 讲解在局域网内自建服务器展示网站的优势，如方便快捷、无需互联网连接即可在局域网内访问、便于团队内部测试和展示等。同时，说明这种方式适用于学校、企业内部等局域网环境下的网站展示和分享。 局域网自建服务器展示网站的步骤 选择服务器计算机 告诉学生在局域网中，可以选择任意一台性能较好、网络连接稳定的计算机作为服务器。这台计算机需要安装服务器软件（如IIS、Tomcat等），并在后续操作中承担存储和发布网站文件的任务。 整理网页文件 指导学生将小组制作的所有网页文件（包括HTML文件、图片、CSS样式表、JavaScript文件等）以及相关素材汇总到一个名为“Web”的文件夹中。强调文件的整理要规范，目录结构要清晰，便于管理和查找。例如，可以按照网页类型或功能模块将文件分类存放，如将所有图片文件放在一个“images”子目录中，将CSS样式表文件放在一个“css”子目录中。 移动Web文件夹 让学生将整理好的“Web”文件夹移动到服务器软件所在的文件夹中。不同的服务器软件可能有不同的默认存放位置，教师要提前了解并告知学生。例如，对于IIS服务器，通常将网站文件存放在“C:\inetpub\wwwroot”目录下；对于Tomcat服务器，一般存放在“Tomcat安装目录\webapps”目录下。移动文件夹后，确保服务器软件能够正确识别和访问网站文件。 运行服务器软件并获取IP地址和端口号 学生在选定的服务器计算机上运行服务器软件，启动服务器服务。在服务器软件运行过程中，会显示服务器的IP地址和端口号，学生需要记录下来。IP地址是服务器在局域网中的唯一标识，端口号则用于区分不同的网络服务。例如，常见的HTTP服务默认端口号为80，如果服务器软件使用了其他端口号（如8080），则在访问网站时需要在IP地址后面加上端口号（如“http://192.168.1.100:8080”）。 提醒学生注意IP地址和端口号的正确性，如果记录错误，将无法正常访问网站。同时，强调在局域网内，其他计算机要访问该网站，必须使用服务器计算机的IP地址和正确的端口号。 访问网站并测试 组内成员在其他计算机上打开浏览器，在地址栏中输入服务器的IP地址和端口号，访问小组制作的网站。如果一切设置正确，应该能够正常显示网站首页。引导学生在网站中点击各个超链接，检查页面跳转是否正常、图片是否正常显示、网页内容是否完整等，如发现问题及时在服务器端进行修正。 （三）巩固练习 1.完善科技节网站超链接设置 小组协作完成超链接设置 学生以小组为单位，根据之前规划的网站结构和导航需求，在各自负责的网页页面中添加超链接。要求每个网页至少设置三个超链接，包括文本超链接和图像超链接，确保网站内部页面之间能够流畅跳转。例如，在主页的导航菜单中，为每个科技节项目设置文本超链接；在项目页面中，为相关图片设置图像超链接，链接到详细介绍页面或其他相关页面。 在设置超链接过程中，小组成员之间要密切配合，及时沟通交流。负责页面设计的同学要与负责内容编写的同学协商超链接的文字描述和图片选择，确保超链接既符合页面布局和设计风格，又能准确传达链接目标的信息。同时，要注意超链接的颜色、样式与网页整体风格的一致性，可以运用之前学过的CSS知识进行简单的样式调整，提高网页的美观度和用户体验。 检查超链接的有效性 完成超链接设置后，小组成员对网站内所有超链接进行全面检查。点击每个超链接，检查是否能够准确跳转到目标页面，并且目标页面是否正常显示。特别要注意相对路径的正确性，避免因路径错误导致超链接失效。如果发现超链接无法正常工作，小组成员共同分析原因，可能是链接地址拼写错误、文件路径设置不正确、目标页面不存在或存在代码错误等，及时进行修正。 可以使用浏览器的开发者工具（如Chrome浏览器的“检查”功能）来辅助检查超链接。通过查看开发者工具中的网络请求和页面元素信息，能够更直观地了解超链接的跳转过程和页面加载情况，有助于快速定位和解决问题。 2.网站评测与优化 依据标准进行自评 每个小组根据表20.2中的检查记录表，从文字准确无误、图像呈现恰当、链接跳转正确、页面排版符合阅读习惯、内容健康积极向上等方面对自己小组制作的网站进行全面自评。小组成员认真浏览网站的每个页面，仔细检查各项内容，在检查记录表中填写相应的检查结果。例如，对于文字内容，检查是否存在错别字、语法错误、信息表述清晰准确；对于图像，评估其清晰度、与页面主题的相关性、加载速度等；对于链接，再次确认所有超链接是否正常工作；对于页面排版，检查文字段落是否整齐、图片与文字的搭配是否合理、页面布局是否符合用户浏览习惯（如重要内容是否突出、导航是否便捷等）；对于内容，确保其符合道德规范和积极向上的价值观，不包含任何不良信息。 在自评过程中，小组成员要积极讨论，发现问题及时记录，并提出初步的改进建议。例如，如果发现某个页面的文字排版过于拥挤，影响阅读体验，可以讨论如何调整文字大小、行距或段落间距来优化排版；如果发现某个图片加载速度较慢，可以考虑对图片进行压缩或优化图片格式等。 小组间互评与交流 各小组轮流展示自己制作的网站，其他小组进行认真观察和评价。在展示过程中，展示小组的成员要详细介绍网站的主题、设计思路、特色功能以及在超链接设置和网站布局方面的考虑。其他小组根据展示内容和自己的浏览体验，结合表20.2的评测标准，对展示小组的网站进行客观评价，填写评价意见。评价意见要具体明确，指出网站的优点和不足之处，并提出建设性的改进建议。例如，某个小组可能会评价另一个小组的网站导航设计清晰，超链接设置合理，方便用户快速找到所需信息，但同时也指出网站的色彩搭配不够协调，部分页面的图片质量有待提高等问题，并给出相应的改进建议，如选择更和谐的色彩方案、更换高质量的图片等。 在互评过程中，教师要引导学生进行积极、客观的评价，鼓励学生相互学习，吸收其他小组的优点，改进自己的作品。同时，教师要对学生提出的问题和疑惑进行及时解答，对普遍存在的问题进行集中讲解和指导，帮助学生提高网站制作水平和评测能力。通过小组间的互评与交流，学生能够从不同角度审视自己的作品，拓宽视野，发现自己在网站制作过程中未曾注意到的问题，从而进一步优化网站。 （四）课堂小结 1.教师引导回顾总结 与学生一起回顾超链接的用法，包括文本超链接和图像超链接的创建语法、相对路径和绝对路径的概念及应用，以及在网站建设中超链接规划的重要性。提问学生在设置超链接过程中遇到的问题及解决方法，强化学生对超链接知识的掌握。 总结网站评测需要关注的因素，如文字、图像、链接、排版和内容等方面的要点，让学生明白一个优质网站不仅要有丰富的内容和美观的设计，还要具备良好的用户体验和积极健康的价值观。引导学生思考如何在今后的网站制作中更好地满足这些评测标准，提高网站质量。 回顾在局域网中自建服务器展示网站的步骤，包括服务器的选择、网页文件的整理与存放、服务器软件的运行以及IP地址和端口号的获取和使用等，确保学生掌握网站展示的基本流程。 2.学生分享收获与体会 邀请几位学生分享本节课的学习收获，包括在超链接设置、网站评测和展示过程中的经验教训、对网站建设整体流程的新认识、对团队协作重要性的体会等方面。其他学生认真倾听，并进行补充和交流，共同加深对组建网站知识和技能的理解和掌握。 （五）作业布置 要求学生以个人为单位，使用所学的超链接知识，制作一个简单的个人网站介绍页面，包括个人简介、兴趣爱好、学习经历等板块，每个板块通过超链接连接到更详细的介绍页面（如点击“兴趣爱好”超链接跳转到介绍个人各种兴趣爱好的页面）。在页面中至少使用三个不同类型的超链接（如文本超链接、图像超链接、锚点超链接等，锚点超链接用于在同一页面内快速跳转，如点击目录跳转到相应内容部分），并设置合理的页面布局和样式。学生将制作好的网页文件保存并提交，同时附上一份简要的说明，描述超链接的设置目的、路径选择以及在页面布局和样式设计上的考虑。 五、板书设计 组建网站跟我做 1.超链接用法 文本超链接（<a href="链接地址">显示文字</a>） 图像超链接（<a href="链接地址"><img src="图像位置"></a>） 相对路径与绝对路径 2.网站评测因素 文字准确无误 图像呈现恰当 链接跳转正确 页面排版合理 内容健康积极 3.展示网站 局域网自建服务器 选择服务器 整理文件 运行软件（IP地址、端口号） 自评与互评 六、课后反思 在本次“组建网站跟我做”课程教学中，通过观察学生课堂表现、作业完成情况，对教学过程进行反思，总结经验教训。 教学成功之处在于实践操作环节效果显著。学生在实际创建超链接、搭建服务器展示网站以及进行网站评测过程中，积极动手尝试，深入理解并掌握了相关知识技能，如准确设置超链接路径、成功在局域网展示网站等，问题解决能力得以提升。小组协作方面，成员分工合作顺畅，交流活跃，在互评环节相互学习，团队意识增强，集体荣誉感促使学生更加投入学习。此外，以科技节网站为实例贴近学生生活，分析常用网站也让学生感受到知识实用性，提高了学习兴趣。 然而，教学也存在一些问题。部分复杂概念如相对路径、绝对路径和服务器知识，学生理解困难，尽管多次举例仍有混淆，表明教学方法对部分学生不太适用。时间把控上不够精准，超链接与评测环节耗时超预期，导致课堂小结和作业布置仓促，重点内容总结和作业讲解不够到位。小组活动中个别学生参与积极性低，依赖他人，原因可能在于分工不合理或缺乏激励措施。 针对这些问题，后续教学可采取改进措施。对于复杂概念，运用更多类比、实例与可视化工具，如将路径概念类比校园寻路，用图表展示服务器流程，增加针对性练习巩固理解。加强时间管理，精心设计教学环节时间分配，依据学生实际情况灵活调整进度，确保重点难点讲解透彻且各环节完整。提高学生参与度方面，分组时综合考量学生情况，明确分工与规则，建立有效激励机制，加强巡视指导，鼓励学生积极表达，提升团队协作效果。通过这些改进措施，期望提升教学质量，助力学生更好掌握网站组建知识技能。 学科网（北京）股份有限公司 $$