Основы создания сайтов
Все, что вы размещаете на странице сайта, превращается в код на HTML и CSS, который браузер интерпретирует для отрисовки страниц. Для работы в Редакторе дизайна (Design Editor) вам не нужно уметь писать этот код, но полезно понимать его основные принципы.
Код HTML отвечает непосредственно за содержимое вашего сайта – что именно будет на странице: заголовки, тексты, ссылки, картинки. Он последовательно описывает, какие элементы есть на сайте и в каком порядке они следуют друг за другом.
Многие элементы, которые вы видите в Редакторе дизайна, описываются в коде с помощью тегов HTML: section (секция), div (блок), button (кнопка), img (картинка), form (форма). Другие, более сложные элементы, например, виджеты, представляют объединенные в группы базовые элементы. Полезно также знать такие теги, как h1, h2 … h6, которые описывают иерархию заголовков.
За стилистику сайта отвечает CSS, определяя, как именно содержимое будет выглядеть на странице: размер и цвет текста, размер картинок, позиционирование элементов, эффекты и т.п. Сюда относятся, такие параметры, как display (отображение), position (позиция), margin (внешний отступ), padding (внутренний отступ), border (граница), background (фон). Стили, которые вы применяете к элементам, будут записаны в CSS коде.
Любой сайт строится из блоков, которые размещаются друг под другом, как кирпичики. Например, это могут быть секция шапки сайта, главная часть страницы и футер.
Родительский элемент — блок, в котором находится один или несколько других блоков — дочерних элементов.
Таким образом, все элементы на странице располагаются в иерархии. Иерархию элементов наглядно видно в Панели Навигатора на вкладке Слои (Layers). Чем выше элемент находится в списке слоев, тем выше он располагается на странице сайта.
Самый главный блок в иерархии на странице — Root, он автоматически размещается на странице при ее создании и в нем располагаются все остальные блоки.
Большие блоки используются для группировки нескольких элементов, что позволяет проще управлять ими, центрировать, размещать относительно друг друга и других элементов. Например, элемент Контейнер часто используется для центрирования на странице контента, размещенного в нем.
Особенности взаимодействия между родительскими и дочерними элементами
- При перемещении родительского элемента на холсте его дочерние элементы перемещаются вместе с ним; Они являются единой группой.
- Стили родительского элемента передаются дочернему элементу; Например, шрифт, установленный у родительского элемента, автоматически будет и у элементов внутри него. По желанию стили дочерних элементов можно изменить в настройках стилей.
- Родительский элемент может управлять расположением дочерних элементов внутри него; Это делается при помощи настроек стилей родительского элемента.
- Высота родительского элемента зависит от дочерних элементов. При желании это можно изменить в настройках стилей, установив элементу фиксированную высоту.