Урок по созданию музыкальной открытки

Среда, 02 Декабря 2015 г. 02:50 + в цитатник

Цитата сообщения bloginja

Прочитать целиком В свой цитатник или сообщество!

Урок по созданию музыкальной открытки

Урок по созданию музыкальной открытки

Как и обещала, сделала урок про музыкальные рамки-открытки.

1. Подбираем фоновые картинки для нашей рамки. Получаем их ссылки-адреса через какой-нибудь хостинг (я пользуюсь Радикалом).

Я взяла для примера такие:

1. Контур

//s017.radikal.ru/i441/1511/0c/7f73ad9c6637.jpg

2. Широкая вставка

//s017.radikal.ru/i426/1511/f8/44810002034f.jpg

3. Фон рамки для плеера

//s019.radikal.ru/i605/1511/3b/890fed9f9405.jpg

4. Фоновая картинка

//s014.radikal.ru/i326/1511/fe/0114e289b005.gif

2. Скелет HTML кода рамки копируем в Новую запись дневника

<div align="center"><table border="0" cellspacing="0" cellpadding="3" background="КОНТУР"><tbody><tr><td style="padding: 3px;"><table border="0" cellspacing="1" cellpadding="15" background="ШИРОКАЯ ВСТАВКА"><tbody><tr><td style="padding: 15px;"><table border="0" cellspacing="0" cellpadding="3" background="КОНТУР"><tbody><tr><td style="padding: 3px;"><table border="0" background="ФОНОВАЯ КАРТИНКА" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding: 0px;" width="240" height="320" align="center"><table border="0"><tbody><tr><td style="padding: 0px;" align="center" width="240" height="320"></td></tr></tbody></table><table border="0" cellspacing="0" cellpadding="2" background="КОНТУР"><tbody><tr><td style="padding: 2px;"><table border="0" cellspacing="0" cellpadding="2" background="ФОН РАМКИ ДЛЯ ПЛЕЕРА"><tbody><tr><td style="padding: 6px;" width="240"><div align="center">ПЛЕЕР</div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div>

3. Копируем по очереди ссылки подготовленных картинок и вставляем в код вместо моих слов.
Т.е. копируем ссылку первой картинки и вставляем вместо слова "КОНТУР". Затем копируем вторую ссылку и вставляем вместо слов "ШИРОКАЯ ВСТАВКА". И так со всеми картинками.

4. Размер фоновой картинки указываем в тегах width (ширина) и height (высота). Здесь картинка 240х320, поэтому в коде указаны значения width="240" height="320".
Ещё указываем ширину (width) фона под плеер. Здесь указана ширина width="240" (по ширине картинки).

5. На место слов "ПЛЕЕР" вставляется любой подходящий плеер.
Я вставила такой, только белый:

HTML код такого плеера

Скопируем код из окошка, вставим в код рамки и вместо моих слов "ССЫЛКА НА МУЗЫКУ С РАСШИРЕНИЕМ MP3" вставим ссылку на музыку, к примеру такую http://download-sounds.ru/wp-content/uploads3/2012/11/virus-novyigod.mp3

Сменив в коде classic на negative получим черный плеер.
Сменив auto=no на auto=yes получим плеер с автостартом, но с выключением.

6. И получаем готовую музыкальную открытку.

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

А можно сделать вот такую открытку http://www.liveinternet.ru/users/win-win-win/post346502774/

Давно не писала уроки, поэтому может что упустила. Что не понятно, пишите, объясню.

Удачи!

bloginja

Серия сообщений "рамки":

Часть 1 - Рамка для молитвы
Часть 2 - Рамка к Пасхе. Грядущие праздники.
...
Часть 5 - Детская рамочка. Мирилка.
Часть 6 - Музыкальные рамки - открытки
Часть 7 - Урок по созданию музыкальной открытки

Серия сообщений "Памятка для Лиру":

Часть 1 - Бегущая строка из картинок или текста
Часть 2 - Плееры в дневник
...
Часть 10 - Всё про картинки. Часть 4. Картинки в ряд и столбик.
Часть 11 - Программа для скачивания музыки с Лиру
Часть 12 - Урок по созданию музыкальной открытки