Практическое использование модуля Panels Info@siteograf.com Виктор Богуцкий. - презентация

1 Практическое использование модуля Panels Виктор Богуцкий

2 Спонсоры Генеральный спонсор Серебряный спонсор Бронзовый спонсор Организатор

3 Главные вопросы Что такое «Панели»? Зачем они нужны? Когда следует их использовать?

4 Что такое «Панели»? Мощный инструмент для создания персонализированного гибкого отображения страниц и типов материалов. Каждая панель обладает изменяемым набором регионов, внутри которых может быть все что угодно! Когда блоков становится много «приходят» панели.

5 Зачем нужны панели? Облегчить и ускорить разработку Персонализировать вывод разделов Быстрое конструирование страницы Больше простора творчеству!

6 Когда следует использовать? На сайте много разделов с разными шаблонами Нужна возможность быстрой смены шаблона отдельной страницы Растущие сайты и сайты-прототипы Стандартизация

7 Так видят пользователи ru-casting.com

8 Управление панелью

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, правим разметку, добавляем регионы

15 Набор шаблонов

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 файл можно сгенерировать на сайте настроив кол-во колонок, отступы и общую ширину Обычно шаблон фиксирован, но есть и «резиновая» с использованием % GridFox плагин для Firefox, накладывает сетку на веб-страницу Firebug

21 Спасибо за внимание Виктор Богуцкий

22 Спонсоры Генеральный спонсор Серебряный спонсор Бронзовый спонсор Организатор