Вставляем на сайт готовое меню


Slide Black Blue Hovered Menu
Меня неоднократно спрашивали читатели сайта, как вставить на свой сайт скачанное в Интернете меню. Да, в Интернете немало готовых скриптов разных менюшек, начиная от простых и заканчивая навороченными, но как их прикрутить к своему сайту - вопрос не совсем понятный.

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

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


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

Итак, шаг 1.
В архиве данного меню есть три папки: image, html, style. Для начала откроем вторую папку и скопируем html-код этого меню.
Затем вставим код на страницу своего сайта, используя меню Вставка - html-код в программе WebPageMaker.
Код данного меню небольшой, его вы видите на скриншоте.
Шаг 2. Вставленный код нам тут же в окне редактора надо отредактировать. Для этого подчеркнутые красным карандашом названия разделов на английском языке мы руссифицируем. То есть, вместо Home напишем Главная и т.д. Таким образом изменим названия всех своих разделов, например: Скачать, Карта сайта, Новости, Контакты и т.п.

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

Ссылку лучше всего прописывать полностью, например, для главной страницы моего сайта ссылка такова  http://sayt-s-nulya.ru/index.ru. Именно ее я впишу между кавычками. Для остальных страниц следует указывать также полные ссылки.
Теперь код имеет такой вид:
Шаг 4. Обратите внимание на текст, подчеркнутый на скриншоте зеленым цветом. Это ссылка на МОЙ сайт. Вам вместо нее нужно прописать адрес своего сайта.

Шаг 5. Теперь займемся стилем. Чтобы меню выглядело на вашей странице также, как и на скриншоте, то надо сохранить стиль файла при создании этого меню. Для этого нужно первый файл в архиве (это папка images) закачать в корневую папку на сервер.

Для этого используем любой сторонний FTP-клиент, например, я пользуюсь FileZilla. Подробная инструкция по загрузке файлов на сервер через FileZilla.

Шаг 6. После этого приступаем к третьему файлу style.css. Но прежде, чем его загрузить на сервер, надо кое-что отредактировать. Копируем код файла style.css и вставляем в Блокнот (или любой другой текстовый редактор на вашем компьютере), меняем ссылки изображений кнопок меню на свои (на скриншоте они выделены красными рамками и таковых ссылок 6 шт в файле).

После чего отредактированный файл style.css тоже загружаем на сервер в корневую папку через сторонний FTP-клиент.


У меня ссылки на картинки после загрузки их на сервер выглядят так: http://sayt-s-nulya.ru/image/menu_007_left.jpg, у вас они могут несколько иными. Вид ссылки зависит от иерархии папок в корневом каталоге хостинга. Но обратите внимание на один важный момент!!! Это касается тех,  кто создает свой сайт в программе WebPageMaker, - всегда следует указывать полный путь к картинкам, начиная с http.

Закачать файл со стилем на сервер через программу WebPageMaker не получится. В таких случаях можно использовать любой сторонний FTP- менеджер, например, я пользуюсь FileZilla. (Как пользоваться FileZilla)

Теперь осталось изменить ссылку на сам файл style.css в html-коде меню. Щелкнем дважды ЛКМ по прямоугольнику с html-кодом и исправим ссылку. Посмотрите еще раз на первый скриншот. Там красной рамкой выделена ссылка на этот файл. Вам нужно эту ссылку заменить своей. В моем случае ссылка на него выглядит так http://sayt-s-nulya.ru/style.css, у вас она может быть иной, все зависит от иерархии папок на вашем хостинге.

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

Загружаем страницу с меню на сервер через встроенный в программу инструмент "Публикация" и любуемся результатом.


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

Не забудьте поделиться с друзьями:
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Проект для новичков
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
ПОДРОБНЕЕ

Не забудь заглянуть в свою почту и подтвердить подписку!