Практическоеиспользование модуляPanels              Виктор Богуцкий              Info@siteograf.com
Спонсоры     Организатор      Генеральный спонсор Серебряный спонсор   Серебряный спонсор Бронзовый спонсор     Бронзовый ...
Главные вопросы• Что такое «Панели»?• Зачем они нужны?• Когда следует их использовать?
Что такое «Панели»?• Мощный инструмент для создания персонализированного гибкого отображения страниц и типов материалов.• ...
Зачем нужны панели?•   Облегчить и ускорить разработку•   Персонализировать вывод разделов•   Быстрое конструирование стра...
Когда следует использовать?• На сайте много разделов с разными    шаблонами•   Нужна возможность быстрой смены шаблона    ...
Так видят пользователи           ru-casting.com
Управление панелью
Что можно добавить в регион?    Показан особый вид отображения Views: «Pane content»,    который используется только для в...
Views и Panels                 • Не нужно создавать                   блочные представления                   Views       ...
Вывод ноды панельюМожно переопределить вывод ноды панелью.•Включить в Manage pagesNode template•Добавляем Вариант (Add Var...
1. Создание шаблона своей панелиБерем из установленного модуля Panels/sites/all/modules/panels/plugins/layouts любой шабло...
2. Создание шаблона своей панелиРедактируем файл .inc      ПОСЛЕ РЕДАКТИРОВАНИЯ ОЧИСТИ КЕШ                  В .info файле ...
3. Создание шаблона своей панелиРедактируем файл .tpl.php, правим разметку, добавляем регионы
Набор шаблоновhttp://drupal.org/project/panels_extra_layouts
Верстка панелей• Внутри каждого шаблона можно    использовать свой css-файл.•   Более прогрессивный способ использовать   ...
Колоночная сетка (Grid System)960        • В отдельном CSS файле содержаться значения          классов.        • Добавляя ...
Классы 960.gs на примере 12-ти колонок• .grid_3 — занимает 3 колонки, ширина 220px, отступ    слева и справа по 10px.•   ....
Генерация и внедрение• Использовать сетку при дизайне макета!• CSS файл можно сгенерировать на сайте    http://960.gs, нас...
Спасибо за внимание          Виктор Богуцкий          Info@siteograf.com
Спонсоры     Организатор      Генеральный спонсор Серебряный спонсор   Серебряный спонсор Бронзовый спонсор     Бронзовый ...
практическое использование модуля Panels богуцкий виктор
Upcoming SlideShare
Loading in …5
×

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

1,698 views
1,604 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,698
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Практическоеиспользование модуляPanels Виктор Богуцкий Info@siteograf.com
  2. 2. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор
  3. 3. Главные вопросы• Что такое «Панели»?• Зачем они нужны?• Когда следует их использовать?
  4. 4. Что такое «Панели»?• Мощный инструмент для создания персонализированного гибкого отображения страниц и типов материалов.• Каждая панель обладает изменяемым набором регионов, внутри которых может быть все что угодно!• Когда блоков становится много «приходят» панели.
  5. 5. Зачем нужны панели?• Облегчить и ускорить разработку• Персонализировать вывод разделов• Быстрое конструирование страницы• Больше простора творчеству!
  6. 6. Когда следует использовать?• На сайте много разделов с разными шаблонами• Нужна возможность быстрой смены шаблона отдельной страницы• Растущие сайты и сайты-прототипы• Стандартизация
  7. 7. Так видят пользователи ru-casting.com
  8. 8. Управление панелью
  9. 9. Что можно добавить в регион? Показан особый вид отображения Views: «Pane content», который используется только для выводе внутри панелей.
  10. 10. Views и Panels • Не нужно создавать блочные представления Views • Views создает Content pane (модуль Views content panes) • Content pane доступен только внутри панели. Избавляемся от избыточного количества блоков.
  11. 11. Вывод ноды панельюМожно переопределить вывод ноды панелью.•Включить в Manage pagesNode template•Добавляем Вариант (Add Variant)•В Selection rules выбираем Node:Type и указываемтип контента для переопределения.
  12. 12. 1. Создание шаблона своей панелиБерем из установленного модуля Panels/sites/all/modules/panels/plugins/layouts любой шаблони копируем в папку со своей темой
  13. 13. 2. Создание шаблона своей панелиРедактируем файл .inc ПОСЛЕ РЕДАКТИРОВАНИЯ ОЧИСТИ КЕШ В .info файле темы добавляем plugins[panels][layouts] = panels/layouts
  14. 14. 3. Создание шаблона своей панелиРедактируем файл .tpl.php, правим разметку, добавляем регионы
  15. 15. Набор шаблоновhttp://drupal.org/project/panels_extra_layouts
  16. 16. Верстка панелей• Внутри каждого шаблона можно использовать свой css-файл.• Более прогрессивный способ использовать css-фреймворк, например, 960.gs
  17. 17. Колоночная сетка (Grid System)960 • В отдельном CSS файле содержаться значения классов. • Добавляя к элементу css-классы он получает предопределенные свойства: ширину, наличие внутреннего/внешнего и левого/правого отступа
  18. 18. Классы 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;)
  19. 19. Генерация и внедрение• Использовать сетку при дизайне макета!• CSS файл можно сгенерировать на сайте http://960.gs, настроив кол-во колонок, отступы и общую ширину• Обычно шаблон фиксирован, но есть и «резиновая» с использованием %• GridFox — плагин для Firefox, накладывает сетку на веб-страницу• Firebug
  20. 20. Спасибо за внимание Виктор Богуцкий Info@siteograf.com
  21. 21. Спонсоры Организатор Генеральный спонсор Серебряный спонсор Серебряный спонсор Бронзовый спонсор Бронзовый спонсор

×