НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

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;
}

Результат:

Footer
Спробуйте самі »

Адаптивний макет вебсайту

Використовуючи наведений вище CSS код, ми створили адаптивний макет сайту, який змінюється між двома колонками та колонками на всю ширину в залежності від ширини екрану:

Спробуйте самі »