71  /  380
Справочник

Простейший пример внедрения дизайна с блочной вёрсткой (div)

Просмотров: 18928
Дата последнего изменения: 11.01.2023
Анна Кокина
Сложность урока:
3 уровень - средняя сложность. Необходимо внимание и немного подумать.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



10
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии