День 29: Opera Show.
10 Август 2008
Превратите свой браузер в инструмент для отображения презентаций Opera Show — впечатляющей возможностью браузера Opera. Обучитесь использованию Opera Show, и сохраните себе время и нервы при изготовлении собственных презентаций!
По сравнению с другими популярными инструментами для создания презентаций (типа Microsoft PowerPoint), Opera Show имеет некоторые преимущества:
- Это стандартная возможность маленького и быстрого браузера под названием Opera.
- Она использует обычный HTML в качестве формата документа, который делает конечные файлы очень небольшими по размеру, по сравнению с частными форматами, используемыми в других приложениях.
- Она делает публикацию вашей презентации в сети быстрой, как бриз.
- По сравнению с другими инструментами для создания презентаций, Opera бесплатна.
- И она не будет раздражать вашу аудиторию навязчивой анимацией.
Инструменты презентации помогаю докладчикам визуально передавать свои доклады аудитории. Представляя набор слайдов, содержащих текст и рисунки, докладчики могут оживить свой доклад. Распечатка слайдов или публикация их в интернете позволит вашей аудитории легко просмотреть презентацию позже.
Это пособие написано для того, чтобы помочь вам начать использование Opera Show. Если у вас есть некоторый опыт работы с другими инструментами для создания презентаций, а также базовые знания HTML, то вы имеете превосходную отправную точку для создания собственных презентаций.
Для создания презентации Opera Show без кодирования перейдите в наш центр Opera Show, и испытайте наш генератор презентаций.
Запуск Opera Show
Использовать Opera в качестве инструмента для просмотра презентаций очень просто. При нажатии клавиши F11 Opera переходит в полноэкранный режим — в этом режиме вы не увидите никаких полос прокрутки, ни меню, а только сам документа. В зависимости от таблицы стилей документа, Opera выполнит ещё три действия:
- Разобьёт текущий документ на страницы или слайды.
- Изменит содержимое — некоторые части могут быть скрыты или отображены.
- Применит шрифты и цвета, подходящие для презентации — как правило, шрифты становятся крупнее.
Предполагается, что вы просматриваете эту страницу с помощью Opera, поэтому попробуйте нажать клавишу F11 прямо сейчас. Если вы ещё не используете браузер Opera, то можете загрузить его прямо сейчас. После нажатия клавиши F11 браузер перейдёт в полноэкранный режим, и вы сможете просмотреть слайды, подходящие для проектора. Повторное нажатие клавиши F11 вновь переведёт браузер в обычный режим просмотра веб-страниц. Другими словами, нажатие клавиши F11 переключает с полноэкранного в обычный режим.
Примечание
Данная страница является всего лишь переводов официальной страницы Opera Show, поэтому нажатие клавиши F11 на данную страницу не произведёт описываемого эффекта. Поэтому, если вы хотите увидеть настоящую презентацию, перейдите на официальную страницу Opera Show: http://www.opera.com/support/tutorials/operashow/
Либо на русскоязычную: http://www.teosofia.ru/opera_9/show/opera_show.htm
В полноэкранном режиме вы можете прокручивать страницу, используя клавиши со стрелками, и переключаться по страницам документа с помощью клавиш PgUp и PgDn.
Любой документ может быть просмотрен в полноэкранном режиме. Однако большинство документов будут выглядеть почти так же, как и в обычном окне браузера; они будут иметь то же содержимое и такую же разметку, просто отображаться будут в полноэкранном режиме. Самое простое решения для сайтов, не приспособленных для проекционных презентаций, состоит в объединении функций масштабирования страниц с полноэкранным режимом — увеличение масштаба отображения документа перед нажатием клавиши F11. Также при просмотре в Opera рисунков вы можете нажать клавишу F11 для просмотра их на чёрном фоне в полноэкранном режиме.
Если вы не используете браузер Opera, вы сможете только читать про Opera Show, но не испытать эту функцию напрямую. Однако документы, созданные для Opera Show, конечно же доступны для просмотра в виде обычных документов в других браузерах.
Так что же заставляет некоторые документы значительно изменять свой вид при нажатии клавиши F11?
Управление с помощью таблиц стилей
Для того чтобы документ стал презентацией Opera Show, браузеру Opera необходимо сказать, как преобразовать документ HTML в презентацию. Это делается с помощью добавления в заголовок документа таблицы стилей CSS2. Если вы уже создавали документы для интернете, то, возможно, вы уже знакомы с таблицами стилей. Таблицы стилей могут быть связаны, или интегрированы в документы HTML. Таблицы стилей позволяют авторам описать, как документы должны быть представлены в интернете.
Первое поколение каскадных таблиц стилей сегодня известны как CSS1. В CSS2 добавлено множество новых возможностей, среди которых — возможность записи таблиц стилей для различных типов носителей. Примеры типов носителей: screen (предназначен для обычного цветного компьютерного монитора), handheld, braille (для устройств с обратной связью на основе шрифта Брайля) и projection. Opera Show использует последний тип. Так, при нажатии клавиши F11 браузер Opera просматривает таблицы стилей, написанные специально для проекторов. Если находит, то к документу применяется эта таблица стилей, и, соответственно, меняется режим отображения документа с обычного на презентацию.
Авторская разработка презентаций Opera Show
Для тех, кто не хочет писать собственные презентации на HTML, в дополнение к генератору Opera Show от Opera Software доступно и программное обеспечение сторонних разработчиков, как, например, созданная программистом Филом Бернсом программа Quickshow — платная программа для создания презентаций Opera Show.
Остальная часть данного руководства, главным образом предназначена для тех, кто хочет создавать собственные презентации Opera Show, что является весьма простым занятием, если вы немного знаете HTML и CSS. Например, читаемый вами документа ссылается на таблицу стилей, содержащую следующие строки:
@media projection {
.screen {
display:none;
}
.projection {
display: block;
padding:65px 200px 0px 24px;
page-break-after: always;
}
body {
background:#47557b url(operashowbg.jpg) fixed;
padding:0;
margin:0;
font-family:'trebuchet ms',arial,sans-serif;
font-size:150%;
color:#fff;
}
}
Первая строка говорит о том, что стиль предназначен для проекторов. Это тип таблицы стилей, который Opera ищет при нажатии клавиши F11. Строки, начинающиеся с «.screen» и «.projection» предназначены для скрытия и отображения содержимого страницы — это более сложное использованием CSS, о котором мы расскажем чуть позже. За этими строками следуют настройки шрифтов и цветов, а также разрывы страниц. Если эти строки вам полностью непонятны, то перед продолжением рекомендуем немного почитать про HTML и CSS. В конце этого документа посмотрите список предлагаемой литературы.
Настройка шрифтов и цветов
Изменение шрифтов и цветов — это одни из самых распространённых задач таблиц стилей. Здесь размер шрифта установлен в 150 % от обычного размера шрифта. Кроме этого, семейство шрифтов установлено в «Trebuchet MS», с общим шрифтом «sans-serif», который заменит «Trebuchet MS» в том случае, если его нет на компьютере пользователя. Фоновый рисунок определён в первой строке, и свойство «color» устанавливает цвет текста в белый. Все свойства определяются в элементе «body», из которого наследуются все остальные видимые элементы HTML. Поэтому, цвет всего текста в документе будет белым, если где-нибудь в другом месте это значение не переопределено.
Разбивка на страницы
Во время презентации вы переходите от одной страницы (слайда) к другой. Обычно браузеры отображают документы с полосой прокрутки на правой стороны, предназначенной для перемещения текста вверх и вниз. При нажатии клавиши F11 Opera переходит в полноэкранный режим и пытается разбить документ на страницы. В таблице стилей объявляются расположения разделителей страниц — в нашем примере таблица стилей после каждого вхождения класса «projection». Таким образом, следующий раздел будет всегда появляться вверху новой страницы.
.projection {
display: block;
padding:65px 200px 0px 24px;
page-break-after: always;
}
Вместо использования полосы прокрутки для перемещения в документе вверх и вниз, для навигации в полноэкранном режиме используются клавиши со стрелками и клавиши PgDn и PgUp. Элементы заголовков, такие как H1 и H2, должны всегда использоваться в HTML. Некоторые авторы создают заголовки с помощью использования тега «font» и атрибута «size», но этого не рекомендуется делать, поскольку элемент «font» ничего не говорит о структуре документа.
Скрытие и отображение содержимого
Возможно, вы заметили, что при нажатии клавиши F11 не только изменяется внешний вид этого документа (шрифты, цвета, разбивка на страницы), но также и содержимое документа. Это одна из расширенных возможностей CSS, и большинство авторов не будут нуждаться в создании такого вида документа. Однако если вы хотите впечатлить аудиторию технологией, не отличимой от волшебства, то это для вас.
С помощью CSS легко выполнить различные преобразования в документе. Например, таблицы стилей могут скрывать определённые текста, и отображать их в других случаях. Вот правила, использованные в этом документе:
.screen {
display:none;
}
.projection {
display: block;
}
Эти строки делают один класс элементов div (с именем «projection») видимым, и скрывают остальные классы элементов (с именем «screen»). При возврате в обычный режим с полноэкранного применяется противоположный набор правил:
@media screen {
div.projection { display : none }
div.screen { display : block }
}
Другими словами, читаемый вами документ, фактически содержит два документа в одном. При переключении из обычного в полноэкранный режим Opera переключается с одного документа на другой. Только заголовки остаются идентичными и видимы всегда.
Не стесняйтесь многократно использовать этот документ и его таблицу стилей в качестве шаблонов для собственных презентаций.
Доступна упрощённая версия с интегрированным CSS и без общей таблицы стилей opera.com. Заставьте ваш проектор засверкать!
Полезное чтение про Opera Show, CSS и HTML
- День 30. Слайд-шоу в Opera (из предыдущего цикла статей о браузере Opera)
- Домашняя страница W3C по HTML
- Рекомендации W3C по CSS2
- Рекомендации W3C по типам носителей в CSS2
- W3C об использовании CSS2 для разбивки страниц
Другие полезные ссылки для создания презентаций
- Генератор Opera Show
- QuickShow — платная программа для создания презентаций Opera Show
- Сервис W3C для проверки разметки поможет проверить правильность таблиц стилей и файлов HTML
- Цветовая палитра поможет подобрать цвета, которые приводятся вместе с шестнадцатеричными кодами