3. Главные вопросы
• Что такое «Панели»?
• Зачем они нужны?
• Когда следует их использовать?
4. Что такое «Панели»?
• Мощный инструмент для создания
персонализированного гибкого отображения
страниц и типов материалов.
• Каждая панель обладает изменяемым
набором регионов, внутри которых может
быть все что угодно!
• Когда блоков становится много «приходят»
панели.
5. Зачем нужны панели?
• Облегчить и ускорить разработку
• Персонализировать вывод разделов
• Быстрое конструирование страницы
• Больше простора творчеству!
6. Когда следует использовать?
• На сайте много разделов с разными
шаблонами
• Нужна возможность быстрой смены шаблона
отдельной страницы
• Растущие сайты и сайты-прототипы
• Стандартизация
9. Что можно добавить в регион?
Показан особый вид отображения Views: «Pane content»,
который используется только для выводе внутри панелей.
10. Views и Panels
• Не нужно создавать
блочные представления
Views
• Views создает Content pane
(модуль Views content panes)
• Content pane доступен
только внутри панели.
Избавляемся от избыточного
количества блоков.
11. Вывод ноды панелью
Можно переопределить вывод ноды панелью.
1.Включить в Manage pages
Node template
2.Добавляем Вариант (Add Variant)
3.В Selection rules выбираем Node:Type и указываем
тип контента для переопределения.
12. 1. Создание шаблона своей панели
Берем из установленного модуля Panels
/sites/all/modules/panels/plugins/layouts любой шаблон
и копируем в папку со своей темой
13. 2. Создание шаблона своей панели
Редактируем файл .inc ПОСЛЕ РЕДАКТИРОВАНИЯ ОЧИСТИ КЕШ
В .info файле темы добавляем
plugins[panels][layouts] = panels/layouts
14. 3. Создание шаблона своей панели
Редактируем файл .tpl.php, правим разметку, добавляем регионы
16. Верстка панелей
• Внутри каждого шаблона можно использовать
свой css-файл.
• Более прогрессивный способ использовать
css-фреймворк, например, 960.gs
17. Колоночная сетка (Grid System)
960
• В отдельном CSS файле содержаться значения
классов.
• Добавляя к элементу css-классы он получает
предопределенные свойства: ширину, наличие
внутреннего/внешнего и левого/правого отступа
18.
19. Классы 960.gs на примере 12-ти колонок
• .grid_3 — занимает 3 колонки, ширина 220px, отступ
слева и справа по 10px.
• .alpha — отступ слева 0px
• .omega — отступ cправа 0px
• .prefix_1 — слева внешний отступ 1 колонку
(padding)
• .suffix_10 — справа внешний отступ 10 колонок
• .push_6 — сдвиг слева на 6 колонок (left: 480px;)
• .pull_6 — отрицательный сдвиг слева на 6 колонок
(left: -480px;)
20. Генерация и внедрение
• Использовать сетку при дизайне макета!
• CSS файл можно сгенерировать на сайте
http://960.gs, настроив кол-во колонок,
отступы и общую ширину
• Обычно шаблон фиксирован, но есть и
«резиновая» с использованием %
• GridFox — плагин для Firefox, накладывает
сетку на веб-страницу
• Firebug
