第20课组建网站跟我做
一、教学目标
1.学生能够熟练掌握超链接的用法。
2.明确评测网站时需要关注的关键因素。
3.掌握在局域网中自建服务器展示网站的方法。
二、教学重点与难点
教学重点
1.让学生深入理解超链接在网站构建中的重要作用。
2.帮助学生掌握在局域网中搭建服务器展示网站的基本流程。
教学难点
1.在设置超链接时，如何引导学生正确理解相对路径和绝对路径的概念。
2.在网站评测过程中，如何培养学生从多个角度综合评估网站的能力。
三、教学准备
1.计算机教室，准备好各小组之前制作的网页文件，制作教学PPT。
四、教学过程
（一）导入新课
1.展示已完成的网页页面
通过多媒体展示各小组之前制作的关于科技节的独立网页页面，包括主页、3D打印项目页、机器狗项目页、风力发电项目页等，引导学生回顾之前的制作过程和网页内容。
提问学生：“这些网页都做得非常精美，但现在它们是分散的，怎样才能让用户方便地从一个网页跳转到另一个相关网页，形成一个完整的网站呢？”引发学生思考，引出本节课的主题“组建网站跟我做”。
2.回顾超链接概念
简单回顾超链接的基本概念，提问学生在之前的上网浏览过程中遇到的超链接形式（如文字超链接、图片超链接等）以及超链接的作用（实现页面跳转、获取更多相关信息等），帮助学生巩固旧知识，为学习超链接在网站建设中的应用做好铺垫。
（二）新课讲解
1.用超链接组织网站中的网页
超链接的重要性和类型
以常见的大型网站（如新浪网、淘宝网等）为例，讲解超链接在网站中的重要作用。超链接就像桥梁，将网站中的各个页面紧密连接在一起，使用户能够方便快捷地在不同页面之间进行浏览和交互，是构建网站导航结构的关键元素。如果没有超链接，网站将成为一个个孤立的页面，用户无法全面了解网站内容，体验感极差。
介绍本节课主要学习的两种超链接类型：文本超链接和图像超链接。文本超链接是最常见的超链接形式，通过点击特定的文字可以跳转到其他页面；图像超链接则是将图片作为链接载体，当用户点击图片时触发页面跳转。这两种超链接形式在网页设计中各有优势，可以根据实际需求灵活运用，如在导航菜单中通常使用文本超链接，而在展示产品图片时可以使用图像超链接，增加网页的美观性和交互性。
超链接的创建方法
文本超链接
结合表20.1中的代码举例，详细讲解文本超链接的创建语法。在HTML中，使用a标签来创建超链接，href属性用于指定链接的目标地址，其取值可以是相对路径或绝对路径（重点讲解相对路径的使用方法，因为在网站内部链接中相对路径更为常用且不易出错）。例如，ahref=about.html关于我们/a，当用户点击“关于我们”这几个文字时，页面将跳转到与当前页面处于同一目录下的“about.html”页面。
在讲解过程中，通过实际操作演示，在网页代码中添加文本超链接，并在浏览器中实时预览效果，让学生直观感受超链接的创建过程和跳转效果。同时，提醒学生注意超链接文字的颜色和样式通常会有默认设置，但可以通过CSS样式表进行自定义，以使其与网页整体风格相匹配。
图像超链接
同样依据表20.1，讲解图像超链接的创建方法。图像超链接的代码结构是在a标签内嵌套img标签，img标签的src属性用于指定图片的路径，a标签的href属性指定点击图片后要跳转的链接地址。例如，ahref=product.htmlimgsrc=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”表示当前目