Вставка HTML5-презентации на сайт

Презентацией, созданной в PowerPoint, можно поделиться разными способами. Например, разослать по почте, назначить студентам через систему дистанционного обучения iSpring Learn или загрузить в облачный сервис.

Программа iSpring Suite сконвертирует вашу презентацию в современный и практичный формат HTML5. Весь функционал Powerpoint — анимации, переходы, аудио и видео — сохранится, а слайды будут одинаково хорошо смотреться на компьютерах, телефонах и планшетах.

В iSpring Suite много дополнительных опций, которые помогут подготовить интересный контент для вашего сайта или блога. Например, расскажите о том, как развивалась ваша компания с самых первых дней с помощью интерактивности Временная шкала, а на странице с ценами покажите товары в интерактивном модуле Медикаталог. Яркая история с визуальным сопровождением вызовет эмоции и запомнится посетителям.

Давайте вместе загрузим презентацию, сконвертированную или созданную в iSpring Suite, на ваш сайт или в блог.

Публикация презентации и загрузка на сервер

Откройте презентацию PowerPoint, которую вы хотите вставить на ваш сайт. Затем на панели инструментов выберите вкладку iSpring Suite 10 и кликните кнопку Публикация.
Выберите вкладку Мой компьютер, введите название презентации и задайте параметры публикации. Нажмите кнопку Опубликовать.
Когда публикация завершится, загрузите презентацию на сервер. Для этого нажмите на кнопку FTP.
Что такое FTP и как им пользоваться
FTP (англ. File Transfer Protocol) — протокол передачи данных, то есть способ загрузить файлы на сервер.
Чтобы узнать данные для входа на сервер, обратитесь в хостинг-компанию, услугами которой пользуетесь. Вам предоставят следующие данные: имя хоста, имя пользователя и пароль.
Для входа на сервер скачайте FTP-клиент, программу для доступа к серверу. Один из самых популярных FTP-клиентов — FileZilla.
В открывшемся окне введите данные для входа на сервер, которые вы получили в хостинговой компании, и нажмите ОК. Презентация сразу же будет загружена на ваш сервер.
Подробнее о загрузке курсов iSpring Suite на FTP читайте в статье Просмотр и распространение курсов.
Затем получите ссылку (URL) загруженной презентации.

Если вы загрузили презентацию в корень сайта (как правило, это папка public_html), ссылка формируется по следующему принципу: название_сайта/название_презентации. Например, ispring.ru/presentation.html

Допустим, вы решили загрузить презентацию не в корень сайта, а в папку. В этом случае ссылка дополнится ее названием: название_сайта/название_папки/название_презентации. Например, ispring.ru/courses/presentation.html

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

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

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

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

Во втором случае вам необходимо разместить подобный код:

<a title="заголовок_ссылки" href="адрес_презентации" target="_blank">текст ссылки</a>

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

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

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

<script> function popup(url)
{
  window.open(url, 'new', 'width=800,height=600,scrollbars=no,menubar=no,status=no,toolbar=no');
}
</script>
<a onClick="popup('http://адрес HTML5-презентации')">текст ссылки</a>

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

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

<script>
function popup(url)
{
  window.open(url, 'new', 'width=800,height=600,scrollbars=no,menubar=no,status=no,toolbar=no');
}
popup('http://адрес HTML5-презентации');
</script>

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

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

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

Для вставки презентации воспользуйтесь следующим кодом:

<iframe src="http://адрес HTML5-презентации" width="800" height="600" scrolling="no" />

Дерево страниц