Лого SiteHere.ru

Создание презентаций на HTML. Часть 2 — для начинающих

Создание презентаций на HTML. Часть 2 - для начинающих

Привет! Данная статья является второй частью статьи Создание презентаций на HTML. Дело в том, что в прошлой статье для того чтобы создать презентацию необходимо было разбираться в HTML. В этой статье я расскажу как создать такую же презентацию, но при этом не зная тегов HTML. Этот способ может быть действительно заменой (хоть и не в полной мере) программе PowerPoint.

Важным плюсом является то, что эти презентации можно размещать в онлайне.

Я создал небольшую презентацию в качестве примера:

Смотреть пример

Прошлая часть статьи больше подходила для людей, которые знают и разбираются в технологии HTML (хотя бы знает базовые теги). Поэтому я нашел способ для тех, кому не хочется разбираться в коде и тех, кто не знает HTML.

Использование сервиса Slides.com

Как только зайдете на сервис, вы увидите следующую страницу:

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», вы можете выставить нужные вам ширину и высоту, а также выбрать темный или светлый стиль. Затем скопировать код, сгенерированный ниже, и вставляете в нужное место вашего сайта.


Остались два пункта: Auto-hide и Аuto-save. Первый пункт позволяет скрывать левую панель, если она не используется, а второй — автосохранение (если этот пункт не выбран, тогда вам придется самостоятельно нажимать на кнопку слева вверху).

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

Сейчас переходим к верхней панели, в которой действия применяются именно к элементам слайда.

Вехрняя панель

Здесь кнопки и их функции очень на похожи те, которые используются, например, в программе MS Office Word.

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

  • Отмена действия — отмена действия.
  • Выделение жирным — выделение жирным.
  • Выделение курсивом — выделение курсивом.
  • Подчеркивание — нижнее подчеркивание.
  • Выравнивание — выравнивание текста.
  • Маркированный список — вставка маркированного списка.
  • Нумерованный список — вставка нумерованного списка.
  • Заголовки — выделение заголовков.
  • Размер текста — выбор размера текста.
  • Убрать форматирование — данная кнопочка позволяет убрать любое форматирование, которое применено к тексту.
  • Цвет текста — изменение цвета текста.
  • Цвет фона текста — изменение цвета фона текста.
  • Ссылка — создание ссылки.
  • Удалить ссылку — удаление ссылки.
  • Изображение — добавление изображения.

Функции онлайн-редактора презентаций. Правая панель

Сейчас переходим к правой панели, в которой действия применяются именно к элементам слайда.

Какие функции выполняет каждый из них:

  • Цвет фона — позволяет выбрать цвет фона слайда.
  • Фоновое изображение — вставка фонового изображения на слайд.
  • Элементы — последовательное появление элементов на странице (чтобы понять как это выглядит — смотрите видео).
  • Позиционирование — позиционирование элементов на слайде.
  • Исходный код — исходный код слайда. Здесь также можно добавлять изображения, текст и и использовать любые HTML теги.
  • Пометки — позволяет добавлять пометки к слайду. (для чего нужны пометки — смотрите видео)

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

В центральной области находится содержимое слайда. Слева и снизу есть такие значки Добавление слайда, которые позволяют добавлять новые слайды. Слайд добавляется в той стороне, где был нажат этот значок.

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

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



Вывод

Данный способ является очень простым в создании презентации на HTML. Он является очень простым и здесь сможет разобраться даже ребенок. А для тех кому непонятно — я записал видео, поэтому смотрите и разбирайтесь. Появятся вопросы — пишите в комментариях к статье! 🙂

Успехов!

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

4 комментария к записи
  • Сергей

    А можно ли как то сделать,чтобы такая презентация запускалась офлайн?

     
  • Oleg

    Спасиба! )) Хороший сайт! И сервис классный!

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *