- Как сверстать сайт по макету
- Первичный осмотр макета
- Структура страницы
- Внутренний контент
- Редактор кода
- Разметка
- Базовая стилизация
- Работа с графикой
- Структурный CSS
- Декоративный CSS
- Адаптив
- Заключение
- Полезные ссылки
- Как сверстать макет. Пошаговый план
- Осмотрите макет
- Настройте редактор кода и проект
- Разметка
- Базовая стилизация
- Работа с графикой
- Построение сетки
- Добавление декоративных элементов
- Адаптивные сетки и декоративные элементы
- Адаптивная графика
- Следующие шаги:
Как сверстать сайт по макету
Привет! Представь, что ты открыл свой первый макет в Figma (например, такой). Что же делать дальше? Как распланировать процесс работы так, чтобы верстка была простой, гибкой и удобной? Давайте разбираться.
Первичный осмотр макета
Первым делом нужно осмотреть весь макет, чтобы сразу увидеть все подводные камни, одинаковые элементы и т.д. Смотрите по принципу «Большой блок — маленький блок», сперва обращая внимание на секции, а затем на внутренности этих секций.
Структура страницы
Выделите все структурные элементы страницы:
- — шапка сайта
- — главный контент на странице
- — разделы страницы
- — подвал сайта
Далее стоит смотреть вглубь этих разделов, и здесь поможет известная всем схема Holy Grail Layout (англ. Святой Грааль). Так эту схему назвали верстальщики, ведь практически каждый сайт использует ее.
Схема эта конечно немного утрирована, и aside на сайте вы скорее всего не встретите, но общая концепция такова.
Внутренний контент
После разделения страницы на структурные блоки стоит посмотреть внутрь их — распознать, где ссылки, где абзацы, где выпадающее меню и т.д.
- Заголовки — и заголовок всего документа, и отдельные — —
- Абзацы с текстом или просто мелкие надписи —
или
- Фразовые элементы — изображения, ссылки, кнопки, видео, и так далее.
Когда вы сделаете это, у вас уже будет готовая схема верстки.
Редактор кода
Подготовьте редактор кода к работе (это может быть VS Code):
- Установите плагин EditorConfig for VS Code, он нужен для написания кода в едином стиле
- Установите плагин Live Server для быстрого обновления страницы при сохранении
После этого подготовьте себе правильную структуру проекта. Как правило, она всегда одна:
Разметка
После подготовки проекта стоит приступить к его разметке, без стилей:
- Создайте страницу index.html (или используйте страницу из приложенной выше структуры)
- Разметьте всю страницу — ссылки, кнопки, заголовки и так далее
- Напишите правильный lang и для страницы.
Не запутаться в тегах помогут наши статьи, ссылки на них размещены выше.
Базовая стилизация
Теперь нужно сделать базовую стилизацию проекта. Это — базовые сбросы и normalize.css, а также подключение шрифтов.
Normalize.css нужен, чтобы привести различия между элементами в разных браузерах к одному виду.
Базовый сброс, который я рекомендую для проектов:
html
box-sizing: border-box;
>
*,
*::before,
*::after
box-sizing: inherit;
>
a
color: inherit;
text-decoration: none;
>
img
max-width: 100%;
>
body
font-family: 'font', sans-serif;
>
Далее подключаем шрифты. Сейчас для всех проектов достаточно формата woff2:
@font-face
font-family: 'Muller';
src: url('../fonts/MullerLight.woff2') format('woff2'),
url('../fonts/MullerLight.woff') format('woff');
font-display: swap;
font-weight: 300;
font-style: normal;
>
Помимо этого можно также набросать фон, кастомные свойства (css-переменные), начать выделять в отдельные классы одинаковые элементы.
Работа с графикой
На этом этапе можно вырезать всю графику из Figma, чтобы потом было проще работать. Необходимо помнить важные правила:
- Если изображение контентое (важное для повествования, смысла) — используем тег
- Если же декоративное — есть два варианта. Если иконка будет менять цвет в результате действий пользователя — используйте тег , если нет — используйте background-image .
И также не забывайте о форматах изображений:
- Для изображений, не требующих прозрачности, используйте формат jpg
- Для изображений с прозрачным фоном — png
- Для иконок — svg
Также рекомендую использовать формат webp для лучшей оптимизации сайта.
Структурный CSS
Теперь пора переходить к тому, чтобы стилизовать структуру:
- Выделить контейнер
- Сделать сетку — разместить элементы на своих местах, сделать между ними отступы и т.д.
Для большой структурной стилизации (списки контента, карточки и т.д.) советую CSS Grid, для мелкой (меню и т.д.) — CSS FlexBox.
Декоративный CSS
Теперь стоит «допилить» стили проекта — полностью сделать все в соответствии с макетом, попутно добавляя различные декоративные элементы и так далее.
Адаптив
Последний этап перед продакшном — это адаптивная верстка. Проверьте, чтоб ваш сайт идеально смотрелся на любом устройстве. Здесь можно использовать:
- Media-запросы
- Элемент для создания адаптивных изображений
- Относительные единицы измерения, такие как % и т.д.
Впрочем, тема адаптива — отдельная сложная тема, которую не рассказать внутри одной статьи. Но вы можете посмотреть видео на моем канале: Адаптивная верстка
Заключение
Если вы сделали все предыдущие пункты, ваша верстка готова. Остается лишь проверить его, чтобы убедиться в правильности, и можно в прод!
Пользуйтесь небольшим чеклистом проверки проекта, чтобы все было в порядке.
Полезные ссылки
Как сверстать макет. Пошаговый план
Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.
Осмотрите макет
Зачем. Чтобы потом не отвлекаться от вёрстки.
Смотрите макет по принципу «Снаружи — внутрь» — двигаясь от крупных смысловых элементов к деталям дизайна. Чтобы было удобнее, сделайте дубликат макета в Фигме и пишите там заметки о том, что нашли.
Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:
- — шапка сайта, одинаковая на всех страницах.
- — уникальный контент;
- — подвал, одинаковый на всех страницах.
Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:
Проанализируйте контент. Присмотритесь к тексту на макете, какую функцию он выполняет? Может быть то, что вы видите, это не текст, а кнопка или раскрывающиеся меню?
- Заголовок всего документа и заголовки смысловых разделов. Теги: — .
- Мелкие элементы в смысловых разделах. Это списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
- Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.
Когда вы закончите работу, у вас в заметках будет готовая схема вёрстки и уже ничего не будет отвлекать вас от кода.
Настройте редактор кода и проект
Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.
Структура проекта. Создайте папку и положите туда файл index.html, папку css с файлами style.css и normalize.css, а также папки для картинок и шрифтов. Получится так:
Разметка
Рабочую среду подготовили, приступаем к разметке.
- Создаём разметку страницы в файле index.html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
- Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
- Теперь определим ! DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.
Выделяем крупные смысловые блоки на каждой странице сайта. Это — шапка, — подвал и — основное содержимое.
Размечаем в блоках крупные смысловые разделы. Выделяем главную навигацию , секции через , смысловые разделы через и дополнительное содержимое через .
Выделяем заголовок всего документа и заголовки смысловых разделов. Заголовок — это обманчиво простой тег. Главная проблема с заголовками такая: не всегда то, что кажется заголовком, им является.
Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:
Это само содержание, а не его резюме. Хорошим заголовком для этого блока был бы текст «О нас» или «О студии».
Определить, какие теги использовать, можно методом исключения:
- Получилось найти самый подходящий смысловой тег — использовать его.
- Для потоковых контейнеров — .
- Для мелких фразовых элементов (слово или фраза) — .
Разметка в редакторе кода выглядит так:
А так проект выглядит в браузере:
Базовая стилизация
Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.
Этапы базовой стилизации
- Добавление классов в разметку;
- Подключение нестандартных шрифтов (локально или из сервиса);
- Подключение normalize.css (по желанию);
- Указываем параметры шрифта — название, размер, цвет, жирность;
- Указываем высоту строки;
- Описание фоновых параметров (фоновый цвет);
- Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
- Все цвета вынесены в кастомные свойства в селектор :root.
Пример проекта с базовой стилизацией:
Работа с графикой
Экспортируйте всю графику из макета в Figma и подключите её в разметке.
SVG-изображения рекомендуется собрать в спрайт и подключить первым элементом в body. Спрайт — это файл, который мы сшили из нескольких графических элементов, например, из иконок. Спрайты экономят запросы к серверу — с ними сайт работает и загружается быстрее. В спрайт сшивается и растровая, и векторная графика.
В папке вашего проекта подготовьте графику: подготовленные изображения разместите в подпапке img в папке проекта, чтобы у вас получилась примерно такая структура проекта:
project | – css | – fonts | – img | [ваши картинки] | favicon.ico | index.html | catalog.html
Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.
При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:
Подключите к проекту фавиконки. favicon.ico размером 32×32 положите в корень проекта и подключите в , остальные версии фавиконок делать не обязательно.
Пример проекта в котором подключена графика:
Построение сетки
Построение сеток производится в общем стилевом файле style.css.
При работе с созданием крупных структурных сеток, в вёрстке используется подход desktop-first, то есть сайт прежде всего должен корректно отображаться на больших разрешениях экрана.
Расположите элементы страницы по сетке в соответствии с макетом. Для удобства используйте один из следующих способов визуального выделения элементов:
- C помощью свойства background-color c разными цветами для разных блоков;
- С помощью свойства outline (для удобства также можно использовать разные цвета).
- Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.
Пример проекта, где уже добавлены сетки:
Добавление декоративных элементов
На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.
Пример готового проекта, где добавлены декоративные элементы:
Всё почти готово, осталась пара шагов.
Адаптивные сетки и декоративные элементы
Чтобы сделать хороший адаптивный сайт, нужно понимать много нюансов: как работают вьюпорт, медиавыражения, адаптивные картинки. Эту тему стоит разобрать отдельно, но если хотите, познакомьтесь с ней в блоге Академии.
Адаптивная графика
Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?
- Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
- В HTML используем элемент picture , с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
- В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.
Пример готового проекта, где настроена адаптивная графика:
Вот мы и подошли к концу. Перед глазами готовый проект, ощущения радостные. Можно смело приступать к верстке нового макета. Ведь, чтобы научиться писать код — нужно писать код. Меньше сомнений — больше практики и всё получится.
Следующие шаги:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.