Artisteer

Уроки Artisteer 4.1 (часть 4). Работа с вертикальным и горизонтальным меню

  • Тип – программа для создания шаблонов Joomla и других популярных CMS.

 

 

Данная статья, как продолжение цикла статей «Уроки Artisteer», написана по материалам официального сайта Artisteer и является своеобразным ответом на часто задаваемые в комментариях на сайте Aleksius.com. Описанные в статье приёмы относятся к CMS Joomla. Обзор будет проходить в последней на момент написания статьи (25.02.2013) стабильной версии Artisteer 4.1.0.59861 Standard Edition для Windows. Примеры работы с программой будут показаны в Joomla 2.5.9.

Artisteer 4.1.0.59861 по сравнению с Extensoft Artisteer Standard 4.1.0.59782 RC, которая была рассмотрена ранее в статье «Обзор Extensoft Artisteer 4 (часть 3). Программа для создания шаблонов Joomla» отличается исправлением ошибок в создаваемых шаблонах и стабильностью работы самой программы. О большинстве нововведений в версии 4 и 4.1 Вы можете прочесть в предыдущих статьях.

Установка шаблона в Joomla

В статье «Установка русификатора в Joomla 1.5, 2.5, 3.0» был достаточно детально рассмотрен вопрос установки русификаторов. Этот процесс аналогичен установке компонентов, модулей и плагинов, а также шаблонов Joomla.

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

Уроки Artisteer 4.1

В строке Файл пакета (рисунок ниже) при помощи кнопки Обзор укажите путь на Вашем компьютере к ZIP архиву с шаблоном. После чего нажмите кнопку Загрузить и установить.

Уроки Artisteer 4

Через несколько секунд (приблизительно 5-15 в зависимости от размера шаблона, загрузки сайта и скорости интернет-соединения), если всё сделано правильно, Вы увидите сообщение об успешной установке (рисунок ниже). Естественно, что у Вас надпись «Шаблон сайта Aleksius.com. Автор - Хорошевский Алексей.» будет другой. Её Вы задаёте при создании шаблона в Artisteer меню Файл, подменю Экспорт, пункт Настройки, вкладка Описание, поле Описание.

Успешная установка

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

Уроки Artisteer

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

Также учтите, что существует ограничение на размер загружаемого файла. Как правило, не более 2 Мб. Это можно уточнить у своего хостинг-провайдера или посмотреть в файле «php.ini» и\или «.htaccess» (параметр upload_max_filesize) (для Apache). Если размер загружаемого файла превышает допустимый предел, то загрузите по FTP (или при помощи панели управления хостингом) файл шаблона во временную папку «tmp» вашего сайта. Распакуйте архив, перейдите в менеджер расширений Joomla, введите путь к папке шаблона в строку Каталог установки (рисунок ниже) и нажмите кнопку Установить.

Каталог установки

Где «/hosting/aleksius.com/data/www/aleksius.com/tmp/» - путь к Вашей папке «tmp» (у Вас будет другой), «shablon-sajta-aleksius-com» - имя папки, непосредственно содержащей файлы шаблона (у Вас будет другая).

Ещё один способ установки шаблона. Распакуйте архив шаблона в папку на Ваш локальный компьютер. Например, в папку «shablon-sajta-aleksius-com». Перейдите по FTP (или при помощи панели управления хостингом) в папку «templates» с шаблонами в корне Вашего сайта. Загрузите туда всю распакованную ранее папку с шаблоном (в примере «shablon-sajta-aleksius-com»). Перейдите в менеджер расширений Joomla, откройте вкладку Поиск и нажмите кнопку Поиск (рисунок ниже).

Поиск шаблона

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

Импорт содержимого

У Вас есть возможность создать статью в программе, а затем импортировать её в Joomla (рисунок ниже). Это появилось в Artisteer 4.

Artisteer 4

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

Импорт содержимого из Artisteer 4

Перед Вами появится сообщение. Нажмите кнопку Import.

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

После успешного импорта (5-15 секунд) вы увидите соответствующее сообщение. Нажмите кнопку Continue и можете проверять результат.

Сообщение

Если всё прошло успешно, то Вы увидите на сайте всё созданное в  Artisteer 4.1 содержимое. В менеджере меню (рисунок ниже) появятся новые меню, если они были созданы в Artisteer.

Менеджер меню

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

Менеджер модулей

В менеджере материалов появятся новые статьи с алиасом «article» (рисунок ниже).

Менеджер материалов

Название и девиз сайта

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

Artisteer

Artisteer 4.1 даёт возможность оформить заглавную строку (название сайта) и девиз в самой программе, а текст вписать в CMS. Рассмотрим на примере шаблона данного сайта, как это сделать. Допустим, Вы добавили и настроили оформление (цвет, шрифт, начертание и так далее) заглавной строки «Детальные обзоры компонентов Joomla». Экспортировали шаблон и установили его на сайт. После этого перейдите в менеджер шаблонов Joomla и откройте нужный Вам шаблон. На вкладке Основные параметры, в поле Headline (рисунок ниже) введите текст заглавной строки.

Название сайта

После чего сохраните изменения и проверьте результат. Обратите Ваше внимание, что по умолчанию заглавная строка оформлена стилем H1 (заголовок первого уровня). Если на странице присутствует более одного заголовка первого уровня, то это не очень хорошо с точки зрения SEO. Как с этим бороться, можно прочесть в статье «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн». Там же можно прочесть о том, как добавить заглавную строку и девиз в Joomla 3.0.

Размещение меню Artisteer в позиции шаблона Joomla

После того, как Вы создали шаблон в Artisteer 4.1, загрузили его на сайт, создали меню в Joomla (в менеджере меню) (а также содержимое, которое будет отображаться при нажатии на пункты этого меню, например, статьи (в менеджере материалов)), то можно приступать к созданию меню Joomla и размещению его на сайте. Перейдите в менеджер модулей Joomla и нажмите кнопку Создать (если модуль меню не создан до этого) (рисунок ниже).

Менеджер меню

В появившемся окне выберите пункт Меню (рисунок ниже).

Меню

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

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

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

Выбор позиции модуля меню

Детальнее о позициях Artisteer 4 и 4.1 Вы можете прочесть в статье «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн», о позициях Artisteer 3.1 можно прочесть в статье «Уроки Artisteer 3.1 (часть 2). Позиции в шаблоне Joomla».

Обратите внимание, что позиция «user3» («position-1») может содержать не более 1 меню.

Создание многоуровневого меню

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

Многоуровневое меню

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

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

Показывать подпункты меню

Создание вертикального меню с разделителями

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

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

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

Если шаблон Joomla был сделан в версии до Artisteer 3.0, то необходимо его сохранить в более новой версии (начиная с Artisteer 3.0 и более новой).

Настройте стиль отображения вертикального меню в самом Artisteer так, как Вам надо.

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

На появившейся странице (рисунок ниже) в области Подробно, напротив Тип пункта меню нажмите кнопку Выбрать (рисунок ниже).

Создание пункта меню

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

Разделитель

Задайте ему заголовок и сохраните. Если всё сделано правильно, то в Вашем вертикальном меню появятся разделители.

Создание макета блога

Начиная с Artisteer 4.0 Вы можете создавать макет для пункта меню типа «Блог категории». Для этого перейдите на вкладку Правка в Artisteer. Если у Вас она не активна, то преобразуйте одну из существующих страниц в блог. Для этого в левой панели нажмите правой кнопкой мыши на страницу и выберите из контекстного меню пункт Использовать под блог (рисунок ниже). Это доступно при создании шаблона в с Artisteer 4, 4.1.

Artisteer 4.1

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

Макет содержимого

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

Artisteer 4

Установите шаблон на сайт. Перейдите в менеджер шаблонов Joomla, откройте созданный Вами шаблон. На вкладке Основные параметры из спадающего списка Blog layout type выберите Artisteer (рисунок ниже). Нажмите Import Content from Template. Перед Вами появится сообщение. Нажмите кнопку Import.

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

После успешного импорта (5-15 секунд) вы увидите соответствующее сообщение. Нажмите кнопку Continue и можете проверять результат.

Сообщение

Если всё прошло успешно, то Вы увидите на сайте всё созданное в  Artisteer 4.1 содержимое.

Работа с нижним колонтитулом

Начиная с 4-й версии программы, нижний колонтитул (подвал) сайта является контентом (содержимым) сайта. Вы можете создать его в Artisteer при помощи инструментов панели Правка и Нижн. колонтитул. Помимо этого, Вы можете разместить один или несколько модулей в позиции «position 27». Это можно сделать средствами самой Joomla. На этом сайте сделано  именно так. Создан модуль типа «HTML-код» и размещено в нём то, что Вы сейчас видите (рисунок ниже).

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

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

Мне предпочтительнее создавать содержимое (статьи, модули, меню и так далее) средствами самой Joomla, а не Artisteer 4.1. Это даёт возможность более тонкой и оперативной настройки в среде CMS без привлечения дополнительного программного обеспечения. Как показала практика, это ко всему создаёт меньше проблем.

Помимо всего выше перечисленного, в статье «Installing and Using Joomla Template Created with Artisteer» были рассмотрены ещё некоторые моменты, которые описаны ранее:

 Если у Вас возникли вопросы касательно того, как и где можно купить Artisteer, то можете обратиться к статье «Покупка Artisteer».

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

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

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

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

 

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