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

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

Этапы создания макета сайта. Часть 5. Работа над «шапкой» (хедером) сайта (продолжение).

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

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

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



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


В статье «Этапы создания макета сайта. Часть 3. Работа над «шапкой» (хедером) сайта» мы остановились на четвертом этапе создания хедера для макета сайта. Сегодня мы продолжим создавать макет сайта, а конкретно хедер. И так наполнение хедера запланированными дополнительными модулями.


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


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


Хедер сайта


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


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


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


Хедер сайта


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


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


Способ №1. В качестве фона вы подбираете изображение достаточно больших размеров, то есть ширина его должна быть не менее 2000рх. Вырезав из этого изображения необходимый по высоте элемент, вы получаете фон хедера. Замечание! При верстке сайта именно этот элемент будет использован в качестве фона, поэтому стоит его сохранить отдельным файлом. Итог! При увеличении ширины сайта вы наблюдаете, части фона, которые до этого были скрыты благодаря определенным правилам CSS.


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


Фон хедера  сайта


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


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


Поделиться

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

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


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


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

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

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

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

Z255632435111

R174106546724

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

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

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

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

Статей: 107

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

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

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