Как растянуть шапку на сайте?

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

Вам понадобится

• - возможность изменения разметки страниц ресурса.

Инструкция

Использование подходящего шаблона - универсальное решение, позволяющее не только растягивать, но и сжимать шапку, а также остальные элементы оформления. Можно использовать стандартные шаблоны, предоставляемые бесплатными хостингами, или свободно распространяемые в интернет. Любой шаблон требует доработки и адаптации. Желательно поменять всю графику, чтобы придать уникальности сайту. Никогда не используйте стандартное оформление шаблона. Оставляйте разметку страницы - ее «скелет», а «мясо» - содержание и элементы оформления замените на собственные. Вдумчивое использование шаблонов позволяет сэкономить время разработчика, которое может быть потрачено на наполнение сайта информацией, либо расширение возможностей сервиса.

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

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

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

Оцените статью!