Розділ ііі розробка landing page

3.1 Засоби які використовувались при створенні шаблона

Для того щоб створити сайт потрібно спершу вибрати редактор в якому буде відбуватись створення. В даному випадку було вибрано редактор Sublime. Простий та зручний для верстки сайту (Рис. 3.1).

Рис. 3.1. Текстовий редактор Sublime

Тепер можна перейти до створення самого сайту. Для створення сайту потрібно створити папку, яка буде містити всі файли від шаблону, а саме:

• папку зі стилями (css);

• папку зі шрифтами (fonts);

• папку з картинками (image);

• папку зі скриптами (js)

• папку з бібліотеками (libs)

Для полегшення створення сайту було використано фреймворк Bootstrap. Bootstrap є найпопулярнішим HTML, CSS і JS фреймворком для створення гнучких мобільних проектів в Інтернеті.

Після чого було завантажено bootstrap з офіційного сайту і додано до папки з проектом.

Д алі для компіляції файлів з SASS в CSS використовувався інструмент автоматизації front-end – Gulp. Для установки Gulp потрібно встановити на ПК Node.js (Рис. 3.2).

Рис. 3.2. Node.js

Далі можна перейти до установки gulp. Для того щоб встановити gulp потрібно відкрити командний рядок в папці з проектом та ввести:

• npm install gulp–global

У файлі package.json зображено список встановлених модулей для gulp (Рис. 3.3). Для коректної робити gulp з компіляцією SASS в СSS було налаштовано файл gulpfile.js (Рис. 3.4).

Рис. 3.3. Файл package.json

Рис. 3.4. Файл gulpfile.js

К інцевий вигляд папки з проектом в якому містяться всі потрібні файли та папки для роботи (Рис. 3.5).

Рис. 3.5. Папка з проектом

В Sublime було встановлено плагіни (Рис. 3.6):

1. Gulp – потрібен для компіляції файлів через редактор;

2. Sass – синтаксис, підсвічує код формату sass;

3. Emmet – прискорює написання html і сss;

Рис. 3.6. Плагіни в Sublime

Д ля того, щоб почалась компіляція потрібно в панелі керування (Package control) вибрати gulp і далі вибрати файл запуску default (Рис. 3.7).

Рис. 3.7. Запуск gulp для компіляції файлів та browser‑sync

О сь так виглядає запущений gulp, який компілює файли формату sass в css в текстовому редакторі Sublime (Рис. 3.8).

Рис. 3.8. Gulp в роботі

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

Щоб меню працювало було використано наступний код, який зображено нижче (Рис. 3.9).

Рис. 3.9. Код для меню

Для скролінгу по секціях був використаний скрипт mPageScroll2id, який підключається до проекту. Щоб скрипт почав працювати було використано параметри, які зображено нижче (Рис. 3.10).

Рис. 3.10. Код для mPageScroll2id

Д ля перегляду картинок був використаний скрипт magnific-popup, який підключається до проекту. Щоб скрипт почав працювати потрібно написати код та задати параметри (Рис. 3.11).

Рис. 3.11. Код для скрипта magnific-popup з параметрами

Ефект названий «акордеоном» тому, що принцип його роботи схожий на роботу музичного інструмента – акордеона. Щоб ефект акордеону почав працювати було написано наступний код, який зображено нижче (Рис. 3.12).

Рис. 3.12. Код ефекту акордеона

Головний слайдер сайту створений за допомогою «slick slider». Це багатофункціональний слайдер, який містить безліч налаштувань і кожен може вибрати ті параметри, які йому до вподоби (Рис. 3.13).

Для того, щоб слайдер почав працювати потрібно його завантажити та підключити наступні файли:

• CSS (

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

<link rel="stylesheet" type="text/css" href="css/slick.css">

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

<link rel="stylesheet" type="text/css" href="css/slick-theme.css"> );

• JS-script (<script src="js/slick.min.js"></script>);

П ісля чого потрібно написати код для того, щоб слайдер почав працювати. Нижче зображено рисунок з кодом (Рис. 3.13).

Рис. 3.13. Параметри Slick slider

Н а сайті присутній лічильник, який працює за допомогою наступного коду, який зображу нижче (Рис. 3.14).

Рис. 3.14. Код для лічильника

Отже, в цьому розділі було розглянуто, засоби які використовувались при створенні шаблона за допомогою jQuery бібліотеки та компілятор з sass в сss – gulp.