Навигация в презентациях PowerPoint

В режиме электронного обучения ученик работает самостоятельно с материалами курса. Достаточно часто в качестве обучающего материала используется презентация, созданная в PowerPoint, снабженная кнопками навигации по курсу. Перемещаясь по страницам учебного материала, иногда бывает неудобно определить: какая часть вами изучена и что еще предстоит освоить.

Попробуем организовать работу с курсом, созданным в PowerPoint, более комфортным. Для этого воспользуемся эффектом “нажатой кнопки”. Т.е. при возвращении в главное меню курса, кнопки, на которые вы уже нажимали, будут иметь вид, отличный от тех кнопок, по которым еще не производилось нажатие.

Порядок создания эффекта нажатой кнопки

1. В собранной презентации добавляем кнопки навигации. Как правило, это фигура с встроенным текстом.

2. Затем встраиваем гиперссылку к выделенной кнопке. Это может быть переход на один из слайдов презентации.

3. Создаем эффект анимации, который можем применить либо к тексту встроенной фигуры, либо ко всей фигуре (несколько затенив её). В приведенном примере мы выбрали изменение цвета текста. В параметрах эффекта задаем цвет текста близкий к цвету кнопки. При возвращении к этому слайду надпись на кнопке изменится, и станет понятно, что раздел уже изучен.

4. Применяем эффект триггера, при котором производится действие. В примере показано, что при нажатии на кнопку с надписью происходит изменение цвета текста и переход по гиперссылке на заданный слайд. Подробнее о том, как применять триггеры в PowerPoint, читайте в посте “Использование триггеров в PowerPoint и взаимодействие с продуктами iSpring”.

Для публикации презентации в формат HTML5 или Flash можно воспользоваться программными продуктами iSpring, которые сохранят все созданные вами эффекты, а также позволят опубликовать работу в интернете, разместить в СДО или использовать локально. Подробнее о конвертации в различные форматы можно прочитать здесь.

Читайте пост «Как создать интерактивную викторину», пример которой приведен в видеоролике.

А если у вас есть идеи для полезных статей на тему электронного обучения — напишите нам в комментариях, и мы будем рады поработать над новым материалом.

Система дистанционного обучения для бизнеса

Поставит на автопилот развитие сотрудников.
Быстрый старт онлайн‑обучения за 1 день.

Источник

Техподдержка

Мы в соц. сетях

Дополнительные средства навигации (кнопки)

Важно:

Кнопки навигации можно увидеть только в сконверченный версии проекта.

То есть либо при локальном просмотре в браузере после проведения конвертации;
либо уже на сайте, после публикации.

Ниже мы рассмотрим предназначение этих кнопок; их активацию в проекте и варианты отображения.

Все эти кнопки активируются в свойствах проекта, во вкладке «Дополнительные параметры».

Для активации какой-либо из вышеперечисленных кнопок, перейдите, пожалуйста, в меню Конструктора: Свойства проекта

В свойствах проекта можно активировать следующие кнопки:

Важно:

Кнопки навигации можно увидеть только в сконверченный версии проекта.

То есть либо при локальном просмотре в браузере после проведения конвертации;
либо уже на сайте, после публикации.

Ниже мы рассмотрим предназначение этих кнопок; их активацию в проекте и варианты отображения.

Все эти кнопки активируются в свойствах проекта, во вкладке «Дополнительные параметры».

Для активации какой-либо из вышеперечисленных кнопок, перейдите, пожалуйста, в меню Конструктора: Свойства проекта

Далее отдельно по кнопкам:

1. Кнопки последовательного перехода по страницам проекта (вперед – назад)

Важно:

Кнопки последовательного перехода по страницам проекта (вперед – назад) не являются кнопками перехода по истории посещения сайта.

Это кнопки для перехода по страницам сайта в очередности добавления страниц к проекту сайта. Данная функция предусмотрена на случай, если Вы желаете ознакомиться со всеми страницами сайта, не опасаясь пропустить какую-либо страницу.

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

Кнопки » Вперед » и » Назад «, активируемые в проекте, опять же, назначены для перехода по страницам в очередности их добавления к проекту, вне зависимости от расположения страниц в меню.

Активировать кнопки » Вперед » и » Назад » Вы можете установкой отметки на пункте » Кнопки последовательного перехода по страницам » в дополнительных параметрах свойств проекта.

Во вкладке дополнительных параметров Вы можете активировать кнопки навигации, а также, при желании, назначить на кнопки навигации собственные изображения.

Далее отдельно по кнопкам:

1. Кнопки последовательного перехода по страницам проекта (вперед – назад)

Важно:

Кнопки последовательного перехода по страницам проекта (вперед – назад) не являются кнопками перехода по истории посещения сайта.

Это кнопки для перехода по страницам сайта в очередности добавления страниц к проекту сайта. Данная функция предусмотрена на случай, если Вы желаете ознакомиться со всеми страницами сайта, не опасаясь пропустить какую-либо страницу.

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

Кнопки » Вперед » и » Назад «, активируемые в проекте, опять же, назначены для перехода по страницам в очередности их добавления к проекту, вне зависимости от расположения страниц в меню.

Активировать кнопки » Вперед » и » Назад » Вы можете установкой отметки на пункте » Кнопки последовательного перехода по страницам » в дополнительных параметрах свойств проекта.

К примеру, пропишем вместо » Вперед » и » Назад «, соответствующие » Дальше » и » Обратно «.

Вы можете изменить название кнопок, введя желаемые фразы вместо установленных по умолчанию.

К примеру, пропишем вместо » Вперед » и » Назад «, соответствующие » Дальше » и » Обратно «.

Данные для его публикации (логин и пароль) будут выведены как напрямую в браузере, так и будет автоматически выслано на электронные адреса, указанные в анкете в Вашем виртуальном кабинете.

Тем самым имя сайта будет создано.

Данные для его публикации (логин и пароль) будут выведены как напрямую в браузере, так и будет автоматически выслано на электронные адреса, указанные в анкете в Вашем виртуальном кабинете.

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Поднимется окно проводника для выбора изображения, находящегося на Вашем компьютере.

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Добавив все четыре изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Так же добавьте и остальные три изображения.

Добавив все четыре изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Соответственно, на сайте они будут выглядеть следующим образом:

Для примера мы добавили следующие изображения:

Соответственно, на сайте они будут выглядеть следующим образом:

Аналогично кнопкам последовательного перехода по страницам сайта настраиваются и остальные кнопки в дополнительных параметрах свойств проекта.

2. Кнопка перехода к началу страницы

Кнопка перехода к началу страницы отображается в правом нижнем углу страницы.

По умолчанию это кнопка-ссылка со словом » Вверх «.

Аналогично кнопкам последовательного перехода по страницам сайта настраиваются и остальные кнопки в дополнительных параметрах свойств проекта.

2. Кнопка перехода к началу страницы

Кнопка перехода к началу страницы отображается в правом нижнем углу страницы.

По умолчанию это кнопка-ссылка со словом » Вверх «.

Вы можете изменить название кнопки, введя желаемую фразу вместо установленной по умолчанию.

К примеру, пропишем вместо «Вверх», фразу » В начало страницы «

Если Вы оставите назначение по умолчанию, то на сайте отобразится кнопка-ссылка с текстом » Вверх «.

Вы можете изменить название кнопки, введя желаемую фразу вместо установленной по умолчанию.

К примеру, пропишем вместо «Вверх», фразу » В начало страницы «

Для этого переставьте, пожалуйста, отметку на пункт » Графические переключатели «

Также Вы можете установить изображение вместо фразы для этой кнопки.

Для этого переставьте, пожалуйста, отметку на пункт » Графические переключатели «

Важно:

Нужно указать два изображения:

Для того, чтоб назначить изображения на кнопку, кликните, пожалуйста, по кнопке » Вставка изображения «

и укажите изображения, которые Вы желаете разместить в качестве кнопки перехода к началу страницы.

Важно:

Нужно указать два изображения:

Для того, чтоб назначить изображения на кнопку, кликните, пожалуйста, по кнопке » Вставка изображения «

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Поднимется окно проводника для выбора изображения, находящегося на Вашем компьютере.

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Добавив оба изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Так же добавьте и изображение кнопки при наведении на неё курсора.

Добавив оба изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Соответственно, на сайте они будут выглядеть следующим образом:

Для примера мы добавили следующие изображения:

Соответственно, на сайте они будут выглядеть следующим образом:

Аналогично кнопкам последовательного перехода по страницам сайта настраиваются и остальные кнопки в дополнительных параметрах свойств проекта.

3. Кнопка отправки страницы на печать

Важно:

По сути это не кнопка вызова печати страницы.

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

Распечатать же сформированную страницу, отображающую только наполнение, можно, нажав стандартное сочетание клавиш Ctrl + P

Кнопка вызова страницы, отображающей только наполнение, на сайте будет отображаться в правом верхнем углу страницы.

Аналогично кнопкам последовательного перехода по страницам сайта настраиваются и остальные кнопки в дополнительных параметрах свойств проекта.

3. Кнопка отправки страницы на печать

Важно:

По сути это не кнопка вызова печати страницы.

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

Распечатать же сформированную страницу, отображающую только наполнение, можно, нажав стандартное сочетание клавиш Ctrl + P

Кнопка вызова страницы, отображающей только наполнение, на сайте будет отображаться в правом верхнем углу страницы.

Активировать кнопку вызова страницы, отображающей только наполнение, Вы можете установкой отметки на пункте » Кнопка печати страницы » в дополнительных параметрах свойств проекта.

Вы можете изменить название кнопки, введя желаемую фразу вместо установленной по умолчанию.

К примеру, пропишем вместо » Печать «, фразу » Отобразить только наполнение страницы «

Если Вы оставите назначение по умолчанию, то на сайте отобразится кнопка-ссылка с текстом «Печать».

Вы можете изменить название кнопки, введя желаемую фразу вместо установленной по умолчанию.

К примеру, пропишем вместо » Печать «, фразу » Отобразить только наполнение страницы «

Для этого переставьте, пожалуйста, отметку на пункт » Графические переключатели «

Также Вы можете установить изображение вместо фразы для этой кнопки.

Для этого переставьте, пожалуйста, отметку на пункт » Графические переключатели «

Важно:

Нужно указать два изображения:

Для того, чтоб назначить изображения на кнопку, кликните, пожалуйста, по кнопке » Вставка изображения «

и укажите изображения, которые Вы желаете разместить в качестве кнопки перехода к началу страницы.

Важно:

Нужно указать два изображения:

Для того, чтоб назначить изображения на кнопку, кликните, пожалуйста, по кнопке » Вставка изображения «

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Поднимется окно проводника для выбора изображения, находящегося на Вашем компьютере.

Выберите, пожалуйста, желаемое изображение и нажмите кнопку » Открыть «

Добавив оба изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Так же добавьте и изображение кнопки при наведении на неё курсора.

Добавив оба изображения, для сохранения внесенных изменений, нажмите кнопку » ОК » в окне дополнительных параметров свойств проекта.

Соответственно, на сайте они будут выглядеть следующим образом:

Для примера мы добавили следующие изображения:

Соответственно, на сайте они будут выглядеть следующим образом:

Аналогично кнопкам последовательного перехода по страницам сайта настраиваются и остальные кнопки в дополнительных параметрах свойств проекта.

4. Кнопка перехода на версию сайта для слабовидящих.

Генератор версии для слабовидящих доступен только в расширенных версиях Конструктора.

Более детально об активации версии сайта для слабовидящих Вы можете узнать на странице «Версия сайта для слабовидящих».

Источник

Узнайте, как создать раскрывающуюся панель навигации.

Раскрывающееся меню в навигации

Создание раскрывающегося меню навигации

Создайте раскрывающееся меню, которое появляется, когда пользователь перемещает указатель мыши на элемент внутри панели навигации.

Шаг 1) добавить HTML:

Пример

Пример как работает

Используйте элемент контейнера (например,

Шаг 2) добавить CSS:

Пример

/* Navbar container */
.navbar <
overflow: hidden;
background-color: #333;
font-family: Arial;
>

/* Links inside the navbar */
.navbar a <
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* The dropdown container */
.dropdown <
float: left;
overflow: hidden;
>

/* Dropdown content (hidden by default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a <
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
>

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover <
background-color: #ddd;
>

Пример как работает

Мы создали стиль навигационной панели и навигационные ссылки с фоном-цвет, обивка и т.д.

Мы создали стиль выпадающего кнопки с фоном-цвет, обивка и т.д.

Вместо использования границы мы использовали box-shadow свойство, чтобы выпадающее меню выглядело как «карточка». Мы также используем z-index для размещения раскрывающегося списка перед другими элементами.

:hover селектор используется для отображения раскрывающегося меню, когда пользователь перемещает указатель мыши на кнопку раскрывающегося списка.

Выбираемое раскрывающееся меню в навигационной

Пример

Совет: Перейдите в наш CSS раскрывающегося меню учебник, чтобы узнать больше о раскрывающихся списках.

Совет: Откройте раскрывающееся меню, чтобы узнать больше о всплывающих раскрывающихся списках

Совет: Перейдите на наш CSS навигации Учебник, чтобы узнать больше о NavBars.

Совет: Перейдите на нашу отзывчивую верхнюю навигацию, чтобы узнать о том, как создать адаптивную навигационную панель.

Источник

Узнайте, как создать анимированное, закрываемое Боковое навигационное меню.

Создание анимированной боковой навигации

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

/* The navigation menu links */
.sidenav a <
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
>

/* When you mouse over the navigation links, change their color */
.sidenav a:hover <
color: #f1f1f1;
>

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) <
.sidenav .sidenav a
>

Шаг 3) добавить JavaScript:

Пример ниже слайдов в боковой навигации, и делает его 250пкс широкий:

Пример sidenav наложения

/* Set the width of the side navigation to 250px */
function openNav() <
document.getElementById(«mySidenav»).style.width = «250px»;
>

/* Set the width of the side navigation to 0 */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
>

Пример ниже слайдов в боковой навигации и перемещает содержимое страницы вправо (значение, используемое для установки ширины Sidenav также используется для установки левого поля «содержимое страницы»):

Sidenav Push-контент

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() <
document.getElementById(«mySidenav»).style.width = «250px»;
document.getElementById(«main»).style.marginLeft = «250px»;
>

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
document.getElementById(«main»).style.marginLeft = «0»;
>

В приведенном ниже примере также слайды в боковой навигации, и толкает содержимое страницы вправо, только на этот раз, мы добавляем черный цвет фона с 40% непрозрачность элемента Body, чтобы «выделить» боковой навигации:

Sidenav Push Content w/ непрозрачность

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() <
document.getElementById(«mySidenav»).style.width = «250px»;
document.getElementById(«main»).style.marginLeft = «250px»;
document.body.style.backgroundColor = «rgba(0,0,0,0.4)»;
>

/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
document.getElementById(«main»).style.marginLeft = «0»;
document.body.style.backgroundColor = «white»;
>

Пример ниже слайдов в боковой навигации слева и охватывает всю страницу (100% ширины):

Sidenav полная ширина:

/* Open the sidenav */
function openNav() <
document.getElementById(«mySidenav»).style.width = «100%»;
>

/* Close/hide the sidenav */
function closeNav() <
document.getElementById(«mySidenav»).style.width = «0»;
>

В приведенном ниже примере открывается и закрывается Боковое навигационное меню без анимации:

Sidenav без анимации

/* Open the sidenav */
function openNav() <
document.getElementById(«mySidenav»).style.display = «block»;
>

/* Close/hide the sidenav */
function closeNav() <
document.getElementById(«mySidenav»).style.display = «none»;
>

В следующем примере показано, как создать контекстное меню навигации:

Право-двусторонняя Навигация:

В приведенном ниже примере показано, как создать меню боковой навигации, которое всегда отображается (фиксированное):

Всегда показывать Sidenav:

/* The sidenav */
.sidenav <
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
>

/* Page content */
.main <
margin-left: 200px; /* Same as the width of the sidenav */
>

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.

Источник