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

Використання відповідного шаблону - універсальне рішення, що дозволяє не тільки розтягувати, а й стискати шапку, а також інші елементи оформлення. Можна використовувати стандартні шаблони, які надаються безкоштовними хостингами, або вільно поширювані в інтернет. Будь-шаблон потребує доопрацювання і адаптації. Бажано поміняти всю графіку, щоб надати унікальності сайту. Ніколи не використовуйте стандартне оформлення шаблону. Залишайте розмітку сторінки - її «скелет», а «м`ясо» - зміст і елементи оформлення замініть на власні. Вдумливе використання шаблонів дозволяє заощадити час розробника, яке може бути витрачено на наповнення сайту інформацією, або розширення можливостей сервісу.

Якщо сторінка вже зверстана, можна спробувати розтягнути шапку самостійно. Для цього будуть потрібні базові знання HTML і СSS. Якщо шапка сайту оформлена у вигляді одного графічного файлу, можна спробувати стискати і розтягувати її зображення в залежності від ширини вікна. Цей спосіб добре працює, якщо коефіцієнт масштабування невеликий. Якщо він перевищує ширину зображення на чверть і більше, постраждає якість картинки. Чи стануть помітні окремі пікселі, що формують зображення.

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

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