- Тип – редактор шаблонов Joomla, Wordpress, Blogger, Drupal, DotNetNuke.
В предыдущей статье «Обзор Artisteer 3.1 (часть 1). Создание Drupal 7 тем» были рассмотрены исправления и дополнения, внесённые в Artisteer 3.1.0.48375 после выхода Artisteer 3.0.0.41778. В этой части обзора будут рассмотрены такие возможности по созданию шаблона: вертикальное меню, цвет с изображения и резиновый дизайн.
Многоуважаемые пользователи, с целью экономии трафика и увеличения скорости загрузки страницы, все изображения в статье были сжаты. Там, где необходимо просмотреть результат работы Artisteer 3 (сам созданный шаблон или его часть), есть возможность просмотра изображения не в сжатом виде. Для этого достаточно просто нажать на изображение в статье. Несжатое изображение откроется в новом окне или вкладке.
Вертикальное меню
Вертикальное меню (рисунок ниже) в Artisteer 3.1 – это по сути модуль аккордеон меню. Как настроить его вывод, будет рассмотрено в следующих статьях. Хочу отметить, что шаблоны Joomla Artisteer иногда требуют до настройки после установки на самом сайте.
Панель инструментов вертикального меню разбита на 6 областей.
- Идеи.
- Макет.
- Стили.
- Полоса меню.
- Элемент меню.
- Элемент подменю.
Инструмент Идеи позволяет генерировать варианты оформления вертикального меню.
Инструмент Расположение (рисунок ниже) позволяет задать одну из четырёх позиций для отображения вертикального меню. Или вовсе его отключить. Но это не значит, что вертикальное меню может располагаться на сайте только в этих позициях. Вы сможете задать любую из 29 позиций для отображения этого модуля.
Инструмент Быстрые стили (рисунок ниже) позволяет задать один из 12 настроенных стилей для вертикального меню.
Примеры стилей показаны на рисунке ниже. Цветовая гамма и шрифты зависят от общих настроек, заданных на панели инструментов Цвет и шрифты (детальнее в статье «Обзор Artisteer (часть 2). Создание Joomla шаблонов»).
Также Вы сможете изменить любой элемент меню по Вашему усмотрению.
Блок меню (рисунок ниже) позволяет Вам настроить общее отображение блока вертикального меню и его верхнего колонтитула. Всего 20 видов, разделённых на три группы (Простой, Без верхнего колонтитула, С верхним колонтитулом)
Ниже показаны примеры того, как может выглядеть блок вертикального меню.
Полоса меню (рисунок ниже) содержит опции округления, настройки полей и расстояния для полосы меню.
При настройке фона вертикального меню (рисунок ниже) Вы сможете настроить внутренние отступы, заливку, обводку, прозрачность, а также применить эффекты текстуры, градиента и тени.
Для настройки верхнего колонтитула вертикального меню (рисунок ниже) Вы сможете воспользоваться такими инструментами как Текст, Иконка, Заливка, Обводка, Прозрачность, Текстура и Градиент.
Для настройки содержимого блока (рисунок ниже) в Artisteer 3.1 предусмотрены инструменты Отступ, Заливка, Обводка, Прозрачность, Текстура и Градиент. Более детально эти инструменты были рассмотрены в статьях «Обзор Artisteer (часть 2 и 3)».
Элементы меню (рисунок ниже) позволяет сменить форму, расстояние, высоту и скругление для элементов вертикального меню. Также можно задать текстуру, градиент, тень, иконку и разделители для этих элементов.
При помощи инструмента Окрашивание (рисунок ниже) можно задавать способы смены цвета для активного, наведённого и пассивного состояния элементов меню.
Также в Artisteer 3.1 Вы сможете задать цвет для трёх состояний элементов вертикального меню по своему усмотрению (рисунок выше). Для этих же состояний (активного, наведённого и пассивного) можно задать толщину и цвет обводки, а также цвет, размер, стили и гарнитуру шрифта. Более детально про настройки шрифта Вы можете прочитать в статье «Обзор Artisteer (часть 2). Создание Joomla шаблонов».
Вертикальное меню может быть многоуровневым или одноуровневым. В случае с многоуровневым меню Вы сможете выбрать один из 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 пикселей) ширину сайта.
Независимо от того, какой Вы сделали выбор (фиксированная или «резиновая» ширина), можно задать фиксированную или «резиновую» ширину столбцов (рисунок ниже).
Причём, можно задавать её отдельно для разных столбцов (рисунок ниже).
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.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
