Как создать стильное меню и вставить его на сайт?
Есть много программ для создания стильных меню для сайта. В этом уроке я расскажу и покажу пример создания меню в программе Easy button & menu Maker. Для начала через поисковик находим и устанавливаем саму программу. Скриншоты данного пособия сделаны с версии 1.5.В программе можно делать горизонтальные и вертикальные меню различного уровня вложенности пунктов. Давайте сделаем для начала вертикальное меню. Приобретя навыки создания, дальше сможете сами экспериментировать – создавать новые или изменять из готовых шаблонов, которые есть в программе.
Итак, запускаем программу и вначале выбираем стиль кнопок нашего меню в нижнем левом углу – там несколько стилей – пролистайте и выберите стиль и кнопку (выделить нажатием)
Появляется окно с кодом, который нужно скопировать и сохранить (вставить в текстовый документ) – пригодится в будущем
Стиль подобран, кнопка выбрана, жмём Add Item, кнопка появилась
Сейчас начнем настраивать первую кнопку, вернее всего она будет маленькая какая-то, да и с надписью Button. Для настроек кнопки смотрим на правую панель. Первая вкладка Button
Вот теперь настраиваем вкладку Button.
Text – шрифт. размер, форматирование и цвет обычного текста кнопки и при подведении курсора
Link – ссылка на файл или документ, в нашем случае – главная страница index.php или index.html
Hint – подсказка всплывающая при наведении курсора мыши
Target – цель! если ваша страница открывается в том же окне – ничего не меняйте, если ссылка должна открыться в новом окне – выбираем _blank
Icon – Иконка рядом с текстом кнопки
Alignment – выравнивание — мне нравится слева
Stick to text – прилипание к тексту, я убрал галочку. чтобы все иконки всех кнопок находились на одном уровне слева, а не липли каждая к своему тесту.
Вкладка Button Style
Стиль цветов можно не менять, галочки оставляем, если убрать – не будет эффекта при наведении и нажатии. Главное – убираем галочку Auto Size и выставляем нужные размеры. Если этого не делать, то длина кнопок будет зависеть от длины слова. а нам нужны стандарты
Menu Style – тут регулируются цвета окантовки меню – можете поэкспериментировать, а для начала просто не будем трогать
Misc первые две галочки не трогаем – в меню будут стрелки, показывающие, что есть подменю для данной кнопки, цифра 1 – интервал между кнопками. Следующие три галочки – прозрачность меню, эффекты плавного выезда подменю и тени. Последнюю галочку «использовать теги таблицы для меню – не ставим. тем более, что вы не понимаете, что это вам даст.
Один пункт меню готов. Таким же образом создаем остальные пункты меню, а также раскрывающиеся подменю к ним Add SubItem. Настраиваем их тем же образом. что и основные кнопки – стиль, ссылки
Когда меню будет готово, самое важное – суметь встроить его в сайт.
Слева вверху как в Офисе-2007 кнопка меню (круглая) – жмём её и выбираем «Вставить в веб-страницу»
В следующем окне выбираем второй пункт – только генерация кода
Далее указываем в какую папку сохранить рисунки, у меня это папка «Меню», далее галочкой отмечено то, что картинки будут в папке images (можно сменить название, если у вас есть такая папка на сайте, формат png и кодировку не меняем, жмем далее (next)
Что мы теперь имеем? Папку images и сохраненный код. Чтобы вставить меню на сайт надо скопировать папку images в корень сайта, а сохраненный код – в нужное место на сайте.
28.10.2010, 1478 просмотров.