Как сделать меню для сайта в программе CSS Menu Generator.

Создаем горизонтальное меню для сайта.

В этом уроке пойдет речь о том как сделать меню для сайта. Мы с Вами сделаем горизонтальное меню и вставим его на сайт с помощью Adobe Dreamweaver. Для этого Вам нужно совсем немного. Иметь при себе программу CSS Menu Generator, которую Вы сможете совершенно бесплатно скачать в интернете.

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

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

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

Я буду рассматривать создания меню с помощью одной, но на мой взгляд самой подходящей для новичков программы CSS Menu Generator. В данной программе есть все необходимое для того чтобы создать довольно приличное меню которое возможно в чем-то не будет уступать профессиональным меню.

Эта программа не имеет множество различных инструментов которые по сути вообще не нужны, а наоборот имеет льшь те инструменты, кторые реально нужны для создания меню. Интерфейс программы CSS Menu Generator доволи прост и понятен даже новичкам. Поэтому я и выбрал данную программу.

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

Все меню которые созданы с помощью данной программы легко индексируются поисковыми системами и просты в управлении.

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

Первым делам как я уже говорил-это иметь при себе программу CSS Menu Generator. Если данная программа у Вас уже есть то замечательно.

Далее запускаем программу и находим четыре строчки текста, как показано ниже.

Главное окно программы CSS Menu Generator

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

Следущее окно программы CSS Menu Generator

Внизу данного окна Вам показан начальный образец меню, который мы и будем изменять. Если Вы сейчас наведете на одну из ссыло в этом меню, например "Products" то увидите что происходит выпадание еще дополнительных пунктов меню в данной ссылке. Это слишком много для начало, так как мы создадим обычное меню без выпадания дополнительных пунктов. Для этого перейдите во вкладку "Menus" и щелкните по Main Menu. У Вас появится такое окно.

Окно для редактирования меню для сайта в CSS Menu Generator

В этом окне в среднем квадратике находятся все ссылки меню в том числе и выпадающие. Ваша задача оставить те три ссылки которые мы видели чуть раньше без выпадающих пунктов, а именно "Home" "Products" "Services" ( Оставте данный текст меню на английском языке. Вы сможете его поменять и добавить потом на русский в программе Dreamweaver, так так программа CSS Menu Generator не разпознает русский язык ). Для этого по очереди нажимая мышкай для выделения на каждый не нужный пункт меню удаляем его кнопочкой delete правее окна меню.

После нажатия на кнопку удаления в появившемся окошке нужно подтвердить данное действие. Данные действия повторяйте до тех пор пока не будут удалены все лишние пункты меню. После этого переходим во вкладку . В этом окошке мы будем теперь делать оформление меню для сайта. Мы будем работать с табличками на рис. 1 и рис. 2.

рис. 1

рис. 1

рис. 2

рис. 2

На рис. 1 мы будем выбирать пункты отвечающие за определенные действия с данным меню, а на рис. 2 мы будем задавать цвет данным действиям. Здесь я не буду на примере показывать конкретный пример, так как Вы сами здесь разберетесь. После того ка Вы выставите на Ваше усмотрение цветовые настройки переходим во вкладку "Fonts".

Окно Fonts в CSS Menu Generator

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

После того как Вы сделаете все необходимые текстовые настройки переходим во вкладку Вкладка Get the Files с номером 3).

У вас появится еще такие вкладки Вкладка HTML/CSS Code где Вам нужно перейти в последнюю вкладку с "HTML/CSS Code".

После этого Вы увидете еще три вкладочки Вкладка XHTML Code из которых Вам понадобятся лишь первые две вкладки. Переходим в первую вкладку и видим там код который Вам нужно вставить себе на сайт. Но вданном коде есть лишний код, который мы сейчас удалим. Для этого копируем весь данный код в этом окне нажав на кнопку Copy.

После сверните программу ( Важное замечание: не закрывайте программу CSS Menu Generator до того момента пока не скопируете последний код в данной программе) и откройте обычный блокнот на компьютере и вставте данный код. Теперь найдите в этом коде тег DIV и скопируйте его со всем что находится внутри данного тега. В данном коде, пожалуйста удалитете лишний код выделенный красным цветом, так как он нам не нужен.

<div class="mainmenu">

<ul>
<li class="li_nc"><a href="/" target="_self" >Home</a></li>
<li class="li_nc"><a href="#" target="_self" >Products</a></li>
<li class="li_nc"><a href="#" target="_self" >Services</a></li>
</ul>

</div>

После переходим в программу Dreamweaver и во вкладке "Код" вставляем данный скопированный код в то место где Вы хотитев видеть горизонтальное меню. Обычно меню для сайта вставляют ниже логотипа.

Теперь возвращаемся в программу CSS Menu Generator и переключаемся в следующую вкладку "CSS Code" Вкладка CSS Code. Здесь так же копируйте весь код и вставляете в блокнот. Здесь выделяем и копирум весь код начиная со слова с точкой .mainmenu { и заканчивая последним значком } в данном коде.

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

Для того чтобы проверить Ваше созданое меню для сайта нажмите в Dreamweavere F12 на клавиатуре либо найдите на компьютере Ваш файл index.html и откройте его в браузере. После открытия данного файла Вы увидите Ваше готовое меню для сайта.

Для того чтобы сдеть вертикальное меню для сайта нужно перейти в начало программы с 4-ма строчками и выбрать строчку ниже. Далее сделать те же действия, что и в данном уроке.

Данный урок закончен и я надеюсь что он не прошел для Вас даром и Вы знаете теперь как сделать меню для сайта.

Пробуйте, тренируйтесь и у Вас все обязательно получиться.

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

Для перехода к следующему уроку, перейдите далее по ссылке ниже.

Наверх

Другие страницы сайта:

Яндекс.Метрика