Створення презентацій на html. Частина 2 - для початківців

Вітання! Дана стаття є другою частиною статті Створення презентацій на HTML. Справа в тому, що в минулій статті для того щоб створити презентацію необхідно було розбиратися в HTML. У цій статті я розповім як створити таку ж презентацію, але при цьому не знаючи тегів HTML. Цей спосіб може бути дійсно заміною (хоч і не в повній мірі) програмі PowerPoint.

Важливим плюсом є те, що ці презентації можна розміщувати в онлайні.

Я створив невелику презентацію в якості прикладу:

Дивіться приклад

Минула частина статті більше підходила для людей, які знають і розбираються в технології HTML (хоча б знає базові теги). Тому я знайшов спосіб для тих, кому не хочеться розбиратися в коді і тих, хто не знає HTML.

Використання сервісу Slides.com

Як тільки зайдете на сервіс, ви побачите наступну сторінку:

Де натискаємо на велику зелену кнопку з текстом «Get started». Далі потрапляємо на станицю з вибором тарифу. Нам досить безкоштовного тарифу, який знаходиться на самому початку:

Потрапляємо на сторінку з реєстрацією, де у вас є вибір: або увійти за допомогою Google або Facebook, або зареєструватися заново:

Після чого натискаємо кнопку з текстом «Create a deck», щоб створити нову презентацію:

Далі ми потрапляємо в редактор, де ми можемо створювати презентації:

Функції онлайн-редактора презентацій. ліва панель

Почнемо ми знайомство з цим сервісом з лівої панелі. Ця панель включає себе найбільше функцій і несе в собі основні настройки всієї презентації. Якщо хтось не зрозумів де вона знаходиться, додаю скріншот:

Почнемо зверху і рухатимемося вниз.

У самому верху є дві кнопки: одна спочатку сіра , а друга зелене . Отож перша відповідає за збереження змін при створенні презентації, а друга - попередній перегляд презентації.

Я буду розглядати функції, які доступні у безкоштовній версії. Тому переходимо до пункту .

Коли ви натиснете на цей пункт - висунеться наступний блок зліва:

Тут є такі поля:

• У блоці «Title» задається ім`я вашої презентації. А нижче йде поле в якому в кінці ви задається адреса, по якому буде доступна ваша презентація в онлайні.
• Далі йде блок «Description», де пишемо опис презентації.
• Трохи нижче ми бачимо 4 чек-боксу, кожен з яких може бути вибраний. Один по одному про кожного: «Lool presentation» - презентація після завершення буде починатися спочатку, «right; to-left» - контент всередині слайда розтягується на весь слайд, «Comments» - дозволяє додавати коментарі до слайду, «Forking» - дозволяє клонувати ( копіювати) вашу презентацію будь-якому користувачеві в свій аккаунт на цьому сервісі.
• І останній пункт це «Auto-slide», і в випадаючому списку можна вибрати час. Тобто через цей час слайди будуть змінюватися автоматично.

---

наступний пункт . При його відкритті з`являється наступний блок:

На початку є дві чек-боксу: «Vertical centering" (вертикальне центрування, але його можна побачити тільки в готової презентації) і «Rolling links» (додавання 3D ефекту при наведенні на посилання).

Далі йдуть блоки, в яких ви можете вибрати (по порядку):

• «Color» - колір фону слайдів (деякі доступні тільки в платній версії).
• «Typography» - шрифт тексту на слайдах.
• «Transition» - види переходів самих слайдів.
• «Background Transition» - види фонових переходів.

---

Наступним йде пункт . Натискаючи на неї ви можете побачити все слайди, які є у вашій презентації. За допомогою даної можливості можна швидко перейти в потрібного слайду.

---

пункт здійснює експорт презентації. Коли ви натиснете на цей пункт розкриється наступне вікно:

Щоб презентацію скачати собі на комп`ютер потрібно натиснути на кнопочку "Download" (вона поруч з посиланням Reveal.js) і завантажити цей архів. Потім розпакувати цей архів і відкрити для редагування файл index.html. Перейти в цей сервіс і скопіювати код, який з`явився в віконці як на скріншоті вище. Перейти в файл index.html, знайти блок з класом «Slides» і на його місце вставити скопійований код. АЛЕ! Якщо ви щось не зрозуміли, тоді подивіться відео, де я покроково створюю презентацію і розміщую її у себе на комп`ютер.

---

А пункт дозволяє імпортувати готові слайди в свою презентацію.

---

Далі йде пункт , де розміщується посилання на презентацію в онлайні та код вставки презентації на свій сайт. Ось як виглядає це вікно:

У блоці «Link» знаходиться посилання на сторінку з презентацією в онлайні. Нижче, в блок «Embed», ви можете виставити потрібні вам ширину і висоту, а також вибрати темний або світлий стиль. Потім скопіювати код, згенерований нижче, і вставляєте в потрібне місце вашого сайту.

---

Залишилися два пункти: і . Перший пункт дозволяє приховувати ліву панель, якщо вона не використовується, а другий - автосохранение (якщо цей пункт не обраний, тоді вам доведеться самостійно натискати на кнопку зліва вгорі).

Функції онлайн-редактора презентацій. Верхня панель

Зараз переходимо до верхньої панелі, в якій дії застосовуються саме до елементів слайда.

Тут кнопки і їх функції дуже на схожі ті, які використовуються, приміром, в програмі MS Office Word.

Почнемо по порядку:

• - скасування дії.
• - виділення жирним.
• - виділення курсивом.
• - Нижнє підкреслення.
• - вирівнювання тексту.
• - вставка маркованого списку.
• - вставка нумерованого списку.
• - виділення заголовків.
• - вибір розміру тексту.
• - дана кнопочка дозволяє прибрати будь-яке форматування, яке застосоване до тексту.
• - Змінити колір тексту.
• - зміна кольору фону тексту.
• - створення заслання.
• - видалення посилання.
• - додавання зображення.

Функції онлайн-редактора презентацій. права панель

Зараз переходимо до правій панелі, в якій дії застосовуються саме до елементів слайда.

Які функції виконує кожен з них:

• - дозволяє вибрати колір фону слайда.
• - вставка фонового зображення на слайд.
• - послідовне поява елементів на сторінці (щоб зрозуміти як це виглядає - дивіться відео).
• - позиціонування елементів на слайді.
• - вихідний код слайда. Тут також можна додавати зображення, текст і і використовувати будь-які HTML теги.
• - дозволяє додавати позначки до слайду. (Для чого потрібні позначки - дивіться відео)

Функції онлайн-редактора презентацій. Центральна область

У центральній області знаходиться вміст слайда. Зліва і знизу є такі значки , які дозволяють додавати нові слайди. Слайд додається в тій стороні, де був натиснутий цей значок.

Функції онлайн-редактора презентацій. Відео

Тут я описав усі можливості цього онлайн-сервісу. А зараз у відео покажу як створити презентацію:

висновок

Даний спосіб є дуже простим у створенні презентації на HTML. Він є дуже простим і тут зможе розібратися навіть дитина. А для тих кому не зрозуміло - я записав відео тому дивіться та розбирайтеся. З`являться питання - пишіть в коментарях до статті! # 128578;

Успіхів!

З повагою, Юрій Німець