Уроки создания сайта Joomla!Уроки создания сайта на Joomla! Joomla! — (произносится «Джумла») система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL. CMS Joomla! включает в себя различные инструменты для изготовления веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге.

Joomla! позволяет отображать интерфейс фронтальной и административной части на любом языке. Каталог расширений содержит множество языковых пакетов[4], которые устанавливаются штатными средствами администрирования.

Шаг 1Уроки создания сайта на Joomla! Устанавливаем сервер на локальном компьютере.

Скачиваем программу Denwer3. Запускаем программу. После нашего согласия установить программу, появляется DOS меню. Нажимаем Enter. Соглашаемся с директорией установки папки (по умолчанию C:\WebServers). Далее жмем снова Enter. Указываем букву наименования виртуального диска – к примеру Z. Снова Enter. Выбираем режим при котором будет работать наш виртуальный диск. Ставим -1. Далее Enter. Все – процедура закончена.

После установки Denwer на нашем компьютере появился виртуальный диск Z, где в директории Z:\home\localhost\www\ мы будем создавать папку с нашим сайтом.

Шаг 2Уроки создания сайта на Joomla! Устанавливаем Joomla на локальном компьютере.

Создадим базу данных для тестировнаия сайта на локальном компьютере, для чего в браузере набираем: http://localhost/Tools/phpMyAdmin/ - Создать новую БД (назовем ее, к примеру joomlablog). Создадим пользователя для новой БД. Заходим по ссылке “Привилегии” и кликаем “Добавить нового пользователя”. Определяем имя, пароль и хост (localhost), даем пользователю ВСЕ глобальные привелегии привелегии.

Скачиваем дистрибутив Joomla. Создаем в директории Z:\home\localhost\www папку, в которой будет располагаться наш сайт (назовем ее , к примеру joomlablog).

Распаковываем в эту папку скаченныый дистрибутив Joomla.

Открываем http://localhost/joomlablog в вашем браузере. В появившемся окне выбираем язык установки, жмем “Далее”. На странице “Начальная проверка” жмем “Далее”. Читаем лицензию, жмем “Далее”. Переходим на страницу “Конфигурация базы данных” и заполняем информацию по созданной выше БД и пользователю. Жмем “Далее”. На странице “Конфигурация FTP” также жмем “Далее”, ничего не заполняя. На вкладке “Главная конфигурация” прописываем название блога, свой email-адрес, пароль администратора, который будет служить паролем для входа в админскую зону. Жмем кнопку “Далее”. Установка завершена. Нам предлагают удалить папку installation, что мы делаем, чтобы обезопасить себя от попыток повторной установки.

Шаг 3. Уроки создания сайта на Joomla! Проводим базовые настойки нашего блога.

Заходим в админскую зону нашего сайта, набрав в адресной строке браузера http://localhost/joomlablog/administrator/, вводим логин и пароль администратора.

Первым делом Вам надо подобрать подходящий Вам шаблон Joomla!. В интернете огромное множество платных и бсплатных шаблонов. Вам надо скачать выбранный Вами шаблон, перейти на вкладку Раснирения - Менеджер расширений, в поле Файл пакета прописать путь к скаченному Вами zip-архиву, нажать на кнопку “Загрузить файл”. Переходим на вкладку Менеджер шаблонов и назначаем загруженный шаблон шаблоном по умолчанию.

Шаг 4. Уроки создания сайта на Joomla! Учимся добалять статью на блог.

Откройте Менеджер материалов и нажмите кнопку “Новый” или же просто нажмите кнопку “Добавить материал” в панели управления Joomla!. Введите заголовок и псевдоним статьи (обычно это версия статьи, удобная для компьютера). Выберите раздел и категорию, а также решите, будет ли статья опубликована на главной странице сайта. Введите свой текст.

Для вставки в текст картинки (изображения) Вам лучше всего предварительно закачать его на сервер (копировать в папку images/stories/ Вашего корневого каталога) Затем поместите курсор в то место, где вы хотите увидеть картинку. Внизу экрана будет кнопка Картинка. Нажмите ее — вы увидите окно Вставить картинку. Данное окно отображает миниатюры всех загруженных на сайт мультимедийных файлов. После этого введите описание картинки, что очень важно для поисковых машин, да и вообще для удобства пользователей. Поисковые машины не могут “увидеть” графику, зато они могут “прочитать” HTML-тег <ait>, задающий текстовое описание картинки. Описание картинки как раз устанавливает этот тег. Кроме этого, текстовое описание картинки используется программами для чтения с экрана.

В качестве заголовка картинки просто продублируйте текст, введенный в поле Детали картинки. Если Вы хотите, чтобы картинка была подписана на странице, включите флажок Подпись. После всего этого нажмите кнопку Вставить в правом верхнем углу экрана для вставки картинки в текущую позицию курсора. Картинка будет вставлена прямо в текст статьи. Теперь статья готова к публикации, поэтому нажмите кнопку Сохранить для сохранения статьи в базе данных Joomla!

Если вы перейдете на ваш сайт, то не увидите статью. Почему? Потому что Вы еще не создали разделы и категории, которые должны были отображаться на главной странице.

Чтобы увидеть новый материал, вам нужно добавить новые разделы и категории на главную страницу.

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

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

Создайте новую статью, параметры и текст можно указать на свое усмотрение. Убедитесь, что в раскрывающихся списках Раздел и Категория выбрано значение “Без категории”. Как только статья будет готова, нажмите кнопку “Сохранить” для публикации статьи в базе данных. Теперь можно приступить к созданию меню.

Шаг 5. Связь меню со статьями

В основе Joomla! лежат статьи, но чтобы получить к ним доступ, используется система меню. Каждый раздел, каждая категория или даже отдельный документ должен быть привязан к меню, чтобы посетитель смог получить к нему доступ. Меню в Joomla! не всегда определяется так, как в обычном приложении.

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

Создание прямого меню для некатегоризированной статьи

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

Откройте Менеджер меню, выберите главное меню2 и нажмите кнопку “Редактировать пункты меню”. Затем нажмите кнопку “Новый” для создания нового пункта меню.

Вы увидите окно, в котором находится список всех типов контента, привязанных к данному меню. Чтобы увидеть доступные статьи, нажмите ссылку “Материалы” в группе “Внутренняя ссылка”.

Выберите тип меню “Стандартный шаблон материала” для создания прямой ссылки на статью. Установите название пункта меню, соответствующее вашей некатегоризированной статье. Оставьте значения в раскрывающихся списках Показать в и Родительский элемент как есть (Joomla Jumpstart Menu и Верх соответственно).

В правом верхнем углу нажмите кнопку “Выбрать” и в появившемся окне выберите статью. Для выбора статьи просто щелкните на ее названии, после чего название статьи появится в поле Выберите статью. Больше не нужно изменять никакие параметры, поэтому можете нажать кнопку “Сохранить”.

Если теперь вы зайдете на главную страницу своего Joomla-сайта, то увидите в главном меню новый пункт. Если вы нажмете эту ссылку, то увидите нашу страницу без ссылок на раздел или категорию сайта.

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

Шаг 6. Создание разделов и категорий блога.

Заходим в Менеджер разделов и выбираем “Создать новый раздел”. Дадим название этому разделу - “Главный раздел”. Сохраняем. Открываем менеджер категорий и выбирае “Создать новую категорию” и поочередно создаем нужные Вам категории сайта.

Шаг 7. Работа с модулями.

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

Управлять модулями можно через менеджер модулей (Расширения – Менеджер модулей).

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

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

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

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

Позиция - место на сайте, в котором будет отображаться модуль. У каждого шаблона по умолчанию задано несколько мест, в которых может отображаться модуль. Посмотреть их можно по адресу http://yousite.ru//?tp=1 . По такой ссылке будет показана главная страница сайта с позициями всех модулей. Таким образом можно сориентироваться в том, какой из них куда лучше вывести. У Вас может возникнуть вопрос: а как показать модуль в другом месте, не предусмотренном в шаблоне? Для этого придется произвести в шаблоне некоторые изменения. Делается это в три простых шага:

1) При помощи Firebug’а (дополнение к браузеру Firefox) найти место в коде, куда бы Вы хотели вставить модуль;

2) Открыть шаблон через редактирование HTML и найти код типа:

<?php if ($this->countModules('Название позиции')): ?>

<jdoc:include type="modules" name="Название позиции" />

<?php endif; ?>

Например, код для отображения левой колонки сайта обычно выглядит так:

<?php if ($this->countModules('left')): ?>

<jdoc:include type="modules" name="left" style="xhtml" />

<?php endif; ?>

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

3) Скопировать код из пункта 2. Вписать название позиции и вставить в место из пункта 1.

Шаг 8. Создание дополнительных меню.

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

Настраивать каждое отдельное меню можно, зайдя в Меню – (Название меню, например, «Главное меню»), либо нажав кнопку «Изменить пункты меню» напротив нужного в менеджере меню. После этого появится страница «Пункты меню», где можно произвести все требуемые настройки. Подпункты меню обозначаются значком «|_» под соответствующим пунктом.

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

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

Рассмотрим настройки пункта меню (слева):

Название - название пункта меню. Оно будет отображаться в админке и на сайте.

Псевдоним - псевдоним пункта меню. Псевдоним используется для создания SEF-ссылок (SEF - это вид читаемых ссылок, который позволяет людям лучше ориентироваться в страницах сайта и полезен для поисковой оптимизации.

Если стандартная ссылка некоторой страницы:

http://site.ru/index.php?option=com_content&view=article&id=19&Itemid=27 ,

то при включении SEF, она будет выглядеть так:

http://site.ru/index.php/joomla-overview

Включить SEF можно в настройках Joomla (Сайт->Настройки->Включить SEF-ссылки) ). Если псевдоним не указан пользователем, система автоматически подставляет в него дату и время (пустым он быть не может).

Ссылка - будущая ссылка на страницу. В некоторых типах ее можно задавать самостоятельно (например, для типа «Внешняя ссылка»).

Отображать в меню - выбор меню для этого пункта.

Родительский пункт меню - эта настройка используется для создания уровней вложенности в меню. Если ничего не менять, то новый пункт будет создан на верхнем уровне. А если выбрать один из существующих пунктов меню, то текущий будет в него вложен.

Опубликовано - отображать или нет данный пункт на сайте.

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

Уровень доступа - устанавливает группы пользователей, которые смогут видеть этот пункт меню.

При нажатии открыть - выбор способа открытия этого пункта.

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

Но будьте готовы к тому, что внешний вид меню, которое Вы увидите на сайте, будет совсем не каким, каким хотелось бы.

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

Если этот способ по каким-то причинам не подходит, то можно установить компонент SWmenuFree , позволяющий настроить вешний вид меню, не обладая особыми знаниями html и css. Есть, конечно, и другие компоненты для создания меню.

Если же и этот способ не подходит, то придется копаться в настройках css шаблона.