Как вставить HTML5-презентацию на сайт или в блог?
Главное преимущество презентаций в формате HTML5 заключается в том, что они могут быть просмотрены на компьютерах и на мобильных устройствах (iPad, iPhone, Android-смартфонах и планшетах). Но для того, чтобы их кто-то мог посмотреть, презентации должны быть загружены в веб и вставлены на сайт или в блог.
Размещение PowerPoint-презентации на сайте происходит в 3 простых шага:
- Публикация презентации в формат HTML5
- Загрузка презентации на сервер по FTP и получение http-ссылки
- Вставка презентации на страницу
1. Публикация презентации в формат HTML5 и загрузка на сайт
Вы можете опубликовать презентацию в формат HTML5 с помощью программ iSpring Suite и iSpring Pro. Рассмотрим на примере iSpring Suite. На панели инструментов PowerPoint выберите вкладку iSpring Suite и кликните кнопку «Публикация».
Выберите вкладку Web, введите название презентации, укажите папку публикации и нажмите кнопку Опубликовать.
2. Загрузка на FTP и получение ссылки
После успешного завершения процесса публикации вы увидите окно, где отобразится готовая презентация. Здесь вы можете загрузить папку с презентацией на сервер по FTP.
Для этого нажмите Загрузить на FTP.
В открывшемся окне введите данные FTP-аккаунта. Презентация сразу же будет загружена на ваш сервер.
Подробнее о настройке аккаунтов FTP читайте в документации.
Затем вам нужно получить HTTP-адрес загруженной презентации. URL презентации будет зависеть от настроек сервера.
Пожалуйста, удостоверьтесь, что адрес начинается с «http://», а не с «ftp://».
3. Вставка на страницу
Презентацию можно вставить на страницу несколькими способами:
- открытие в отдельном окне;
- открытие во всплывающем окне;
- воспроизведение в iframe.
а) Воспроизведение в отдельном окне
Это самый простой способ. Просто разместите в тексте страницы сайта ссылку на презентацию с помощью визуального редактора или в режиме редактирования HTML-кода страницы. Во втором случае вам необходимо разместить подобный код:
Вы можете выбрать, в каком окне браузера открывать ссылку — в том же (target=”_self”) или в новом (target=”_blank”).
б) Открытие HTML5-презентации во всплывающем окне
Если вы хотите открыть презентацию во всплывающем окне, удостоверьтесь, что редактор страниц на вашем сайте поддерживает вставку JavaScript-кода.
Используйте следующий код для создания всплывающего окна:
Вы можете включить/отключить некоторые элементы окна, в котором открывается презентация. Справку на английском можно посмотреть на сайте w3schools.com.
Если вы хотите, чтобы презентация открывалась во всплывающем окне при загрузке какой-либо страницы, добавьте в исходный код страницы строки:
Пользуйтесь этим вариантом с осторожностью: большинство браузеров блокируют всплывающие окна.
в) Вставка презентации в iframe
HTML-тэг IFRAME позволяет показывать содержимое одной страницы внутри другой.
Как вставить презентацию на сайт html
Если вы хотите поделиться презентацией или слайд-шоу с друзьями, близкими или коллегами, сохраните его в OneDrive, после чего вы сможете внедрить его на веб-страницу или в блог.
Код внедрения, который вам нужен, должен быть в PowerPoint для Интернета. Эта возможность недоступна в версиях PowerPoint для Windows или Mac OS.
Получение кода внедрения
Сохраните презентацию в OneDrive.com. (Сохранение презентации в общедоступной папке в Интернете позволит внедрить ее на веб-страницу.)
Откройте презентацию в PowerPoint для Интернета. На вкладке Файл щелкните Общий доступ и выберите Внедрить.
Чтобы создать код HTML для внедрения файла на веб-страницу, нажмите кнопку создать 
.
В диалоговом окне Внедрение в разделе Размеры выберите нужные размеры для блога или веб-страницы.
В разделе Код внедрения щелкните код правой кнопкой мыши, выберите команду Копировать, а затем нажмите кнопку Закрыть.
Код понадобится на следующем шаге. Вставьте его в документ в Блокноте или другом приложении, чтобы не потерять.
HTML-код, скопированный со страницы OneDrive, представляет собой тег iframe, который поддерживается во многих средах разработки веб-сайтов и службах блогов. Приведенная ниже инструкция подходит для большинства популярных служб блогов, таких как WordPress, Blogger и TypePad.
Хотя служба WordPress обычно не поддерживает теги IFRAME, для тегов IFRAME документов Office в Интернете сделано исключение. Чтобы использовать режим редактирования HTML, не выбирайте команду Создать запись в верхней части страницы. Перейдите в панель управления блогом и щелкните Записи > Добавить.
В TypePad не используйте редактор «Экспресс-создание». Перейдите в раздел блоги, щелкните имя блога, а затем нажмите кнопку создать, в которой можно переключиться с ФОРМАТИРОВАННОГО текста на HTML-редактирование.
Если вы работаете с Blogger, перейдите от окна создания записи к режиму редактирования HTML-кода. После завершения следующего шага вы сможете вернуться в режим создания записи.
В редакторе блога или веб-страниц создайте запись и переключитесь в режим редактирования HTML.
Если ваша служба блогов не поддерживает теги IFRAME в записях, обратитесь за помощью к ее поставщику.
Вставьте из буфера обмена скопированный со страницы OneDrive HTML-тег, нажав сочетание клавиш ⌘+V.
Закончите создание записи. Просмотрите запись и опубликуйте ее как обычно.
Изменения, внесенные в презентацию в службе OneDrive, автоматически отражаются на странице, куда внедрена презентация.
С помощью кода внедрения можно также добавить презентацию на вики-сайт SharePoint. В этом случае нужно вставить только часть тега iframe из раздела src в веб-часть просмотра страниц.
Откройте вики-страницу и нажмите Изменить.
Вставьте из буфера обмена в вики-страницу скопированный со страницы OneDrive HTML-тег, нажав клавиши CTRL+V. Благодаря этому вы сможете легко скопировать часть тега в веб-часть. Перед завершением удалите тег с вики-страницы.
Скопируйте часть тега между кавычками, начинающуюся с http. Кавычки включать не надо.
На вкладке Работа с редактором нажмите Вставить, а затем выберите пункт Веб-часть.
В списке категорий выберите Среда и контент.
В списке Веб-части выберите пункт Средство просмотра страниц и нажмите Добавить.
Чтобы вставить адрес, скопированный в шаге 3, выберите пункт откройте панель инструментов и в поле Ссылка нажмите клавиши ⌘+V.
Нажмите кнопку Применить и просмотрите страницу.
Внесите необходимые изменения в веб-часть. Например, чтобы разместить презентацию во фрейме без полос прокрутки, в редакторе просмотра страниц разверните пункт Вид и укажите высоту 332 пикселя и ширину 407 пикселей.
Закончив работу, нажмите кнопку ОК в редакторе просмотра страниц и удалите тег IFRAME с вики-страницы.
Изменения, внесенные в презентацию в службе OneDrive, автоматически отражаются на странице, куда внедрена презентация.
Примечание: Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также приводим ссылку на оригинал (на английском языке).
Вставка интерактивной презентации PowerPoint на сайт
Рассмотрим простой способ вставки презентации на сайт с возможностью ее просмотра в интерактивном режиме.
СОДЕРЖАНИЕ
Способы вставки презентации на сайт
Для того, чтобы поделиться презентацией PowerPoint на сайте можно прикрепить файл презентации к статье. Проще некуда. Вот только посмотреть ее смогут только те пользователи, у кого есть программа PowerPoint. Можно, конечно, прикрепить презентацию в формате демонстрации и дать ссылку на бесплатный проигрыватель. Но зачем такие сложности, если можно сделать более эффектно: опубликовать интерактивную презентацию прямо на странице сайта.
Для того, чтобы вставить интерактивную презентацию можно воспользоваться различными сервисами, которые позволяют это сделать. Например, сервис SlideShare позволяет загрузить презентацию PowerPoint, а затем получить код для вставки презентации на сайт. Есть другие подобные сервисы. Также можно воспользоваться сервисом Google Slides, который тоже позволяет загружать презентации PowerPoint, преобразовывать их в формат Google презентаций и генерировать код для вставки на сайт.
Но есть способ вставки кода презентации на сайт от Microsoft. И тоже бесплатный!
Вставка интерактивной презентации PowerPoint на сайт
Итак, предположим, что у нас есть презентация, которую мы сделали на компьютере в программе PowerPoint. Алгоритм вставки презентации будет такой.
- Загружаем презентацию на диск OneDrive, который предоставляет Microsoft.
- Получаем код презентации.
- Вставляем код презентации на сайт.
Теперь более детально рассмотрим все шаги.
Загрузка на диск OneDrive
OneDrive – это облачное хранилище от компании Microsoft. Зарегистрированный пользователь получает 5 Гб дискового пространства бесплатно, а также различные инструменты, которые доступны для работы бесплатно: Word, PowerPoint, Excel и другие. Подробнее об этом можно посмотреть здесь.
Для загрузки переходим по ссылке https://onedrive.live.com/ . Если нет аккаунта, то сначала регистрируемся.
В панели файлов кликаем правой кнопкой мыши для вызова контекстного меню.
В появившемся меню кликаем Добавить — Файлы:
В открывшемся проводнике отмечаем нужный файл и кликаем Открыть:
Видим загруженную презентацию на диске:
Получаем код презентации – способ 1
Для того, чтобы получить код для вставки презентации на сайт кликаем по презентации правой мыши и выбираем пункт Внедрение:
На появившейся панели выбираем Создать:
И получаем код для вставки:
Получаем код презентации – способ 2
Есть другой способ получить код вставки. Сначала открываем презентацию. И уже в презентации получаем код.
На диске OneDrive открываем презентацию кликом левой кнопкой мыши. Либо правой кнопкой мыши вызываем контекстное меню и кликаем Открыть в PowerPoint Online:
Заходим в меню Файл:
В разделе Общий доступ кликаем Внедрение:
Выбираем подходящий размер для вставки и получаем код:
Вставляем код презентации на сайт
Полученный одним из способов, описанных выше, код копируем и вставляем на сайт:
Получаем вставленную на сайт презентацию с возможностью просмотра в интерактивном режиме:
Вставленная презентация
Заключение
Мы рассмотрели способ публикации презентации на странице сайта с использованием сервиса PowerPoint Online.
Доступ к презентации PowerPoint Online можно получить с любого устройства, подключенного к интернет.