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

Админу.Ру

Библиотека вебмастера по созданию и продвижению сайта

Как разместить на сайте презентацию PowerPoint?

В процессе создания сайта может возникнуть необходимость интеграции на его страницы презентаций Microsoft PowerPoint. Презентации PowerPoint наглядны, красочны, динамичны. В то же время, создание презентации достаточно высокого уровня сложности не требует от пользователя серьёзных навыков вёрстки и дизайна, что является дополнительным стимулом для решения вопроса интеграции на сайт презентаций PowerPoint.

Размещение на сайте презентации Microsoft PowerPoint

Компания Microsoft не предоставляет открытого компонента для интеграции презентаций PowerPoint на конечные сайты пользователей. В пакет MS Office входит инструментарий для интеграции на сервер MS IIS с возможностью обработки презентаций PowerPoint. Но, подавляющее большинство владельцев сайтов не имеет доступа к серверной части (за исключением, пожалуй, выделенных серверов) и поддержка тех или иных компонентов осуществляется на усмотрение хостпровайдера.

Сначала предлагаем вам несколько простых или относительно простых способов размещения презентаций PowerPoint на сайте или «обходных» путей, позволяющих конвертировать презентацию в другие форматы, более дружественные интернет-сайту.

Размещение прямой ссылки на презентацию PowerPoint

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

Конвертация презентации PowerPoint в PDF, Flash или видеоролик

Конвертация презентации PowerPoint в формат PDF . Пожалуй, самый простой способ конвертации. С помощью виртуального принтера, например, FinePrintPDF, вы просто печатаете свою презентацию в документ, который потом загружаете на сайт с помощью компонента-менеджера PDF (большая часть современных CMS подобные менеджеры имеют в своём составе или предлагают установить бесплатно). Минус данного метода в том, что получается, фактически, печатная копия презентации. То есть, вся анимация, звук и интерактивность — отсутствуют.

Конвертировать презентацию PowerPoint в Macromedia Flash . Это можно сделать с помощью целого ряда утилит, например, Wondershare PPT2Flash. Результат сохраняет практически всю красоту презентации: аудио, анимацию, интерактив. Кроме того, размер файла SWF на порядок меньше исходного файла презентации.

Конвертация презентации PowerPoint в видеоролик . Для этого существует целый ряд бесплатных утилит, например, Fraps или Free Screen Video Recorder. Полученное видео можно загрузить непосредственно на сайт или на Youtube, далее вставить на нужной странице код вызова видеоролика. Видео сохраняет все свойства презентации, за исключением поддержки интерактивности.

Сохранение презентации в формате HTML и последующая загрузка на сайт

Microsoft PowerPoint предлагает сохранить презентацию для публикации в Web. Но, к сожалению, данный способ имеет столько минусов, что мы бы не рекомендовали его даже пробовать. Каждый слайд сохраняется в виде отдельной HTML-страницы, пропадает анимация и аудио.

От простого к сложному

Описанные выше способы можно применять в единичных случаях. Что же делать, если презентаций много, требуется постоянное обновление материалов уже размещённых презентаций? Рассмотрим более сложные способы интеграции на сайт презентаций PowerPoint. Для этого нам необходим программный компонент, инструмент, позволяющий, с одной стороны, управлять загрузкой, манипулированием презентациями и, с другой стороны, предоставляющий возможность размещения презентаций PowerPoint на страницах сайта.

Размещение презентации PowerPoint с помощью Google Docs

Пожалуй, это наиболее популярный способ публикации на своём сайте презентаций. Для этого вам необходимо иметь аккаунт Google. Переходите в раздел Google Docs (Google Drive) и импортируете презентацию MS PowerPoint. Далее, необходимо настроить публичный доступ к просмотру презентации, после чего в диалоге из меню «File» — «Share to Web…» можно получить HTML-код вставки презентации на сайт или блог. Копируем код и вставляем его в HTML-редакторе в нужное место любой страницы сайта. Если публичный доступ настроен верно и код установлен правильно, то презентация будет автоматически загружаться в браузер посетителя сайта вместе со страницей.

Из плюсов следует отметить, что презентация редактируема, и все изменения, которые вы в неё внесёте, автоматически будут отображаться на вашем сайте. Главный минус: значительная часть анимационных эффектов, музыки и звуков, которые вы использовали в презентации PowerPoint, бесследно исчезнут.

Размещение на сайте презентаций PowerPoint с помощью сервиса SlideBoom.com или SlideShare.net

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

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

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

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

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

Затем вам нужно получить HTTP-адрес загруженной презентации. URL презентации будет зависеть от настроек сервера.

Пожалуйста, удостоверьтесь, что адрес начинается с «http://», а не с «ftp://».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размещаем презентацию PowerPoint на странице сайта

Для того, чтобы разместить презентацию PowerPoint на странице своего сайта, можно воспользоваться специальными онлайн-сервисами. После недолгих поисков я выбрал 3 таких сервиса, возможности которых я опишу в этой заметке. Размещать презентации могут только зарегистрированные пользователи. Вообще, принцип размещения презентации следующий: вы загружаете файл с презентацией на сайт сервиса, там он конвертируется в SWF-файл. После этого вы можете просматривать презентацию, а также получить код для размещения ее у себя на сайте. Еще все описанные сервисы позволяют «поделиться» презентацией в социальных сетях, таких как Facebook, Google+, а также «твитнуть» презентацию. Весь процесс очень похож на размещение ролика на YouTube.

Список сервисов для размещения презентаций, которые я нашел в Интернет:

Sl >http://www.slideshare.net/ )

При бесплатном использовании этого сервиса вам выделяется 100Мб для размещения презентации или PDF-файла. В процессе размещения презентации Вы можете выбирать категорию, в которой будет размещена презентация, добавлять описание и тэги. В конце презентации автоматически добавляется слайд, на котором находятся ссылки на аналогичные презентации. После размещения к слайдам презентации можно прикрепить видео с YouTube и аудиофайлы с вашего ПК. Пользователи могут добавлять комментарии, а владелец аккаунта получать их на почту. Кроме того владельцу доступна статистика по просмотру каждой презентации.

Платный аккаунт позволяет его владельцу просматривать расширенную статистику по презентациям, например, местоположение пользователей, которые просматривали и скачивали презентацию, твиты, в которых упоминается презентация и т.п. Кроме того, появляется возможность проводить совещания, изменять внешний вид вашего профиля, отключать показ рекламы и слайда со ссылками на аналогичные презентации, защищать загруженные презентации паролем и размещать файлы большого размера – например, видеофайл объемом до 500 Мб.

AuthorStream ( http://www.authorstream.com/ )

Бесплатный аккаунт предоставляет 100 Мб дискового пространства для размещения презентаций и ограничивает размер файла этими же 100 мегабайтами. Одновременно можно загружать до 10 файлов. Загружать файлы можно не только с вашего ПК, но и уже размещенные в Интернет. Позволяет конвертировать одну презентацию в видеофайл различных форматов. Поддерживаются следующие форматы — WMV, AVI, FLV или MP4. В процессе размещения презентации Вы можете выбирать категорию, в которой будет размещена презентация, добавлять описание и тэги. В конце презентации автоматически добавляется слайд с рекламой – предложением перейти на коммерческое использование сервиса. Пользователи могут добавлять комментарии, одновременно размещая их на Facebook.

PRO-аккаунт позволяет его владельцу просматривать статистические данные по каждой презентации – сколько человек посмотрело и скачало, избавиться от рекламы в своем профиле, чтобы не отвлекать посетителя от просмотра, настроить внешний вид страницы аккаунта, отключить комментарии к презентациям и не показывать «похожие» презентации других пользователей сервиса. Кроме того, можно защитить презентации паролем и определить сторонние сайты, на которых можно размещать код для показа презентации.

Sl >http://www.slideserve.com/ )

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

В заключении этой небольшой заметки, позволю себе высказать свое мнение: из всех перечисленных сервисов мне понравился последний. Несмотря на то, что он бесплатный – это вполне достойный инструмент для размещения презентаций Power Point на своем сайте. Поэтому, если вам не нужна детальная статистика просмотров и возможность коллективных собраний, вполне можно использовать его. С задачей по размещению презентаций PowerPoint у себя на сайте он справится на 100%. Хотя, решать, какой сервис использовать в своей работе, конечно же, вам.

Как показать презентацию на странице сайта. Инструкция 1

li» data-url=»/api/sort/PersonaCategory/list_order» >
• Работа с изображениями (10)
• Работа с текстом (4)
• Работа с медиафайлами (5)
• Шпаргалка (3)

Как показать презентацию на странице сайта. Инструкция 1

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

Создание презентации

1. Открываем Google презентации — https://docs.google.com/presentation. Возможно придется авторизоваться на портале Google.

Добавляем чистую презентацию, щелкнув по картинке со знаком плюс

Задаем презентации название, щелкнув по тексту Презентация без названия

Добавляем слайды и наполняем их содержанием. Процедура очень похожа на аналогичные действия в программе PowerPoint.

Для добавления слайда: Слайд — Новый или кнопка плюс на Панели инструментов.
Для добавления объектов на слайд: Вставка — и т.д. или кнопки на Панели инструментов.
Для добавления анимации объекта: сначала выделить объект, потом Вставка — Анимация — выбрать из списка Тип анимации (1), выбрать из списка Условие для запуска (2), установить скорость анимации (3).

Для анимации перехода от одного слайда к другому: Слайд — Переход — выбрать из списка Тип перехода.

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

Файл с презентацией сохраняем на компьютер

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

Файл — Скачать как — Microsoft PowerPoint (PPTX) или любой другой нужный вам формат из списка возможных.

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

Для встраивания презентации на страницу сайта нужно получить специальный код встраивания. Для этого:

Файл — Опубликовать в Интернете — Встроить.

В этом же окне можно выбрать размер презентации и скорость смены кадров.

Щелкнуть кнопку Опубликовать и подтвердить действие.

Скопировать полученный код

Вставляем презентацию на страницу сайта

1. Открыть страницу сайта, куда нужно вставить презентацию.
2. Переключиться в режим редактирования.
3. Установить курсор в нужное место страницы.
4. На Панели инструментов щелкнуть кнопку Вставить / Редактировать видео.
5. Перейти на вкладку Код для вставки.
6. Вставить скопированный код.
7. Перейти на вкладку Общее и проверить размер презентации. Для персональных сайтов ширина не более 710 пикселей. Если ваша презентация больше, то обязательно измените размер на 710.
8. Щелкнуть кнопку ОК.

Что упростить

Вместо создания слайдов в презентациях Google, можно по-прежнему создавать их в PowerPoint. Затем, импортировать слайды в презентации Google:

1. Файл — Импорт слайдов — Загрузка.
2. Выбираем файл с презентацией, созданной в программе PowerPoint, выбираем все слайды и жмем кнопку Импортировать.
3. Просматриваем презентацию и вносим при необходимости изменения — изменяем размеры объектов, проверяем ссылки и т.д.

Ещё раз уточню. Программа PowerPoint гораздо «богаче» в смысле разнообразия анимаций. Не все из них доступны в презентациях Google.