Як розтягнути шапку на сайті


 

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



Вам знадобиться

— можливість зміни розмітки сторінок ресурсу.

Інструкція

  1. Використання підходящого шаблона — універсальне рішення, що дозволяє не тільки розтягувати, а й стискати шапку, а також інші елементи оформлення. Можна використовувати стандартні шаблони, надані безкоштовними хостингами, або вільно поширювані в інтернет. Будь шаблон вимагає доопрацювання і адаптації. Бажано поміняти всю графіку, щоб надати унікальності сайту. Ніколи не використовуйте стандартне оформлення шаблону. Залишайте розмітку сторінки — її «скелет», а «м’ясо» — зміст та елементи оформлення замініть на власні. Вдумливе використання шаблонів дозволяє заощадити час розробника, яке може бути витрачено на наповнення сайту інформацією, або розширення можливостей сервісу.
  2. Якщо сторінка вже зверстана, можна спробувати розтягнути шапку самостійно. Для цього будуть потрібні базові знання HTML і СSS. Якщо шапка сайту оформлена у вигляді одного графічного файлу, можна спробувати стискати і розтягувати її зображення в залежності від ширини вікна. Цей спосіб добре працює, якщо коефіцієнт масштабування невеликий. Якщо він перевищує ширину зображення на чверть і більше, постраждає якість картинки. Чи стануть помітні окремі пікселі, що формують зображення.
  3. Для того щоб зображення залишалося якісним, але при цьому займало все відведений для нього простір, необхідно розділити його на окремі частини. Зазвичай це права сторона, ліва і центральна. Бажано, щоб у зображення був однотонний по ширині фон, яким можна було заповнити проміжки, що виникають між частинами шапки. Дві картинки, формують краю шапки, необхідно закріпити на лівій і правій сторонах контейнера. Центральне зображення укладіть в тег
    . Фоновим зображенням шириною в один піксель замостити залишився.
  4. Ще один простий спосіб полягає в створенні зображення, свідомо більшого, ніж самий великий екран. Зображення встановлюється фоном по центру розділу шапки. Мінусом є великий «вага» зображення, і як наслідок — тривалий час його завантаження. Комбінування зазначених вище способів дозволяє уникнути більшості негативних ефектів.