Привет! Данная статья является второй частью статьи Создание презентаций на 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. Он является очень простым и здесь сможет разобраться даже ребенок. А для тех кому непонятно — я записал видео, поэтому смотрите и разбирайтесь. Появятся вопросы — пишите в комментариях к статье! 🙂
Успехов!
С Уважением, Юрий Немец