Печать

Занятие 10. Установка расширений: динамическое меню

Рейтинг:   / 1
ПлохоОтлично 

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

Com_swmenufree5.2_J1.5

Именно так называется плагин, который мы скачиваем отсюда и устанавливаем уже известным нам способом на своем сайте. После установки в меню «Компоненты» выбираем «SwMenuFree» и переходим в панель управления этой программы. Перед нами окно с множеством настроек и вкладками «Параметры модуля», «Размеры и положение», «Цвет и фон», «Шрифты и отступы», «Границы и эффекты». Особо не стоит пугаться обилия настраиваемых параметров, но оговоримся сразу: работа предстоит творческая.

В строке «Имя модуля» мы сразу вводим название меню, которое собираемся создать. Это название важно для системы, а не для нас, поскольку после его создания меню с таким именем вы все равно не увидите в списке меню вашего сайта. Дело в том, что мы не создаем новое меню как таковое, а преобразуем содержимое любого, по выбору, из уже созданных в новый, динамический вариант. Мы для ясности использовали название «Динамическое меню».

В строке «Источник меню»  выбираем «Trans Menu», так как этот вариант, из всех трех возможных, самый оптимальный для нашего шаблона. Кто не верит, пусть попробует остальные, чтобы в результате согласиться с нашей версией.

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

В строке «Родитель» оставляем значение TOP. Это означает, что наше меню не является дочерней веткой, а само выступает в качестве родителя, способного «порождать» другие ветки меню.

 

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

В строке «Суффикс класса модуля» ничего не пишем.

Следующий блок «Параметры кэширования» игнорируем.

Блок «Общие параметры модуля». Проставляем флажки так, как показано на рисунке.

Блок «Размещение и доступ». В строке «Размещение модуля» ставим header1 (это положение горизонтального меню предусмотрено для данного шаблона. Кстати, у нас на данный момент там стоит модуль поиска по сайту, поэтому вам нужно будет предварительно переключить его в другую позицию - banner).

Другие настройки в этой вкладке не трогаем, пока у нас на сайте всего одно меню, они не актуальны, и значения, по умолчанию выставленные в них, нас вполне удовлетворяют. Хотя, если вы желаете, чтобы ваше главное меню отображалось не на всех страницах сайта, а только на нескольких, - выберите в блоке «Отображение модуля меню на страницах» нужное.

Переходим в следующую вкладку – «Размеры и положение». Здесь мы сможем настроить высоту, ширину элементов меню и подменю, а также способ расположения на странице.

Блок «Положение и ориентация меню».  В строке «Меню - Выравнивание:» ставим left, т.к. выравнивание текста меню по левому краю считается оптимальным. В строке «Меню / Подменю - Ориентация:» выбираем horizontal/down/right (горизонтально-вниз-вправо). Не забываем после каждого внесенного изменения в настройки нажимать кнопку «Просмотр». После чего вы увидите ваше меню в отдельном окне, в котором оно функционирует и выглядит  так, как будет выглядеть на странице после сохранения результатов. Полюбовавшись, можно закрыть это окно.

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

В блоках «Смещения меню верхнего уровня» и «Смещения подменю» можно задать величину смещения элементов меню относительно друг друга. Хотя в этом  нет особой объективной необходимости.

Вкладка «Цвет и фон». Здесь начинается самое интересное. Здесь мы должны проявить максимум творческого подхода, оформив все элементы нашего меню в гармонирующие с фоном  шаблона сайта цвета. Фон элементов меню можно заливать цветом и изображениями (вспоминаем PowerPoint!). Причем заливка изображением имеет доминирующее значение над заливкой цветом: если вы зальете обоими вариантами, результирующей окажется заливка изображением. Так как у нас нет никаких изображений,  блок «Фоновые изображения» пока пропускаем. А в блоке «Цвет фона» начинаем работать. Чуть ниже находится палитра выбора цветов и подсказка, как это сделать: «Выберите цвет на палитре и нажмите кнопку выбор около поля, к которому вы хотите применить выбранный цвет».

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

Но мы не можем использовать всех возможностей.

Изменение структуры меню

Во-первых, перейдя на главную страницу, мы видим, что у нас два главных меню: одно – новое, над которым мы сейчас работаем, а другое – старое, которое стоит в своей позиции в правой части страницы. Не удивляйтесь, чтобы меню не дублировались, одно из них надо отключить, а именно старое, точнее, отключить модуль его отображения. Идем в «Расширения» - «Модули» и отключаем модуль «Главное меню», щелкнув по зеленой галке в его строке, превратив её в красный круг с белым крестом. Переходим на вкладку, в которой открыта главная страница и видим, осталось одно меню.

Во-вторых, мы не можем настроить оформление подменю, поскольку у нас пока их нет. Поэтому нам нужно перестроить структуру нашего меню так, чтобы основные элементы стали подпунктами.

Для этого идем в меню настройки: «Меню» - «Главное меню». Перед нами список основных элементов меню. Давайте два из них оставим основными, а остальные переведем в разряд подменю. Нам нужно будет последовательно открывать каждое из «приговоренных» к роли подменю  основных элементов меню и в строке «Родительский пункт меню» щелкнуть тот элемент, чьим подменю мы делаем данный элемент. На рисунке показан уже результат пяти последовательных выборов для каждого элемента (бывшие основные элементы «Форум», «Галерея», «Загрузка», «Блог категории», «Демонстрация», чьим родительским элементом раньше являлся невидимый пункт «Вверху», стали «детьми» основного пункта «Возможности»).

Чтобы лучше понять механизм этих изменений, рекомендую после каждогоизменения статуса элемента меню и его сохранения выходить на главную страницу, нажимать F5 и смотреть на результат. Двух-трех раз, думаю, будет достаточно. Можно пойти даже далее и еще усложнить меню, например, сделав родителем двух последних элементов подпункт «Загрузка». В результате мы будем иметь трехуровневую иерархию в своем меню.

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

Теперь возвращаемся в панель управления SwMenuFree и донастраиваем оставшиеся элементы подменю, а также цвет шрифта и цвет границ в соответствующих одноименных блоках вкладки «Цвет и фон». Следует пояснить, что цвет меню, подменю и шрифта устанавливается для двух вариантов:  вне курсора и когда на подпункт (пункт и его содержимое) наведен курсор мыши. Эти цвета, разумеется, должны различаться.

Вкладка «Шрифты и отступы». Здесь можно выбрать вид шрифта и отступы от границы ячейки меню до текста этой ячейки. Рекомендую здесь ничего не менять, кроме толщины шрифта, поскольку обычное начертание сливается подчас с фоном заливки (в блоке «Плотность шрифта» выбираем bold).

Вкладка «Границы и эффекты». На рисунке указаны наши настройки.

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

Но мы еще не рассмотрели возможность заливки фона рисунком.

Заливка фона меню рисунком

Этот способ сложнее, но возможности оформления  дает неограниченные.  Для создания изображений мы воспользуемся GIMP (помнится, в  5 занятии мы с его помощью создавали логотип сайта, вернее, пытались создать).

Нам нужно создать прозрачное изображение размером 200 ×200px. «Файл» - «Создать».

Настройки диалогового окна, как на рисунке.  Теперь берем инструмент «Прямоугольное выделение» (нажимаем клавишу R) и рисуем на нашем прозрачном изображении рамку выделения  шириной пикселей 100 и высотой 25 пикселей. В панели инструменов, в строке «Размер», при перемещении мыши вы видите изменяющиеся цифры высоты и ширины создаваемого выделения, в зависимости от этих значений мы и направляем нашу мышку в ту или иную сторону, пока значения не будут равны 100 и 25 пикселей соответственно. Получившееся выделение мы должны залить темно-коричневым цветом, воспользовавшись инструментом  «Плоская заливка» (Shift+B) и выбрав нужный цвет в палитре. Палитра вызывается на экран щелчком по прямоугольнику цвета переднего плана в панели инструментов. (Вообще все кнопки панели обладают подсказками, достаточно задержать курсор на каком-либо значимом элементе панели – тут же выскакивает подсказка).

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

Теперь нам нужно выделить полоску толщиной 3 пикселя по нижнему краю нашей заливки. Мы делаем это, как только что выделяли первую область, ориентируясь на цифры в панели инструментов (в строке «Размер»). Если вы уже отпустили курсор, а цифры все не те, скажем, больше или меньше нужных,  подводим курсор к границе выделения. Как только он меняет форму, придавливаем левую кнопку мыши и тащим курсор вниз или вверх. Отпустив мышь, видим, что таким образом мы увеличили или уменьшили область выделения. Пробуем еще раз, доведя область выделения до нужных нам размеров. Заливаем её оранжевым цветом.

Теперь делаем слой частично прозрачным: меню «Окна» - «Панели» - «Слои». В появившейся панели  видим прямоугольник текущего слоя, выделяем его щелчком и перемещаем ползунок в строке «Непрозрачность» так, чтобы значение стало равным 80. Наша заливка стала немного прозрачной. Теперь из всей этой заливки нам нужно вырезать тонкую полоску высотой 25 пикселей и шириной 3 пикселя. Берем инструмент «Кадрирование» и, как до этого инструментом выделения, охватываем нужный прямоугольник, опять же ориентируясь на размеры в панели. Если промахнулись, исправляем ошибку, так же, как и с выделением, в плане  исправления погрешностей это идентичные инструменты. (Для работы с мелкими объектами лучше увеличить масштаб изображения до 200-400%. Выпадающий список с возможными размерами масштаба – в строке состояния окна с изображением, промахнуться трудно.) После того, как нужные размеры достигнуты, щелкаем внутри выделенного прямоугольника и получаем наше первое готовое изображение для кнопки меню. Не удивляйтесь, что оно такое маленькое, браузер повторит его столько раз, сколько нужно для заполнения всей площади кнопки. Сохраняем его в формате .png на Рабочем столе под именем а2.

Создаем еще одно прямоугольное изображение 25 на 3 пикселя, только залитое сплошным коричневым цветом, тем же, что и первое. Сохраняем его под именем a1.png.

Идем  в админку сайта, запускаем SwMenuFree. Вкладка «Цвет и фон». Блок «Фоновые изображения». Строка «Меню - фон:», кнопка «Выбор». Нам нужно теперь загрузить наши изображения на сайт. В появившемся окне жмем кнопку «Обзор». Указываем наш рисунок a1.png на Рабочем столе и жмем кнопку Upload.  Он загружается в папку на сайте. Чтобы вставить его в качестве фона пункта меню, щелкаем прямо по загруженному на сайт изображению и жмем OK. То же самое, но только в строке «Меню - фон при наведении:» проделываем с изображением a2.png.

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

Контрольные вопросы:

  1. Назовите преимущества динамического меню над статическим.
  2. Что такое «родитель» в терминологии динамического меню.
  3. Каким образом можно изменить структуру уже созданного меню?
  4. В чем заключается специфика работы в расширениях joomla, иначе говоря, веб-приложениях?
  5. Что произойдет, если после настройки меню в приложении SwMenuFree, подключить сайт к другому шаблону? Перечислите возможные проблемы.
  6. Продумайте дизайн изображений для вашего меню.
  7. Создайте в GIMP четыре изображения: два для меню, два для подменю.
  8. Установите изображения на ваше меню.
  9. Вышлите ссылку на ваш сайт для контроля.

Контрольные задания:

  1. Продумайте дизайн изображений для вашего меню.
  2. Создайте в GIMP четыре изображения: два для меню, два для подменю.
  3. Установите изображения на ваше меню.
  4. Вышлите ссылку на ваш сайт для контроля.