CSS Макет вебсайту
Макет вебсторінки та вебсайту
Що таке дизайн-макет сайта?
Дизайн-макет сайта – це візуальне відображення майбутнього сайту, розробленого з урахуванням технічних можливостей HTML верстки. Такий макет є демонстрацією того, як візуально буде виглядіти сайт після верстки та наповнення.
Вебсайт зазвичай складається з набору візуально ідентичних вебсторінок. Тому макет вебсайту - це макет самих вебсторінок, із яких і складається весь вебсайт.
Веб-сторінка зазвичай складається із заголовка (header), навігаційного меню (nav), контенту (основного та додаткового) і нижнього колонтитулу (footer):
Є велика кількість різних макетів на вибір. Однак наведена вище структура є однією із найбільш розповсюджених, и ми докладніше розглянемо її в цьому підручнику.
Header - Заголовок
Заголовок зазвичай розташовується в верхній частині вебсторінки (або прямо перед верхнім меню навігації). Він часто містить логотип або назву сайту:
Приклад
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Результат:
Header
Навбар - Панель навігації
Панель навігації (навбар) містить список посилань, що допомагають відвідувачам переміщуватись по вашому сайту:
Приклад
/* Контейнер navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Посилання - які змінюють колір при наведенні миші */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Результат:
Content - Зміст
Макет секції зі змістом часто залежить від цільових користувачів. Найбільш розповсюджений макет - це одна секція (або комбінування їх із декількох):
- 1-колонка (часто використовується для мобільних браузеров)
- 2-колонки (часто використовується для планшетів та ноутбуків)
- 3-колонки (використовується лише для настільних комп’ютерів)
1-колонка:
2-колонки:
3-колонки:
Ми створили макет з 3 стовпцями (колонками) та змінили його на 1 колонку на менших екранах:
Приклад
/* Створимо три рівних колонки, які плавають поруч одна біля іншої */
.column {
float: left;
width: 33.33%;
}
/* Очищуємо float після колонок */
.row:after {
content: "";
display: table;
clear: both;
}
/* Адаптивний макет - три колонки розташовуються одна над іншою, а не поруч одна з одною на менших екранах (шириною 600 пікселів або менше) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Результат:
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Порада: Щоб створити макет з двома колонками, змініть ширину на 50%. Щоб створити макет з 4 колонками, використовуйте 25% і т.д.
Порада: Хочете знати, як працює правило @media? Дізнайтесь більше про це в розділі CSS Медіа запити.
Порада: Більш сучасний спосіб створення колончатих макетів - використовувати CSS Flexbox. Однак цей спосіб не підтримується в Internet Explorer 10 і більш ранніх версіях. Якщо вам потрібна підтримка IE6-10, використовуйте float (як показано вище).
Щоб дізнатись більше про модуль Flexible Box Layout (макет гнучкого блока), прочитайте розділ про CSS Flexbox на нашому сайті W3Schools українською.
Неоднакові колонки
Основний контент (розділ main) - найбільша і найважливіша частина вебсторінки.
На вебсторінці можуть бути колонки неоднакової (різної) ширини, тому більша частина простору зарезервована для основного контенту. Додатковий контент (якщо він є) часто використовується в якості альтернативної навігації або для вказування інформації, що належить до основного контенту. Змініть ширину колонок так, як вам подобається, тільки пам’ятайте, що вона має давати в сумі всього 100%:
Приклад
.column {
float: left;
}
/* Ліва і права колонки */
.column.side {
width: 25%;
}
/* Колонка посередині */
.column.middle {
width: 50%;
}
/* Адаптивний макет - три колонки розташовуються одна над одною, а не поруч одна біля іншої. */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Результат:
Бокова сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Основний контент
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Бокова сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Footer - Нижній колонтитул
Нижній колонтитул (footer) знаходиться внизу вебсторінки. Він часто містить інформацію, таку як авторське право та контактну інформацію:
Приклад
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Результат:
Адаптивний макет вебсайту
Використовуючи наведений вище CSS код, ми створили адаптивний макет сайту, який змінюється між двома колонками та колонками на всю ширину в залежності від ширини екрану:
