Шапка сайту в css – як її зробити

11

Від автора: вітаємо вас на нашому блозі про сайтобудуванні. У будь-якого сайту є те, чим він зазвичай запам’ятовується і виділяється серед інших. Зазвичай це саме шапка сайту. CSS дозволяє зробити її такою, як вам треба.

Шапка сайту – якою вона буває

Вражаюче, як багато може залежати сьогодні від одного тільки дизайну веб-ресурсу. Але що особливо сильно відокремлює веб-ресурс від інших? Як правило, це саме шапка сайту з фірмовим логотипом та унікальним оформленням. Зазвичай саме по ній люди запам’ятовують якийсь інтернет-проект. Це дуже добре запам’ятовується в пам’яті людей.

Наприклад, якщо ви бачите білу букву «В» на синьому тлі, то напевно відразу робите висновок – це іконка соціальної мережі Вконтакте. А зображення поштового голуба у всіх відразу ж асоціюється з Twitter. Все це стало можливим тому, що в шапках у цих сайтів були саме такі зображення і вони дуже добре запам’яталися людям.

Так, це було трохи роздумів, тепер давайте перейдемо безпосередньо до технічної частини.

Як CSS можна оформити шапку сайту?

Взагалі шапки бувають різними. По ширині їх можна розділити на дві групи: вирівняні по центру і ті, що на всю ширину веб-сторінки.

Раніше шапку робили також, як і будь-який інший блок – звичайному тегу div давали потрібний ідентифікатор, після чого у нього потрапляло все потрібне вміст, а потім все це оформлялося. Сьогодні ж вже прийнято верстати по-іншому. Спеціально для створення шапки сайту в HTML5 з’явився парний тег – header. Його використання вітається, це дозволяє браузерам розуміти, що це за частина шаблону і за що вона відповідає. До речі, якщо ви хочете вивчити основи HTML5, то вам пряма дорога в наш преміум-розділ, де ви можете подивитися уроки за цією технологією.

Тому, для створення найпростішої шапки достатньо написати в html ось такий код:

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

header{
width: 100%;
background: #D8E3AB;
height: 70px;
}

Взагалі, якщо все робити правильно, то слід було б поставити блоку якийсь клас або навіть ідентифікатор (оскільки це важливий елемент веб-сторінки), але ми поки просто звернемося до елемента по тегу.

Властивість width: 100% робить так, що наш блок буде розтягуватися на всю ширину незалежно від розмірів екрана. Якщо ж все-таки розміри потрібно хоч якось обмежити, використовують додатково властивість max-width, де в пікселях записують абсолютний розмір, по досягненню якого контейнер більше не буде розширюватися.

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

Таким чином, наш верх сайту буде розташований рівно по центру. Залишається тільки наповнити його.

Шапка сайту в css – як її зробити

Рис. 1. Поки це тільки контейнер, в якому буде весь вміст.

Що зазвичай міститься в шапці?

Зазвичай там вставлений логотип, назву, опис сайту. Також там може перебувати якась контактна інформація, навігація по сторінках або навіть реклама.

Логотип зазвичай вставляють як фонове зображення. Давайте, наприклад, поставимо такий:

Шапка сайту в css – як її зробити

Для цього достатньо дописати деякі правила до фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

Тобто крім суцільного кольору даємо ще й фонову картинку (в нашому випадку logo.png) і попередньо я її поклав у ту ж папку, що і файл стилів. Забороняємо повторення логотипу і визначаємо його позицію в блоці – трохи змістимо вліво і по центру по вертикалі.

Додамо в шапку якийсь вміст. Наприклад, заголовок і меню.

Назва сайту

Тепер все це оформимо.

.title{
font-size: 36px;
padding-top: 10px;
text-align: center;
}
.menu{
list-style: none;
position: absolute;
top: 10px;
right: 100px;
}

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

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

Змістимо меню в правий край з допомогою абсолютного позиціонування. Щоб це запрацювало, потрібно також дописати для header таке правило: position: relative;

Шапка сайту в css – як її зробити

На виході отримуємо готову шапку з логотипом зліва, заголовок по центру і меню праворуч. Звичайно, при верстці реального проекту потрібно все робити згідно з тим макетом, по якому робиться робота, а не займатися самодіяльністю. Але властивості застосовуються в цілому абсолютно такі ж, як я наводив тут.

Як зафіксувати блок, щоб він не зникав при прокрутці?

Якщо ви хочете фіксувати шапку в css (таке її поведінка можна побачити на багатьох веб-ресурсах), то вам може допомогти фіксоване позиціонування. Потрібно додати такі стилі:

position: fixed;

А також координати (top, left, right, bottom) які вам потрібні. Зазвичай фіксацію роблять з допомогою jQuery, прописуючи відповідний сценарій і прив’язуючи його до події – вертикальному скроллу сторінки.

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

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