Основы конвергентной деятельности журналиста. 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=“green”> кнопка 3
< /div>
3)Допустим вы выбираете третью кнопку вашего меню
для создания подменю (выделяю жирным). Для этого вы должны отделить эту
строку от остального меню, закрыв открытые теги <ul> для других частей (в желтом поле):
< div id=“menu”>
< ul>
< /ul>
< li><a href=“ тут ссылка на сайт” class=“green”> кнопка 3</a></li>
< ul>
< /div>
< /ul>
4)Далее вы работаете с интересующей вас вкладкой:
Перед ней прописываете параметры субменю выпадающего вниз, добавляя класс dropdown:
< ul class=“dropdown”>
< li class=“dropdown-top”>
5)Затем в самой ссылке также вписываете параметры субменю (выделены жирным) и переименовываете вкладку в флипбук
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 сентября. Любая задержка с комментарием со ссылкой будет означать минус балл к оценке.
http://tumblinter.tumblr.com/
ОтветитьУдалитьОценка "отлично"
Удалитьhttp://superimpossibleavenuecollection.tumblr.com/
ОтветитьУдалитьОценка "отлично", просьба подписываться в комментариях своей фамилией, чтобы я знал кому ставить оценку.
Удалитьhttp://alekseevagalina.tumblr.com/
ОтветитьУдалитьОценка "отлично"
Удалитьhttp://anastasia420fan.tumblr.com/
ОтветитьУдалитьОценка "отлично"
УдалитьОценка "отлично", только убедительная просьба своей фамилией подписываться, чтобы я знал кому ставить оценку.
ОтветитьУдалитьОценка "отлично"
ОтветитьУдалитьОценка "отлично"
ОтветитьУдалитьВсе комментарии к работам, размещенные ниже, будут оцениваться с учетом минус балла, так как контрольный срок выполнения задания прошел.
ОтветитьУдалитьисправите ошибку, оценку снижать не буду. Скорее всего у вас стоит лишний открывающий тег < ul> в 1030-ой строке кода, перед тегом
ОтветитьУдалить< ul class="dropdown"> и лишний тег < /div> в 1045-ой строке.
http://anasteishalebedeva.tumblr.com/
ОтветитьУдалитьПринято, оценка "отлично".
ОтветитьУдалитьНа этом комментарии закрываю. Все, кто не успел/опоздал/не захотел делать получают оценку 2.
ОтветитьУдалить