Що таке сучасна верстка сайту: підходи у створенні веб сторінок

Напевне, ти знаєш, що таке верстка сайту. Коротко нагадаємо, що це створення коду HTML та таблиць CSS за дизайнерським шаблоном. І, швидше за все, ти знаєш, що верстка сайту поділяється як мінімум на три типи: блочна, таблична та статична.
Напевне, ти знаєш, що таке верстка сайту. Коротко нагадаємо, що це створення коду HTML та таблиць CSS за дизайнерським шаблоном. І, швидше за все, ти знаєш, що верстка сайту поділяється як мінімум на три типи: блочна, таблична та статична.
Хочеш стати Front-end розробником?
Відкрита реєстрація на курс →
Статична верстка
Передбачає збереження ширини сторінок, незалежно від гаджету чи розмірів браузера. Якщо розрішення екрану завелике та вікно браузеру розгорнуте на весь екран, зазвичай, обидва боки екрану мають пустиш. Це що стосується ПК. А от на мобільних гаджетах за статичної верстки знизу сторінки виникає смужка прокрутки.
Таблична верстка
Сітка сторінки побудована за допомогою таблиць. Це як одна велика таблиця на сторінці, в кожному прямокутнику якої – додаткова вставлена таблиця, в прямокутниках якої – ще вставлені таблиці, і так до нескінченності. Це як матриця, як один великий лабіринт таблиць, вставлених в прямокутники інших таблиць.

Словом, код виходить занадто довгий та незручний, та й не потрібен він в такому вигляді. Сьогодні веб-верстальники вже так не працюють. А пошукові браузери не люблять такі сторінки з енною кількістю таблиць, та геть кепсько їх індексують. Якщо таблиця усе ж потрібна на сторінці, її просто не варто робити за допомогою структури сторінки. Просто обери інші інструменти і не зловживай кількістю таблиць. Цей спосіб застарілий.
Блочна верстка
div-верстка – це, напевне, найбільш поширений тип верстки серед розробників. Тут сітка створюється з величезної кількості блоків div, вкладених один в один. Щоб до них дістатися, верстальники послуговуються атрибутами id й class. Для цього просто потрібно відкрити вихідник коду (Ctrl + U) будь-якої веб-сторінки, і ти точно побачиш саме такий тип верстки.
Попри ці три найбільш поширені типи верески, сучасна розширена типологія відкриває ще аж цілих 6 додаткових варіантів верстки сайту, якими послуговуються любителі оригінальних креативних проектів та ті компанії які фінансово можуть собі дозволити утримувати гарного веб-дизайнера та верстальника на проекті.

Ось ці 6 типів.
1. Резинова верстка
Веб-сторінка за такого типу верстки розтягується на всю ширину браузера, яких би розмірів вона не набувала та на якому з гаджетів не відкривалася б. Ширина елементів веб-сторінки задається у відсотках від ширини вікна браузера, і, таким чином, розтягується до країв вікна.

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


2. Мобільна верстка



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


3. Гнучка верстка
Розпочинається з блочної верстки, а вже потім потрібні елементи перетворюються на гнучкі контейнери. У стилях елемента вказується display: flex. Елементу можна задати напрямок головної вісі та вирівняти його.

Такі чарівні маніпуляції з версткою стали можливими завдяки створенню CSS3, що зробило сторінки надгнучкими та комфортними для перегляду користувачами на всіх видах гаджетів.
4. Семантична верстка
По факту є продовженням блочної верстки. Стала можливою завдяки HTML5. Нові теги роблять сторінку структурованою та логічно вмотивованою. Такі сторінки дуже люблять пошукові браузери. Ідеально підходять для лендингів, які продають товари та послуги, або для сайтів-візитівок.
5. Валідна верстка


Її ще називають красномовно «верстка без помилок». Чому? Бо цей тип верстки виконано відповідно до стандартів W3C. Перевірити веб-сторінку на коректність завжди можна за допомогою спеціального валідатора W3C – ПК програми, яка перевіряє відповідність будь-якого потоку даних чи документа, елемента коду певному формату, валідує їх.
6. Кросбраузерна верстка
Вона відповідає за те, щоб веб-сторінки однаково виглядали в різних браузерах. Спершу підключають до сторінки спеціальний CSS файл, що скидає стилі. Потім виконують стандартні кроки задля створення форми веб-сторінки відповідно до шаблону веб-дизайнера.
Ось такі типи верстки може використовувати сучасний веб-верстальник. На курсах Logos IT Academy ти дізнаєшся детальніше про них, і навчишся основні з цих типів верстки застосовувати практично.

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

А поки що на сьогоднішній день основні вимоги замовника до якісної верстки такі:

· Кросбраузерність
· Адаптивність
· Мінімум коду
· Швидкість завантаження
· Семантика
· Валідність

Бери на озброєння ці вимоги, обирай свої улюблені типи верстки та приходь вчитися на веб розробника в Logos IT Academy, аби створювати з нуля такі ІТ шедеври.

Резюмуємо:

- Якщо визначився та готовий, реєструйся на комплексний курс Frontend Developer →
- Думаєш, сумніваєшся, реєструйся на безкоштовний курс Основи Frontend розробки →

Забронюй місце в групі та отримай вступні уроки безкоштовно!

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

Види верстки сайтів

6 типів верстки веб сторінок

Сформуємо цілі
Визначимо рівень знань
Розповімо про навчальну платформу