- Тип – программа для создания шаблонов сайтов Joomla, Wordpress, Blogger, Drupal, DotNetNuke.
- Таблица без границ.
- Цвета с изображения.
- Стиль позиции шаблона Artisteer.
- Оптимизация шаблона для ускорения загрузки сайта.
- Создание вертикального меню.
- Смена расположения кнопки «Подробнее».
Эта статья является продолжением «Уроки Artisteer 3.1 (часть 1). Почему Artisteer не сохраняет проект».
Таблица без границ
Если при создании шаблона в Artisteer 3 Вы задали обводку для таблицы (рисунок ниже), то она может остаться даже в том случае, если Вы зададите нулевое значение в свойствах таблицы при редактировании статьи на сайте (рисунок ниже).
Чтобы такого не было, советую при создании шаблона на вкладке Содержимое в области Стили и шрифты в инструменте Толщина обводки выбрать Без обводки. Но тогда необходимо будет для всех таблиц на сайте, для которых необходимо отобразить границы таблицы, задать толщину обводки.
О том, как избавиться от границ для некоторых таблиц в статье можно прочесть в материале «Уроки Artisteer 4.0 (часть 3). Отзывчивый дизайн».
Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «Обзор Droptables. Создание прайс листа в Joomla», в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.
Цвета с изображения
В предыдущей статье «Обзор Artisteer 3.1 (часть 2). Редактор шаблонов Joomla» был рассмотрен инструмент «Цвет по изображению». В этой же статье можно прочесть, для чего нужен данный инструмент. Перевод может отличатся в связи с тем, что в русскоязычном файле не оказалось перевода для этого инструмента. Перевод этой части интерфейса Artisteer 3 на русский язык я выполнил самостоятельно.
Теперь рассмотрим, как работает этот инструмент. Допустим, Вам необходимо сделать шаблон сайта в цветах другого сайта, который понравился Вам или заказчику. Для примера возьмём официальный сайт Joomla (рисунок ниже).
Сделайте снимок экрана и сохраните его на компьютере. Откорректируем цветовую схему создаваемого шаблона (рисунок ниже).
Для этого в Artisteer 3.1 на вкладке Цвета и шрифты в области Цвета нажмите кнопку По изображению (рисунок ниже).
В появившемся окне (рисунок ниже) нажмите кнопку Из файла.
После чего в правой части окна Вам на выбор будет предоставлено 6 вариантов палитр (рисунок ниже).
Вам нужно просто выбрать более подходящую, просмотреть её и, при необходимости внести корректировки.
На рисунке ниже представлен результат работы инструмента Цвет по изображению без внесения дополнительных правок.
Стиль позиции шаблона Artisteer
В шаблоне Artisteer 3 Вам доступно множество позиций (рисунок ниже). Это позиции в шаблоне Joomla, Drupal и так далее.
Помимо этого для каждой позиции можно задать стиль или отказаться от использования стилей. Для этого Вам необходимо указать идентификатор стиля в поле Суффикс CSS-класса модуля дополнительных параметров того модуля, к которому вы хотите применить стиль (рисунок ниже) (на примере позиции в шаблоне Joomla).
Давайте рассмотрим, как выглядит модуль главного меню сайта с применением стиля по умолчанию и без стиля (art-nostyle) (рисунок ниже).
Если Вы меняли CSS префикс «art», при разработке шаблона в Artisteer 3.1, то Вам необходимо указывать свой собственный префикс.
Детальнее о стилях позиции шаблона можно прочесть на официальном сайте Artisteer.
Оптимизация шаблона для ускорения загрузки сайта
Ускорение скорости загрузки сайта является очень важной задачей. Давайте рассмотрим созданный в Artisteer 3 шаблон сайта с точки зрения его размера в мегабайтах. Безусловно, что размер шаблона будет зависеть от количества элементов шаблона, его размеров по ширине, наличия Flash анимации в шапке сайта, количества цветов и градиентов, которые Вы используете, высоты шапки сайта, фонового изображения страницы, бликов и так далее.
Оптимизацию следует производить только после того, как шаблон полностью готов. И в него длительное время не собираются вносить изменения
Для примера, рассмотрим шаблон сайта aleksius.com. После экспорта шаблон сайта занимает 1136 КБ (1 163 264 байт) (в распакованном виде).
Сразу смело можно удалять файлы Joomla.png и powered_by.gif из папки joomla_images (на общую скорость загрузки шаблона эти два файла не влияют). В корне папки шаблона есть два файла: template_preview.png и template_thumbnail.png. Это миниатюра и её увеличенный вариант для предварительного шаблона, которые отображаются в менеджере шаблонов (рисунок ниже).
Размер этих двух изображений можно уменьшать по максимуму, не опасаясь за потерю качества. Всё равно никто из пользователей его не увидит. Но и на общую скорость загрузки шаблона эти два файла не влияют.
Далее рекомендую провести оптимизацию каждого файла изображения самостоятельно при помощи графического редактора. Например, в Adobe Photoshop есть инструмент Сохранить для Web и устройств. В нём вы сможете оптимизировать изображение с одновременным отслеживанием его размера и качества. Не изменяйте формат файла. Обратите особое внимание на изображения с прозрачностью, возможно, их придётся оставить без изменений. Или после оптимизации процент уменьшения размера будет незначительным. Как правило, я варьирую параметрами количества цветов палитры (для PNG-8) и качеством сжатия для (JPEG).
После того, как Вы оптимизируете каждое изображение, загрузите оптимизированный шаблон на сайт. Внимательно просмотрите его на наличие «дефектов». Важно добиться минимального размера файла с сохранением максимального качества изображения.
Эти бесплатные сервисы позволяют оптимизировать изображения автоматически. То есть они сделают то, что Вы делали для каждого изображения отдельно в графическом редакторе.
У PunyPNG есть платная и бесплатная версия. Бесплатная версия не позволяет загружать для оптимизации файлы размером более 150 Кб и не допускает загрузку более 15 файлов одновременно.
Рекомендую сперва оптимизировать всё при помощи графического редактора «вручную», а только потом прибегать к использованию PunyPNG и\или Smush.it. Так можно добиться максимального эффекта.
После всех вышеперечисленных манипуляций с файлами шаблон сайта стал занимать 724 КБ (741 376 байт) (в распакованном виде). На диаграмме ниже видно, что разница до и после оптимизации существенна (36,26%).
Разница между 1136 КБ и 724 КБ может показаться несущественной. Но помните, что шаблон сайта загружается на компьютер каждого пользователя в любом случае (если включена загрузка изображений вообще), не смотря на то, какую страницу он будет загружать. Сэкономив 36% на шаблоне, 20-50% - на изображениях в статьях, 5-10% - на файлах, загружаемых с сайта (запаковав их в архив с максимальной степенью сжатия), Вы увеличиваете общую скорость загрузки сайта для каждого пользователя. А это и есть цель оптимизации скорости загрузки сайта.
Создание вертикального меню
При помощи Artisteer Вы можете создать вертикальное меню (аккордеон меню) (рисунок ниже).
Детальнее об инструменте Вертикальное меню Вы можете прочесть в предыдущей статье «Обзор Artisteer 3.1 (часть 2). Редактор шаблонов Joomla».
Допустим, что Вы создали шаблон с вертикальным меню, экспортировали его и загрузили на сайт. Но оно не появляется.
Для того, чтобы модуль аккордеон меню появился, зайдите в свойства модуля Вашего бокового меню, перейдите на вкладку Дополнительные параметры и в поле Суффикс CSS-класса модуля впишите «art-vmenu» (рисунок ниже).
Сохраните изменения в модуле и обновите страницу сайта.
Если Вы меняли CSS префикс «art», при разработке шаблона в Artisteer 3.1, то Вам необходимо указывать свой собственный префикс.
Смена расположения кнопки «Подробнее»
Если Вы используете у себя на сайте функцию «Подробнее» для больших статей и комментарии к ним, то наверняка могли сталкиваться с ситуацией, когда кнопка Подробнее и Оставить комментарий находятся одна над другой («лесенкой») (рисунок ниже).
Если сюда добавляется ещё, например, кнопка Обсудить на форуме и кнопки социальных закладок, то «лесенка» получается высокой и не очень красивой. Как же расположить кнопки рядом? Рассмотрим пример для расположения кнопок Подробнее и Оставить комментарий не вертикально, а горизонтально (рисунок ниже).
В браузере Mozilla Firefox (в примере используется версия 11.0) установите расширение Firebug (в примере используется версия 1.9.1). Перейдите на свой сайт с установленным на нём шаблоном. Запустите Firebug и перейдите на вкладку HTML. Там выберите инструмент выделения и подведите курсор к кнопке Подробнее (рисунок ниже). Мы видим, что класс кнопки readmore (class='readmore').
Аналогичным способом определяем класс кнопки Оставить комментарий (в данном случае это class="write_comment readmore").
Зная это, впишем ниже приведённый код в настройки экспорта шаблона Artisteer в разделе Параметры CSS (рисунок ниже).
.readmore {
display: inline;
}
.write_comment {
float: right;
}
Для пользователей Artisteer, которые создают шаблоны для Wordpress существует специальная платная надстройка – The Templateer. Она позволяет, например, сделать кликабельным логотип без правки кода. Детальнее о The Templateer можно прочитать в статье «Обзор Artisteer 3.1 (часть 2). Редактор шаблонов Joomla».
По мере того, как пользователи сайта будут задавать вопросы, будут пополняться и статьи цикла «Artisteer уроки».
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
. 