Основы конвергентной деятельности журналиста. 2 курс. Лабораторное занятие №1. Выпадающее меню и флипбук

Для выполнения этой работы вам потребуется ваш блог в Tumblr с настроенной темой Observer.

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

Для этого вам необходимо переименовать одну из ваших вкладок в «Флипбук» и создать статичные страницы для этих вкладок.

1)Вы переходите в режим редактирования HTML в вашем блоге в Tumblr и находите верхние параметры цветов, где вы прописывали их последовательность. После этих параметров и перед тегом </style> вы добавляете атрибуты стилей выпадающего меню:

ul.dropdown li { position: relative; }

 ul.dropdown,

 ul.dropdown-inside {

 list-style-type: none;

 padding: 0;

 }

 ul.dropdown-inside {

 position: absolute;

 left: -9999px;

 }

 ul.dropdown li.dropdown-top {

 display: inline;

 float: left;

 margin: 0 1px 0 0;

 }

 ul.dropdown li.dropdown-top a {

 padding: 3px 10px 4px;

 display: block;

 }

 ul.dropdown a.dropdown-top { background: #4682B4; }

 ul.dropdown a.dropdown-top:hover { padding: 2px 10px 5px; }

 ul.dropdown li.dropdown-top:hover .dropdown-inside {

 display: block;

 left: 0;

 }

 ul.dropdown .dropdown-inside { background: #4682B4; }

 ul.dropdown .dropdown-inside a:hover { background: #4682B4; }

Обратите внимание, что в перечне указан фоновый цвет – это цвет пунктов вашего выпадающего меню. Заменяете его на любой, какой хотите (и какой у вас будет работать).

2) Вы переходите к списку меню со ссылками и выбираете ту вкладку, у которой будет выпадающее подменю. Например, у вас такой список:

< div id=“menu”>

< ul>                                                                                    

< li>  class=“red”>главная

< li>тут ссылка на сайт” class=“orange”>кнопка 1

< li>тут ссылка на сайт” target=“_blank” class=“yellow”> кнопка 2

< li>тут ссылка на сайт”  class=“green”> кнопка 3

< li>тут ссылка на сайт” class=“blue”> кнопка 4

< li>тут ссылка на сайт” class=“grey”> кнопка 5

< li>тут ссылка на сайт” class=“black”> кнопка 6

< li>тут ссылка на сайт” class=“purple”> кнопка 7

< /div>

3)Допустим вы выбираете третью кнопку вашего меню для создания подменю (выделяю жирным). Для этого вы должны отделить эту строку от остального меню, закрыв открытые теги <ul> для других частей (в желтом поле):

< div id=“menu”>

< ul>                                                                                    

< li>  class=“red”>главная

< li>тут ссылка на сайт” class=“orange”>кнопка 1

< li>тут ссылка на сайт” target=“_blank” class=“yellow”> кнопка 2

< /ul>

< li><a href=“ тут ссылка на сайт”  class=“green”> кнопка 3</a></li>

< ul>

< li>тут ссылка на сайт” class=“blue”> кнопка 4

< li>тут ссылка на сайт” class=“grey”> кнопка 5

< li>тут ссылка на сайт” class=“black”> кнопка 6

< li>тут ссылка на сайт” class=“purple”> кнопка 7

< /div>

< /ul>

4)Далее вы работаете с интересующей вас вкладкой:

Перед ней прописываете параметры субменю выпадающего вниз, добавляя класс dropdown:

< ul class=“dropdown”>

< li class=“dropdown-top”>

5)Затем в самой ссылке также вписываете параметры субменю (выделены жирным) и переименовываете вкладку в флипбук

class=“dropdown-top”

href=“тут ссылка на сайт” class=“green”>флипбук

6)Далее вы задаете само субменю. Вначале указываете общий класс – выпадающее:

< ul class=“dropdown-inside”>

7)Затем указываете исходную строку в вашем основном меню:

 < li><a href=“тут ссылка на сайт” class=“green”>Флипбук</a></li>

8)Можно пропустить эту строку, тогда у вас получится автозамена – вместо вашей строки основного меню при наведении курсора будет открываться субменю. Любой из вариантов правилен.

9)Далее вы указываете параметры выпадающей кнопки  (вам нужны две такие кнопки, назовите их флипбук 1 и флипбук2).

 < li><a href=“тут ссылка на сайт”>флипбук 1</a></li>

10) Затем вы закрываете субменю:

 < /ul>

 < /li>

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

11)Теперь вам нужно сделать статичные страницы и прописать ссылки с этих страниц в ваше меню. Для этого вы переходите в настройки Tumblr и в сайдбаре слева выбираете пункт «Добавить страницу». Далее вам нужно указать адрес страницы после / латиницей. Вы создаете три таких страницы – первая просто /flipbook, вторая /flipbook1  и третья /flipbook2.

Заголовки в названии этих страниц можете использовать любые.

У вас получается три ссылки вида:

http://konoplev.tumblr.com/flipbook

http://konoplev.tumblr.com/flipbook1

http://konoplev.tumblr.com/flipbook2

12)Первую из них вы как ссылку вставляете в исходную кнопку меню, вторую – в первую выпадающую кнопку субменю, третью – во вторую выпадающую кнопку субменю.

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

13) Для этого переходите на сайт issuu.com и регистрируетесь.

14) Затем создаете два PDF-файла каждый не менее 4 страниц (чтобы листались) с любым содержимым. Проще всего сделать их в документе Word, выбрать сохранить как PDF.

15)Загружаете каждый из файлов в ваш профиль на issuu, добавляя описание и название. Затем выбираете create embed, настраиваете параметры кода и копируете код вашего виджета. Этот код вставляете на статичную страницу – первый на первую, второй – на вторую.

Когда все готово, публикуете ссылку на главную страницу вашего блога в Tumblr.

P.S. Все операции с кодом предпочтительнее проводить в Notepad++

Если ваш браузер не поддерживает доступ к Issuu по умолчанию, установите приложение Frigate.

Ссылки на выполненное задание принимаются до 10:00 понедельника, 12 сентября. Любая задержка с комментарием со ссылкой будет означать минус балл к оценке.