[показать]
[показать]

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

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

1. Контур http://s017.radikal.ru/i441/1511/0c/7f73ad9c6637.jpg

2. Широкая вставка http://s017.radikal.ru/i426/1511/f8/44810002034f.jpg

3. Фон рамки для плеера http://s019.radikal.ru/i605/1511/3b/890fed9f9405.jpg

4. Фоновая картинка http://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/
Плееры для MP3 - http://www.liveinternet.ru/users/win-win-win/post385040365
Давно не писала уроки, поэтому может что упустила. Что не понятно, пишите,
Удачи!

bloginja