Artisteer

Обзор Artisteer 4 (часть 2). Создание меню сайта

  • Тип – программа для создания шаблонов сайтов Joomla, Wordpress, Blogger, Drupal, DotNetNuke.

 

Новый инструмент выделения.

Создание коллажей.

Маска для текстур.

Текстовые блоки.

Стиль всплывающего окна Lightbox.

Слайд шоу.

Больше источников.

Эффект тени для текста.

Новые опции скругления для столбцов и рядов.

 

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

Усовершенствованное создание шапки сайта при помощи визуального редактирования

Artisteer 4 Beta обладает новыми средствами по созданию шапки сайта (верхнего колонтитула), которые предоставляют ранее недоступные возможности.

С новыми инструментами Вы сможете:

  • добавлять слайд шоу в шапку сайта.
  • для каждого слайда можно задать отдельные настройки. Также можно установить эффект перехода для каждого слайда отдельно.

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

Новый инструмент выделения

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

Теперь Вы сможете воспользоваться WYSIWYG интерфейсом, что упростит и ускорит процесс создания шаблона.

Новый инструмент выделения

Создание коллажей

Если Вам необходимо добавить больше одного изображения в шапку сайта, то в Artisteer 4 Beta Вы сможете это сделать (рисунок ниже).

Создание коллажей

Маска для текстур

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

Маска для текстур

В Artisteer 3.1, прозрачные маски были доступны только в качестве специального эффекта текстуры, выбранного из галереи текстур. Вы не могли добавить ещё одну структуру, и если хотели другой эффект, то должны были создать собственные текстуры.

В Artisteer 4.0, прозрачные маски выбираются отдельно, теперь можно добавить маску, а также выбрать и добавить ещё одну текстуру на заголовок. Есть дополнительные опции маски, которые определяют, где и как маска применяется.

При настройке масок Вам будут доступны опции повторения (По горизонтали, По вертикали, Без повторения, Заливка), расположения (По центру, Внизу слева и так далее), отражения (По горизонтали, По вертикали), поворота и масштабирования (рисунок ниже).

Настройки маски для текстур

Текстовые блоки

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

Текстовые блоки

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

Блоки предназначены не только для текста. Вы можете использовать их, чтобы добавить геометрические фигуры, которые можно стилизировать при помощи текстуры, бликов и так далее.

Также можно добавить блоки на страницы. Если Вы хотите добавить слайд-шоу на страницу Вашего сайта, то в Artisteer 4.0 это можно сделать с наложением текста поверх него (рисунок ниже).

Наложение текста

Новые опции для изображений

Стиль всплывающего окна Lightbox

При вставке изображений Artisteer 4 Beta автоматически добавляет класс атрибутов “art-lightbox” в тег <img/> для создания всплывающего окна (Lightbox) для изображений. Теперь при нажатии на изображение можно просмотреть его увеличенную версию в окне поверх страницы. Вы можете включить или отключить Lightbox в настройках изображения («Preview») (рисунок ниже).

Lightbox

Слайд шоу

Шапка сайта - это не единственное место, куда Вы можете поместить слайд шоу. Везде, где можно разместить изображение, может быть и слайд шоу.

Больше источников

Теперь Вы можете вставить изображение в шаблон, указав его URL или выбрав нужное из онлайн галереи (рисунок ниже).

Больше источников изображений

Разметка нижнего колонтитула

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

Разметка нижнего колонтитула

Новые опции стилей

Artisteer 4.0 обладает дополнительными расширенными опциями по настройке стилей для различных элементов шаблона. Например, эффект тени для текста или новые опции скругления для столбцов и рядов.

Эффект тени для текста

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

Эффект тени для текста

Новые опции скругления для столбцов и рядов

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

HTML элементы управления

Теперь в Artisteer 4.0 Вы сможете задать стиль для стандартных элементов управления HTML, таких как радиокнопки, чек-боксы (checkboxes) и так далее. Как правило, они отображаются на страницах сайтов CMS при помощи плагинов. Но теперь, в Artisteer 4, Вы сможете настроить, как именно чек-бокс должен выглядеть. Специально для этого одна из вкладок ленты инструментов Кнопки была переименована в Controls и на неё были добавлены новые инструменты (рисунок ниже). Рассмотрим эту панель более детально. При рассмотрении будут освещены только новые инструменты, которые появились в Artisteer 4.0.0.55648 Beta.

HTML элементы управления

К настройкам кнопок из версии Artisteer 3 добавлено 3 группы инструментов.

  1. Contrlos.
  2. Поиск.
  3. Стиль и шрифты.

В группе Controls собраны настройки для строки ввода текстa (Input), чек-бокса и радиокнопки.

Для HTML объекта управления Input Вы можете выбрать один из пяти стилей оформления, доступный по умолчанию (рисунок ниже).

Настройки Input

Также Вы сможете настроить данный элемент более точно при помощи дополнительных настроек, которые разделены на четыре части (рисунок ниже).

  1. Input control
  2. Градиент.
  3. Обводка.
  4. Тень.

Дополнительные настройки Input

Основные настройки строки ввода текстa (Input) содержат опции (рисунок выше), позволяющие задать ширину поля (Автоматически или Фиксировано (в пикселях)), вертикальный отступ, скругление, заливку, прозрачность и настроить отображение текста (Цвет, Шрифт, Размер, Стиль).

В качестве градиента можно выбрать один из 57 стилей градиента и задать ему контрастность.

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

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

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

Настройки чек-бокса

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

Дополнительные настройки чек-бокса

Они разделены на 6 частей (рисунок выше).

  1. CheckBox.
  2. Пассивный.
  3. Наведённый.
  4. Pressed.
  5. Градиент. Аналогично настройкам поля ввода текста, описанного выше.
  6. Тень. Аналогично настройкам поля ввода текста, описанного выше.

В группе настроек CheckBox (рисунок выше) Вы сможете задать иконку «птички» («галочки») для самого чек-бокса. По умолчанию доступно 14 иконок с возможностью смены цвета, но можно указать и свою собственную из файла (JPG, JPEG, PNG, GIF). Вы можете задать отступ слева и сверху от центра кнопки до центра «птички» («галочки»), можно задать ширину и высоту всей области кнопки (в пикселях), скругление (в процентах), границу (ширину и стиль), а также настроить отображение текста (Цвет, Шрифт, Размер, Стиль).

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

Настройки для радиокнопки аналогичны настройкам чек-бокса. За исключением предложенных по умолчанию стилей оформления (рисунок ниже).

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

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

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

Цвета

Выбор цвета также претерпел изменения. Теперь при выборе цвета в разделе Дополнительные цвета всегда доступны два цвета «Чёрный» и «Белый» (рисунок ниже).

Выбор цвета

При переключении в режим «Настройки цвета» можно для любого цвета задать прозрачность при помощи специального ползунка (рисунок ниже) без возврата к панели инструментов. Стоит отметить, что изменение прозрачности не всегда доступно.

Прозрачность

Меню

С Artisteer 4 теперь Вы сможете создавать меню в «журнальном» стиле в несколько колонок (рисунок ниже). Доступно 4 стиля подменю.

  1. Многоуровневое.
  2. Extended.
  3. Megamenu.
  4. Megamenu Extended.

Журнальный стиль меню

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

Эффекты меню

Границы для заголовков блоков и меню

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

Границы для заголовков блоков и меню

Режим панели

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

Режим панели

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

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

Контекстное меню

Предложения

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

Предложения

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

Предложения из контекстного меню

Предложения повлияют не только на стили объектов содержимого, но и на его структуру.

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

Реорганизация параметров

Многие опции в новой версии Artisteer были реорганизованы для ускорения доступа к ним и для создания ещё более интуитивно понятного интерфейса в целом (рисунок ниже).

Реорганизация параметров

Плагин SDK

Для обеспечения совместимости программы с другими системами управления содержимым в Artisteer 4.0 включён набор средств для разработчиков программного обеспечения (SDK). Если Вы владеете необходимыми навыками работы с HTML и JavaScript, то Вы можете написать плагин, а затем разместить его в Marketplace.

В будущем в Artisteer планируется включить поддержку наиболее популярных CMS и блог-платформ (о том, как создать блог на Joomla Вы можете прочитать в статье «Обзор RSBlog (часть 1, 2, 3)») за счёт плагинов, которые Вы можете добавить в Artisteer. Для получения дополнительной информации о написании плагинов для Artisteer, пожалуйста, обратитесь к вики-странице. Сейчас (20.07.2012) там находится 2 плагина Hello World Plugin и Artisteer HTML Export Plugin, ссылка на краткое руководство по созданию плагинов, ответы на часто задаваемые вопросы по этой тематике и ссылка на соответствующую ветвь форума.

Данное нововведение, поможет расширить область использования Artisteer, сделать его более популярным и, как следствие, привлечь больше пользователей, идей и разработчиков, что будет делать программу всё более функциональной и удобной. Немного более детально этот вопрос будет рассмотрен в статье «Обзор Extensoft Artisteer 4 (часть 3). Программа для создания шаблонов Joomla». Подробнее о различных лагинвх экспорта Вы можете прочесть в статье «Обзор Artisteer 4.2. Шаблоны Joomla 2.5 – 3.0».

Поддержка «Изображения и ссылки» для Joomla 2.5

Для тех, кто создаёт сайты при помощи системы управления содержимым Joomla 2.5, в Artisteer 4 предусмотрена поддержка добавления изображений и ссылок для статей в менеджере материалов Joomla 2.5 (рисунок ниже).

Изображения и ссылки для Joomla 2.5

Совместимость с предыдущими версиями

Был проведён маленький эксперимент. Шаблон, изначально созданный в Artisteer 3.1.048375 Standard Edition для Windows для Joomla 2.5 был открыт в Artisteer 4.0.0.55648 Beta Standard Edition для Windows. В левой части картинки ниже шаблон версии 3.1, в правой – 4.0 (для увеличения нажмите на изображение).

Шаблон в Artisteer 3.1.048375 и Artisteer 4.0.0.55648 Beta

Как видите, в результате конвертирования произошли не слишком большие изменения. В основном, они затронули те элементы шаблона, которые нельзя было редактировать в Artisteer 3.1, например, HTML элементы управления (строки ввода в форме регистрации). При дальнейшем исследовании результатов конвертации проекта, сделанного в версии 3.1 в версию 4.0, были обнаружены небольшие погрешности, например, отступы в блоках почему-то увеличились, после экспорта на сайт стала плохо отображаться постраничная навигация и так далее. Но учтите, что сейчас (20.07.2012) Artisteer 4 находится на стадии бета тестирования! В целом, можно надеяться на то, что перевод шаблонов, сделанных в предыдущей версии Artisteer на новую версию не вызовет больших затруднений.

Обратите внимание на то, что после сохранения проекта в Artisteer 4 он не будет открываться в предыдущих версиях программы.

Если сохранить один и тот же проект в качестве шаблона для Joomla 2.5 (ZIP архив), то получится следующий результат:

Artisteer 3.1.048375 Standard Edition – размер файла 677 Кб. 93 файла 14 папок.

Artisteer 4.0.0.55648 Beta Standard Edition – размер файла 483 Кб. 120 файлов 22 папки.

Стоит отметить, что в случае, когда Вы создадите в Artisteer 4 готовые страницы с содержимым, то размер файла может существенно увеличиться.

В версии Artisteer 4.0.0.55648 Beta ещё есть над чем работать. Но список тех новых и обновлённых возможностей, которые были заявлены на момент выхода бета версии, очень большой. Чего только стоит поддержка CSS3 и HTML5! А плагины порадуют разработчиков и веб мастеров, которые используют не поддерживаемые ранее в Artisteer системы управления содержимым. В следующей статье «Обзор Extensoft Artisteer 4 (часть 3). Программа для создания шаблонов Joomla» мы рассмотрим плагины экспорта, а также преимущества лицензионной версии программы.

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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

 

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