Дизайн сайта. Работаем с шаблонами Joomla!

Оцените материал
(5 голосов)
Дизайн сайта. Работаем с шаблонами Joomla!
 Прочитано: 5345 раз

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

 


Рисунок 1. Какой автомобиль выбрать?

 

На рисунке 1 представлены два подхода к дизайну. Разумеется, здесь присутствует попытка совместить несовместимое, но все-таки: какую из этих двух машин предпочтут большинство?

 

Терминология

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

Дизайн – это расположение и обрисовка объектов, согласно их функциональному назначению, конечным целям и ряду определенных требований характерных для той или иной сферы применения. Данный термин применяется в различных сферах деятельности:

  • искусство (как что-то естественное, гармонирующее, инстинктивное и т.д.);
  • производство и техника (внешний вид различных технических устройств);
  • моделирование различных процессов.

Макет страницы – это подраздел дизайна (в данном случае, подразумевается дизайн графический), который отвечает за местоположение отдельных объектов на web-странице и их обработку. Если говорить профессиональным языком web-дизайнеров, работающих в CMS Joomla, то это размещение компонентов и модулей в конкретном месте интернет-страницы.

Цвета – это элемент визуального восприятия объектов. Часто определенные цвета у людей четко ассоциируются с конкретными объектами или некоторыми ситуациями. Человеческий глаз очень чувствителен к малейшим цветовым оттенкам, а HTML и таблицы стилей CSS позволяют web-дизайнерам использовать при создании сайтов почти 16,8 миллионов цветов. Именно такое количество дает комбинация оттенков красного, зеленого, а также синего (RGB) в градации от 0 до 255. Обозначения цветовых оттенков могут различаться. Так, например, черный цвет в HTML выглядит в виде #000000, а в формате rgb (0,0,0). Разработчикам сайтов хорошо могут помочь в подборе цветовых решений для сайтов различные инструменты, в частности – генераторы цветовых схем. На рисунке 2 представлен скриншот одной из таких программ.

Рисунок 2. Один из генераторов.


Шаблоны – это макет, с расположенными в определенном порядке объектами. Шаблон используется на большей части страниц, либо на страницах, требующих частой, но минимальной модификации.

Web-дизайн – это понятие достаточно растяжимое. Данный термин объединяет в себе множество самых разнообразных дисциплин и навыков, которые позволяют создавать и обслуживать web-проекты. Наиболее востребованы при этом знание HTML, таблиц стилей CSS, языки JavaScript и PHP, а также умение редактирования фотографий и изображений. Кстати, умение работать с CMS Joomla, тоже достаточно полезный навык для web-дизайнера.

В помощь web-дизайнеру Joomla предлагает множество разнообразных шаблонов, которые уже содержат в себе конкретные цвета. Но самое главное преимущество шаблона – это предусмотренные в нем расположение, а также форма определенных объектов. Данное свойство в значительной степени облегчают создание хорошего и удобного для пользователей сайта.

Еще одним безусловным преимуществом Joomla (речь идет конкретно о 3 версии) является наличие встроенной библиотеки интерфейса пользователей, а также шаблона Protostar.

Как уже говорилось выше, цветовое оформление это одна из причин, благодаря которой сайт может понравиться или не понравиться пользователям. CMS Joomla устанавливается уже с встроенными стилями и шаблонами. Стиль – это ни что иное, как набор определенных настроек, определяющих цвет, наличие и расположение логотипа, структура макета. У каждого шаблона подобный «набор» может быть разным: в некоторых можно внести огромное количество изменений, в других количество настроек относительно небольшое.

Кстати, стили можно создавать и самостоятельно. Причем, практически неограниченное количество. А затем их можно привязывать к определенным разделам или страницам интернет-проекта.

 

Структура сайтов

Генерация страниц в CMS Joomla заключается в выводе информации (контента) в HTML-формате одним компонентом совместно с несколькими модулями. Страница строится в соответствии со структурой, заложенной в шаблоне. При этом доступ к конкретной странице обеспечивается собственным адресом (URL), генерирующимся автоматически. На рисунке 3 представлен скриншот страницы, созданной во встроенном шаблоне Beez.


Рисунок 3. Структура страницы.


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

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

 

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

Разрабатывая структуру сайта, web-дизайнер уже примерно предполагает, где и что у него на сайте будет располагаться. Как следствие, он уже «прикидывает», какие модули будут использоваться и где их информация будет отображена.

Местонахождение модулей в шаблоне называется позицией. В принципе, готовые шаблоны уже содержат определенные позиции. Чтобы их посмотреть следует пройти по ссылке «Просмотр модуля позиций», которая находится в верхнем меню административной панели Joomla (Extensions => Template Manager => Options). Сделав данные манипуляции можно перейти на сайт, используя соответствующий параметр: …/index.php?tp=1. Можно сделать и немного по-другому: Предварительный просмотр в расширениях => Шаблоны => Управление. Рисунок 4 показывает, как это выглядит в панели управления Joomla.



Рисунок 4. Управление шаблонами


А на рисунке 5 можно уже увидеть расположение позиций модулей и их имена на примере шаблона Protostar.


Рисунок 5. Модуль позиции


Поменять расположение того или иного модуля можно поменяв текущую позицию на любую другую, кликнув в меню административной панели на «Расширения» (Extensions) и перейдя на страницу «Управление модулями» (Module Manager).

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

 

Встроенные шаблоны

Joomla имеет четыре встроенных шаблона: два для сайта и два для панели администратора. Их предварительно посмотреть, пройдя по ссылкам: Расширения => Управление шаблонами => Шаблоны. Для удобства разработчиков на открывающейся при этом странице предусмотрена фильтрация шаблонов (рисунок 6): для сайта, либо для админки.


Рисунок 6. Менеджер шаблонов

 

Стили

Использование различных стилей позволяет разработчику придавать одному и тому же шаблону определенную индивидуальность, используя разные цветовые оттенки, логотип и т.п. В готовых шаблонах уже имеется хотя бы один стиль. По умолчанию для сайта можно задать один стиль, используя закладку Стили (Расширения => Управление шаблонами => Стили). Либо назначить каждому разделу сайта или некоторым страницам собственный стиль.

Создать новый стиль для шаблонов Joomla достаточно просто. Для начала следует скопировать уже имеющийся стиль. На рисунке 7 представлен скриншот с примером копирования стиля встроенного шаблона Protostar.


Рисунок 7. Копирование стиля.


Затем в его настройках надо указать новое имя. В примере на рисунке 8 – это «cocoate». Здесь же следует указать применение данного стиля для языков сайта. Кстати, к примеру: в мультиязычных проектах можно присвоить свой стиль для каждого языка.


Рисунок 8. Создание нового стиля.


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



Рисунок 9. Настройка стилей. Вкладке «Параметры»



Рисунок 10. Загрузка нового логотипа.


Как правило, определенный стиль привязан к какому-либо пункту меню. Проще говоря, если кликнуть на первую строку в меню, страницы открываются в зеленом шаблоне, а на вторую – в синем. В примере, на рисунке 11, в меню присутствует всего один пункт, поэтому новый стиль привязывается именно к нему.


Рисунок 11. Привязка к отдельным пунктам меню.


Осталось сохранить новый стиль, после чего можно смотреть результаты на сайте. Разумеется, смотреться он будет уже несколько по-другому (рисунок 12). Кстати, шаблон Protostar адаптирован и под мобильные устройства. Как выглядит новый стиль на мобильных устройствах показано на рисунке 13.



Рисунок 12. Шаблон с новым стилем на PC.



Рисунок 13. Шаблон с новым стилем на мобильном устройстве.

 

Редактирование шаблонов

Шаблон – основа стиля в CMS Joomla. Состоят шаблоны из набора определенных файлов. Естественно, их можно редактировать. Делать это можно непосредственно в административной панели Joomla в режиме онлайн. Для этого нужно пройти по пути: Расширения (Extensions) => Управление шаблонами (Template Manager) => Шаблоны (Templates) => название шаблона. Рисунок 14 представляет скриншот этого процесса.


Рисунок 14. Редактирование шаблона в админпанели.

Разумеется, для редактирования этих файлов можно использовать и внешние редакторы. Хранятся они в директории …/templates/systems folder. Здесь лежат шаблоны для сайта и страниц, которые подгружаются в том случае, если сайт по каким-то причинам находится в нерабочем состоянии. Шаблоны административной панели лежат в директории …/administrator/templates.

Предыдущие: Joomla! Как скачать и установить?
Следующие: Как создать свой сайт

Комментарии   

0 #4 Ирина
Здравствуйте! Помогите пожалуйста с сайтом . Надо поставить шаблон, настроить плагины, убрать баги.
0 #3 Ринат
Хороший сайт. Полезные статьи. Сам пользуюсь движком Joomla. Подчеркнул для себя некоторые интересные моменты. Успехов вам.
0 #2 ирина
Много интересных решений и идей для действительно красивого сайта. Если фантик не красивый, то конфетку не купят))) и на это стоит обратить особое внимание
0 #1 Александр
Да в нынешнее время как и раньше внешность имеет значение. Чем красочнее понятнее и информативнее сайт тем приятнее с ним работать.

You have no rights to post comments

© Joomru.com - бесплатные шаблоны joomla и расширения
Наверх