Основы создания сайтов

Основы HTML и CSS

Все, что вы размещаете на странице сайта, превращается в код на HTML и CSS, который браузер интерпретирует для отрисовки страниц. Для работы в Редакторе дизайна (Design Editor) вам не нужно уметь писать этот код, но полезно понимать его основные принципы.

HTML

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

Многие элементы, которые вы видите в Редакторе дизайна, описываются в коде с помощью тегов HTML: section (секция), div (блок), button (кнопка), img (картинка), form (форма). Другие, более сложные элементы, например, виджеты, представляют объединенные в группы базовые элементы. Полезно также знать такие теги, как h1, h2 … h6, которые описывают иерархию заголовков.

Фрагмент страницы сайта

HTML код

CSS

За стилистику сайта отвечает CSS, определяя, как именно содержимое будет выглядеть на странице: размер и цвет текста, размер картинок, позиционирование элементов, эффекты и т.п. Сюда относятся, такие параметры, как display (отображение), position (позиция), margin (внешний отступ), padding (внутренний отступ), border (граница), background (фон). Стили, которые вы применяете к элементам, будут записаны в CSS коде.

CSS код

Блочная модель сайта и иерархия элементов

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

Родительский элемент — блок, в котором находится один или несколько других блоков — дочерних элементов.

Таким образом, все элементы на странице располагаются в иерархии. Иерархию элементов наглядно видно в Панели Навигатора на вкладке Слои (Layers). Чем выше элемент находится в списке слоев, тем выше он располагается на странице сайта.

Вкладка Слои (Layers)

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

Большие блоки используются для группировки нескольких элементов, что позволяет проще управлять ими, центрировать, размещать относительно друг друга и других элементов. Например, элемент Контейнер часто используется для центрирования на странице контента, размещенного в нем.

Особенности взаимодействия между родительскими и дочерними элементами

  1. При перемещении родительского элемента на холсте его дочерние элементы перемещаются вместе с ним; Они являются единой группой.

  2. Стили родительского элемента передаются дочернему элементу; Например, шрифт, установленный у родительского элемента, автоматически будет и у элементов внутри него. По желанию стили дочерних элементов можно изменить в настройках стилей.

  3. Родительский элемент может управлять расположением дочерних элементов внутри него; Это делается при помощи настроек стилей родительского элемента.

  4. Высота родительского элемента зависит от дочерних элементов. При желании это можно изменить в настройках стилей, установив элементу фиксированную высоту.