В данной главе представлен пример внедрения в Bitrix Framework шаблона дизайна с блочной вёрсткой. Блочная верстка — это подход, при котором сайт строят на основе блоков,
в качестве которых выступают теги div.

Особенности тегов div:

- это блочный элемент, и если у него не задана ширина, то
растягивается на всю ширину окна браузера;

- высота блока равна содержимому, если она не задана. Высота пустого
блока 0 px, поэтому не отображается на странице;

- не имеет оформления. Нужно задать ему стили в CSS, чтобы увидеть его;

- не несет смысловой нагрузки, это просто способ структурировать сайт;

- может содержать любое количество вложенных элементов (можно
вкладывать другие блоки div, заголовки, параграфы,
изображения и многие другие элементы).

С примером внедрения шаблона с табличной вёрсткой можно ознакомиться в соответствующей главе. Описанный пример использовался в опубликованных несколькими годами ранее книгах о создании сайта на "1С-Битрикс: Управление сайтом". Принципы работы за это время не изменились. Однако поменялись шаблоны в демодистрибутиве и, следовательно, описание их кастомизации.

Подробнее...

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

Скачать тестовые материалы.

Повторение примера рекомендуется на локальной установке Ознакомление с продуктом на локальном компьютере:

Для ознакомления с продуктом на локальном компьютере используйте установку "1С-Битрикс: Управление сайтом" или "Битрикс24 в коробке" на Виртуальную машину.

Подробнее... с демоверсией сайта для разработчиков (например, на виртуальной машине Запуск виртуальной машины BitrixVM:

Загрузите подходящий вам дистрибутив настроенной виртуальной машины BitrixVM.

Загруженный архив распакуйте в любую папку, например, С:\BitrixVM\, и запустите виртуальную машину с помощью подходящего ПО.

Подробнее... ).

Подразумевается, что пользователь знаком с PHP, HTML и CSS, поэтому детальное описание причин удаления или добавления того или иного кода опускается. Считаем, что Вы сами способны понять эти моменты. Перед началом работы настойчиво рекомендуем ознакомиться с понятием шаблона дизайна сайта Шаблон дизайна - это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный html-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.

Подробнее... в рамках Bitrix Framework.

Для повторения примера можно создать специальный сайт, Как создать новый сайт:

Перейдите в Административный раздел на страницу Настройки > Настройки продукта > Сайты. В Рабочей области откроется Список сайтов.

Выполните команду Добавить сайт на Контекстной панели. В Рабочей области откроется форма Добавление сайта.

Подробнее... который будет использоваться в качестве базового для шаблона, либо применять шаблон к одному из сайтов в Вашей тестовой системе.

В примере не рассматриваются вопросы, связанные с кастомизацией ввода и обработки данных за счёт изменения логики работы системы и компонентов.