Сегодня:
Блог: "Основы сайтостроения и веб дизайна"
сайтостроение

Переход на: Главная / Макет сайта /

Этапы создания макета сайта. Часть 6. Создаем навигационное меню.

АвторАвтор: aklychin

Дата добавленияДата добавления: 12.06.2013

Число просмотровЧисло просмотров: 8879



Здравствуйте уважаемый читатель блога "Основы сайтостроения и web дизайна".


Продолжаем рассмотрение темы «Этапы создания макета сайта». А так же продолжаем создавать свой макет для будущего сайта. В предыдущих статьях мы определись с:


Размерами будущего макета сайта;

Основным фоном для макета сайта.

Разметкой макета сайта.

Хедером для макета сайта.


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


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


Создаем навигационное меню


Одноуровневое меню – это простейший вид меню, где названия ссылок располагаются друг за другом в горизонтальной или вертикальной последовательности. Многоуровневое меню – это сложный вид меню, где имеется несколько уровней ссылок на страницы сайта. То есть если одна из ссылок первого уровня имеет подменю, ссылки связанные между собой определенной тематикой, то это уже многоуровневое меню.


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


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


Шаг №2. Определяем размеры навигационного меню. Непосредственно от той информации, которую должно нести в себе навигационное меню, зависят и размеры этого самого меню. Соответственно, чем больше ссылок, тем больше должен быть размер меню. И так ширина меню, которое выступает отдельным модулем или является продолжением хедера, как правило, равняется ширине хедера или макета в целом.


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


Создаем навигационное меню


Шаг №3. Определяем цветовое решение меню. Цветовое решение меню – это в первую очередь цвет фона меню, цвет разделителей между ссылками, а так же некоторые эффекты, которые сделают меню более привлекательным. И так, цвет фона меню должен находиться в приделах цветовой схемы созданной при разработке web-дизайна сайта. Как правило, фон меню, это однотонный цвет или градиент, позволяющий придать меню некий объем.


Разделитель – это однотонная полоса или полоса из двух цветов, которая, как и градиент придает разделителю объемность. Для большей реалистичности при создании меню довольно часто разработчики используют такие стилистические эффекты, как тень, свечение, тиснение, глянец и наложение узора. Все это придает меню свою индивидуальность и неповторимость.


В случаях, когда меню располагается внутри хедера, его цветовое решение полностью совпадает с цветовыми параметрами хедера и поэтому данный шаг не выполняется.


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


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


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


На этом на сегодня мы прервемся и продолжим рассмотрение темы «Создаем навигационное меню» уже в следующей статье.


Поделиться

Добавьте Ваш комментарий и оцените статью:

+ Добавлять комментарии и оценивать статью могут только зарегистрированные пользователи. Если Вы регистрировались, то просто авторизируйте свой аккаунт.


Комментарии к данной статье:


Подписаться на обновления блога

монетизация сайтаРеклама
заработок на сайтеПомощь

Понравился проект?

Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков:

Z255632435111

R174106546724

Деньги пойдут на оплату серверов, зарплату авторам уроков и развитие ресурса.

В примечании к платежу укажите Ваш email или логин на нашем проекте.

Администрация.

Статистика блога:

Статей: 107

Комментариев: 8

Зарегистрировано: 15

Все права защищены сopyright © Блог - "Основы сайтостроения и веб дизайна" 2012 - 2017