Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Постраничная навигация на сайте
Постраничная навигация, называемая в народе пагинацией, в основном, находит применение на ресурсах с большим объемом информации: на порталах, новостных сайтах, варезниках и т.д. Существует множество вариантов пагинации, с использованием php и баз данных, с использованием библиотеки jQuery, а также ajax. Различают плагины, работающие на стороне клиента и на стороне сервера.
Мы рассмотрим простейший пример скрипта с использованием jQuery, работающенго на стороне клиента. Он поможет вам организовать быструю и симпатичную нумерацию страниц.
Будем использовать довольно легкий и по весу, и по установке, скрипт пагинации simplePagination. Скачать исходники можно отсюда, в комплекте идут три темы оформления и орнанизована поддержка Bootstrap.
Установка скрипта мало чем отличается от стандартной: подключаем стили и jquery javascript, затем размещаем небольшой код, запускающий скрипт пагинации.
Шаг 1. Подключение jQuery
Если вы на своем сайте еще не используете JQuery, то на странице между тегами <head> и </head> подключаем jQuery не ниже версии 1.7.2. Сделать это можно двумя способами, используя специальное хранилище Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
или воспользовавшись библиотекой JQuery из скачанного архива с исходниками, предварительно закинув ее на хостинг в папку с вашим сайтом:
<script type="text/javascript" src="путь_к_js/jquery.min.js"></script>
Следующей строкой мы подключаем сам плагин jquery.simplePagination.js:
<script type="text/javascript" src="путь_к_js/jquery.simplePagination.js"></script>
Шаг 2. Подключение CSS
Из трех тем оформления пагинации выбираем более подходящую по дизайну, доступны светлая, темная и компактная темы. Как они выглядят, смотрите на скриншоте ниже.
Затем из исходного файла со стилями выбираете часть кода с нужным вам стилем и вставляете его в файл стилей .css вашего сайта. Если не хотите особо заморачиваться, то просто подключаете исходный файл css такой строкой кода:
<link type="text/css" rel="stylesheet" href="путь_к_css/simplePagination.css"/>
Шаг 3. Код HTML
Осталось вывести панель постраничной навигации на страницах своего сайта. Для этого там, где вы планируете её разместить, прописываете следующий код:
<div id="light-pagination" class="pagination"></div> (светлая тема)
<div id="dark-pagination" class="pagination"></div> (темная тема)
<div id="compact-pagination" class="pagination"></div> (компактная тема)
Шаг 4. Инициализация плагина
Чтобы запустить плагин, нужно всего несколько строчек кода:
$(function() {
$(#light-pagination).pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'light-theme'
});
});
Пример дан для светлой темы #light-pagination, чтобы сменить ее на темную, достаточно изменить селектор на #dark-pagination, для компактной - это #compact-pagination. Не забывайте в таком случае менять и класс в файле со стилями cssStyle.
Для настройки данного скрипта под себя доступны следующие опции:
items — общее количество элементов для расчета страниц пагинации, по умолчанию: 1;
itemsOnPage — количество элементов, отображаемых на каждой странице, по умолчанию: 1;
pages — количество страниц в списке, если указано значение, то вышеназванные опции items и itemsOnPage игнорируются;
displayedPages — количество страниц, отображаемых во время навигации, минимально допустимое значение: 3, по умолчанию: 5;
edges — количество страниц, видных в начале и в конце нумерации,по умолчанию значение: 2;
currentPage — стартовая страница после запуска, по умолчанию значение: 1;
hrefTextPrefix — строка, используемая в атрибуте HREF, добавляется перед номером страницы, по умолчанию: "#page- ";
hrefTextSuffix — строка, используемая в атрибуте HREF, вставляется после номера страницы, по умолчанию пустая строка;
prevText — текст кнопки на предыдущую страницу, по умолчанию: «Prev»;
nextText — текст кнопки на следующую страницы, по умолчанию: «Next»;
cssStyle — определят стиль CSS, по умолчанию: «light-theme»;
selectOnClick — выбор страницы после нажатия, по умолчанию — включен(true).
Кому данных опций недостаточно, тот может почитать о дополнительных функциях и доступных методах применения этого плагина на странице разработчика. Сайт автора скрипта - http://flaviusmatis.github.io/simplePagination.js/
В результате, весь код данного пагинатора, установленного на одной из моих страниц сайта, имеет следующий вид:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="paginator/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="paginator/simplePagination.css"/>
<div id="light-pagination" class="pagination">
<script type='text/javascript'>
$(window).load(function(){
$('#light-pagination').pagination({
items: 100,
itemsOnPage: 10,
hrefTextPrefix: '',
hrefTextSuffix: '.html',
prevText: 'Начало',
nextText: 'Конец',
cssStyle: 'light-theme'
});
});
</script>
Данный скрипт нужно устанавливать на всех страницах, где вы хотите видеть пагинацию. У меня он установлен только на данной странице в качестве наглядного примера. Оценить его работу, можно пройдя по ссылке.
На этом материал завершаю, до новых встреч! С ув.Светлана (SvetLana_TSV)
Для тех, кто еще по какой-то причине не успел скачать коллекцию графики для создания собственной открытки-валентинки, дублирую ссылку. Вы еще успеете!
Не забудь заглянуть в свою почту и подтвердить подписку!