В заключительной части этой серии будут рассмотрены оставшиеся формы ссылок, которые не рассматриваются в части 1 или части 2 . К настоящему времени вы должны чувствовать себя комфортно, когда вы ссылаетесь на страницы в структуре вашего сайта. Вы также должны чувствовать комфортное соединение с верхнего уровня вниз и обратно на столько уровней, сколько хотите. Итак, для начала части 3, которая является завершением этой серии, я собираюсь начать с трех битов кода, которые охватывают все сценарии, которые были рассмотрены.
Ваш корневой файл 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>
Ваша навигация на один уровень вниз должна выглядеть следующим образом:
<ul>
<li><a href="../index.html" title="Return to front page">Home</a></li>
<li><a href="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 внутри папки cats для этого:
<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="../index.html" title="Take home your best friend">Pets</a>
<ul>
<li><a href="../dogs/index.html" title="See our variety of dog breeds">Dogs</a></li>
<li><a href="index.html" title="See our variety of cat breeds">Cats</a></li>
<li><a href="../fish/index.html" title="See our variety of fish species">Fish</a></li>
<li><a href="../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>
На данный момент вы можете просмотреть приведенный выше код и увидеть, где различия отличаются от вашей текущей базы кода. Следующее, что нужно сделать, это загрузить код, который приведёт вас в соответствие с тем, где мы сейчас находимся . Я также добавил некоторый контент на некоторые страницы, чтобы помочь в окончательных типах ссылок, которые мы будем изучать в этой части серии. Когда вы загрузите zip-файл, распакуйте его в каталог по вашему выбору.
Первый новый тип ссылки, который мы обсудим, называется якорной ссылкой. Эта ссылка позволяет вам не только ссылаться на определенную страницу вашего сайта, но и на определенный раздел страницы, на которую вы ссылаетесь. Процесс создания якорной ссылки очень прост. Первый шаг — открыть файл index.html, расположенный в папке grooming_products. Вы увидите, что на этой странице перечислены три продукта. Мы собираемся добавить якорную ссылку на продукт 1 следующим образом:
<h3><a name="prod1"></a>Product 1</h3>
Затем откройте корневой файл index.html. Здесь вы найдете раздел, озаглавленный «Product Spotlight», в котором представлен один из них. Первый шаг — связать заголовок со страницей, содержащей продукт, следующим образом:
<h4><a href="products/grooming_products/index.html">Product One</a></h4>
Затем будет ссылка на страницу, где указан продукт, но не будет ссылки на конкретный раздел. Чтобы включить это, мы добавим немного чего-то дополнительного в код, указанный выше:
<h4><a href="products/grooming_products/index.html#prod1">Product One</a></h4>
# Prod1 — это то, что известно как якорная часть вашей якорной ссылки. Поэтому, изменив свою ссылку, чтобы отразить все вышеперечисленное, продолжайте и нажмите на ссылку еще раз. Вот это да! Это на самом деле прыгает прямо на тот продукт, который мы хотели. Вы также заметите, что когда вы нажмете кнопку «Назад» в браузере, она все равно вернется на домашнюю страницу, где вы остановились. Вот и все! Простые и удобные якорные ссылки. Для ссылки следующего типа откройте файл index.html в папке advice_corner.
Эта страница содержит заголовок «Некоторые ссылки на полезные ресурсы». На этой странице мы будем ссылаться на внешние сайты, которые находятся за пределами структуры вашего сайта. Это даже проще, чем создание якорной ссылки. Первый элемент списка ссылок содержит текст «Корм и лакомства для домашних животных от DogMor», поэтому у нас будет эта ссылка на страницу на другом веб-сайте. Для этого примените следующее:
<li><a href="http://www.nola.co.za/home.asp?pid=44">Pet food and treats from DogMor</a></li>
Вы увидите, что разница здесь в том, что вместо использования относительной ссылки мы используем абсолютный путь, который включает префикс http, а также имя домена и страницу в этом домене, на которую мы хотим перейти. Примените изменения и протестируйте ссылку. В следующем пункте списка было указано «Purina», и поэтому мы хотим дать ссылку на сайт Purina. URL для этого http://www.purina.com/. Перейдите и сделайте ссылку на элемент списка Purina на веб-страницу Purina.
Если все сделано правильно, ссылка приведет вас на домашнюю страницу сайта Purina. Теперь, что, если вы хотите создать ссылку на определенный раздел на внешнем веб-сайте, то есть привязку к внешнему веб-адресу. Что ж, это очень просто, допустим, что на веб-странице DogMor, на которую мы ссылались ранее, был продукт, на который вы хотели сослаться. Первое, что вам нужно знать, это то, как называется якорь, для этого примера давайте предположим, что он называется «продукт». Чтобы перейти к этому разделу этой страницы, ссылка выше изменится, просто добавив привязку к текущей ссылке:
<li><a href="http://www.nola.co.za/home.asp#product?pid=44">Pet food and treats from DogMor</a></li>
Существует только один другой тип ссылки, который мы будем изучать, и это ссылка mailto. Это позволяет вам разместить ссылку на странице и при нажатии на нее автоматически скажет браузеру открыть почтовый клиент по умолчанию и добавить адрес, указанный в ссылке, добавленной в поле «Кому» окна композитора. Для этого откройте страницу index.html внутри папки контактов. Там вы найдете следующую строку:
<p>feedback@thepetstore.com</p>
Чтобы сделать эту ссылку простой ссылкой, измените эту строку на следующую:
<p><a href="mailto:feedback@thepetstore.com">feedback@thepetstore.com</a></p>
Нажмите на эту ссылку и посмотрите, что произойдет. Просто не так ли? Хорошо, теперь мы рассмотрели все типы ссылок, которые мы используем в Интернете ежедневно. Идите вперед и повеселиться! Скачайте код , экспериментируйте и получайте удовольствие! Ниже будет статья, не входящая в эту серию, в которой будут рассмотрены лучшие практики создания ссылок и способы обеспечения того, чтобы ваши ссылки были доступны и могли использоваться всеми пользователями. Все, что мы сделали, чтобы знать, также живое и доступ к нему можно получить, зайдя в зону для веб-разработчиков PetStore.