+
Данная книга будет полезна тем кто изучает наш редактор MBook Editor. В книге представлены все имеющиеся компоненты с примерами их использования.
РЕЗУЛЬТАТ ПРОВЕРКИ ПОДПИСИ
Данные электронной подписи
Ссылка на политику подписи
Закрыть

Версия 1.36

MBOOK

МОСКВА 2016

ОБЗОР СОСТАВЛЯЮЩИХ КОМПОНЕНТОВ

С

Новыми Шрифтами

Оглавление

Текст
Картинки
Ссылки
Фотоальбомы
Видео
Аудио
Шрифты
Фигуры
Фреймы
Просмотр
4
6
8
10
14
20
22
24
26
32
GIF Анимация
18

2

Обзор компонентов

Программа MBook Editor для информационного наполнения книг использует несколько основных компонент. Все доступные компоненты находятся на панели инструментов. Для того что бы добавить компонент на страницу, его достаточно перетащить мышкой на страницу книги. Настройки размеров и расположение компонента можно установить мышкой, а все дополнительные настройки выделенного компонента доступны на панели в правой части редактора.

С

Новыми Шрифтами

3

Текст

Текст является одним из главных компонентов. Для размещения текста в книге, перетащите компонент "Текст" с панели инструментов на страницу. Мышкой задайте положение и размеры. Двойной клик на тексте переводит компонент в режим редактирования текста. При редактировании доступны основные функции редактирования: размер шрифта, шрифт, цвет текста, список или нумерованный список.

 

С помощью нескольких компонентов "Текст" можно создать разметку как у глянцевого журнала в несколько колонок. Для удобства, можно сохранять разметку текущей страницы как шаблон. Затем, применять этот шаблон к новым страницам. Использование шаблонов значительно ускоряет и упрощает процесс создания книги.

 

Общее количество текстовых компонентов в книге и на странице не ограничено.

 

4

Примеры форматирования:

 

Пример текста 1 Пример текста 2

 

Пример текста 3

 

  • Пример текста 4

  • Пример текста 5

 

Примеры шрифтов:

 

1) Использованный шрифт - Arial

2) Использованный шрифт - Courier New

3) Использованный шрифт - Helvetica

4) Использованный шрифт - Impact

5) Использованный шрифт - Tahoma

6) Использованный шрифт - Times

7) Использованный шрифт - Verdana

 

К оглавлению

5

Картинка

Картинка это хороший инструмент для оформления книги. Для использования картинки, достаточно перетащить её из панели инструментов на страницу книги. Мышкой можно задать положение и размер. Саму картинку и все дополнительные свойства можно выбрать на панели с правой стороны.

 

Картинки сначала нужно добавить в проект книги. Это делается на панели "Объекты" с левой стороны. После того как картинки добавлены в объекты, их можно использовать на страницах книги.

 

Общее количество картинок в книге и на странице не ограничено.

 

Режим "Заполнить" без Рамки

6

Примеры Картинок:

К оглавлению

Картинка с рамкой

Картинка без рамки

Режим "Заполнить" с Рамкой

7

Ссылка

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

 

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

 

Внешняя ссылка это ссылка на любой web адрес: сайт, форум, картинку, видео... При нажатии на такую ссылку у пользователя открывается системный браузер с переходом по ссылке. Это удобно использовать для указания вашего сайта, групп в социальных сетях, ссылки на обзоры, форумы и т.д. Для создания внешней ссылки, перетащите компонент - ссылка на страницу книги и задайте ей тип: "на интернет-страницу".

8

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

 

Общее количество ссылок на странице и в книге не ограничено.

 

Примеры ссылок:

Автограф
Google
На страницу "Оглавление"
К оглавлению

Прозрачная ссылка:

9

Фотоальбом

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

 

Для использования фотоальбома, первым делом добавьте фотографии в проект книги - это можно сделать на панели "Объекты" с левой стороны. Добавление объектов в книгу осуществляется с помощью кнопки плюс "+", а удаление с помощью кнопки минус "-". После добавления фотографий в проект их можно использовать и размещать в книге.

 

Двойной клик по фотоальбому в редакторе открывает быстрое редактирование, а самая первая фотография будет отображаться как обложка.

 

 

10

Пример: Фотоальбом с миниатюрами:

9
9
9
8

11

Фотоальбом

Для создания фотоальбома сначала выберите несколько фотографий в списке объектов, а затем перетащите компонент "Фотоальбом" с панели инструментов на страницу книги.

 

При этом в фотоальбом автоматически добавятся все фотографии которые вы выделили, а первое фото будет обложкой фотоальбома. Если вы выделите фотоальбом, то в правой панели будут доступны все его свойства. Так же на этой панели можно удалить или добавить новое фото в фотоальбом и выбрать обложку.

 

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

 

Общее количество фотоальбомов на странице и в книге не ограничено. Можно использовать одну и ту же фотографию в разных фотоальбомах.

12

9
9

Пример: Фотоальбом без миниатюр:

13

Видео

С помощью компонента "Видео" можно размещать в книге видеоролики. Для добавления видео, необходимо перетащить компонент "Видео" с панели инструментов на страницу книги. Далее, с помощью мышки задать положение и размер, а на панели свойств с правой стороны задать все необходимые свойства. Видео может быть нескольких типов: локальный файл, YouTube и т.д.

 

Локальное видео. Для показа в книге видео из локального файла, необходимо сначала добавить видео файл в проект книги. Это можно сделать на панели "Объекты" с левой стороны. Добавление объектов в книгу осуществляется с помощью кнопки плюс "+", а удаление с помощью кнопки минус "-". Затем указать тип источника видео "Этот компьютер" и выбрать файл из выпадающего списка.

Видео с других сервисов (vimeo, rutube) можно разместить с помощью компонента "Фрейм".

14

YouTube видео. Для видео из сети YouTube нужно выбрать тип источника "YouTube ID" и указать ID код видео. В качестве ID кода можно скопировать полную ссылку на страницу видео, программа автоматически получит ID из такой ссылки.

 

Общее количество компонентов "Видео" на странице и в книге не ограничено.

 

 

К оглавлению

Youtube Video

15

Видео

00:00
/
00:00

Примеры локального видео

00:00
/
00:00

MP4

FLV

Самый популярный формат. Он поддерживается всеми платформами.

Устаревший формат, работает не на всех платформах и компьютерах.

16

Примеры YouTube видео

17

GIF Анимация

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

18

Анимационный GIF файл добавляется как обычная картинка. Сначала необходимо добавить GIF в проект, а затем разместить на странице книги.

 

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

19

Аудио

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

 

Перед использованием компонента "Аудио", необходимо добавить все музыкальные файлы в проект книги. Это можно сделать на панели "Объекты" с левой стороны. Добавление объектов в книгу осуществляется с помощью кнопки плюс "+", а удаление с помощью кнопки минус "-".

 

Общее количество компонентов "Аудио" на странице и в книге не ограничено.

 

Онлайн музыку (например, с Яндекс Музыка, SoundCloud) можно разместить с помощью компонента "Фрейм".

20

Примеры аудио (локальный MP3 файл):

Example Music - MP3

00:00 / 00:00

К оглавлению

Example Music - MP3

00:00 / 00:00

Пример онлайн аудио (Sound Cloud):

21

Шрифты

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

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

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

22

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

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

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

23

Фигуры

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

Фигуры можно использовать для оформления книги и выделения блоков и участков.

24

25

Фреймы

Фрейм позволяет добавить любой визуальный и мультимедийных компонент который можно сделать на технологии HTML. Также с помощью фреймов можно размещать виджеты в своей книге с других сайтов.

 

Фреймы могут быть онлайн и локальные. Количество фреймов на странице и в книге не ограничено.

 

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

 

Для создания фрейма переместите компонент "Фрейм" на страницу и задайте ему необходимые свойства на правой панели. Результат работы фрейма можно посмотреть в предварительном просмотре.

26

Онлайн фрейм

В настройках на правой панели необходимо задать тип фрейма "Онлайн фрейм" и URL адрес. При просмотре он будет отображать то, что находится по указанному URl адресу. Этоа технология позволяет разместить любые сложные интерактивные данные от онлайн игры, до онлайн сервисов и приложений.

 

Локальный фрейм

В настройках на правой панели необходимо задать тип фрейма - локальный, и заполнить HTML, CSS и JS поля при необходимости. При просмотре такого фрейма, будет отображено все содержимое HTML, CSS и JS в заданном компоненту размере.

 

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

27

Многие сайты позволяют размещать свои компоненты на других сайтах, например, видео из youtube, музыка sound cloud, коментарии ВКонтакте или любые другие виджеты. С помощью фреймов можно размещать такие виджеты в своей книге. Обычно необходимо найти кнопку поделиться и выбрать HTML код или код IFRAME. Наиболее популярные способы применения онлайн фреймов:

 

  • Вставка онлан видео (youtube, vimeo, rutube и др.)

  • Добавление музыки на страницы: Yandex музыка, SoundCloud и др.

  • Добавление форм голосований таблиц и других документов: Google documents, Google forms и другие похожие сервисы

  • Анкеты и формы

  • Форма обратной связи

  • Онлайн игры и сервисы

  • Социальные сети: комментарии, группы, обсуждения

  • Анимация и интерактивные элементы

Онлайн Фрейм

28

Пример онлайн фрейма:

29

Локальный Фрейм

Локальный фрейм можно использовать для вставки блоков со сложным форматированием, например, таблицы, анимация, интерактивные элементы и др. Для этого необходимо разместить компонент фрейма, указать тип: "Локальный" и задать HTML + CSS + JS данные.

 

В редакторе, на миниатюре доступен предварительный просмотр результата фрейма. В миниатюрах поддерживаются не все правила CSS 3 и HTML 5. Для оценки работоспособности используйте предварительный просмотр фрейма или всей книги который осуществляется в системном браузере.

 

Для формирования локального фрейма могут понадобится знания HTML.

30

Пример локального фрейма с CSS анимацией:

31

Просмотр

Для предварительного просмотра открытой книги можно воспользоваться кнопкой на панели инструментов "Просмотр" или выполнить команду главного меню "Просмотр \ Предварительный просмотр" (горячая клавиша F5).

 

В предварительном просмотре можно посмотреть как будет выглядеть ваша книга на сайте, протестировать ссылки, оглавления и фотоальбомы. В плеере для предварительного просмотра доступны команды перелистывания страниц, просмотр в полный экран, а так же просмотр окна проверки подписи. В предварительном просмотре проверка подписи не осуществляется.

 

32

К оглавлению

33

В этой книге:

  • Авто-воспроизведение фоновой музыки

  • Примеры видео (локального и youtube)

  • 2 музыкальные композиции

  • Ссылки - оглавление, прозрачные ссылки

  • Новые шрифты

  • Фигуры

  • Фреймы

  • Анимационные GIF

Компоненты

Выговский Денис

421

Добавил: Денис Выговский

Статистика

С помощью виджета для библиотеки, можно добавить любой объект из библиотеки на другой сайт. Для этого необходимо скопировать код и вставить на сайт, где будет отображаться виджет.

Этот код вставьте в то место, где будет отображаться сам виджет:


Настройки виджета для библиотеки:

Предварительный просмотр:


Опубликовано: 9 Nov 2016
Категория: Демо, Буклеты, описания, статьи

Данная книга будет полезна тем кто изучает наш редактор MBook Editor. В книге представлены все имеющиеся компоненты с примерами их использования.

КОММЕНТАРИИ (0)

Оставить комментарий анонимно
В комментариях html тэги и ссылки не поддерживаются

Оставьте отзыв первым!