website on wordpress. html/css/javascript

18
Сайт на Wordpress HTML/CSS/JS

Upload: ivan-bilinskiy

Post on 23-Feb-2017

132 views

Category:

Science


9 download

TRANSCRIPT

Page 1: Website on WordPress. HTML/CSS/JavaScript

Сайт на Wordpress

HTML/CSS/JS

Page 2: Website on WordPress. HTML/CSS/JavaScript

Тематика та вимоги Тема мого сайту: сайт-візитка для українського виробника взуття «КРОК»

Вимоги:

CMS – WordPress

Адаптивна версія сайту

Функція пошуку по словах

Можливість надсилання

листа з сайту

(тестова версія сайту)

Page 3: Website on WordPress. HTML/CSS/JavaScript

Кілька слів про WordPress…

WordPress — це проста у встановленні та використанні

система керування вмістом з відкритим кодом, яка широко

використовується для створення веб-сайтів.

Сфера застосування — від блогів до складних веб-сайтів.

Вбудована система тем і плаґінів в поєднанні з вдалою

архітектурою дозволяє конструювати на основі WordPress

практично будь-які веб-проекти.

Написана на мові програмування PHP з використанням бази

даних MySQL. Сирцевий код поширюється на умовах

ліцензії GNU General Public License.

Page 4: Website on WordPress. HTML/CSS/JavaScript

На сайті використовується тема BrickYard

Встановлені плагіни для

покращення роботи

Основні з них: - Contact Form 7

- CSS & JavaScript Toolbox

- Shortcodes Ultimate

- Simple Share Buttons Adder

- SyntaxHighlighter Evolved

Page 5: Website on WordPress. HTML/CSS/JavaScript

Основна інформація розміщена

у вигляді сторінок,

а також у віджетах

Page 6: Website on WordPress. HTML/CSS/JavaScript

WordPress дає можливість редагувати обрану тему

на свій смак ( змінювати фонове зображення,

задавати основні кольори теми,

розміщувати віджети та меню)

В редакторі можна змінювати код кожної

сторінки та описувати всі CSS-файли

Page 7: Website on WordPress. HTML/CSS/JavaScript

«Медіа бібліотека» - місце, де можна завантажувати зображення, відео та

файли різноманітного розширення

Page 8: Website on WordPress. HTML/CSS/JavaScript

Демонстрація

основних функцій сайту

Page 9: Website on WordPress. HTML/CSS/JavaScript

ПОШУК На сайті присутня стаття, яка містить слово «КРОК»

У вікно пошуку вводимо слово «крок»

та натискаємо «Enter”

Отримуємо результат

Page 10: Website on WordPress. HTML/CSS/JavaScript

Надсилання листа Контактну форму створюємо

за допомогою плагіна Contact Form 7

Задаємо її форму

та шаблон.

Page 11: Website on WordPress. HTML/CSS/JavaScript

Вводимо повідомлення для користувача,

які допомагатимуть йому у певних ситуаціях

Вставляємо shortcode на сторінку «Надсилання листа»

Page 12: Website on WordPress. HTML/CSS/JavaScript

Заповнюємо контактну форму

Підтвердження надсилання

Повідомлення збереглося в

папці userdata/temp/email,

оскільки сайт знаходиться

на локальному сервері

Page 13: Website on WordPress. HTML/CSS/JavaScript

JavaScript На сайт добавлено декілька тестових елементів на JS, які в подальшому

будуть видозмінюватися під основну тематику сайту

Щоб ефективно працювати з CSS та JS файлами, на CMS встановлений

плагін CSS & Javascript Toolbox

Page 14: Website on WordPress. HTML/CSS/JavaScript

Слайд-шоу Елемент на JS. Без оновлення сторінки змінює зображення в певній області.

JS-код елемента:

Page 15: Website on WordPress. HTML/CSS/JavaScript

Інші тестові JS елементи Клікнувши мишкою, зображення рухається праворуч

JS – код:

Page 16: Website on WordPress. HTML/CSS/JavaScript

Анімація зображення

Клікнувши мишкою на зображенні, м’яч летить вниз

та кілька разів відбивається від поверхні

JS код:

Page 17: Website on WordPress. HTML/CSS/JavaScript

Анімований текст

В текстовому вікні можемо ввести довільний текст та, натиснувши кнопку «Запустити

анімований друк», побачити як він буде друкуватись.

JS-код:

Page 18: Website on WordPress. HTML/CSS/JavaScript

ДЯКУЮ ЗА УВАГУ !