.

.

Урок № 9. Joomla - создаем верхнее меню на сайте.

 

Урок № 9. Joomla - создаем верхнее меню.


Здравствуйте, дорогие читатели блога zuit.ru! Как сделать сайт на joomla? Занимайтесь вместе с нами, читайте уроки. Они построены так, чтобы каждый из вас смог понять и, главное, повторить все на своем компьютере. Сегодня мы подробно разберем, как создавать верхнее меню.

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

 

Начинаем работу, как всегда, с нажатия на ярлык Start Denwer.

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


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


 

Заходим «все меню»- «Антарктида» и теперь создадим в нем два пункта: пингвины и белые медведи.

Для внутренней ссылки выбираем стандартный шаблон материала. Пишем заголовок «Пингвины», псевдоним, указываем в окошке, что показать надо в Антарктиде, а не в Африке. Справа выбираем материал, который у нас уже есть. После этого не забываем сохранить. Я сделала скриншот про медведей, но для пингвинов будет все то же самое.



 

 

Обратите внимание на небольшое активное окошко серого цвета, которое называется «сменить тип». Зачем оно нужно?


 

 

Например, вы потом захотите вместо стандартного шаблона материала поставить другую внутреннюю ссылку. Тогда просто надо будет нажать на эту надпись и выбрать то, что вам нужно.

Точно так же создаем пункт про белых медведей.



 

Идем в предварительный просмотр и проверяем.


Антарктида оказалась в самом верху, поэтому при помощи стрелочек просто перемещаем ее вниз. Для этого надо зайти в менеджер модулей. У вас должно получиться примерно так.



 

 

Предположим, что мы хотим, чтобы все животные, которые относятся к Африке, в ней и находились. Идем в главное меню, нажимаем на слонов и в окошке выставляем: показать не в главном меню, а в Африке.


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



 

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


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

Потом, конечно, будет проще, но на первых порах лучше подстраховаться, чтобы не запутать самого себя.

 


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

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


 

 

Теперь наше главное меню находится справа.

Аналогично переставляем любой пункт меню слева направо и наоборот.



 

 

Потом можно снова переставить главное меню налево и снова сохранить изменения.

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


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

 


Делаем верхнее меню.


Обычно на сайтах сверху находится меню, которое видно всем, в нем есть важные пункты, но вот как их создать? Давайте разберем подробно.

В панели управления выбираем «меню» - «менеджер меню».


Сейчас у нас есть только главное меню, поэтому нажимаем кнопку «создать» и заполняем открывшуюся форму. Выбираем системное имя top-menu, потому что все-таки оно будет находиться наверху, а в остальных строках пишем: Верхнее меню.



 

(Если мы создаем левое меню, то лучше для него выбирать системное имя «left-menu», а для правого – right-menu). Системное имя пишем всегда на английском языке.

Сохраняем, после чего видим, что в менеджере меню новое меню уже появилось.


Создадим для начала две новые статьи: про Южную Америку и Австралию. Напоминаю, что мы работаем по макету сайта, который есть в уроке №  2.

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


Поэтому я сейчас напишу короткий текст про Южную Америку и второй текст в виде отдельной статьи  про Австралию. А вы сделаете то же самое, но только на своем компьютере.

Если вы забыли, как публиковать материал, смотрите в уроке-joomla №  5.


Предварительно можно создать один раздел, в который войдут эти новые статьи. И одну или две категории. Например, у меня получился новый раздел – "Континенты", а в нем две  категории – Америка и Австралия.


 

 

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

Теперь нам нужно в нашем верхнем меню создать несколько пунктов.


Заходим «все меню» - «верхнее меню» - «создать» и выбираем: «материалы» - «стандартный шаблон материала».

Заполняем слева подробности пункта меню. Название и псевдоним, обязательно  выставляем, где оно будет показано, а справа в окошке необходимо выбрать материал.



 

 

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

Меню мы сделали, но пока на сайте его нет. Вы можете зайти в предварительный просмотр и проверить.

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


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


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


Нам надо зайти в «менеджер модулей», выбрать верхнее меню и посмотреть на пункт «позиции». При нажатии на маленькую стрелочку открываются все позиции, которые есть на данный момент. Выбираем позицию «user3»,  не забывайте сохранить все изменения.



 

 

 

Теперь наше верхнее меню находится именно там, где нам и нужно.


Чтобы проверить, что у нас получилось, идем в предварительный просмотр.



 

 

Хорошо, вот я вам сейчас сразу дала подсказку, какую выставить позицию для модуля. А каким образом находить эти позиции?

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


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


P.S. Понравилась статья? Не забудьте подписаться на обновления и получать

свежие новости на e-mail, чтобы не пропустить ценную информацию.

 


Советуем вам прочитать другие интересные статьи:


Как сделать слайд-шоу на сайте?

Phoca Gallery – личный кабинет

Как создать автоматическую ленту новостей для наполнения сайта

iPhone 4 в два раза дешевле. Крутое мошенничество!

Как написать статью. Небольшой мастер-класс

Что такое правильная мотивация? Конкретный пример!

 


Добавить комментарий


Защитный код
Обновить

подписаться на новости блога 

Введите Ваш e-mail адрес:

Delivered by FeedBurner

Компьютерная графика 

Начинающему вебмастеру 

Рассылка