Pautan relatif ialah laluan yang ditulis dari laman yang mengandunginya, jadi seluruh laman web terus berfungsi apabila foldernya dialihkan. Kemahiran ini muncul dalam setiap tugasan yang memaut laman atau meletakkan imej, dan ia menerangkan kebanyakan masalah “gambar saya hilang” dalam pembinaan laman web.
Bagaimanakah anda membaca pokok folder?
Lihat folder laman rekaan daripada panduan modul:
club/
index.html
style.css
pages/
events.html
images/
hall.jpgLaluan bermula di laman yang menyimpan pautan. Nama folder bermaksud turun ke dalam folder itu, dan ../ bermaksud naik satu aras. Hanya kedudukan fail antara satu sama lain yang penting, bukan huruf pemacu.
Bagaimanakah anda menulis laluan langkah demi langkah?
- Cari laman yang akan mengandungi pautan atau imej.
- Cari fail sasaran dan catat foldernya.
- Naik dengan
../sekali bagi setiap folder yang perlu ditinggalkan. - Turun dengan menyebut setiap folder yang perlu dimasuki.
- Akhiri dengan nama fail tepat dan sambungannya.
- Klik pautan dalam pelayar untuk membuktikan ia berfungsi.
Contoh berlangkah
Pautan 1: dari index.html ke events.html. events.html berada dalam pages. Tiada keperluan naik, jadi laluan turun:
<a href="pages/events.html">Events</a>Pautan 2: dari events.html kembali ke index.html. Laman berada dalam pages, dan sasaran satu aras ke atas:
<a href="../index.html">Home</a>Imej: events.html juga memaparkan hall.jpg. Naik keluar dari pages, kemudian turun ke images:
<img src="../images/hall.jpg" alt="Club members in the school hall">Idea yang sama menyemak ketiga-tiganya: keluar dari pages dengan ../, kemudian sebut folder yang perlu dimasuki.
Kesilapan yang perlu diawasi
Kesilapan lazim ialah menyalin laluan yang dipaparkan komputer, bukan laluan yang ditulis dari laman.
<a href="C:\Users\Aina\Desktop\club\index.html">Home</a>Ini terbuka pada komputer penulis sendiri dan gagal di tempat lain, termasuk pada komputer penyemak. Versi kedua kesilapan yang sama menulis images/hall.jpg pada events.html: laluan itu mencari pages/images/hall.jpg, yang tidak wujud. Pembetulan dalam kedua-dua kes ialah laluan relatif yang dikira dari laman: ../index.html dan ../images/hall.jpg.
Semak sendiri
1. Dari index.html, tulis laluan pautan ke images/hall.jpg.
Tunjuk jawapan
images/hall.jpg. Folder imej berada terus di bawah folder laman utama, jadi ../ tidak diperlukan.
2. Laman pages/events.html memaut ke pages/contact.html. Tulis href.
Tunjuk jawapan
contact.html. Kedua-dua fail dalam folder sama, jadi nama laman sahaja sudah mencukupi.
3. Nama fail pada cakera ialah Hall.JPG, tetapi laman menulis src="../images/hall.jpg". Apakah yang mungkin berlaku?
Tunjuk jawapan
Huruf besar dan sambungan tidak sepadan, jadi pelayan yang sensitif huruf tidak akan menjumpainya. Tulis nama tepat: ../images/Hall.JPG, atau lebih baik, namakan semula fail kepada huruf kecil.
Ke mana selepas ini
Setelah laluan anda berfungsi, letakkan dan terangkan gambar dengan betul dalam Menetapkan saiz imej dengan teks alternatif yang bermakna. Kembali ke panduan modul, dan uji folder anda sendiri dengan penyemak tugasan praktikal dan bukti.
Pelajar boleh membaca pokok folder dalam kelas tetapi tersalah kira langkah ../ dalam tugasan sebenar. Guru kami melatih laluan itu bersama anda dalam tuisyen ICT dalam talian satu dengan satu.