Как сделать презентацию в html

Обновлено: 07.07.2024

Слайдер изображений - это отличный способ отображения различных изображений веб-страницы. Красивые и интересные изображения могут привлечь много посетителей на вашу веб-страницу.

Обычно слайдеры изображений создаются с помощью JavaScript, но с версией CSS3 стало возможно создать слайдеры, используя только CSS3. В этой статье вы научитесь, как можно получить эффект слайд-шоу, сохраняя минимальный код CSS, а во второй части статьи вы узнаете, как создать слайдеры изображений с помощью JavaScript.

Создание слайдеров изображений используя только CSS3

Наверно вы уже видели слайдеры, созданные с помощью JavaScript, которые очень тяжело загружаются. Они замедляют работу веб-страницы, а также могут не работать, если пользователь отключил интерпретацию JavaScript в браузере. Одно из решений этой проблеме - это отказ от их использования, но как же можно создать слайдеры без использования JavaScript? Здесь вы найдете ответ.

Главное преимущество презентаций в формате HTML5 заключается в том, что они могут быть просмотрены на компьютерах и на мобильных устройствах (iPad, iPhone, Android-смартфонах и планшетах). Но для того, чтобы их кто-то мог посмотреть, презентации должны быть загружены в веб и вставлены на сайт или в блог.

Размещение PowerPoint-презентации на сайте происходит в 3 простых шага:

1. Публикация презентации в формат HTML5 и загрузка на сайт

Выберите вкладку Web, введите название презентации, укажите папку публикации и нажмите кнопку Опубликовать.

Публикация презентации в HTML5 с помощью iSpring

2. Загрузка на FTP и получение ссылки

После успешного завершения процесса публикации вы увидите окно, где отобразится готовая презентация. Здесь вы можете загрузить папку с презентацией на сервер по FTP.

Для этого нажмите Загрузить на FTP.

Предварительный просмотр опубликованной презентации

В открывшемся окне введите данные FTP-аккаунта. Презентация сразу же будет загружена на ваш сервер.

Загрузка презентации на FTP в iSpring

Подробнее о настройке аккаунтов FTP читайте в документации.

3. Вставка на страницу

Презентацию можно вставить на страницу несколькими способами:

  • открытие в отдельном окне;
  • открытие во всплывающем окне;
  • воспроизведение в iframe.

а) Воспроизведение в отдельном окне

Это самый простой способ. Просто разместите в тексте страницы сайта ссылку на презентацию с помощью визуального редактора или в режиме редактирования HTML-кода страницы. Во втором случае вам необходимо разместить подобный код:

Вы можете выбрать, в каком окне браузера открывать ссылку — в том же (target=”_self”) или в новом (target=”_blank”).

б) Открытие HTML5-презентации во всплывающем окне

Если вы хотите открыть презентацию во всплывающем окне, удостоверьтесь, что редактор страниц на вашем сайте поддерживает вставку JavaScript-кода.

Используйте следующий код для создания всплывающего окна:

Если вы хотите, чтобы презентация открывалась во всплывающем окне при загрузке какой-либо страницы, добавьте в исходный код страницы строки:

Пользуйтесь этим вариантом с осторожностью: большинство браузеров блокируют всплывающие окна.

в) Вставка презентации в iframe

HTML-тэг IFRAME позволяет показывать содержимое одной страницы внутри другой.

Вы говорите, нормальные презентации можно делать только в PowerPoint? Стоит подумать еще раз. Большинство наших знакомых ворочают нос, как только слышат Powerpoint. Вы ведь не хотите, чтобы ваши клиенты тоже ворочали носом? Если вы хотите провести презентацию, используя Android или iPad, вам даже понадобятся дополнительные инструменты, чтобы ваша презентация запустилась и нормально прошла. Так как мы веб-разработчики, почему бы не использовать отличную JS-платформу Reveal.js? Reveal.js позволяет вам создавать презентации точно так же, как веб-сайт, и всё, что вам останется сделать, так это провести презентацию при помощи браузера.

Презентации с Reveal.js и HTML5 – Лучше, чем Powerpoint


Reveal.js: демонстрационная презентация

Reveal.js состоит из одного javascript-файла и двух таблиц стилей. Первый стиль отвечает за основное оформление, а второй содержит в себе разметку стандартного шаблона, от которого вы можете отступать. Этот шаблон определяет внешний вид важных частей ваших презентаций: текст, изображения, ссылки. Шаблоны в Reveal.js можно без труда оформить под себя, так как таблицы стилей очень хорошо организованы. Переходы между слайдами, если вы захотите воспользоваться этим свойством, организуются посредством CSS 3D transitions.

Разметка слайдов на HTML5

Разметка слайдов презентации реализована при помощи HTML5-элементов типа SECTION. Поверх этих секций у нас есть 2 контейнера, сообщающие платформе, где должна начинаться часть презентации в HTML-документе:

Внутри каждой секции позволено использовать произвольный контент. Вы перемещаетесь при помощи клавиш стрелок. Вы можете даже вложить одну секцию в другую. Таким образом, вы можете дальше развивать вашу презентацию. Используя клавиши стрелок влево и вправо, вы можете перемещаться по секциям первого уровня. Дойдя до вложенной секции, вы можете использовать клавиши стрелок вниз и вверх, - они позволяют вам переместиться к секциям второго уровня:

Клавиша ESC переносит вас в индекс всех слайдов, где вы можете выбрать каждый слайд по-отдельности.

Презентации с Reveal.js и HTML5 – Лучше, чем Powerpoint


Индекс слайдов демонстрационной презентации

Reveal.js: возможности расширенной навигации

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

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

Reveal.js: возможность использовать Markdown

Это как раз для меня. Вместо использования HTML для стилизации контента слайдов, вы также можете использовать синтаксис Markdown. Данное руководство было написано на Markdown. Reveal.js просто превращает Markdown в HTML. Преимущество: контент на Markdown писать гораздо проще, так как вам не нужно будет искать контент среди открытых и закрытых тэгов.

Reveal.js – это сильная платформа для создания браузерных презентаций высокого уровня. Совместив её с javascript-API Fullscreen, вы сможете получить нечто большее, чем Powerpoint.

Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Как вставить на сайт презентацию

Есть разные способы вставки презентаций на сайт или блог. Многие пользовались сервисом SlideShare , но он сейчас не работает. Еще есть возможность создать презентацию в PowerPoint, затем конвертировать ее в формат PDF , и после этого в формате PDF вставить на сайт . Но это долгий путь. Намного проще воспользоваться Google Диском и редактором документов от Google.



Как видите, при таком способе, презентация отображается как идущие подряд слайды с полосой прокрутки справа. Вся анимация теряется.


Чтобы встроить презентацию PowerPoint в формате .pptx таким способом ( этим способом можно встраивать и другие документы, созданные или загруженные на Google Диске ), необходимо:





4) И затем, чтобы открыть доступ к документу, отметьте ВКЛ (для всех в Интернете). И нажмите кнопку Сохранить.


5) При необходимости, измените Настройки владельца, где можно запретить редакторам добавлять пользователей и изменять настройки доступа, а также запретить комментаторам и читателям скачивать, печатать и копировать файлы.


6) Снова нажимаем на 3 точки в верхнем правом углу при просмотре презентации в браузере с Google диска .


7) После этого Ваш документ откроется в новой вкладке браузера, а справа вверху появится фото Вашего профиля в аккаунте Google


8) Сейчас должен появиться готовый HTML-код для встраивания в Blogger (также можно встраивать и на другие сайты).



СПОСОБ 2. Создать презентацию в PowerPoint, загрузить на Google Диск и преобразовать в Google презентацию.

Выполнить шаги ниже.

Это пример встроенной презентации в блог (переходы между слайдами добавила уже в Google Презентации):




выделите файл с презентацией и нажмите правую кнопку мыши, выберите Открыть с помощью -> Google Презентации




После этого Вы сможете, при желании, добавить анимацию к отдельным объектам/картинкам, переходы между слайдами на вкладке Вид -> Анимация.









6. Вставьте скопированный код на сайт или блог в режиме HTML.



СПОСОБ 3. Создать презентацию на Google Диске.

Точно также можно сразу, в режиме онлайн, создать новую презентацию на Google Диске, добавить анимацию, и затем опубликовать её в Интернете и встроить на сайт (выполнить шаги из способа 2).



P.S. От всей души поздравляю Вас с Рождеством! Мира и любви Вам и Вашим близким!

(Это та же самая презентация, только я сохранила каждый слайд отдельной картинкой, в программе Movavi Video добавила музыку, потом видео загрузила на Ютуб)

Узнайте, как создать Адаптивное слайд-шоу с помощью CSS и JavaScript.

Слайд-шоу / Карусель

Слайд-шоу используется для циклического использования элементов:





Создание слайд-шоу

Шаг 1) добавить HTML:

Пример










Шаг 2) добавить CSS:

Стиль кнопки "Далее" и "назад", текст заголовка и точки:

Пример

/* Slideshow container */
.slideshow-container max-width: 1000px;
position: relative;
margin: auto;
>

/* Hide the images by default */
.mySlides display: none;
>

/* Next & previous buttons */
.prev, .next cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
>

/* Position the "next button" to the right */
.next right: 0;
border-radius: 3px 0 0 3px;
>

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover background-color: rgba(0,0,0,0.8);
>

/* Fading animation */
.fade -webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
>

Шаг 3) добавить JavaScript:

Пример

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) showSlides(slideIndex += n);
>

// Thumbnail image controls
function currentSlide(n) showSlides(slideIndex = n);
>

function showSlides(n) var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length)
if (n

Автоматическое слайдшоу

Чтобы отобразить Автоматическое слайд-шоу, используйте следующий код:

Пример

var slideIndex = 0;
showSlides();

function showSlides() var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i slides.length)
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
>

Несколько слайд-шоу

Пример

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

Читайте также: