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