Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
"Липкое" меню для сайта с плавным переходом
Приветствую всех посетителей сайта! Меня уже несколько человек спрашивали, как сделать "липкое" меню для сайта. Что ж, если тема востребована, значит давайте ее разбирать. Во-первых, сразу уточним, что значит "липкое меню". Сегодня таким термином называют навигацию, которая всегда на виду посетителя. То есть, сколько бы пользователь не крутил вниз страницу, меню будет оставаться на своем месте.
В качестве "липкого" меню может выступать любая навигация на сайте, но чаще всего это горизонтальное меню либо выезжающее при наведении боковое меню. Сегодня мы рассмотрим горизонтальное "липкое" меню, которое стало почти неотъемлемым элементом одностраничных сайтов, будь-то визитка компании, портфолио вебмастера или студии, продающий лендинг продуктов или услуг.
Реализовать "липкое" меню на своем сайте довольно просто, поэтому мы несколько усложним задачу и создадим не только меню, а простую адаптивную страницу с секциями и плавной анимацией переходов. То есть, при нажатии на пункт меню будет производится плавный переход к соответствующей секции контента. Такая технология разделения контента довольна популярна в веб-дизайне, особенно на одностраничных сайтах.
К тому же, созданная страница будет адаптивной и, соответственно, удобной для пользователей мобильных гаджетов. Простой макет, который мы получим в конце урока, можно использовать как шаблон для любой своей страницы, отредактировав меню и цвета секций на свое усмотрение. Можно полностью убрать "боевую" раскраску, задав всем секциям одинаковый цвет.
В качестве примера приведу несколько сайтов с "липким" меню, посмотрите как это работает, после чего приступим к реализации задуманного...
Не забудь заглянуть в свою почту и подтвердить подписку!
Посмотрели примеры? Теперь давайте создадим свое "липкое" меню на адаптивной странице, разбитой на секции, соответствующие количеству разделов меню. Все секции для наглядности мы зальем разными цветами - это довольно популярный тренд для одностраничников.
Оформим само меню на темно-сером фоне, цвет шрифта пусть будет для контрастности белым, а активный пункт меню пусть будет выделен желтым цветом. Все эти настройки задаются в файле стилей и вы их смело редактируйте под дизайн своего сайта.
Итак, перед вами пошаговая инструкция для реализации "липкого" меню на своей странице.
ШАГ 1. Скачиваем и распаковываем архив с исходниками. Внутри всего два файла: css (стили страницы) и js (скрипт перехода к нужному разделу меню).
ШАГ 2. Редактируем файл стилей на свое усмотрение, задавая нужный цвет для фона меню, шрифта и боксов.
Цвет фона и цвет шрифта редактируется в строках:
.navigation {
position: fixed;
color: #fff; /// белый для шрифта
background: #363636; /// темно-серый для фона
Цвет активного пункта меню меняется здесь:
.navigation a.active { color: yellow; } /// вместо yellow (желтый) пишите название любого другого цвета
Цвета боксов редактируются в строках:
.box {
width: 100vw;
height: 100vh;
font-size: 14vw;
padding-top: 100px;
text-align: center;
background: #8354B8; /// первый бокс (основной экран)
}
.box:nth-child(2) { background: #91CEFF; } /// второй бокс
.box:nth-child(3) { background: #476084; } /// третий бокс
.box:nth-child(4) { background: #D8E0E3; } /// четвертый
.box:nth-child(5) { background: #4B565A; } /// пятый
Обратите внимание на строки, выделенные синим цветом. Задав меню фиксированное положение (position: fixed), мы его "приклеили" к верхней части экрана, прописав при этом width: 100%, чтобы оно растягивалось на всю ширину экрана пользователя.
Для боксов мы задали размер не в привычных для нас пикселах, а в новых единицах измерения, появившихся в CSS3: vw и vh. С их помощью мы устанавливаем размер боксов (секций для контента) относительно размера вьюпорта - видимой части окна браузера. Конечно, это можно реализовать, задав значения top, bottom, left и right для position:fixed, но это как кому удобнее.
ШАГ 3.
Загружаем отредактированный под себя файл стилей и файл js на сервер в корневую папку. Я для "липкого" меню создала отдельную папку в корне сайта, так и назвав ее "lipkoe_menu".
ШАГ 4.
На странице сайта подключаем стили и метатег "viewport" для определения области просмотра, прописав между тегами <head> и </head> строки:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lipkoe_menu/style.css">
А между тегами <body> и </body>, размещаем html-код меню и боксов, а также подключаем библиотеку jquery со скриптом:
<nav class="navigation">
<a class="active" href="#about" title="О нас в цифрах">О компании</a>
<a href="#work" title="Новые работы">Галерея</a>
<a href="#clients" title="Наши клиенты">Клиенты</a>
<a href="#price" title="Сделать заказ">Прайс</a>
<a href="#contact" title="Связь с менеджером">Контакты</a>
</nav>
<div id="container">
<div id="about" class="box">
</div>
<div id="work" class="box">
Work
</div>
<div id="clients" class="box">
Clients
</div>
<div id="price" class="box">
Price
</div>
<div id="contact" class="box">
Contact
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="lipkoe_menu/target.js"></script>
В коде меню меняете названия разделов (выделены коричневым цветом) на свои, при желании можете задать подсказку при наведении для каждого раздела меню (выделены синим цветом).
ШАГ 5. Загружаете страницу на хостинг и проверяете результат. То, что должно получиться, смотрите на демо-странице.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат набор светлых текстурированных фонов для сайта. Двадцать пять разных паттернов помогут создать вам профессиональный дизайн сайта. Данная подборка на Envato стоит 9 долларов.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
1. http://gcwatches.com
2. adspur.com
3. medienformer.de
