Как создать меню на CSS за несколько минут
Приветствую всех посетителей сайта! Сегодня мы рассмотрим как создать профессиональное меню на CSS за считанные минуты. Для этого воспользуемся отличным помощником, который, учитывая наши пожелания:)), создаст горизонтальное или вертикальное выпадающее меню.
В роли помощника выступит простая и понятная программа, которую можно бесплатно скачать на официальном сайте. Правда, в бесплатной версии доступен не весь функционал, но и его вполне хватает, чтобы создать меню под свой дизайн.
Меню без всяких скриптов, на чистом CSS - это идеальный вариант для новичков и тех, кто предпочитает минимум сторонних скриптов на своих проектах. Установка такого меню на свой сайт очень проста и сводится к нескольким кликам мышкой.
Какое меню можно создать в этой программе? Да, практически любое... Количество разделов и подразделов не ограничено, цветовая гамма легко настраивается, при желании можно добавить иконки к каждому разделу, скруглить углы, выбрать шрифт. Все основные настройки доступны в бесплатной версии.
В программе имеются готовые шаблоны меню и иконок для пунктов меню, хотя иконки можно запросто добавить и свои.
Итак, скачав и установив программу, первым делом выберем русский язык интерфейса, хотя и с английской версией всё интуитивно понятно, но с русским языком все-таки привычнее...
Для этого идем в раздел Функции → Язык → Russian, после чего интерфейс программы предстает перед нами на русском языке. Кстати, интерфейс довольно минималистичен, ничего лишнего. Всего несколько кнопок для добавления разделов и подразделов, готовые шаблоны, подсказки и окно с настройками.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Слева в верхней части размещено окно предпросмотра, рекомендую окно программы растянуть на весь экран, иначе при добавлении новых разделов они будут размещаться не в одну строку, а друг под другом.
Вы можете воспользоваться уже имеющимися шаблонами меню, а можете создать меню с нуля, здесь все на ваше усмотрение. Чтож, давайте для примера создадим горизонтальное выпадающее меню.
Идем в раздел Файл и выбираем Новый проект. Если создаем меню с нуля, то кликаем по зеленой кнопке с плюсом внутри - она добавляет разделы, кликаете столько раз, сколько нужно разделов. Теперь, чтобы добавить подразделы, выбираете нужный (кликнув по нему), нажимаете на соседнюю кнопку (такая же зеленая кнопка с плюсом только меньшего размера на фоне документа) - это добавит пункт подменю. Теперь жмем на большую зеленую кнопку столько раз, сколько нужно пунктов подменю.
А можно сразу выбрать подходящий шаблон во вкладке "Шаблоны" и редактировать его. К сожалению, много шаблонов в бесплатной версии недоступно, но среди доступных тоже немало стильных экземпляров. После выбора шаблона с помощью тех же зеленых кнопок добавляем нужное количество разделов и подразделов.
Под предпросмотром расположена область с основными подсказками, где сказано, какая кнопка какую функцию выполняет плюс при наведении курсора на кнопку появляются всплывающие подсказки, так что не разобраться в интерфейсе у вас просто нет шансов.
Теперь, когда добавлено нужное количество пунктов и подпунктов меню, переходим к параметрам, которые расположены под подсказками. Здесь мы указываем для каждого пункта название, ссылку (адрес страницы, на которую ведет данный пункт меню), подсказку (то, что увидит посетитель при наведении курсора на пункт меню), атрибут Target оставьте пустым, либо blank, если хотите чтобы страница открывалась в новом окне.
Последнее поле параметров позволяет добавить свои иконки к каждому разделу меню, для этого щелкаем по выпадающему списку на кнопке Иконка и выбираем первый пункт Добавить иконку. Откроется окно обзора, в котором мы указываем любую подходящую иконку из файлов на своем компьютере. Главное здесь угадать с размером, в зависимости от размера шрифта, используемого для написания названий разделов, иконки подойдут либо 16Х16, если шрифт мелкий, либо 32Х32, если шрифт средний.
Возле кнопки Иконка есть еще одно поле с надписью "активный". Оно позволяет сделать любой пункт меню активным по умолчанию, то есть он будет выделен другим цветом. Прежде чем ставить галочку в чекбоксе, выберем раздел, щелкнув по нему, я, например, сделаю раздел Прайс активным. Как видите на скрине, он выделился синим цветом.
Теперь переходим в настройки дизайна меню, которые расположены в правой части окна программы под шаблонами. Здесь мы можем изменить цвет шрифта и цвет фона, выбрав в палитре подходящие цвета, вписывающиеся в общий дизайн сайта. Цвет устанавливается как для обычного состояния пункта меню, так и при наведении на него.
Здесь же мы можем задать радиус закругления для основных пунктов и подпунктов, а также выбрать позиционирование текста названия: слева, справа или по центру пункта меню.
Справа в поле Шрифт указываем подходящий размер шрифта, выбираем в выпадающем списке тип шрифта и при необходимости делаем его жирным либо подчеркнутым, все как в простейшем текстовом редакторе.
В поле Размер есть возможность выбора размера меню, можно включить авторазмер, а можно растянуть меню на всю страницу, поставив галочку напротив "100% ширина".
Главное не забыть прописать настройки и для подразделов создаваемого меню, для этого идем во вкладку Подменю (см. скриншот) и заполняем те же поля.
Теперь, когда меню создано, можно "примерить" любой шаблон из доступных, так просто для зрительного сравнения :)) Идем во вкладку Шаблоны и щелкнув дважды по любому шаблону, тут же увидим результат его применения в области Предпросмотра.
Рядом с Шаблонами есть вкладка Иконки, чтобы использовать любую иконку из шаблонных, нужно сначала выбрать раздел меню, для которого она будет предназначена, затем щелкнуть по понравившейся иконке дважды и в появившемся окошке выбрать размер. Иконка тут же добавится слева от названия пункта меню.
После завершения работы над меню можно сохранить результат в программе, например как собственный шаблон и иметь возможность его редактирования в дальнейшем (в этом случае выбираем кнопку Сохранить) либо для установки на сайт выбираем кнопку Опубликовать.
Нажав на Опубликовать, сохраняем результат в виде html-страницы в любом месте, по умолчанию страница сохраняется в папке программы Temp/Projects, но можно выбрать любую папку на своем компьютере, например, ту, в которой собраны файлы для будущего сайта.
Чтобы извлечь из страницы нужный для вставки html-код, открываем только что полученную страницу, щелкаем по ней ПКМ и выбираем пункт "Посмотреть исходный код". Из кода копируем две части, первая - это то что прописано между тэгами head, соответственно вставляем эту часть кода на будущем сайте тоже между тэгами head и вторая - это то, что между тэгами body, вставляем это на сайте в том месте, где должно отображться меню, но обязательно между тэгами body.
Загружаем страницу с меню на сервер и любуемся результатом:)) Для тех, кто пользуется WebPageMaker, самый простой способ добавить меню на остальные страницы, это щелкнуть по нему ПКМ и выбрать пункт Добавить на все страницы. Меню будет добавлено на все уже имеющиеся страницы сайта.
Кстати, на сайте разработчиков есть видеоролики по работе с программой, поэтому если кому-то не хватило моих объяснений, то вы в любой момент можете посмотреть воочию работу программы.
На этом материал завершаю. Надеюсь, данная программа вам пригодится:))
Всем желаю успеха и до новых встреч! С ув. Светлана (SvetLana_TSV).
Не забудь заглянуть в свою почту и подтвердить подписку!