Как вставить курс в формате HTML5 на веб-страницу
У вас когда-нибудь была идея показать свой курс, который сделан на ActivePresenter как часть веб-страницы? Если да, то эта статья для вас. Сегодня я покажу, как встроить курс в формате HTML5 на веб-страницу с помощью iframe.
Есть 2 основных этапа для переноса курса ActivePresenter на сайт:
- Экспортируйте курс в формат HTML5 и загрузите файлы на свой веб-сервер.
- Получите URL-адрес загруженного курса и вставьте его в код iframe.
Экспорт и загрузка курса в формате HTML5
Формат HTML5 – это конечный результат, позволяющий обучающимся просматривать и взаимодействовать с интерактивным контентом и тестами. После создания курса в ActivePresenter и экспорта его в формат HTML5 появится, например, такая папка, которую нужно затем разархивировать:
Если хотите узнать больше об экспорте проектов ActivePresenter в HTML5, перейдите по этой ссылке.
Для загрузки курса на сайт необходимо загрузить все файлы из папки на ваш веб-сервер. Например, можно использовать Filezilla для передачи файлов с локального компьютера на веб-сервер.
Использование iframe для встраивания курса в формате HTML5
Чтобы встроить курс в формате HTML5 на ваш сайт, необходимо использовать iframe (встроенный фрейм). Iframe – это очень простой HTML-код, который используется для отображения содержимого из другого источника на веб-странице. Вот пример строки кода, которую можно использовать для добавления на веб-сайт:
<div style="width:100%; padding-bottom:56.25%; position:relative;"> <iframe src="path/to/ActivePresenter/HTML file" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border: none; overflow: hidden;"></iframe> </div>
Атрибут src указывает URL (веб-адрес) страницы встроенного фрейма.
После копирования и вставки строки кода выше на вашу страницу, получите HTTP URL вашего загруженного курса и замените эту часть: «path/to/ActivePresenter/HTML file
» на реальное местоположение, например:
<iframe src="https://cdn.atomisystems.com/samples/activepresenter-7/millionaire-quiz-game/tutorial.html"</iframe>
Как вы уже знаете, внешний тег div в приведенном выше коде со стилем padding-bottom используется для сохранения соотношения сторон содержимого iframe. Вам нужно обновить этот стиль в зависимости от вашего соотношения сторон контента. Перейдите по этой ссылке для получения более подробной информации об инструменте CSS Aspect Ratio Calculator, который поможет вам в этом.
Размеры викторины составляют 1280×720, поэтому padding-bottom должен быть 56,25%.
Вот и все!
Читайте также:
By accepting you will be accessing a service provided by a third-party external to https://edu-russian.ru/