TemplateToaster

Обзор TemplateToaster 5. Генератор CSS шаблонов

 

 

В предыдущей статье «Обзор TemplateToaster 4.2. Генератор шаблонов» мы начали обзор инструментов программа для создания шаблонов Joomla и других CMS. С тех пор прошло более четырёх месяцев (и программа обновлялась восемь раз). На данный момент уже доступен TemplateToaster 5 Professional.В нём появилось множество полезных нововведений, а также улучшился интерфейс.

В обзоре будет участвовать последняя на момент написания статьи версия TemplateToaster 5.0.0.6974 Professional в Windows 8.1 х64, разрешение экрана 1920х1080. Тип шаблона – Joomla.

Новое в TemplateToaster 5 Professional

Рассмотрим изменения, которые произошли в генераторе CSS шаблонов с версии 4.2.0.7024.

  • Исправления ошибок, связанных с шаблонами сайта на Joomla, Wordpress и других поддерживаемых CMS.
  • Добавлена позиция шаблона «debug» для Joomla и исправлены некоторые ошибки, связанные со стилями по умолчанию позиций модулей.
  • Добавлена поддержка Bootstrap (набор свободно распространяемых инструментов для создания сайтов (шаблонов сайтов) и веб-приложений).
  • Добавлена поддержка Prestashop (бесплатный движок для создания интернет-магазинов).
  • Добавлена поддержка веб-сервиса для ведения блогов Blogger.
  • Усовершенствовано слайд-шоу, добавлены новые эффекты.
  • Добавлено множество эффектов для изображений и текстовых областей.
  • Разделение слайд-шоу и хэдера на два разных элемента.
  • Добавлен редактор Javascript и CSS с подсветкой кода (рисунок ниже).
TemplateToaster 5
TemplateToaster 5
  • Добавлены новые опции для тем WordPress.
  • Добавлены SEO-опции. Это относится к WordPress. После установки темы Вам будет доступен SEO-плагин (в админке WordPress). Плагин позволяет задавать формат заголовков и описаний страниц, канонические URL, ключевые слова, управлять инструкциями для поисковых роботов (no-index, no-follow), подключать инструменты для веб-мастеров Google, Bing (аналог RSseo или sh404SEF для Joomla) и аналитику Pinterest. Также можно подключить профиль социальной сети Google+. Есть возможность создания XML-карты сайта (аналогично Xmap для Joomla). Если Вас интересует вопрос самостоятельной SEO-оптимизации сайта, без привязки к CMS, то ознакомьтесь со статьёй «Обзор WebSite Auditor. SEO анализ сайта».
  • Добавлена архивация и восстановление. Это относится к WordPress. Вы сможете создавать резервные копии данных вручную или автоматически. А при необходимости восстановить данные из архива. Аналог Akeeba Backup для Joomla.
  • Добавлены вкладки для просмотра шаблона при разных разрешениях экрана (для проверки адаптивного (отзывчивого) дизайна). На рисунках ниже показан пример шаблона сайта на планшете и на смартфоне.
TemplateToaster Professional
TemplateToaster Professional
Программа для создания шаблонов Joomla
Программа для создания шаблонов Joomla
  • Усовершенствован HTML-редактор.
  • Добавлена поддержка видео с YouTube.
  • Добавлен стиль для отзывчивого меню (наподобие меню «Гамбургер»). Стиль такого меню Вы можете увидеть у меня на сайте, если уменьшите ширину области просмотра окна браузера.
  • Улучшена функция перемещения объектов при создании шаблонов сайтов.
  • Добавлены новые элементы Label, Alerts, Badges и т. д. (вкладка Элементы (будет рассмотрена в следующих статьях)).
  • Возможность редактирования дополнительных страниц темы WordPress и всех страниц HTML/CSS сайтов.
  • Добавлена кнопка прокрутки страницы вверх (рисунок ниже). Аналог той, о которой можно прочесть в статье «Обзор Top of the Page. Кнопка «Вверх» для Joomla».
Прокрутка
Прокрутка
  • Добавлены стили меню: при наведении, по нажатию, выравнивание элементов меню.
  • Добавлено редактирование адаптивного (отзывчивого) дизайна.
  • Добавлены стили для системы комментариев WordPress.
  • Оптимизирован CSS.
  • Незначительные улучшения интерфейса пользователя самого генератора шаблонов.

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

Страница

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

Страница
Страница

На рисунке ниже область сайта обведена голубой рамкой.

Генератор CSS шаблонов
Генератор CSS шаблонов

Область Задний фон, инструмент Задний фон (рисунок ниже), который позволяет изменить задний фон страницы сайта. Опции по настройке цвета, градиента и фонового изображения страницы аналогичны инструментам области Задний фон вкладки Тело сайта, рассмотренной в статье «Обзор TemplateToaster 4.2. Генератор шаблонов».

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

Область Макет, инструмент Граница. Можно задать стиль, толщину, радиус скругления и цвет границы области страницы (рисунок ниже).

Толщина
Толщина

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

Граница
Граница

Область Макет, инструмент Отступ. Задаётся отступ вверху области (от хэдера) страницы и внизу (до футэра).

Область Эффекты, инструмент Текстура и Эффекты. Аналогичны одноимённым инструментам, рассмотренным в статье «Обзор TemplateToaster 4.2. Генератор шаблонов». Инструмент Тень (рисунок ниже) позволяет задать тень страницы, используя предустановленные «шаблоны» тени или создав свою при помощи следующих опций:

  • Цвет. Цвет тени.
  • Размытие. Степень размытия тени. Аналог прозрачности.
  • Угол. Угол «отбрасывания» тени.
  • Дистанция. Размер тени.
Генератор шаблона сайта
Генератор шаблона сайта

Хэдэр

На данной вкладке (рисунок ниже) собраны инструменты для настройки шапки сайта (верхнего колонтитула, или согласно переводу в TemplateToaster Professional 5 – хэдэра).

Хэдэр
Хэдэр

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

Пресеты
Пресеты

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

  • Без верхнего колонтитула.
  • Под меню.
  • Над меню.
  • Меню внутри верхнего колонтитула.
Позиция верхнего колонтитула
Позиция верхнего колонтитула

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

Область Макет, инструмент Высота. Программа для создания шаблонов Joomla даёт возможность указать высоту хэдэра в пикселях.

Область Макет, инструмент Ширина. Ширина хэдэра может быть:

  • Полная. Ширина по размеру области просмотра окна браузера (иначе говоря, в зависимости от ширины разрешения монитора).
  • По ширине страницы. Будет совпадать с шириной страницы, заданной на одноимённой вкладке, рассмотренной выше в статье.
  • Своя ширина. Можно задать произвольную ширину хэдера в пикселях не зависящей от ширины страницы или экрана.

Инструменты в области Эффекты были рассмотрены ранее и позволяют задать текстуру, эффекты и тень для хэдэра.

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

Область Текстовая область. Генератор CSS-шаблонов позволяет добавлять в верхний колонтитул сайта произвольный текст, например, контактные данные. Это аналог заголовка и девиза (слогана). При помощи инструментов Задний фон, Эффекты (рассмотрены ранее) и Граница (рассмотрен выше в статье) можно менять внешний вид текстовой области.

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

  • Заголовок или Слоган (в зависимости от настраиваемого элемента). Активирует\деактивирует отображение заголовка и\или слогана.
  • Типография. Содержит множество опций по настройке шрифта.
    • Стиль. Доступны такие начертания: Нормальный, Жирный, Курсив, Жирный курсив.
    • Размер шрифта. Кегль шрифта от 8 до 72 пунктов.
    • Семейство шрифтов. Инструмент аналогичен инструменту Текст в области Типография на вкладке Начало, рассмотренной в предыдущей статье.
    • Цвет. Цвет шрифта.
    • Эффекты. Эффекты тени или свечения для заголовка\слогана.
    • Оформление текста. При помощи опций, доступных в этом инструменте программа для создания шаблонов Joomla позволяет Вам сделать текст подчёркнутым или зачёркнутым.
    • Ещё. Тонкие настройки шрифта и эффектов тени и свечения. Все доступные опции рассмотрены ранее.
  • Тип заголовка. Можно указать, какого уровня должен быть заголовок\слоган (H1-H6). Не рекомендую H1, так как по рекомендациям веб-мастерам от поисковых систем на странице должно быть не более одного заголовка верхнего уровня (H1). А так как заголовок\слоган расположен на всех страницах сайта и заголовок материала\статьи также может быть выделен H1, то это уже два заголовка верхнего уровня на странице.

Инструмент Логотип. Позволяет добавить логотип в хэдер из библиотеки логотипов TemplateToaster 5 Professional (рисунок ниже) или можно добавить собственный логотип. Поддерживаются такие форматы: JPEG, JPG, PNG, BMP, TIF, TIFF, ICO, GIF, WDP, HDP.

Логотипы
Логотипы

В программе для создания шаблонов Joomla Вы можете добавить ссылку по нажатию на логотип (рисунок ниже). Это возможно при щелчке на слово Еще (рисунок выше).

Ссылка логотипа
Ссылка логотипа

Slideshow

Генератор CSS шаблонов позволяет добавлять слайд-шоу прямо в шаблон. На мой взгляд для Joomla и любой другой CMS это не очень правильно. Так как существует множество расширений, которые позволяют создавать, настраивать и управлять слайд-шоу\галереями прямо из административной части сайта. Пример одного из таких расширений для Joomla – RSMediaGallery. Преимущества такого подхода – гибкие настройки слайд-шоу «на лету» без необходимости использования TemplateToaster и повторной загрузки шаблона.

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

Slideshow
Slideshow

Область Слайд-шоу. Содержит одноимённую опцию, которая активирует сам объект слайд-шоу и кнопки, по нажатию на которые, Вы сможете управлять объектом:

  • «+» – добавление слайда в слайд-шоу. TemplateToaster 5 позволяет добавить слайд в указанное место (рисунок ниже): первым, или после определённого слайда.
  • «-» – удаление текущего слайда.
  • «←» – переход к предыдущему слайду.
  • «→» – переход к следующему слайду.
Добавление слайдов
Добавление слайдов

Область Позиция, инструмент Slide Show Position. Вы можете управлять положением объекта слайд-шоу по отношению к хэдэру и меню: над, между или под этими элементами.

Область Позиция, инструмент Эффект перехода. Позволяет задать один из девяти эффектов перехода (рисунок ниже) и скорость перехода: Медленно, Средняя, Быстро, Еще. По нажатию на опцию Еще Вы сможете указать произвольную длительность перехода.

Эффекты перехода
Эффекты перехода

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

  • Граница. Позволяет настроить стиль, толщину, радиус, цвет и тень границы. Все эти опции были рассмотрены ранее.
  • Ширина. Ширина кнопок управления слайд-шоу.
  • Высота. Высота кнопок управления слайд-шоу.
  • Задний фон. В качестве фона кнопки (на рисунке ниже – голубой цвет) Вы можете задать цвет, градиент или изображение. Все эти опции были рассмотрены ранее.

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

Кнопки
Кнопки

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

Навигация
Навигация

Для настройки внешнего вида данного объекта Вам доступен ряд опций:

  • Pagination Types. Вид самого объекта Навигация: цифры, не закрашенные и закрашенные маркеры.
  • Нормальный. Относится к состоянию навигации, когда на неё не наведён курсор мыши. Можно изменить задний фон, задав для него сплошной цвет, градиент или изображение; стиль, толщину, радиус скругления или тень для границы.
  • Выбрано. Относится к состоянию навигации, когда на неё наведён курсор мыши. Настройки аналогичны опции Нормальный.

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

Все инструменты области Макет: Высота, Ширина, Граница, Отступ аналогичны одноимённым опциям, рассмотренным выше для хэдэра.

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

Область Передний план, инструмент Изображение на переднем плане. Данный инструмент аналогичен одноимённому инструменту, рассмотренному выше для хэдэра. Но для этого изображения генератор CSS-шаблонов позволяет задать различную анимацию при помощи следующих инструментов:

  • TransitionEffects. В качестве эффекта перехода можно выбрать затухание и назначить для него скорость и время начала. По аналогии с PowerPoint.
  • SlideEffect. Доступно восемь эффектов «вылета» изображения (рисунок ниже): Влево, Вверх, Left Top, Right Top, Справа, Вниз, Left Bottom, Right Bottom.
  • Easing. Даёт возможность указать скорость, с которой анимация прогрессирует в различных точках в пределах слайд-шоу. То есть, можно изменить скорость эффекта анимации изображения переднего плана.
Эффекты
Эффекты

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

В следующей статье «Обзор TemplateToaster 5 Professional. Визуальный редактор шаблонов» мы поговорим о настройках меню, боковой панели и контента.

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

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

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

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

 

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