创建有效的相对链接

相对链接是从包含它的页面出发所写的路径，所以网站文件夹搬动后一切仍然有效。只要试题要求把页面链接起来或放置图片，就会用到这项技能，它也能解释网页制作里大多数”我的图片不见了”的问题。

怎样读懂文件夹结构？

看单元指南中那个虚构的网站文件夹：

club/
  index.html
  style.css
  pages/
    events.html
  images/
    hall.jpg

路径从放链接的那个页面开始。写文件夹名表示往下进入该文件夹，../ 表示往上一层。只有文件彼此之间的位置才重要，磁盘盘符不重要。

怎样一步步写出路径？

1. 找到页面，也就是放链接或图片的那个文件。
2. 找到目标文件，并记下它所在的文件夹。
3. 往上走：每离开一层文件夹就写一次 ../。
4. 往下走：写出每一层要进入的文件夹名。
5. 最后写上准确的文件名和扩展名。
6. 在浏览器里点击链接，证明它有效。

例题

链接 1： 从 index.html 到 events.html。events.html 在 pages 里面，不需要往上走，路径只往下：

<a href="pages/events.html">Events</a>

链接 2： 从 events.html 回到 index.html。页面在 pages 里，目标在上一层：

<a href="../index.html">Home</a>

图片： events.html 还要显示 hall.jpg。先用 ../ 走出 pages，再往下进入 images：

<img src="../images/hall.jpg" alt="Club members in the school hall">

同一个思路可以检查这三个路径：用 ../ 离开 pages，再写出要进入的文件夹。

要留意的错误

常见的失误是抄下电脑显示的路径，而不是从页面出发来写。

<a href="C:\Users\Aina\Desktop\club\index.html">Home</a>

这只能在作者自己的电脑上打开，在别处都会失败，包括评分者的电脑。同一个错误的另一种形式，是在 events.html 里写 images/hall.jpg：这条路径会去找 pages/images/hall.jpg，而它并不存在。两种情况的改正方法，都是从页面出发数出相对路径：../index.html 和 ../images/hall.jpg。

自我检测

1. 从 index.html 写出到 images/hall.jpg 的链接路径。

2. pages/events.html 要链接 pages/contact.html。写出 href。

3. 磁盘上的文件是 Hall.JPG，页面却写 src="../images/hall.jpg"。可能会出什么问题？

接下来学什么？

路径可以用了，接下来学习如何正确放置并描述图片：设置图片尺寸并写有意义的替代文字。回到单元指南，并用实操任务与证据检查器测试你自己的文件夹。

学生在课堂上能读懂文件夹结构，却可能在真正的试题里数错 ../ 的层数。我们的老师会在一对一 ICT 线上补习中和你练习这条路径。