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

Успехов!

С Уважением, Юрий Немец