Цель урока Знакомство с глобальными блоками Продолжим создавать шаблон интернет магазина: добавим код шапки, подвала и боковой колонки. Что такое глобальные блокиГлобальный блок - это своеобразная переменная, которая может содержать любой HTML-код (в том числе с CSS, JavaScript). Особенность ее в том, что мы сами решаем, какой код блок будет содержать. Чтобы было понятнее, взгляните на изображение:
Принцип действия можно сравнить с переездом на новое место жительства: мы упаковываем вещи (HTML-код с данными) в коробки (глобальные блоки) и перевозим их в новый дом (страницы сайта). Согласитесь, переезжать с коробками удобнее? Работать в шаблоне с глобальными блоками легче, вероятность запутаться или допустить ошибку меньше, а код выглядит стройнее. В целом, применение глобальных блоков никак не влияет на конечный результат. Это еще один инструмент для разработки, как, например, конструктор шаблонов. Где применять глобальные блокиЯ бы отметил две области применения глобальных блоков:
Особенность глобальных блоков в том, что они позволяют использовать Глобальные блоки по умолчанию и их редактированиеНа прошлом уроке мы создавали каркас нашего магазина: Если вы выполнили упражнения к уроку, то сможете сами убедиться в наличии глобальных блоков в вашем каркасе. Панель управления - Управление Дизайном:
Было создано три (если использовался трех-колоночный каркас, то четыре) глобальных блока:
Нажав на один из глобальных блоков в панели управления, мы увидим форму их редактирования: Обратите внимание, под формой находится перечень всех доступных в глобальных блоках переменных:
Но помните - в этом перечне отсутствуют переменные из шаблонов, в которых будет располагаться глобальный блок. Создание новых глобальных блоковКак вы наверно догадались, дело не ограничивается глобальными блоками по умолчанию, мы можем создавать свои глобальные блоки (до 10шт.). Для этого перейдите в Панель управления - Управление дизайном - Глобальные блоки:
Откроется список с глобальными блоками:
Нажмите кнопку "Добавить блок" и откроется форма добавления:
Дайте название новому блоку и он будет готов:
Его можно удалить, если вы передумаете (красный "крестик"). Блоки, которые были сгенерированы с помощью конструктора шаблонов удалить нельзя (серый "крестик"). Применение глобальных блоковПриступим к практике. На прошлом занятии я остановился на том, что мой макет выглядел так: Шапка
Колонка
Контент
Подвал
Теперь я хочу в шапку и подвал добавить немного информации: название магазин, телефон и время работы. Воспользуюсь Bootstrap и разделю шапку на три равных колонки. Для этого я перейду в шаблон глобального блока "Верхняя часть сайта" и изменю его содержимое на следующее: <div class="row"> <div class="col-md-4">МойМагазин.Ру</div> <div class="col-md-4">+7 123 456 78 90 </div> <div class="col-md-4">каждый день с 10:00 до 20:00 без обеда </div> </div> Сохраняю и проверяю результат: МойМагазин.Ру
+7 123 456 78 90
каждый день с 10:00 до 20:00 без обеда
Колонка
Контент
Подвал
Готово. То же самое можно проделать для подвала. Однако, прошу не затрагивать пока боковые колонки, их мы рассмотрим в следующий раз. Упражнения
| |
| |
Просмотров: 697 | |
Всего комментариев: 0 | |