TemplateToaster

Обзор TemplateToaster Professional. Генератор HTML шаблонов

 

 

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

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

Обратите внимание, что обзор проходит в последней на момент написания статьи (23.02.2015) версии TemplateToaster Professional 5.0.0.7024 на примере создания шаблона Joomla. Для других CMS набор инструментов будет отличаться. Например, если Вы создаёте темы для WordPress, то вкладки Позиции модулей не будет, а будет вкладка Области виджетов.

Позиции модулей

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

TemplateToaster 5
TemplateToaster 5

На рисунке ниже показан пример позиций, которые доступны «по умолчанию».

TemplateToaster Professional
TemplateToaster Professional

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

Добавление позиций
Добавление позиций

Затем добавленные позиции появятся в шаблоне (рисунок ниже)

Добавление позиции модуля
Добавление позиции модуля

Остальные инструменты из данной области, такие как: Задний фон, Граница, Отступ, Отступ, были рассмотрены ранее. Они позволяют настроить внешний вид области (строки) позиции модуля.

Область Позиция Ячейки, инструмент Ширина. При помощи данного инструмента (рисунок ниже) конструктор шаблонов сайтов предоставляет возможность менять ширину области позиции модуля. А инструменты «+» и «-» позволяют добавлять\удалять позиции модулей в строке. Также в поле, в правой части данной области, можно переименовать позицию.

Ширина позиции модуля
Ширина позиции модуля

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

Область Рисовать позиции, инструмент Нарисовать. Генератор HTML-шаблонов позволяет добавить произвольную позицию, например, в шапку сайта (рисунок ниже).

Добавление произвольной позиции
Добавление произвольной позиции

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

Предлагаю Вашему вниманию «карту» позиций модулей шаблона TemplateToaster по умолчанию (источник).

Позиции модулей TemplateToaster
Позиции модулей TemplateToaster

Элементы

В конструкторе шаблонов Joomla можно менять внешний вид различных «функциональных» элементов сайта (рисунок сайта). К ним относятся:

  1. Кнопка.
  2. Текстовое поле. Поле ввода текста, поле поиска и т. д.
  3. Нумерация страниц. Пагинация.
  4. Хлебные крошки.
  5. Блок цитата. Можно оформлять цитаты в редакторе материалов Joomla (опция Цитата)
  6. Label. Как правило, используется для обозначения ценной информации на страницах сайта, такой как примечания, предупреждения, сообщения и т.д.
  7. Alert. Контекстное сообщения для типичных действий пользователей.
  8. Badges. Простое выделение новых или непрочитанных элементов. Происходит при помощи добавления «<span class="badge">» к ссылкам. Это, можно сказать, элемент разметка Bootstrap – «Navs».
  9. Флажок. Чекбокс.
  10. Радиокнопка.

Label, Alert, Badges – это элементы Bootstrap. Подробнее о них можно прочесть на сайте Getbootstrap.com.

Конструктор шаблонов
Конструктор шаблонов

Область Кнопка, инструмент Кнопка. Все инструменты, включая Preset, Типография, Тень и Текстура были рассмотрены ранее, но в этот раз относятся к настройкам кнопки. Причём, такие опции как: Задний фон, Граница, Типография и Эффекты, отдельно задаются для нормального состояния кнопки (когда на неё не наведён указатель мыши) и для наведённого, когда курсор находится над кнопкой.

Конструктор шаблонов сайта
Конструктор шаблонов сайта

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

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

  1. Нормальный.
  2. Наведённый.
  3. Активный. Указывает на то, что пользователь находится на данной странице.

Область Хлебные крошки, инструмент Хлебные крошки. Опции данного инструмента аналогичны рассмотренным ранее.

Область Блок Цитата, инструмент Блок Цитата. Тут не рассмотренной является только опция Иконки (рисунок ниже), которая позволяет задать открывающую (Значок слева) и закрывающую (Значок справа) цитату кавычки. Можно выбрать как готовую из библиотеки, задав ей цвет, так и указать свою.

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

Область Label, инструмент Label. Конструктор шаблонов сайта позволяет настраивать внешний вид шрифтов, а также визуальное оформление фона нормального и наведённого состояния «системных сообщений» (реакция на действия пользователей):

  • Default. Относится к оформлению сообщений типа «label label-default».
  • Primary. Относится к оформлению сообщений типа «label label-primary».
  • Success. Сообщение об успешном выполнении действия.
  • Info. Сообщение информационного характера без выделения положительного или отрицательного результата.
  • Warning. Сообщение об ошибке.
  • Danger. Сообщение о критической ошибке.
Конструктор шаблонов Joomla
Конструктор шаблонов Joomla

Область Alert, инструмент Alert. Аналогично вышерассмотренному инструменту Label.

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

Инструмент Флажок. Можно задать Стиль (рисунок ниже) чекбокса: птичка (Галочка) или сплошная заливка (Заливка). А также настроить стиль внешней, внутренней рамки и внешней заливки (эти опции уже рассматривались ранее).

Флажок
Флажок

Инструмент Радиокнопка. Аналогичен инструменту Флажок.

Футэр

На вкладке Футэр (рисунок ниже) генератор HTML-шаблонов предлагает Вам ряд инструментов для настройки нижнего колонтитула (подвала сайта). Часть из этих инструментов аналогичны одноимённым инструментам с вкладки Хэдэр и рассмотрены в статье «Обзор TemplateToaster 5. Генератор CSS шаблонов». Затронем только новые.

Футэр
Футэр

Область Типография, инструменты Авторское право и Дизайн. Позволяют Вам разместить в нижнем колонтитуле такие «элементы» как надпись о сохранности авторских прав и ссылку на разработчика шаблона\сайта (рисунок ниже). Также Вам будут доступны настройки по смене внешнего вида шрифтов этих элементов.

Авторское право
Авторское право

Область Иконки соц. Медиа. Конструктор шаблонов Joomla позволяет Вам разместить в нижнем колонтитуле ряд иконок:

  1. RSS.
  2. Facebook.
  3. Twitter.
  4. LinkedIn.
  5. Google+.

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

Настройка иконок соц. медиа
Настройка иконок соц. медиа

Для тех, кого интересует SMO и SMM (добавление различных социальных «элементов» себе на сайт и\или продвижение сайта\бренда\персоны в социальных медиа), рекомендую ознакомиться с такими статьями: «Обзор AddThis Joomla. Статистика социальных сетей» и «Обзор BuzzBundle. Продвижение в социальных медиа».

Адаптивный дизайн

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

  • Мобильный. Примерно 480х320 (ландшафтная (горизонтальная) ориентация) или 320х480 пикселей (портретная (вертикальная) ориентация).
  • Мини Планшет. Примерно 800х600 (ландшафтная (горизонтальная) ориентация) или 600х800 пикселей (портретная (вертикальная) ориентация).
  • Планшет. Примерно 1024х768 (ландшафтная (горизонтальная) ориентация) или 768х1024 пикселей (портретная (вертикальная) ориентация).
  • Компьютер. Разрешение Вашего экрана.
  • Пользовательский. Вы сами можете указать ширину и высоту в пикселях.
Адаптивный дизайн
Адаптивный дизайн

На рисунке ниже показан пример просмотра шаблона сайта на экране мобильного телефона 320х480 пикселей (портретная (вертикальная) ориентация). «Эмулятор устройства» отображается в окне того браузера, который назначен браузером по умолчанию у Вас на компьютере.

Эмулятор телефона
Эмулятор телефона

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

В принципе, это аналогично встроенной в Mozilla Firefox функции «эмуляции разрешения экрана мобильного устройства» (рисунок ниже). Сочетание клавиш Ctrl+Shift+M. На рисунке ниже Mozilla Firefox 36 – эмуляция экрана мобильного устройства с разрешением 360х640 пикселей (портретная (вертикальная) ориентация). Можно проверять как локальный сайт\шаблон, так и сайт в интернете

Сайт в окне Mozilla Firefox
Сайт в окне Mozilla Firefox

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

Эмулятор мобильного телефона
Эмулятор мобильного телефона

Ещё одна альтернатива, но уже в качестве программы для компьютера – Opera Mobile Classic Emulator (рисунок ниже).

Opera Mobile
Opera Mobile

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

Opera Mobile Classic Emulator
Opera Mobile Classic Emulator

Настройки шаблона TemplateToaster в Joomla

Конструктор шаблонов предоставляет ряд настроек шаблона непосредственно в административной части сайта после установки шаблона. Давайте рассмотрим эти опции на примере шаблона сделанного в TemplateToaster Professional 5.0.0.7024 и установленного в Joomla 3.4.0 (рисунок ниже). Все они разделены на восемь вкладок.

  1. Подробно. Стандартная для всех шаблонов вкладка Joomla, на которой можно указать, для какого языка сайта необходимо использовать данный шаблон. Актуально, если у Вас мультиязычный сайт.
  2. Header Options.
  3. Footer Options.
  4. Color Options.
  5. Sidebar Options.
  6. Style Options.
  7. Menu Style Options.
  8. Привязка к меню. Стандартная для всех шаблонов вкладка Joomla, на которой можно указать, для каких пунктов меню необходимо применять данный шаблон.

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

Header Options
Header Options

Header Options

На данной вкладке (рисунок выше) собраны настройки, которые относятся к шапке сайта (хэдэру) и слайд-шоу.

  • Display Site Title. Отображает\скрывает заголовок сайта.
  • Site Title. Текст заголовка сайта. Не путайте с мета-заголовком (тег «<title>»).
  • Site Title Font Size. Размер шрифта заголовка сайта.
  • Heading Tag For Title. Конструктор шаблонов сайта предусматривает возможность смены тега, которым будет выделен заголовок сайта. Доступны H1-H6, p, div.
  • Display Site Slogan. То же самое, что и Display Site Title, но относится к слогану сайта.
  • Site Slogan. То же самое, что и Display Site Title, но относится к слогану сайта.
  • Site Slogan Font Size. То же самое, что и Site Title Font Size, но относится к слогану сайта.
  • Heading Tag For Slogan. То же самое, что и Heading Tag For Title, но относится к слогану сайта.
  • Display Site Logo. Позволяет отобразить\скрыть логотип сайта.
  • Header Logo. Файл с изображением Вашего логотипа.
  • Slideshow Image 1, 2, 3. Файл изображения 1, 2, 3 слайда соответственно.

Обратите Ваше внимание на то, что некоторых опций у Вас может не быть или они могут не работать, так как Вы не предусмотрели наличие соответствующих элементов при создании шаблона в самом генераторе HTML-шаблонов.

Footer Options

На данной вкладке (рисунок ниже) содержатся ряд опций по настройке нижнего колонтитула (футэра) шаблона.

  • Display Rss Icon. Display Facebook Icon. Display LinkedIn Icon. Display GooglePlus Icon. Display Twitter Icon. Позволяет Вам отображать иконки социальных сетей или RSS-ленты.
  • Rss Icon. Facebook Icon. LinkedIn Icon. GooglePlus Icon. Twitter Icon. Путь к файлу иконки соответствующей социальной сети или RSS-ленты.
  • Facebook Icon Url. LinkedIn Icon Url. GooglePlus Icon Url. Twitter Icon Url. Ссылка на Ваш профиль в социальной сети.
  • Display Footer Copyright. Display Footer Designed By. Отображает\скрывает надпись об авторском праве\имя автора шаблона или сайта.
  • Footer Copyright Text. Текст надписи авторского права.
  • Footer Copyright Url. Footer Designed By Url. Можно задать URL-адрес авторского права или ссылку на сайт автора шаблона\сайта.
  • Footer Copyright Font Size. Footer Designed By Link Font Size. Footer Designed By Font Size. Задаёт размер шрифта соответствующей надписи.
Footer Options
Footer Options

В следующей статье «Обзор TemplateToaster Professional. Генератор HTML CSS шаблонов» мы закончим рассмотрение опций, доступных на оставшихся вкладках Joomla шаблона и попытаемся сравнить две аналогичные программы TemplateToaster Professional и Artisteer Standard Edition.

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

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

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

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

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