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

 

 

В финальной части обзора Artisteer 3 я закончу рассмотрение инструментов программы для создания Joomla шаблонов и тем для Wordpress. Напомню, что это не полный список поддерживаемых CMS. Программа так же позволяет создавать Drupal шаблоны или правильней сказать Drupal темы.

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

Меню

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

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

Конечно же, как и на других панелях, на этой есть кнопка автоматической генерации элемента.

Панель инструментов Меню

Меню может располагаться внутри листа и вне листа (рисунок ниже). Ему можно назначить длину по ширине листа или по ширине страницы. Так же есть возможность задать поле, то есть расстояние от верхнего колонтитула до меню.

Варианты расположения меню

Доступно двадцать два стиля меню (рисунок ниже).

Стили меню

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

Формы кнопки

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

Разделители

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

Варианты перекрашивания элементов

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

Текстуры полосы меню

Настройки текстуры показаны на рисунке ниже.

Настройки текстуры

Есть возможность задать один из пятидесяти семи градиентов (рисунок ниже). Вы сможете сменить контрастность и прозрачность градиента.

Градиенты

Для самих элементов меню (кнопок) существует множество настроек (рисунок ниже).

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

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

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

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

Статьи

Одна из самых больших панелей инструментов, если не самая большая, это панель Статьи (рисунок ниже). Она разделена на шесть областей.

  1. Просмотр изображения.
  2. Форма.
  3. Форматирование текста.
  4. Другие элементы.
  5. Верхний колонтитул.
  6. Нижний колонтитул.

Ещё есть кнопка автоматической генерации элемента.

Панель Статьи

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

Изображения статьи

Статьи могут иметь свой цвет фона, а могут быть без фона. В этом случае они будут «лежать» прямо на листе. При этом верхний и нижний колонтитулы могут быть на другом фоне. Есть возможность задать поля от блока со статьёй до других элементов, отступ текста от края границы статьи, сменить заливку, цвет обводки, сделать фон прозрачным (от 0 до 100 процентов), скруглить углы блока статьи и применить эффект тени (можно сменить размер, прозрачность и расстояние тени, а также задать угол).

Для форматирования текста Artisteer 3 содержит достаточно много инструментов. На рисунке ниже представлены настройки для шрифта. Эти же настройки доступны и для редактирования стилей заголовков с первого по шестой уровни, посещённых, не посещённых ссылок и ссылок, находящихся в фокусе курсора мыши, маркированных списков, цитат текстов ссылок верхнего и нижнего колонтитулов и метаданных нижнего и верхнего колонтитулов.

Настройки шрифтов

Кроме этого Вам доступны настройки и для абзаца (рисунок ниже).

Настройки абзаца

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

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

Иконки маркерованного списка

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

Для таблицы можно задавать толщину, стиль и цвет обводки.

Для верхнего колонтитула статьи есть четыре макета (рисунок ниже).

Макеты статей

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

Нижний колонтитул имеет два макета. С и без блока метаданных. Для него доступны настройки заливки, обводки, смены стилей шрифта и ссылок. При желании, можно сменить иконку категорий материалов.

На рисунке ниже представлен пример оформления различных объектов статьи.

Пример оформления статей

В статье «Обзор Artisteer 4 (часть 1). Программа для создания шаблонов Joomla» детально рассмотрены инструменты редактирования статей непосредственно средствами Artisteer.

Боковая панель

Панель инструментов Боковая панель (рисунок ниже) разделена на пять групп инструментов.

  1. Идеи. Содержит две кнопки. Кнопка автоматической генерации боковой панели и кнопка автоматической генерации блока.
  2. Боковая панель.
  3. Предложить блоки. Содержит одну кнопку автоматической генерации блока. Она, непонятно зачем, дублирует кнопку из группы Идеи.
  4. Стили блоков.
  5. Содержание блока.

Панель инструментов Боковая панель

Под боковой панелью понимается левая и\или правая колонка с модулями. Под блоками – стили оформления модулей.

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

Форма блока (рисунок ниже) может быть простая (2 вида), с верхним колонтитулом (21 вид) и без верхнего колонтитула (3 вида).

Варианты формы блоков

Можно задавать скругление блокам и расстояние между ними (Разбивка блоков).

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

Создавая Wordpress шаблоны Вы увидите некоторые отличия в инструментальных средствах Artisteer 3.0, особенно собирая Joomla шаблоны. Wordpress шаблоны также имеют свои особенности при их создании.

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

Панель инструментов Вертикальное меню (рисунок ниже) разделено на пять областей. Способ настройки вертикального меню сайта Joomla рассмотрен в статье «Уроки Artisteer 3.1 (часть 2). Позиции в шаблоне Joomla».

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

Как и на всех других панелях, на этой так же есть кнопка автоматической генерации элемента.

Панель инструментов Вертикальное меню

Пример вертикального меню показан на рисунке ниже. При желании Вы можете просмотреть функциональные возможности вертикального меню перейдя по этой ссылке.

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

Можно выбрать одну из пяти доступных позиций (рисунок ниже).

Позиции меню

В Artisteer 3.0.0.41778 Standard Edition предустановлено двенадцать стилей вертикального меню (рисунок ниже).

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

Блок меню может быть простой, с и без верхнего колонтитула (рисунок ниже)

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

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

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

Стиль отображения пунктов меню

Можно воспользоваться как встроенными стилями (рисунок выше), так и задать свои собственные настройки для заливки обводки и текста.

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

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

Кнопки

Панель инструментов Кнопки (рисунок ниже) помимо кнопки автоматической генерации элемента содержит настройки для изменения стиля отображения кнопок на сайте.

Панель инструментов Кнопки

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

Стили кнопок

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

Формы кнопки

На рисунке ниже я приведу примеры для общей настройки внешнего вида кнопки, прозрачности, текстуры и тени (именно в таком порядке).

Настройки стиля кнопки

Нижний колонтитул

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

  1. Макет.
  2. Стиль нижнего колонтитула.

Панель инструментов Нижний колонтитул

На этой панели также есть кнопка автоматической генерации элемента.

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

При настройке стиля нижнего колонтитула Вы сможете поменять цвет заливки, задать прозрачность, текстуру, градиент, выравнивание и отступ текста (если он будет). Настройки текстуры и градиента схожи с подобными настройками на других панелях. Текст нижнего колонтитула имеет те же настройки шрифта и абзаца, что и в аналогичных инструментах на других панелях. Вы сможете задать стиль для трёх состояний гиперссылок нижнего колонтитула – пассивного, активного и состояния в фокусе курсора мыши. При вставке текста Вам будет доступно окно HTML редактора (рисунок ниже).

Окно HTML редактора

Artisteer 3.0.0.41778 Standard Edition позволяет вставлять в нижний колонтитул изображения. Для их настройки доступен инструмент обводки (толщина, стиль и цвет) и возможность задания поля вокруг рисунка (отступа).

Хочу ещё раз отметить, что Drupal шаблоны, Wordpress темы и все остальные поддерживаемые CMS, обладают своими уникальными инструментальными средствами в зависимости от особенностей системы и её версии. Так, например, Wordpress шаблоны обладают возможностью выбора разметки содержимого статьи. В следующих статьях «Обзор Artisteer 3.1 (часть 1). Создание Drupal 7 тем» и «Обзор Artisteer 4 (часть 1). Программа для создания шаблонов Joomla» рассмотрены новые версии данной программы.

К недостаткам Artisteer хочу отнести отсутствие русскоязычной справочной системы и всплывающих подсказок, документаци, возможности перевода на русский язык контента шаблона для демонстрации клиентам или руководителям (из собственного опыта) и отсутствия настроек авто сохранения проекта (с временными интервалами, возможностью копирования резервной копии шаблона на другой диск или папку и возможностью автоматически помнить некое количество вариантов одного и того же шаблона). Хотелось бы получить возможность загружать с сайта (или предустановки в дистрибутиве) фоновые изображения, иконки, текстуры для создания «тематических» сайтов. Например, для интернет-магазина рыболовецких снастей выбрать тему «Рыбалка» и программа отображает все цветовые схемы, рисунки, текстуры и иконки связанные с рыбалкой.

 

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