Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Вертикальное меню-аккордеон для сайта
Приветствую всех посетителей сайта! Сегодня темой нашего разговора будет меню для сайта. Мы уже рассматривали установку простого горизонтального меню и выпадающего меню на чистом CSS, также мы рассматривали быстрое создание меню в специальной программе. А вот сегодня рассмотрим установку меню-аккордеона.
Подобные меню успешно используются на многих сайтах, они просты и визуально приятны, компактны и функциональны. При наведении курсора либо щелчке (зависит от настроек) на одном из пунктов меню, раскрывается блок с подпунктами. Меню-аккордеоны как горизонтальными, так и вертикальными.
Горизонтальные меню часто используют в хедере, где фоном для разделов служат изображения. В сжатом виде видна лишь часть каждого изображения, но при наведении курсора на одно из них оно полностью раскрывается. На полном изображении может быть размещено название либо краткое описание, либо даже вставлено видео, все зависит от целей.
Вертикальные аккордеоны более объемны и информативны, так как содержат подпункты. Чаще всего такие меню можно встретить в двух режимах работы: с одним активным пунктом либо несколькими. При одном активном пункте при клике по любому следующему пункту, блок с подпунктами предыдущего раздела сворачивается. Если активны несколько пунктов либо все, то при открытии последующих прежний пункт с подпунктами остается открытым.
Вертикальные меню-аккордеоны размещают в сайдбаре, установив фиксированную ширину либо адаптивную. Именно такое меню мы и будем сегодня устанавливать. В данном меню оставим активным один пункт, чтобы при открытии других прежние подпункты прятались, не растягивая меню на всю страницу.
Ниже для наглядности привожу примеры горизонтального меню-аккордеона и вертикального.
Не забудь заглянуть в свою почту и подтвердить подписку!
Итак, сегодня мы работаем с вертикальным аккордеоном, так как он более востребован и функционален в качестве меню сайта. Чтобы реализовать такое меню на своем ресурсе, нужно выполнить несколько шагов.
ШАГ 1. Распакуем архив с файлами. Внутри файл стилей, html-код и скрипт для работы меню.
ШАГ 2. Создадим на сервере в корневой папке отдельную папку для файлов меню, я назову ее accmenu. В нее загрузим с помощью стороннего FTP-клиента файл стилей и скрипт меню.
ШАГ 3. Подключим загруженные скрипт и файл стилей, а также библиотеку jquery к сайту. Для этого между тегами <head> и </head>разместим такие строки:
<link type="text/css" rel="stylesheet" href="accmenu/style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="accmenu/script.js"></script>
Если библиотека jquery у вас уже подключена, то вторую строку можете удалить. Не забудьте прописать название своей папки вместо accmenu, если вы ее назвали иначе.
ШАГ 4. Осталось разместить html-код на страницах сайта в том месте, где должно отображаться меню. Для этого между тегами <body> и </body> размещаем скопированный из архива код. В Пейдже вставка любого html-кода производится через соответствующий раздел меню Вставка→Html или Script-код.
Теперь отредактируйте названия пунктов и подпунктов меню, пропишите им вместо моих ссылок ссылки на нужные страницы своего сайта, после чего загрузите все страницы с установленным меню на сервер. Проверьте работоспособность меню, пройдясь по всем пунктам. Рабочий пример данного меню размещен в конце статьи.
Информация для начинающих вебмастеров. Добавлять пункты и подпункты в данном аккордеоне довольно легко, все пункты сформированы списком с использованием тегов <li> и <ul>. Чтобы добавить основной пункт с несколькими подпунктами, для примера возьмем из моего меню пункт "Мотивация", содержащий четыре подпункта, скопируем часть кода, отвечающую за вывод этого пункта (на скриншоте в рамке под номером 1). Вставим ее в том месте, где хотим добавить пункт, изменим название и ссылки самого пункта и входящих в него подпунктов. Все, новый пункт добавлен.
Если требуется добавить только подпункт, то копируем любую строку уже имеющегося подпункта (на скрине в рамке под номером 2), и вставляем ниже или выше, как вам нужно, и также меняем название и ссылку. Новый подпункт добавлен.
С кодом разобрались, осталось отредактировать дизайн меню. Изменения, касающиеся внешнего вида аккордеона, производятся в файле стилей. По умолчанию я оставила свой вариант оформления, вы же вправе поменять цвет пунктов, подпунктов, шрифта и другие настройки под дизайн своего сайта.
Кто еще не умеет редактировать под себя файлы стилей, рекомендую почитать материал по CSS. Информация изложена в нем доступным для новичков языком и поможет вам разобраться с основными понятиями в языке css.
Ширина аккордеона фиксированная - по умолчанию 210 рх, изменить ее можно в том же файле стилей, в блоке
.nav_list {
margin:20px;
width:210px...
После внесения изменений не забывайте перезагружать файл стилей на сервер.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат видеокурс по созданию doodle-видео (рисованных видеороликов). Не зря в прошлом выпуске я поделилась с вами большим набором персонажей, сейчас они вам здорово пригодятся. Оказывается, создание рисованных роликов - дело не только увлекательное, но и прибыльное:))
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!