×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

    По существу, она представляет вводную часть сборника статей по столь интересной и полезной теме. И в общих чертах поясняет некоторые особенности создаваемого сайта.

    И надеюсь, что данный материал поможет многим желающим создать с нуля самописный сайт, который в дальнейшем можно будет самостоятельно поддерживать и развивать.

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Устанавливаем слайдер изображений


Автор: / Дата:

Устанавливаем на сайт слайдер изображений

Здравствуйте уважаемый посетитель!

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

Содержание


  • Скачивание слайдера
  • Создание и скачивание сопутствующих файлов
  • Подключение файлов к HTML-страницам
  • Размещение слайдера на сайте
  • Настройка работы слайдера
  • Исходные файлы сайта

Скачивание слайдера


В сети имеется много вариантов слайдеров, которые можно установить на различные виды сайтов, основанных как на готовых CMS, так и в самописном исполнении.

Целью данной статьи является конкретная установка, поэтому сейчас мы не будем заниматься сравнительным анализом всех существующих слайдеров (эта тема довольна обширна и требует отдельного рассмотрения), а остановимся на одном из возможных вариантов. Как выглядит этот слайдер, можно увидеть здесь на сайте, где показываются анонсы бесплатных видеокурсов.

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

С подробной информацией по FlexSlider можно ознакомиться на официальном сайте по адресу "https://woocommerce.com/flexslider/", где можно его скачать, посмотреть демо и найти к нему всю необходимую документацию.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Устанавливаем на сайт слайдер изображений, картинка 1

Рис.1

Скаченные файлы распакуем во временной, специально созданной новой папке. Это обусловлено тем, что отсюда в дальнейшем будем брать не всё, а только то, что будет необходимо для работы FlexSlider.

Но перед тем, как их размещать, создадим сначала в корневом каталоге сайта новую папку под названием js. Дело в том, что в слайдере используются скрипты, написанные на языке JavaScript. Поэтому все файлы с расширением js будем помещать именно в эту папку.

Кроме того, для размещения всех графических элементов (включая сами картинки) создадим в каталоге сайта images новую папку slide_images.

Как было выше отмечено, мы будем использовать только часть скаченных файлов, и размещать будем их в следующем порядке:

  • jquery.flexslider.js, являющийся основным файлом слайдера, копируем в ранее созданную папку js.
  • flexslider.css, копируем в папку стилей styles, находящуюся в корневом каталоге сайта. Этот файл необходим для обеспечения корректного внешнего вида.
  • Папку fonts со шрифтами копируем также же в папку styles.
  • Файл с графическими элементами кнопок управления bg_play_pause.png копируем в ранее созданную папку slide_images.

На этом закончим размещение слайдера и займемся другими файлами, необходимыми для его работы.

Создание и скачивание сопутствующих файлов


Для нормальной работы FlexSlider необходимо также скачать еще два файла:

  • Библиотеку jQuery, которую можно скачать на официальном сайте "http://jquery.com/". При этом, лучше загружать ее в сжатом виде, при котором она имеет значительно меньший объем по сравнению с обычным вариантом. Так у сжатого файла jquery-3.1.1.min.js объем 84 кбайт, а у jquery-3.1.1.js - 260 кбайт. На следующем скриншоте показан фрагмент страницы сайта с указанием ссылки на скачивание библиотеки.
  • Для увеличения / уменьшения размера изображения кликните по картинке
    Устанавливаем на сайт слайдер изображений, картинка 2

    Рис.2

  • Второй необходимый файл - плагин jquery_easing также можно скачать с официального сайта по адресу "http://plugins.jquery.com/jquery.easing/". Он необходим для обеспечения соответствующей анимации смены картинок слайдера. В этом случае можно воспользоваться и не в сжатым виде jquery.easing.1.3.js, так как размер его совсем небольшой и какого-либо существенного отличия в объеме по сравнению со сжатым вариантом нет.

После скачивания этих файлов разместить их нужно в ранее созданной папке js.

Теперь осталось только создать последний файл, в котором в дальнейшем будем писать скрипт на языке JavaScript. Данный скрипт будет вызывать Fexslider на отработку и определять режимы его работы. Назовем данный файл, скажем, flexslider_script.js, что будет подразумевать файл скрипта для слайдера.

Создание этого файла выполняется аналогично тому, как это выполнялось ранее, например, при создании index.html. При необходимости, можно вернуться к статье Создаем веб-страницу и размещаем ее на локальном веб-сервере.

Отличие состоит только в том, что в этом случае при сохранении файла обязательно нужно указать расширение js и поместить в соответствующую папку js.

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

Подключение файлов к HTML-страницам


Следующим шагом будет подключение размещенных файлов к HTML-страницам. Это делается в заголовке <head>, аналогично тому, как мы ранее подключали внешнюю таблицу стилей CSS.

Ниже показаны соответствующие дополнения на странице index.php, которые нужно также сделать и во всех остальных страницах.

  1. <head>

  2. <meta charset="utf-8">

  3. <title>Главная</title>

  4. <meta name="Description" content="Краткое описание содержания страницы">

  5. <link rel="stylesheet" type="text/css" href="/styles/main.css">

  6. <link rel="stylesheet" type="text/css" href="/styles/flexslider.css">

  7. <script src="/js/jquery-3.1.1.min.js" </script>

  8. <script src="/js/jquery.easing.1.3.js" </script>

  9. <script src="/js/jquery.flexslider.js" </script>

  10. <script src="/js/flexslider_script.js" </script>

  11. </head>

Рис.3

Таким образом, к ранее подключенному файлу main.css добавлено еще пять, а именно:

  • файл стилей слайдера flexslider.css;
  • библиотека jQuery jquery-3.1.1.min.js;
  • плагин jquery_easing;
  • основной файл слайдера jquery.flexslider.js;
  • скрипт слайдера flexslider_script.js.

И теперь можно перейти к непосредственному размещению слайдера на сайт.

Размещение слайдера на сайте


Естественно, чтобы Fexslider смог нормально функционировать, ему необходимы сами слайды, т.е. картинки изображений которые будут поочередно появляться на его экране.

Каким образом можно получить картинки подробно рассматривалось в статье Делаем эскиз и готовим картинки для дизайн-макета.

Здесь нужно лишь добавить, что для того, что эти картинки не воспринимались поисковыми системами, как копии с других сайтов, следует их обработать с помощью графического редактора. Как вариант, можно обрезать лишние фрагменты и сохранить их сжав до определенной величины в формате jpg.

В любом случае, перед тем, как размещать картинки на сайте необходимо сделать проверку их на уникальность. Это можно сделать, использовав, например, программу "Etxt Антиплагиат".

Это довольно удобный инструмент, которым можно проверять на уникальность все документы, как изображения, так и тексты. Также здесь можно искать сайты недобросовестных владельцев, которые занимаются воровством авторских статей с наших сайтов. Что довольно актуально в наше время.

Скачать программу можно на официальном сайтеeTXT.RU. Там же можно воспользоваться и On-line проверкой.

скриншот 26

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

Для увеличения / уменьшения размера изображения кликните по картинке
Устанавливаем на сайт слайдер изображений, картинка 3

Рис.4

Далее перейдем к размещению самого Fexslider.

Ранее при формировании сайта было предусмотрено для слайдера место в блоке ротатора, который при создании динамических страниц был выделен в отдельный файл с именем section.php. Поэтому слайдер мы будем вставлять в этот блок вместо картинки, которая временно его заменяла.

Для этого создадим блок <div> с классом flexslider, в котором и будем размещать его слайды. При этом они будут располагаться по порядку в маркированном списке <ul>

В итоге, HTML-код получился довольно простой, состоящий из однотипных блоков. Ниже показано, как теперь будет выглядеть блок ротатора с соответствующими дополнениями с десятью слайдами.

  1. <section>

  2. <div class="rtr-block1">

  3. <div class="rtr-screen">

  4. <div class="flexslider" id="brd-slider">

  5. <ul class="slides">

  6. <li>

  7. <img src="images/slide_images/slide_1.jpg" alt="Маркировка автомобиля, картинка 1"/>

  8. </li>

  9. <li>

  10. <img src="images/slide_images/slide_2.jpg" alt="Маркировка автомобиля, картинка 2"/>

  11. </li>

  12. ···

  13. <li>

  14. <img src="images/slide_images/slide_9.jpg" alt="Маркировка автомобиля, картинка 9"/>

  15. </li>

  16. <li>

  17. <img src="images/slide_images/slide_10.jpg" alt="Маркировка автомобиля, картинка 10"/>

  18. </li>

  19. </ul>

  20. </div>

  21. </div>

  22. </div>

  23. <div class="rtr-block2">

  24. <div class="rtr-text">

  25. <Η2>Хотите защитить автомобиль от угона?</Η2>

  26. <p class="hdr-p1">Не многие знают, что самый простой и эффективный способ ... -</p>

  27. </div>

  28. </div>

  29. </section>

Рис.5

Здесь следует отметить, что в строке 4 в блоке <div> с классом flexslider добавлен атрибут id со значением brd-slider. Это необходимо для того, чтобы с помощью стилей CSS добавить с экрану слайдера бордюры, подобно тому, как это было на временной картинке.

Это можно сделать и в таблице CSS самого слайдера flexslider.css. Но мы не будем вносить в него никакие изменения, а добавим необходимые для этого стили в общей таблице main.css.

Ниже представлен фрагмент main.css со всеми дополнениями, касающимися слайдера.

  1. .rtr-screen {

  2. margin:6.89% 6.89% 6.89% 6.89%;

  3. }

  4. #brd-slider {

  5. border-top:6px solid #888;

  6. border-left:6px solid #888;

  7. border-bottom:6px solid #fff;

  8. border-right:6px solid #fff;

  9. }

  10. .slides img {

  11. width:100%;

  12. border-radius:4px;

  13. }

Рис.6

Как видно, дополнения в таблице стилей оказались совсем небольшие. На этом размещения слайдера закончено и можно переходить к его настройкам.

Настройка работы слайдера


Для настройка слайдера необходимо в первую очередь в файле flexslider_script.js написать код для работы с библиотекой jQuery.

При помощи этой библиотеки мы будем обращаться к элементу document, описывающему функции, которые будем использовать при работе со слайдером.

Вообще в сети имеется достаточно много справочной литературы, как непосредственно по языку JavaScript, так и по библиотеке jQuery. Например, на сайте jQuery.page2page.ru можно найти довольно полное и подробное описание всех основных функций библиотеки jQuery. Это только один пример из достаточно большого количества вариантов. Поэтому при желании можно ознакомиться с этими языками, хотя бы на минимальном уровне, который позволит в общих чертах ориентироваться в содержании их кодов.

Ниже показан код для работы с библиотекой jQuery, где можно увидеть включённый метод ready, обеспечивающий выполнение функций только после загрузки всей HTML-страницы. Это необходимо для корректной работы слайдера, чтобы избежать случаев запуска его при еще не загруженной до конца страницы.

  1. $(document).ready(function() {

  2. });

Рис.7

Теперь мы можем написать функцию вызова обработки слайдера. Делается это с использованием выражения, с помощью которого в начале находится элемент с классом flexslider, а затем вызывается метод flexslider, что будет соответствовать запуску слайдера. Этот код будет выглядеть следующим образом:

  1. $(document).ready(function() {

  2. $('.flexslider').flexslider();

  3. });

Рис.8

Если сейчас обновить браузер, то можно увидеть работу слайдера с настройками по умолчанию. В этом случае замена картинок будет происходить с плавным изменением прозрачности.

С помощью настроек скрипта flexslider_script.js можно устанавливать различные режимы слайдера. Например, сделать смену картинок их прокручиванием сверху в низ.

Ниже показан код скрипта с такими настройками. Здесь также можно увидеть и другие настройки (включая закомментированные) с пояснениями их назначений.

  1. $(document).ready(function() {

  2. $('.flexslider').flexslider({

  3. slideshow: true, //Автоматический запуск слайдера

  4. animation: "slide", //Тип анимации: "slide" или "fade"

  5. direction: "vertical", //Направление прокрутки слайдера

  6. reverse: false, //Реверс направления анимации

  7. slideshowSpeed: 4000, //Время смены кадров (миллисекунды)

  8. animationSpeed: 1500, //Скорость анимации (миллисекунды)

  9. pauseOnHover: true, //Остановка слайдера при наведении мышки на экран

  10. directionNav: true, //Использование кнопок вперед/назад

  11. //initDelay: 3000, //Задержка запуска слайдера

  12. //randomize: false, //Показ в случайном порядке

  13. //pauseOnAction: true, //Остановка при наведении на элементы управления

  14. //controlNav: false, //Отключение кнопок навигации

  15. //pausePlay: true, //Отключение кнопки play/pause

  16. //playText: "Play", //Текст для кнопки Play

  17. //pauseText: "Pause", //Текст для кнопки Pause

  18. });

  19. });

Рис.9

Таким образом, используя данные настройки можно использовать слайдер в различных режимах работы. Как отмечалось ранее, здесь приведена только часть настроек. Поэтому, если кому этого будет недостаточно, то остальные варианты можно посмотреть в документации, размещенной на официальном сайте.

На этом можно закончить установку слайдера. Как выглядит его работа при настройках, которые были здесь сделаны, можно посмотреть на сайте "avtobezugona.ru" по приведенной ниже ссылке.

В следующей статье займемся вопросом создания фавикона, что позволит приобрести нашему сайту еще большую индивидуальность.

Исходные файлы сайта


Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов.

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments