Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Выпадающее меню на чистом CSS
Приветствую гостей и постоянных посетителей сайта! Сегодня для вас я подготовила материал об оригинальном выпадающем меню для сайта. Оригинальность его заключается в том, что основные пункты меню представлены в виде популярных иконок.
Но его основная изюминка не в этом, а в том, что данное меню легко устанавливается, так как не содержит скриптов, что очень порадует начинающих вебмастеров.
Данное меню написано на CSS3 и легко настраивается под ваши нужды. Есть возможность менять фоновые цвета основных пунктов меню, тем самым подстраивая его под общий дизайн сайта, есть возможность менять значки внутри пунктов-иконок. Библиотека предоставляемых значков довольна велика и вы обязательно подберете для своего меню то, что вам нужно.
В принципе, вы можете изменить все, что вас не устраивает в исходном образце-примере: размеры меню, количество основных пунктов, количество подпунктов, цвета подпунктов и т.д. Все эти настройки прописаны в файле стилей, поэтому можно легко редактировать их на свое усмотрение.
Установка данного меню очень проста и с ней справится любой новичок. Но по традиции, мы все же разберем процесс установки пошагово, чтобы вы быстрее справились и нигде не ошиблись. Итак, процесс установки данного меню можно разбить на 3 шага.
Но сначала посмотрите скриншот данного меню, чтобы вы имели представление, что у вас должно получиться в результате, а непосредственно рабочее меню размещено в конце материала, там вы можете пощелкать по пунктам, чтобы увидеть все в действии.
А сейчас начинаем установку горизонтального выпадающего меню на свой сайт...
ШАГ 1. Создаем папку в корневой директории сайта и даем ей название assets. Скачиваем архив с файлами меню, распаковываем, перемещаем три вложенных папки: css, font-awesome, img в только что созданную папку assets в корневой директории.
ШАГ 2. Теперь займемся кодом, отвечающим за отображение меню на сайте. Для этого нам придется разместить всего лишь два маленьких фрагмента кода. Первый подключает стили меню, его размещаем между тегами head:
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css" />
Второй код выводит меню на страницу, он размещается между тегами body в том месте страницы, где вы хотите видеть свое меню:
<nav id="colorNav">
<ul>
<li class="green">
<a href="#" class="icon-home"></a>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
</ul>
</li>
<li class="red">
<a href="#" class="icon-star"></a>
<ul>
<li><a href="#">Сайты</a></li>
<li><a href="#">Лендинги</a></li>
<li><a href="#">Визитки</a></li>
<li><a href="#">Другое</a></li>
</ul>
</li>
<li class="blue">
<a href="#" class="icon-twitter"></a>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">ВКонтакте</a></li>
</ul>
</li>
<li class="yellow">
<a href="#" class="icon-file"></a>
<ul>
<li><a href="#" target="_blank">Статьи</a></li>
<li><a href="#" target="_blank">Клипарт</a></li>
<li><a href="#" target="_blank">Скрипты</a></li>
<li><a href="#" target="_blank">Иконки</a></li>
</ul>
</li>
<li class="purple">
<a href="#" class="icon-envelope"></a>
<ul>
<li><a href="#">Написать</a></li>
</ul>
</li>
</ul>
</nav>
В коде коричневым цветом выделены цвета основных пунктов меню и вы их можете менять на любые другие, не забыв прописать их в файле css. Зеленым цветом в коде выделены названия маленьких значков внутри основных пунктов и их тоже можно менять. Полный перечень значков вы найдете в исходных файлах меню, в папке font-awesome - css - font-awesome.
Список значков большой, но вам из этого списка нужно только название значка, на скриншоте я его выделила красной рамкой. Скопировав название, вы вставляете его в код вместо любого, выделенного зеленым цветом.
ШАГ 3. После подключения стилей и вставки кода, нам осталось лишь загрузить страницу на сервер, чтобы увидеть результат. Используйте для публикации любой удобный для вас FTP-менеджер, будь-то Total Commander или FileZilla. После завершения публикации любуемся результатом.
Согласитесь, действительно легкая установка! Всего 3 шага и на вашем сайте появилось оригинальное выпадающее меню. Теперь, когда установка прошла успешно, можно заняться настройкой дизайна меню, прописыванием ссылок и переименовкой пунктов/подпунктов под свои нужды.
В основном коде, который мы прописывали между тегов body, вместо "решеток" укажите названия страниц сайта, на которые должен перейти посетитель, нажав на тот или иной пункт/подпункт вашего меню, например, для главной страницы мы укажем index.html:
<li><a href="index.html">Главная</a></li>
Подобным образом вместо всех решеток в коде вы должны написать соответствующие адреса страниц. А вот и рабочее меню, только я не прописывала ссылки для всех пунктов и подпунктов, указала лишь ссылки на главную страницу и статьи.
На этом данный урок завершаю, кому понравилось данное меню, скачивайте архив с исходниками, устанавливайте и редактируйте под свой сайт.
До новых встреч! С ув. Светлана (SvetLana_TSV)
Не забудь заглянуть в свою почту и подтвердить подписку!