Вёрстка: как устроена страница

1.

ПРОСТЫМИ СЛОВАМИ
Что такое
вёрстка?
Главный
заголовок
Это расстановка текста, картинок и
кнопок на странице.
Кнопка
Чтобы всё было понятно и удобно
1

2.

Вёрстка — как расстановка мебели
Предметы те же. Удобство зависит от того, где они стоят.
Всё вперемешку
Всё на своём месте
Вёрстка делает пространство понятным — даже если
содержание не меняется.
2

3.

HTML — содержание, CSS — внешний вид
Вместе они превращают набор элементов в аккуратную страницу.
HTML
CSS
Что есть на странице
Как всё выглядит
Заголовок
Расположение
Текст
Отступы
Картинка
Размеры
Кнопка
Цвета
Результат
Кнопка
3

4.

Один контент — разное впечатление
Слова и картинка не меняются. Меняется способ их показать.
Без вёрстки
С вёрсткой
Уют начинается с деталей
Небольшие вещи помогают сделать дом
теплее.
НОВАЯ КОЛЛЕКЦИЯ
Уют начинается
с деталей
Посмотреть товары
Небольшие вещи помогают
сделать дом теплее.
Содержание то же — читать и действовать стало легче.
4

5.

ЗАПОМНИТЬ
Вёрстка — это
расстановка элементов
на странице.
Она делает содержание понятным, красивым и удобным.
Те же элементы. Намного лучшее впечатление.
5