Як вставити свою шапку на сайт

Як вставити свою шапку на сайт

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

Інструкція

  1. Якщо ви хочете, щоб сайт мав статичними незмінними розмірами, вам буде потрібно створити статичну шапку, яка не змінюється в залежності від зміни ширини екрана. Визначте ширину і висоту шапки (наприклад, 996х230) і вставте у верхній блок фонову картинку, використовуючи наступний CSS-код, де header-1.jpg — це фонове зображення:

    # Header {background: # a6b7d3 url (img/header-1.jpg) no-repeat; width: 996px; height: 230px;}

    HTML-код шапки цього типу буде виглядати так:

    <div> </ div ><!— Блок шапки ->
  2. Якщо ж сайт побудований так, що його розміри підлаштовуються під ширину екрану, шапка повинна бути зверстана з урахуванням всіх основних дозволів моніторів. Максимальна ширина такої шапки повинна складати 1920 пікселів. Для вставки такий шапки використовуйте CSS-код:

    # Header {background: # a6b7d3 url (img/header-2.jpg) no-repeat center; height: 250px;}

    HTML-код є в даному випадку аналогічним попередньому.

    CSS-код змінено в деяких параметрах — тепер у ньому з’явився атрибут центрування зображення шапки, що дозволяє підігнати фон під будь-яку ширину екрана.
  3. Також ви можете зверстати більш складний варіант шапки, нарізаний на кілька фонових блоків, які будуть змінювати своє положення в залежності від розміру вікна перегляду. CSS-код такий шапки більш складний і великий, і має на увазі повторення кількох елементів фону відповідно до плаваючими розмірами вікна браузера, в якому можуть переглядати ваш сайт.