§ 5. Создание навигации

Определения и обозначения

Навигация сайта — система переходов, помогающая посетителю находить нужные страницы и разделы. Проще говоря, это маршрут по сайту: он показывает, куда можно перейти и как добраться до нужной информации. Без такой системы посетителю пришлось бы искать страницы наугад.

Гиперссылка — элемент страницы, при выборе которого открывается другой документ или указанная часть страницы. Ссылка может быть оформлена как текст или другой заметный элемент. Она нужна, чтобы связать страницы и дать человеку понятный переход к дополнительной информации.

Якорь — обозначенное место внутри страницы, на которое можно перейти по ссылке. Его можно представить как закладку в длинном тексте. Якорь помогает сразу открыть нужный раздел, не прокручивая страницу вручную.

Меню навигации — набор ссылок, сгруппированных для перехода между основными разделами сайта. Обычно пункты меню имеют короткие названия, например «Новости» или «Контакты». Благодаря меню посетитель быстрее понимает, какие разделы доступны.

Как это устроено

Навигация нужна, чтобы посетитель понимал, какие разделы есть на сайте и куда ведут переходы. Если человеку неясно, где искать нужное содержание, он может покинуть сайт, даже если нужная информация там есть. Поэтому ссылки и меню должны не просто существовать, а помогать выбрать следующий шаг. Понятная система переходов делает использование сайта удобнее.

Связи между страницами лучше продумать заранее: определить главную страницу, основные разделы и возможные переходы между ними. Так автор замечает, если важная страница оказалась недоступной из меню или если посетителю приходится делать лишние переходы. Например, с главной страницы можно открыть основные разделы, а внутри раздела — связанные с ним материалы. Продуманная структура помогает связать страницы в единый сайт.

Ссылка на страницу своего сайта и ссылка на внешний ресурс ведут к разным адресам. Поэтому при создании каждой ссылки нужно точно определить, куда она должна вести: на файл внутри проекта или на ресурс в интернете. Если перепутать цель либо ошибиться в адресе, пользователь откроет не ту страницу или переход не сработает. Проверка ссылок позволяет обнаружить такие ошибки до того, как ими воспользуются посетители.

Ссылка на якорь ведёт к определённому месту длинной страницы, а не просто открывает её начало. Это удобно, когда материал состоит из нескольких разделов и человеку нужен только один из них. Для перехода создают якорь у нужного места и связывают его со ссылкой. Также можно добавить якорь в начале страницы, чтобы читатель мог вернуться наверх.

Если меню расположено одинаково на страницах и его пункты названы понятно, пользователю не приходится каждый раз заново разбираться в устройстве сайта. Единообразие помогает быстрее находить знакомые ссылки, даже когда человек открывает разные разделы. Название пункта должно сообщать, какое содержание откроется, а не заставлять посетителя угадывать. Например, «О проекте» понятнее, чем просто «Подробнее».

Виды переходов на сайте

Сначала определите, остаётся ли переход внутри сайта или ведёт на внешний ресурс. Затем выясните, нужна ли целая страница или конкретный раздел, отмеченный якорем. Такая проверка помогает выбрать правильную цель ссылки.

Разбор задач

Меню для сайта

На сайте есть главная страница и страницы «Новости», «О проекте» и «Контакты». Нужно составить набор пунктов меню, который позволит посетителю переходить между ними. Здесь важно включить основные разделы и не усложнять названия.

1. Определяем, какие страницы посетителю важно открывать из меню: три названные страницы и главную.
2. Подбираем короткие названия, совпадающие с содержанием страниц: «Главная», «Новости», «О проекте», «Контакты».
3. Проверяем, что за каждым пунктом закреплена соответствующая страница, а названия не вводят пользователя в заблуждение.

Ответ: в меню размещают пункты «Главная», «Новости», «О проекте» и «Контакты». Каждый пункт связывают с одноимённой страницей. Так посетитель видит доступные разделы и может выбрать нужный.

Внутренняя и внешняя ссылки

Для страницы с описанием проекта нужно сделать ссылку с главной страницы и ссылку на сайт организации-партнёра. Первая должна открывать страницу проекта, а вторая — ресурс партнёра. Хотя обе ссылки являются переходами, их адреса относятся к разным сайтам.

1. Сначала создаём на главной странице ссылку, ведущую на страницу проекта внутри своего сайта.
2. Затем добавляем ссылку на ресурс организации и указываем адрес её сайта.
3. Проверяем обе цели отдельно: внутренняя ссылка должна открывать проект, внешняя — сайт партнёра.

Ответ: на главной странице размещают внутреннюю ссылку на описание проекта, а на странице проекта — внешнюю ссылку на сайт партнёра. Перед публикацией проверяют, что каждая ведёт по правильному адресу. Названия ссылок должны подсказывать пользователю, что откроется.

Навигация по длинной странице

На длинной странице есть разделы «История», «Участники» и «Результаты». Нужно дать возможность сразу переходить к любому из них, а также возвращаться к началу страницы. Для этого обычных ссылок только на страницу недостаточно: переходы следует связать с нужными местами.

1. Обозначаем якорями начало страницы и места, где начинаются три раздела.
2. Создаём ссылки «История», «Участники» и «Результаты» и связываем каждую с якорем одноимённого раздела.
3. Добавляем ссылку «К началу» и направляем её на якорь в верхней части страницы.
4. Проверяем каждый переход: ссылка должна приводить к нужному заголовку, а возврат — к началу.

Ответ: навигация состоит из трёх ссылок на разделы и ссылки «К началу». Для каждой ссылки указывают имя существующего якоря. Тогда читатель сможет перемещаться по странице без долгой прокрутки.

Типичные ошибки

Ссылка ведёт не на ту страницу. Обычно это происходит из-за опечатки в адресе или имени файла либо потому, что указана неверная цель. Чтобы проверить себя, откройте ссылку и убедитесь, что загрузилась именно нужная страница. Если переход не работает, внимательно сверьте адрес с именем файла.

Пункт меню назван слишком общо. Названия вроде «Другое» или «Подробнее» не объясняют, что находится за ссылкой, поэтому посетитель вынужден угадывать. Такая ошибка возникает, когда автор ориентируется на собственное знание сайта, а не на опыт нового пользователя. Проверьте, понятно ли содержание раздела по одному названию пункта.

Ссылка ведёт к несуществующему якорю. Это случается, если имя в ссылке написано иначе, чем имя якоря, или якорь забыли создать. В результате переход не приводит к нужному разделу. Сверьте имена символ в символ и проверьте ссылку в браузере.

Меню по-разному размещено или оформлено на страницах. Посетителю приходится искать навигацию заново, когда он переходит в другой раздел. Часто так происходит, если страницы создают по отдельности и не сверяются друг с другом. Откройте несколько страниц сайта и проверьте, что меню находится в привычном месте и выглядит единообразно.

Связь с другими темами

Для создания навигации нужно уметь разбираться в адресе веб-страницы и создавать страницы сайта: без этого трудно правильно указать цель перехода. Тема связана с гипертекстом, потому что ссылки соединяют документы и части документов. Она также опирается на структуру сайта: набор страниц и продуманные связи между ними помогают построить удобные маршруты. Эти знания пригодятся при разработке многостраничных сайтов и веб-проектов.

Что запомнить

• Навигация связывает страницы сайта и помогает находить нужное содержание.
• У каждой ссылки должна быть понятная цель.
• Внутренние ссылки ведут на страницы своего сайта.
• Внешние ссылки ведут на другие ресурсы.
• Якорь задаёт место, к которому можно перейти внутри страницы.
• Названия пунктов меню должны ясно описывать содержание разделов.