Обзоры расширений Joomla

 

 

В предыдущей статье «Обзор Artisteer 3.1 (часть 1). Создание Drupal 7 тем» были рассмотрены исправления и дополнения, внесённые в Artisteer 3.1.0.48375 после выхода Artisteer 3.0.0.41778. В этой части обзора будут рассмотрены такие возможности по созданию шаблона: вертикальное меню, цвет с изображения и резиновый дизайн.

Многоуважаемые пользователи, с целью экономии трафика и увеличения скорости загрузки страницы, все изображения в статье были сжаты. Там, где необходимо просмотреть результат работы Artisteer 3 (сам созданный шаблон или его часть), есть возможность просмотра изображения не в сжатом виде. Для этого достаточно просто нажать на изображение в статье. Несжатое изображение откроется в новом окне или вкладке.

Вертикальное меню

Вертикальное меню (рисунок ниже) в Artisteer 3.1 – это по сути модуль аккордеон меню. Как настроить его вывод, будет рассмотрено в следующих статьях. Хочу отметить, что шаблоны Joomla Artisteer иногда требуют до настройки после установки на самом сайте.

Вертикальное меню Artisteer 3.1

Панель инструментов вертикального меню разбита на 6 областей.

  1. Идеи.
  2. Макет.
  3. Стили.
  4. Полоса меню.
  5. Элемент меню.
  6. Элемент подменю.

Инструмент Идеи позволяет генерировать варианты оформления вертикального меню.

Инструмент Расположение (рисунок ниже) позволяет задать одну из четырёх позиций для отображения вертикального меню. Или вовсе его отключить. Но это не значит, что вертикальное меню может располагаться на сайте только в этих позициях. Вы сможете задать любую из 29 позиций для отображения этого модуля.

Инструмент Расположение

Инструмент Быстрые стили (рисунок ниже) позволяет задать один из 12 настроенных стилей для вертикального меню.

Инструмент Быстрые стили

Примеры стилей показаны на рисунке ниже. Цветовая гамма и шрифты зависят от общих настроек, заданных на панели инструментов Цвет и шрифты (детальнее в статье «Обзор Artisteer (часть 2). Создание Joomla шаблонов»).

Примеры стилей

Также Вы сможете изменить любой элемент меню по Вашему усмотрению.

Блок меню (рисунок ниже) позволяет Вам настроить общее отображение блока вертикального меню и его верхнего колонтитула. Всего 20 видов, разделённых на три группы (Простой, Без верхнего колонтитула, С верхним колонтитулом)

Блок меню

Ниже показаны примеры того, как может выглядеть блок вертикального меню.

Пример блока вертикального меню

Полоса меню (рисунок ниже) содержит опции округления, настройки полей и расстояния для полосы меню.

Полоса меню

При настройке фона вертикального меню (рисунок ниже) Вы сможете настроить внутренние отступы, заливку, обводку, прозрачность, а также применить эффекты текстуры, градиента и тени.

Фон вертикального меню

Для настройки верхнего колонтитула вертикального меню (рисунок ниже) Вы сможете воспользоваться такими инструментами как Текст, Иконка, Заливка, Обводка, Прозрачность, Текстура и Градиент.

Настройки верхнего колонтитула вертикального меню

Для настройки содержимого блока (рисунок ниже) в Artisteer 3.1 предусмотрены инструменты Отступ, Заливка, Обводка, Прозрачность, Текстура и Градиент. Более детально эти инструменты были рассмотрены в статьях «Обзор Artisteer (часть 2 и 3)».

Настройки содержимого блока

Элементы меню (рисунок ниже) позволяет сменить форму, расстояние, высоту и скругление для элементов вертикального меню. Также можно задать текстуру, градиент, тень, иконку и разделители для этих элементов.

Элементы меню

При помощи инструмента Окрашивание (рисунок ниже) можно задавать способы смены цвета для активного, наведённого и пассивного состояния элементов меню.

Окрашивание

Также в Artisteer 3.1 Вы сможете задать цвет для трёх состояний элементов вертикального меню по своему усмотрению (рисунок выше). Для этих же состояний (активного, наведённого и пассивного) можно задать толщину и цвет обводки, а также цвет, размер, стили и гарнитуру шрифта. Более детально про настройки шрифта Вы можете прочитать в статье «Обзор Artisteer (часть 2). Создание Joomla шаблонов».

Вертикальное меню может быть многоуровневым или одноуровневым. В случае с многоуровневым меню Вы сможете выбрать один из 5 способов отображения подменю.

  1. Раскрывать по нажатию (свернуть открытый пункт меню нельзя).
  2. Раскрывать по нажатию (можно свернуть открытый пункт меню).
  3. Раскрывать при наведении.
  4. Всплывающее меню при наведении.
  5. Всегда открыто.

Ниже приведён пример вариантов 2, 4 и 5.

Примеры вертикального меню

Для элементов подменю доступны настройки вертикального отступа, высоты, расстояния, градиента, иконки и разделителя (рисунок ниже).

Настройки вертикального меню

Также Вы сможете задать цвет, для трёх состояний элементов подменю вертикального меню, по своему усмотрению (рисунок выше). Для этих же состояний (активного, наведённого и пассивного) можно задать толщину и цвет обводки, а также цвет, размер, стили и гарнитуру шрифта.

Обратите внимание на то, что Joomla шаблоны требуют настройки непосредственно на сайте для отображения вертикального меню.

Цвет с изображения

Если раньше, в Artisteer 3, Вы могли выбрать существующую схему цветов или задать свою (детальнее «Обзор Artisteer (часть 2). Создание Joomla шаблонов»), то сейчас, в Artisteer 3.1, у Вас есть возможность задать цвет шаблона на основании автоматического анализа цветовой палитры заданного изображения (рисунок ниже). Как это сделать будет рассмотрено в следующих статьях. Это может пригодиться для упрощения цветовой коррекции сайта на примере существующего аналога или на основании тематической картинки (зимний, летний, осенний, весенний пейзажи, логотип компании и так далее).

Цвет с изображения

В настройках экспорта проекта (рисунок ниже) Вы сможете задать направление текста на сайте и загрузить иконку сайта.

Настройки экспорта проекта

При экспорте шаблона (на примере экспорта в Joomla) (рисунок ниже) Вы можете выбрать один из вариантов имён для позиций, версию Joomla для экспорта (1.5 или 1.7-2.5 (1.6 также поддерживается)), включить опцию сохранения проекта Artisteer в файл шаблона или вовсе выбрать другую систему управления содержимым для экспорта.

Экспорт шаблона

Для тех, кто использует Joomla 1.6-2.5, рекомендую имена позиций position-1, position-2… Но если у Вас в настройках модулей указаны старые имена позиций, то не забудьте их сменить на новые. Воспользуйтесь справкой с официального сайта Artisteer для того, чтобы узнать их расположение и соответствие друг другу.

Учтите, что при сохранении проекта Artisteer в файле шаблона, он может «существенно» увеличиться в размерах. Например, размер файла шаблона без проекта 828 Кб, с – 1500 Кб. Но это удобно, так как у Вас всегда будет резервная копия проекта шаблона на сервере.

В макетах добавлен новый тип «Макет в заголовке» (рисунок ниже). Детальнее о макетах можно прочесть в статье «Обзор Artisteer (часть 2). Создание Joomla шаблонов».

Макет в заголовке

Резиновый дизайн

Artisteer позволяет делать резиновые шаблоны Joomla (резиновый дизайн) и других поддерживаемых CMS. В настройках макета в инструменте Ширина листа (рисунок ниже) можно задавать процент от общей ширины окна браузера.

Ширина листа

При более детальной настройке (рисунок ниже) Вы сможете задать не только процент, но и минимальную (300-800 пикселей) и максимальную (800-1920 пикселей) ширину сайта.

Настройки ширины листа

Независимо от того, какой Вы сделали выбор (фиксированная или «резиновая» ширина), можно задать фиксированную или «резиновую» ширину столбцов (рисунок ниже).

Ширина столбца

Причём, можно задавать её отдельно для разных столбцов (рисунок ниже).

Настройки ширины столбцов

Примеры реализации некоторых новых функциональных возможностей Artisteer 3.1 можно посмотреть на примере данного шаблона. Хочу отметить, что резиновые шаблоны Joomla и шаблоны для Blogger, созданные с использованием "резинового дизайна" смотрятся весьма хорошо.

The Templateer для Artisteer

Для расширения функциональных возможностей Artisteer существует специальное программное обеспечение The Templateer. Это платное расширение 240 грн. (на 08.03.2012), которое добавляет возможности по созданию шаблонов в Artisteer и только для WordPress. Но разработчики The Templateer пишут, что собираются включить поддержку Joomla и других систем управления содержимым, для которых можно создавать шаблоны в Artisteer. После покупки установки расширения у Вас появятся следующие возможности при создании шаблонов для WordPress в Artisteer.

  • Журнальное (или газетное) расположение статей на сайте. Пример.
  • Добавление дополнительной позиции в верхнем колонтитуле шаблона.
  • Кликабельный логотип сайта в верхнем колонтитуле.
  • Различное расположение бокового меню. Пример.
  • Создание динамической карты сайта. Пример.

Также как и в случае с Artisteer, The Templateer позволяет сделать всё вышеперечисленное без знания языка программирования, путём графических инструментов.

К сожалению, создавая шаблоны Joomla Artisteer и шаблоны для Blogger, на данный момент нет возможности применять The Templateer.

В следующей статье будут рассмотрены достоинства и недостатки создания шаблона средствами Artisteer по отношению к профессиональным шаблонам, разработкой которых занимается специализированная команда людей (минимум дизайнер и программист).

В последних версиях решена проблема совместимости Artisteer Joomla 1.7. Это даёт возможность использовать все новые функции CMS.

 

Полезные ссылки: