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

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

description

 

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

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

Практическое использование модуля Panels

[email protected]

Виктор Богуцкий

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

Спонсоры

Генеральный спонсор

Серебряный спонсор Серебряный спонсор

Бронзовый спонсор Бронзовый спонсор

Организатор

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

Главные вопросы

• Что такое «Панели»?

• Зачем они нужны?

• Когда следует их использовать?

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

Что такое «Панели»?

• Мощный инструмент для создания персонализированного гибкого отображения страниц и типов материалов.

• Каждая панель обладает изменяемым набором регионов, внутри которых может быть все что угодно!

• Когда блоков становится много «приходят» панели.

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

Зачем нужны панели?

• Облегчить и ускорить разработку

• Персонализировать вывод разделов

• Быстрое конструирование страницы

• Больше простора творчеству!

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

Когда следует использовать?

• На сайте много разделов с разными шаблонами

• Нужна возможность быстрой смены шаблона отдельной страницы

• Растущие сайты и сайты-прототипы

• Стандартизация

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

Так видят пользователи

ru-casting.com

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

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

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

Что можно добавить в регион?

Показан особый вид отображения Views: «Pane content», который используется только для выводе внутри панелей.

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

Views и Panels

• Не нужно создавать блочные представления Views

• Views создает Content pane(модуль Views content panes)

• Content pane доступен только внутри панели.Избавляемся от избыточного количества блоков.

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

Вывод ноды панелью

Можно переопределить вывод ноды панелью.

1.Включить в Manage pagesNode template

2.Добавляем Вариант (Add Variant)

3.В Selection rules выбираем Node:Type и указываем тип контента для переопределения.

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

1. Создание шаблона своей панели

Берем из установленного модуля Panels /sites/all/modules/panels/plugins/layouts любой шаблони копируем в папку со своей темой

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

2. Создание шаблона своей панели

Редактируем файл .inc ПОСЛЕ РЕДАКТИРОВАНИЯ ОЧИСТИ КЕШ

В .info файле темы добавляемplugins[panels][layouts] = panels/layouts

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

3. Создание шаблона своей панели

Редактируем файл .tpl.php, правим разметку, добавляем регионы

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

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

http://drupal.org/project/panels_extra_layouts

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

Верстка панелей

• Внутри каждого шаблона можно использовать свой css-файл.

• Более прогрессивный способ использовать css-фреймворк, например, 960.gs

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

Колоночная сетка (Grid System) 960

• В отдельном CSS файле содержаться значения классов.

• Добавляя к элементу css-классы он получает предопределенные свойства: ширину, наличие внутреннего/внешнего и левого/правого отступа

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

Классы 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;)

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

Генерация и внедрение

• Использовать сетку при дизайне макета!

• CSS файл можно сгенерировать на сайте http://960.gs, настроив кол-во колонок, отступы и общую ширину

• Обычно шаблон фиксирован, но есть и «резиновая» с использованием %

• GridFox — плагин для Firefox, накладывает сетку на веб-страницу

• Firebug

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

Спасибо за внимание

[email protected]

Виктор Богуцкий

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

Спонсоры

Генеральный спонсор

Серебряный спонсор Серебряный спонсор

Бронзовый спонсор Бронзовый спонсор

Организатор