Установка и редактирование шаблона в Joomla

Для придания сайту индивидуальности и запоминающегося образа необходимо правильно подобрать шаблон. В стандартной сборке Joomla есть 3-4 шаблона, но обычно на сайтах используют платные или бесплатные шаблоны, которых в сети множество. В интернете есть большое количество сайтов, на которых можно скачать как бесплатные шаблоны, так и приобрести коммерческие.

После загрузки нужного шаблона необходимо установить его и настроить.

1. В Менеджере расширений (Расширения / Установить-Удалить) в поле «Файл пакета» загружаем шаблон (Рисунок 4.1).

2. В разделе Расширения / Менеджер шаблонов выводится список установленных шаблонов.

3. В списке шаблонов отмечаем галочкой нужный шаблон и нажимаем кнопку По умолчанию (Рисунок 4.2).

4. Готово. Теперь сайт изменил шаблон на тот, который выбран.

 

Рисунок 4.1 - Установка шаблона

 

Рисунок 4.2 - Выбор шаблона

 

Для того чтобы установленный шаблон полностью соответствовал тематике сайта необходимо изменить его header. На локальном диске X заходим в папку templates, ищем папку с названием шаблона, в данном случае ju_tondri, далее переходим в images, а затем в папку header. Так как хедер шаблона содержит несколько изображений, последовательно сменяющих друг друга, соответственно нам необходимо все их заменить. В данном случае меняем пять стандартных картинок на изображения, соответствующие дизайну нашего сайта (рисунок 4.3). Таким образом, после проделанных действий шаблон приобрел облик соответствующий тематике проектируемого сайта (рисунок 4.4).

Рисунок 4.3 – Замена хедера

 

Рисунок 4.4 – Измененный шаблон

Определение структуры web – сайта

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

На рисунке 4.5 представлена структура сайта праздничного агентства «Креатив».

	Верхнее меню

 

Рисунок 4.5 - Структура сайта агентства «Креатив»

Добавление статей в Joomla

Далее можно преступить к следующему этапу разработки сайта - это создание и добавление статей. Для работы со статьями необходимо перейти в Менеджер материалов (рисунок 4.6). При открытии страницы будет доступна фильтрация: по заголовку, по разделам, по категориям, по автору, по состоянию.

Рисунок 4.6 – Менеджер материалов

 

Затем для добавления новой статьи нажмем кнопку «Создать».

На открывшейся странице нужно заполнить следующие поля:

- Заголовок - ввести название статьи.

- Опубликовано - отметить, будет опубликована статья или нет.

- На главной - отметить, будет статья опубликована на главной странице или нет.

- Далее выбрать раздел и категорию, к которым будет принадлежать статья. Можно не указывать раздел и категорию. Тогда материал можно вывести на сайт, создав под него отдельный пункт меню.

- В поле для статьи вводится сама статья. С помощью установленного визуального редактора можно производить форматирование статьи, вставлять картинки и т.п. (рисунок 4.7)

Текстовый редактор Joomla немного схож с Microsoft Word. В нём есть такие стандартные команды, как выделение жирным шрифтом, подчеркивания, наклонный шрифт. Настройка различных стилей текста, выставление заголовков и т.д. Так же в стандартном редакторе есть одна из самых важных и часто задействуемых функций - это HTML редактор. Для его включения нужно найти значок "HTML" в самом редакторе.

Рисунок 4.7 - Добавление статьи

 

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

Рисунок 4.8 – Редактор HTML

Так же есть возможность добавить в статью любое количество изображений. Для этого внизу страницы необходимо нажать на кнопку "Изображение". Откроется окно со стандартными картинками, которые появились при установке joomla (рисунок 4.9).

Рисунок 4.9 – Окно с изображениями

 

Чтобы поместить туда собственное изображение, его сначала нужно добавить в папку /images/stories или добавить через Менеджер загрузки изображений. Только после этого картинка появится в этом окошке. Любое изображение можно точно так же как и текст редактировать и изменять. Например, можно уменьшить или увеличить картинку, поставить её по центру экрана или расположить по бокам. Можно сделать ссылку с изображения на какую-нибудь страницу Вашего сайта.

Для того чтобы отредактировать картинку кликаем на кнопку «Вставить/редактировать изображение». Здесь задаем соответствующее выравнивание, размер, и если необходимо описание изображения (рисунок 4.10). Возможность добавления изображения была реализована в ряде статей, например «Академия желаний» (рисунок 4.11).

Рисунок 4.10 – Редактирование изображения

 

Рисунок 4.11 – Статья «Академия желаний»

 

Также есть возможность создать ссылку на другой материал (это пригодится для внутренней перелинковки). Для этого необходимо выделите кусок текста или картинку и нажать на кнопку в виде цепи. Откроется окошко, в которое нужно добавить ссылку на любую статью создаваемого сайта или любого другого сайта (рисунок 4.12). Можно так же выбрать, будет ли ссылка открываться в этом же окне (в родительском окне) или в новом. Возможность добавления ссылки реализована в статье «Контакты» (рисунок 4.13).

Рисунок 4.12 – Окно добавления ссылки

 

Рисунок 4.13 – Ссылка на статью «Академия желаний»

Создание модулей

Функциональность сайта можно увеличивать с помощью дополнительных расширений. Расширения в Joomla бывают трех типов: модули, компоненты и плагины.

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

Большинство элементов в Joomla!, публикуемых на сайте, отображаются с помощью модулей. Для управления модулями заходим в Менеджер модулей (рисунок 4.14).

Рисунок 4.14 - Менеджер модулей

 

При нажатии на ссылку с именем модуля, в левой половине отобразятся настройки, одинаковые для всех модулей, а именно:

- Заголовок - такое название будет у модуля в менеджере и на сайте.

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

- Включен - будет или не будет модуль отображаться.

- Позиция - место на сайте, в котором будет отображаться модуль.

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

Для того чтобы сайт был более интересным, создадим опрос. Для этого переходим на вкладку Компоненты - Голосования (рисунок 4.15). Нажимаем создать, пишем заголовок, который будет выводиться в начале опроса, псевдоним, и отмечаем – опубликовано. Затем в правом блоке пишем ответы, которые хотим включить в опрос, и нажимаем сохранить. Теперь заходим в расширения - Менеджер модулей и выбираем модуль Голосование. Далее заполняем как обычный модуль, только в правом блоке с параметрами модуля выбираем созданный опрос.

Рисунок 4.15 - Создание опроса

 

Создаем опрос «Оцените, пожалуйста, качество предоставляемых услуг» (рисунок 4.16). После того как посетитель проголосует, появится рейтинг, показывающий результаты опроса (рисунок 4.17).

Рисунок 4.16 - Опубликованный опрос на сайте.

Рисунок 4.17 - результаты голосования.

Создадим модуль «Авторизация». Так, каждый пользователь может пройти регистрацию на сайте (рисунок 4.18). Для этого он должен будет ввести свой никнейм, добавить имя пользователя, адрес электронной почты, пароль и нажать кнопку «Регистрация».

Рисунок 4.18 - Регистрация пользователя

 

Далее создадим модуль «Обратная связь», а для его отображения выберем Статью «Вопросы и ответы» (рисунок 4.19).

Рисунок 4.19 - Отображение модуля обратной связи.

 

Аналогичным образом создадим модуль «Полезные советы» (рисунок 4.20). Проанализировав позиции, которые предоставляет нам шаблон, размещаем его справа под главным меню.

 

4.20 – Модуль «Полезные советы»