Теперь, когда мы можем получить доступ ко всем страницам нашего веб-сайта с нашей домашней страницы, если вы пропустили часть 1, вы можете прочитать ее здесь , все выглядит хорошо, но наш сайт не может быть использован или доступен для любого из наших пользователей. С нашей прибитой навигацией, продолжайте и скопируйте всю структуру навигации на все другие страницы, которые в настоящее время имеют только заголовок. Сделав это испытание вашей навигации … О, нет! Мы получаем ужасную ошибку «Файл не найден» из браузера. Не волнуйтесь, этому есть простое объяснение. Текущие ссылки указывают на местоположение относительно, более того в секунду, к домашней странице. Поэтому, когда мы переносим навигационную систему на другие страницы, которые не находятся на том же уровне, что и домашняя страница, эти ссылки перестают быть правильными.
Теперь, что я имел в виду, указывая на относительное местоположение? Существует три типа ссылок на ресурсы: относительный, абсолютный и привязанный. Когда вы ссылаетесь на ресурсы со структурой вашего собственного сайта, лучше всего использовать относительные ссылки для обхода. При ссылках на ресурсы, которые находятся за пределами структуры вашего сайта, вы должны использовать абсолютные ссылки. Якорная ссылка является частным случаем, и мы обсудим это чуть позже. Так в чем же разница между относительным и абсолютным связыванием кода? Посмотрите на код ниже, который иллюстрирует разницу.
relative: <a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a>
absolute: <a href="http://www.someothersite.com/bookings/index.html" title="Get your pet ready for the show">Bookings</a>
Итак, как вы можете видеть, разница в том, что при абсолютном связывании вы предоставляете полный путь к ресурсу, на который хотите ссылаться, в то время как при относительном связывании вы предоставляете только то, что приведет вас туда, где вы хотите, куда вы хотите идти. Имея это в виду, давайте займемся страницами на один уровень глубиной и сделаем так, чтобы они успешно ссылались на страницы сверху и снизу. Изображение ниже показывает область, на которой мы собираемся сосредоточиться.
Видя, что мы собираемся делать ссылки на одном и том же веб-сайте, мы будем использовать относительные ссылки. Наши ресурсы первого уровня, на которые мы будем ссылаться, — это advice_corner, бронирования, контакты, домашние животные и продукты. Ссылки с домашних страниц туда уже есть и работают, поэтому наша первая задача — обеспечить обратную связь с главной страницей из ресурсов, упомянутых выше. В настоящее время наша навигация по этим страницам выглядит следующим образом:
<ul>
<li><a href="index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>
<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>
Если вы в настоящее время переходите по ссылке на любую из внутренних страниц и нажимаете на ссылку «Главная страница», вы обнаружите, что не получаете ошибок, но также не уходите с текущей страницы. Причина проста: текущая страница, на которой вы находитесь, называется index.html, а страница, на которую указывает ссылка, — в index.html, поэтому браузер снова перезагрузит ту же страницу. Итак, как мы можем сделать это перейти на домашнюю страницу? Это очень просто, если вы когда-либо использовали DOS в Windows или аналогичную в Linux, то теперь, когда вы используете …, вы поднимаетесь на новый уровень. Так что, если вы находитесь в бронировании и хотите перейти на домашнюю страницу, которая на один уровень выше, вам нужно добавить ссылку с помощью … вот так
<li><a href="../index.html" title="Return to front page">Home</a></li>
Идите вперед и обновите все ваши index.html для страниц первого уровня по адресу advice_corner, бронированиям, контактам, домашним животным и продуктам, чтобы использовать вышеуказанную относительную ссылку. Что мы говорим с нашим синтаксисом ссылки, так это то, что я хочу перейти на страницу index.html, которая на один уровень выше относительно моей текущей позиции в структуре веб-сайта. Давай, попробуй.
Отлично, это сработало! Теперь давайте посмотрим, как получить страницы глубиной в два уровня для обратной ссылки на главную страницу и индексную страницу соответствующих разделов. Итак, мы сейчас расширяемся до уровня, показанного на рисунке ниже:
[img_assist | nid = 2367 | title = Карта сайта демонстрирует уровни | desc = | link = none | align = none | width = 456 | height = 456]
Как объяснялось ранее, мы ссылаемся относительно текущей позиции. Если ../ поднял нас на один уровень для ссылок на домашнюю страницу со 2-го уровня, нам нужно подняться на два уровня, так что это то, что нам нужно:
<ul>
<li><a href="../../index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>
<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>
Вперед и внесите эти изменения во все страницы второго уровня. После этого страница индекса, например, cats / index.html, будет выглядеть следующим образом:
<ul>
<li><a href="../../index.html" title="Return to front page">Home</a></li>
<li><a href="advice_corner/index.html" title="Read our helpful tips and more">Advice Corner</a></li>
<li><a href="bookings/index.html" title="Get your pet ready for the show">Bookings</a></li>
<li><a href="contact/index.html" title="Contact us with all your questions">Contact Us</a></li>
<li>
<a href="pets/index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="pets/dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="pets/cats/index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="pets/fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="pets/exotic/index.html" title="See our variety exotics">Exotics</a></li>
</ul>
</li>
<li>
<a href="products/index.html" title="View our unique product catalogue">Products</a>
<ul>
<li><a href="products/grooming_products/index.html" title="See our variety of grooming products">Grooming Products</a></li>
<li><a href="products/misc_products/index.html" title="See our variety of miscellaneous products">Miscellaneous Products</a></li>
<li><a href="products/training_products/index.html" title="See our variety of training products">Training Products</a></li>
</ul>
</li>
</ul>
С изменениями, примененными ко всем соответствующим страницам, вы сможете перейти, например, на главную страницу кошек и, перейдя по ссылке на домашнюю страницу, вернет вас на домашнюю страницу сайта. Попробуй. В третьей части серии мы соберем все вместе и дадим пользователю возможность перемещаться из любого места в любое место, другие типы ссылок, а также как сделать ваши ссылки доступными для пользователей вспомогательных технологий. Но пока я собираю это вместе, давайте попробуем связать как можно больше страниц на текущем сайте. Повеселись!