Створення презентацій на html

Все ще створюєте презентації в PowerPoint? Хочу показати вам альтернативний і більш цікавий спосіб створення презентацій за допомогою бібліотеки javascript. За допомогою даної бібліотеки ви можете створювати дуже незвичайні презентації HTML, вибирати вподобані ефекти переходу, вибирати тему оформлення з уже наявних (їх всього 8), збільшувати будь-який елемент презентації, вставляти «вертикальні» (слайди між лівим і правим слайдом) слайди, фонові переходи , а також багато іншого. За все не розповісти, тому переходите в повну новину і дивіться приклад моєї презентації.

Відео: Створення інтерактивної HTML презентації. Логіка.Ч3

Приклад презентації знаходиться нижче (також її можна завантажити і почати змінювати під себе):

дивитися прімерСкачать

Створення презентацій на HTML буде здійснюватися за допомогою додаткової бібліотеки, яка називається Reveal.js. У цій статті ми розглянемо лише основні можливості цієї бібліотеки, які дозволяють і без того створювати приголомшливі презентації.

Для початку роботи нам необхідно завантажити всі необхідні бібліотеки і стилі - звідси. Архів складається з наступних папок:

css - папка з усіма необхідними стилями.
js - повна і зменшена версія плагіна Reveal.js.
plugin - додаткові бібліотеки, які відповідають за підсвічування синтаксису, збільшення елемента і інші.
lib - додаткові css, js, шрифти.

Зараз ми можемо підключити необхідні стилі і плагіни до нашої презентації. між тегами підключіть вподобану тему оформлення (default, sky, beige, simple, serif, night, moon та solarized.). Який стиль як виглядає ви можете побачити у вигляді мініатюр нижча:

Тобто, коли ви хочете підключити тему оформлення «Sky», необхідно прописати наступне:

Відео: Створення презентацій в програмі ProShow Producer. Майстер

12	lt;link rel="Stylesheet" href="Css / reveal.min.css"gt;lt;link rel="Stylesheet" href="Css / theme / sky.css" id="Theme"gt;

Перед закриває тегом необхідно вставити наступний код:

12	lt;script src="Lib / js / head.min.js"gt; lt;/scriptgt;lt;script src="Js / reveal.min.js"gt; lt;/scriptgt;

HTML розмітка

У статті я розповім про три основні типи слайдів, але ви можете брати презентацію і переробляти під себе з вже готових. Для того щоб вставити новий слайд, в HTML необхідно додати такий код:

123456789

lt;div class="Reveal"gt;lt;div class="Slides"gt;lt;h1gt; Темаlt;/h1gt;lt;h3gt; Підзаголовокlt;/h3gt;lt;pgt; Описlt;/pgt;lt;/sectiongt;lt;/divgt;lt;/divgt;

Зараз у нас є один слайд. Кожен слайд це окремий блок. Усередині слайда можна використовувати звичайні HTML теги для розміщення і позиціонування елементів.

Зараз розглянемо «вертикальні» слайди. «Горизонтальні» слайди ви можете переглядати натискуючи стрілочки «вліво» і «вправо», а вертикальні - «вниз» і «вгору». Щоб вставити кілька таких слайдів потрібно двічі написати тег як на прикладі нижче:

Вертикальний слайд 1lt;/sectiongt; Вертикальний слайд 2lt;/sectiongt; Вертикальний слайд 3lt;/sectiongt; Вертикальний слайд 4lt;/sectiongt;lt;/sectiongt;

Йдемо далі. Зараз розглянемо як створити поява елементів на цій сторінці - подивитися.

Для цього необхідно скористатися атрибутом class = "fragment» як на прикладі нижче:

123456789

id="Fragments"gt;lt;h2gt; Поелементне появаlt;/h2gt;lt;pgt; Натисніть стрілочку "Далі", щоб побачити наступний елемент!lt;/pgt;lt;p class="Fragment"gt; Текст 1lt;/pgt;lt;p class="Fragment"gt; Текст 2lt;/pgt;lt;p class="Fragment"gt; Текст 3lt;/pgt;lt;/sectiongt;lt;/sectiongt;

Далі розглянемо оформлення цитат. Приклад ви бачите на зображенні:

Для такого відображення в HTML пишемо:

1234567891011

lt;h2gt; Оформлення цитатlt;/h2gt;lt;pgt; Наприклад, текст з мого уроку: lt;q cite="Http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"gt;ldquo-Сьогодні ми будемо мати справу зі слайд-шоу ...rdquo-lt;/qgt; або у вигляді блоку:lt;/pgt;lt;blockquote cite="Http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations"gt;ldquo-Наприклад, коли людина дивиться якусь річ в інтернет-магазині, то, як правило, він максимально збільшує зображення, щоб разглядетьтовар, який він хоче придбати. І тільки після цього він здійснює покупку.rdquo-lt;/blockquotegt;lt;/sectiongt;

І останні дію яке потрібно зробити щоб HTML презентація заробила - додаємо такий код також перед закриває тегом:

12345678

lt;scriptgt; Reveal.initialize ({controls: true, progress: true, history: true, center: true}) -lt;/scriptgt;

Це основні настройки, які дозволяють створити найпростішу презентацію.

висновок

Мені цей плагін дуже сподобався, так як він дозволяє створювати прості і в той же час красиві презентації. Також презентацію можна дивитися використовуючи клавіатуру (стрілочки «вліво», «праворуч», «вгору» і «вниз»). Ось плюси і мінуси, які я виділив. Створення презентацій в HTML не так вже й складно!

плюси: