website on wordpress. html/css/javascript
Post on 23-Feb-2017
127 Views
Preview:
TRANSCRIPT
Сайт на Wordpress
HTML/CSS/JS
Тематика та вимоги Тема мого сайту: сайт-візитка для українського виробника взуття «КРОК»
Вимоги:
CMS – WordPress
Адаптивна версія сайту
Функція пошуку по словах
Можливість надсилання
листа з сайту
(тестова версія сайту)
Кілька слів про WordPress…
WordPress — це проста у встановленні та використанні
система керування вмістом з відкритим кодом, яка широко
використовується для створення веб-сайтів.
Сфера застосування — від блогів до складних веб-сайтів.
Вбудована система тем і плаґінів в поєднанні з вдалою
архітектурою дозволяє конструювати на основі WordPress
практично будь-які веб-проекти.
Написана на мові програмування PHP з використанням бази
даних MySQL. Сирцевий код поширюється на умовах
ліцензії GNU General Public License.
На сайті використовується тема BrickYard
Встановлені плагіни для
покращення роботи
Основні з них: - Contact Form 7
- CSS & JavaScript Toolbox
- Shortcodes Ultimate
- Simple Share Buttons Adder
- SyntaxHighlighter Evolved
Основна інформація розміщена
у вигляді сторінок,
а також у віджетах
WordPress дає можливість редагувати обрану тему
на свій смак ( змінювати фонове зображення,
задавати основні кольори теми,
розміщувати віджети та меню)
В редакторі можна змінювати код кожної
сторінки та описувати всі CSS-файли
«Медіа бібліотека» - місце, де можна завантажувати зображення, відео та
файли різноманітного розширення
Демонстрація
основних функцій сайту
ПОШУК На сайті присутня стаття, яка містить слово «КРОК»
У вікно пошуку вводимо слово «крок»
та натискаємо «Enter”
Отримуємо результат
Надсилання листа Контактну форму створюємо
за допомогою плагіна Contact Form 7
Задаємо її форму
та шаблон.
Вводимо повідомлення для користувача,
які допомагатимуть йому у певних ситуаціях
Вставляємо shortcode на сторінку «Надсилання листа»
Заповнюємо контактну форму
Підтвердження надсилання
Повідомлення збереглося в
папці userdata/temp/email,
оскільки сайт знаходиться
на локальному сервері
JavaScript На сайт добавлено декілька тестових елементів на JS, які в подальшому
будуть видозмінюватися під основну тематику сайту
Щоб ефективно працювати з CSS та JS файлами, на CMS встановлений
плагін CSS & Javascript Toolbox
Слайд-шоу Елемент на JS. Без оновлення сторінки змінює зображення в певній області.
JS-код елемента:
Інші тестові JS елементи Клікнувши мишкою, зображення рухається праворуч
JS – код:
Анімація зображення
Клікнувши мишкою на зображенні, м’яч летить вниз
та кілька разів відбивається від поверхні
JS код:
Анімований текст
В текстовому вікні можемо ввести довільний текст та, натиснувши кнопку «Запустити
анімований друк», побачити як він буде друкуватись.
JS-код:
ДЯКУЮ ЗА УВАГУ !
top related