Строим сайт по кирпичику: зачем нужна структура и как сделать сайт удобным и легким в поддержке

Как сделать сайт не только красивым, но и удобным? Как выстраивать структуру, чтобы облегчить работу над проектом и его поддержку? Будем разбираться вместе с конструктором сайтов Taptop. Расскажем, что нужно знать о базовых блоках, чтобы собрать сайт в билдере по всем правилам верстки. А также о том, как ускорить работу над сайтом, автоматизировав настройки элементов внутри блоков.

Первый шаг при работе над сайтом — создание прототипа. Это поможет увидеть полную картину проекта и не потерять важных деталей. На этапе проектирования разрабатывается структура сайта и каждой отдельной страницы — контент разбивается на секции и блоки, которые наполняются более мелкими элементами.

Четкая структура сайта полезна сразу для нескольких целей:

Разрабатывая макет, дизайнер выстраивает структуру страницы с помощью группировки элементов. Это дает порядок в слоях и удобство управления.

При верстке сайта для этой задачи используются базовые блоки — секции, div-блоки и контейнеры. Это пустые элементы, которые служат для наполнения контентом и его структурной организации. Каждый из блоков имеет свои особенности и способы применения. Посмотрим, как работать с ними в конструкторе сайтов Taptop.

Div-блок — это универсальный структурный элемент. Он используется:

Вы можете объединять в div-блок любую группу контентных элементов. При этом одни группы могут располагаться внутри других. Например, на скрине ниже: маленький блок — карточка товара находится внутри более крупного блока — списка карточек.

Секция — фактически это тот же div-блок, но предназначенный для более крупных частей контента. Она занимает всю ширину экрана и обычно стилистически отделяется от других блоков. Секция используется:

Секции могут включать в себя любые блоки и элементы, но одна секция внутрь другой обычно не размещается.

Контейнер помогает создать рамки для контентных блоков и обычно располагается непосредственно внутри секции. При этом секция занимает всю ширину экрана, а контейнер — центральную часть, оставляя по бокам отступы. Его основная функция:

У контейнера настроены автоматические равные отступы слева и справа, поэтому он располагается четко по центру страницы. Он помогает разместить контент удобно для восприятия пользователя.

Контейнер также отличается от других блоков тем, что у него задана максимальная ширина. По умолчанию она установлена в значение 960px, но ее можно поменять в зависимости от макета.

Пример: Установим максимальную ширину контейнера — 1400px. При этом контейнер имеет ширину 100% на экранах меньших 1400 пикселей. Т.е. на смартфонах, планшетах и небольших ноутбуках он занимает весь экран. На устройствах с разрешением больше 1400 пикселей контейнер не будет становиться шире этого значения, а по бокам у него образуются отступы. Таким образом, контент не будет растягиваться на всю ширину экрана на Full HD мониторах.

Вот как это работает:

Итак, резюмируем информацию про базовые блоки сайта. Алгоритм построения структуры страницы следующий:

По такому же принципу добавляем на страницу все секции — от шапки до подвала.

Всем секциям, контейнерам и div-блокам можно давать названия, чтобы структура стала нагляднее и понятнее. Переименовать блоки можно на вкладке Слои. Это особенно пригодится, если с проектом будут работать другие участники команды, а также для последующей поддержки сайта.

Для удобства можно поместить всё содержимое контейнера в дополнительный блок–«обертку». Тогда через него можно управлять всеми внутренними элементами, не затрагивая настройки глобального класса контейнера.

Далее расскажем о нескольких принципах, используемых в верстке. Они помогут быстрее и проще настраивать дизайн элементов, автоматизируя некоторые процессы.

Работа с элементами при создании макета в графическом редакторе и при верстке сайта несколько отличается:

Взаимосвязь «родитель – ребенок» можно эффективно использовать для управления элементами внутри блока.

Кейс 1. Меняем шрифт для элемента Root — он меняется на всем сайте

С помощью настроек элемента Root можно передать параметры всем остальным элементам, поскольку он является для них родительским.

Таким же образом можно поменять шрифт для определенной секции или div-блока — он поменяется у всех дочерних элементов.

Кейс 2. Настраиваем размеры внутренних элементов относительно размеров блока

В графических редакторах все размеры устанавливаются в пикселях. При верстке можно использовать еще и относительные единицы измерения. Сейчас остановимся на двух из них — процентах и em.

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

Для установки размера шрифта используется em — расчет делается относительно размера шрифта родителя. Это помогает управлять шрифтами всех дочерних элементов одновременно.

Если шрифты для всех элементов настроить в em, то можно поменять их размеры одним действием — изменив настройку для Root. Это также удобно использовать при адаптации сайта, чтобы подстраивать размер шрифта под разные экраны.

3. Быстро настраиваем расположение элементов внутри блока с помощью авто-лейаутов

По умолчанию при размещении нескольких элементов в блоке они располагаются друг под другом. Авто-лейауты позволяют упорядочить и выровнять элементы по заданным вами правилам для получения нужной сетки.

Для создания авто-лейаута используется div-блок, содержащий несколько элементов. Для этого в его настройках дизайна в разделе Авто-лейаут нужно выбрать отображение flex-box, как в примере ниже.

Далее в настройках можно управлять дочерними элементами:

Как уже говорилось, размеры дочерних элементов можно настроить в процентах от родительского блока. Поэтому устанавливая разные значения ширины элементов, можно настроить количество колонок, например:

Таким образом можно за пару кликов перестроить сетку и адаптировать страницу для разных экранов.