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

2 ноября 2014 г. Просмотров: 304 Инструкции

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

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

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

Инструкция

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

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

  • Если страница уже сверстана, можно попытаться растянуть шапку самостоятельно. Для этого потребуются базовые знания HTML и СSS. Если шапка сайта оформлена в виде одного графического файла, можно попробовать сжимать и растягивать ее изображение в зависимости от ширины окна. Этот способ хорошо работает, если коэффициент масштабирования небольшой. Если он превышает ширину изображения на четверть и более, пострадает качество картинки. Станут заметны отдельные пиксели, формирующие изображение.
  • Для того чтобы изображение оставалось качественным, но при этом занимало все отведенное для него пространство, необходимо разделить его на отдельные части. Обычно это правая сторона, левая и центральная. Желательно, чтобы у изображения был однотонный по ширине фон, которым можно было заполнить промежутки, возникающие между частями шапки. Две картинки, формирующие края шапки, необходимо закрепить на левой и правой сторонах контейнера. Центральное изображение заключите в тег . Фоновым изображением шириной в один пиксель замостите оставшееся пространство.
  • Еще один простой способ заключается в создании изображения, заведомо большего, чем самый большой экран. Изображение устанавливается фоном по центру раздела шапки. Минусом является большой «вес» изображения, и как следствие - длительное время его загрузки. Комбинирование указанных выше способов позволяет избежать большинства негативных эффектов.
  • Оцените статью!