Работа с ссылками и html/javascript-кодом. Создание меню.

Лабораторная работа № 3

Работа с ссылками и html/javascript-кодом. Создание меню.

Создаем материал под названием Контакты (contact) по образцу:

Теперь нам надо вставить Google maps. Существую различные способы вставки стороннего html/javascript-кода на сайты, сделанные на Joomla. Мы будем использовать Joomla - модуля mod_specialhtml_J15., который находится на D:\Джумл.

Итак, скачайте модуль к себе на компьютер. Теперь идем в Расширения - Установка и удаление. Нажимаем на кнопку Выберите файл, выбираем модуль mod_specialhtml_J15.zip и нажимаем на кнопку Закачать файл.

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

Для этого мы идем в Расширения – Менеджер модулей:

и нажимаем на кнопку Создать:

Ставим галочку у Special HTML и нажимаем кнопку Включить:

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

Название, например - Карта Google.

Отобразить заголовок - Нет.

Включен - Да.

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

 В параметрах модуля, на вкладке HTML/JavaScript нам надо указать код нашей карты.

Чтобы получить код карты, мы идем на http://maps.google.com/. В строке поиска набираем Чувашская Республика, Чебоксары, ул. И. Франко, 3. Появляется карта с местоположением нашей фирмы, нажимаем на кнопку Поделиться/ Код и видим HTML-код для добавления на сайт:

Копируем этот код, вставляем его в параметры нашего модуля и сохраняем.

Теперь идем в Материалы – Менеджер материалов, выбираем нашу статью Контакты и открываем ее для редактирования. Встаем курсором мыши в то место, где должна быть наша карта и пишем следующую команду: {loadposition map1} :

Таким образом, мы создали модуль с кодом карты (map1), а в статье указали, где этот модуль надо отобразить (loadposition). Сохраняем нашу статью.

Чтобы вставлять в Joomla html/JavaScript-код, необходимо:

·         Создать модуль (в Расширения – Менеджер модулей),

·         выбрать тип (Special HTML),

·         дать модулю название,

·         задать имя его положения и вставить сам код.

·         На странице встать курсором в место, куда будет вставлен модуль и написать команду

·         {loadposition имя_положения_модуля}. 

Создаем главное меню сайта

Сами меню создаются в пункте Все меню – Менеджер меню. Сейчас в менеджере меню у нас только Главное меню:

Если мы щелкнем по пиктограмме Пункты меню, то мы окажемся в Менеджере пунктов Главного меню: 

Сейчас у нас только один пункт - Главная страница сайта.

Давайте добавим наши пункты: Условия работы, Наши магазины, Контакты и Статьи. Для этого щелкаем по кнопке Создать. В открывшемся окне нам надо выбрать тип пункта меню. Все пункты нашего Главного меню указывают на обычные страницы сайта, поэтому мы выбираем тип - Материалы, а в нем – Стандартный шаблон материалов:

Теперь надо указать:

·         Заголовок - Условия работы.

·         Псевдоним - cooperation.

·         Показать в - Главное меню (другого у нас и нет пока).

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

·         Опубликовано - Да.

·         Доступ - Все (будет виден всем).

·         Открывать в  - этом же окне с навигацией (здесь можно выбрать и другие варианты, например, открывать в новом окне).

·         В основных параметрах (справа окна) щелкаем по кнопке Выбрать и в открывшемся окне выбираем наш материал - Условия работы (щелкаем по нему). 

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

Аналогичным образом добавляем оставшиеся пункты меню: Наши магазины (stores), Контакты (contact) и Статьи (article):

Теперь идем на наш сайт, обновляем его и видим, что в Главном меню появились все наши пункты:

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

Заходим в модуль Главное меню для его редактирования (щелкаем по названию).

·         Заголовок - Главное меню.

·         Отображать заголовок. Сейчас галочка стоит в положении ДА, поэтому на нашем сайте мы видим заголовок меню. Поставим галочку в положение НЕТ.

·         Включен - Да (иначе мы не увидим вообще нашего меню).

·         Положение. Сейчас указано положение left (слева), поэтому наше меню и отображается слева, но нам нужно положение сверху. Чтобы указать такое положение, нужно знать, как называется такая позиция. Чтобы посмотреть все возможные позиции расположения модуля нам необходимо пойти на наш сайт и в адресной строке дописать параметр tp=1 (все параметры в адресной строке пишутся после знака вопроса), например http://localhost:83/IVANOV_2A11/?tp=1 

Мы видим, что в разных частях страницы появились белые прямоугольники. Это и есть возможные позиции для размещения модулей. А красным шрифтом указаны соответствующие названия позиций: left (слева), right (справа), user3 (сверху) и т.д. Для разных шаблонов Joomla эти позиции разные, но слева, справа и сверху, как правило, есть у всех. Итак, интересующая нас позиция называется user3. Возвращаемся в настройки модуля и пишем в поле Положение - user3.

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

Больше ничего трогать не будем, нажимаем на кнопку Сохранить. Теперь идем на наш сайт, стираем в адресной строке параметр tp=1, обновляем и видим, что наше Главное меню теперь располагается там, где мы и хотели.

Итак, чтобы создать в Joomla меню, необходимо:

·         Создать само меню и его пункты в Все Меню – Менеджер Меню.

·         Создать и настроить модуль для работы меню в Расширения – Менеджер Модулей.

·        Надо запомнить, что меню всегда состоит из двух частей: самого меню и модуля.