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

Воскресенье, 14 Июля 2019 г. 20:53 + в цитатник

Цитата сообщения 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 - Душевная музыка. Светлана Копылова.
Часть 3 - Детская рамочка. Мирилка.
Часть 4 - Музыкальные рамки - открытки
Часть 5 - Урок по созданию музыкальной открытки
Часть 6 - Учимся делать рамочки
Часть 7 - Музыкальный альбом Горячий шоколад
...
Часть 10 - Рамки для постов
Часть 11 - Вставить рамку в пост
Часть 12 - Рамка "Светлой пасхи"

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

Часть 1 - Бегущая строка из картинок или текста
Часть 2 - Плееры в дневник
...
Часть 9 - Всё про картинки. Часть 4. Картинки в ряд и столбик.
Часть 10 - Программа для скачивания музыки с Лиру
Часть 11 - Урок по созданию музыкальной открытки
Часть 12 - Фон для поста
Часть 13 - Читать закрытые записи
...
Часть 18 - Развернуть картинку прямо на странице поста
Часть 19 - Вставляем музыкальный плеер в определённое место
Часть 20 - Не показывает видео в дневниках. Браузер Firefox.

Рубрики:

музыкальная открытка

Метки: музыкальная открытка
Понравилось: 4 пользователям

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

ВАТ обратиться по имени Воскресенье, 14 Июля 2019 г. 21:07 (ссылка)

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

Ответить С цитатой В цитатник

Воскресенье, 14 Июля 2019 г. 21:14ссылка

Татьяна_Волкова_Литвинова

Верочка, для меня это все ново. Я рамочки мало делала, если и делала, то в фотошопе. А это по кодам. Мне понравилась работа с майла, вот я и отвлеклась на эту тему.

Ответить С цитатой В цитатник Обратиться по имени

Воскресенье, 14 Июля 2019 г. 21:23ссылка

ВАТ

А я их пробовала делать 5 лет назад. Одна рамочка испортилась почему-то, может быть адреса пропали, не стала её восстанавливать. Если хочешь посмотри вот на этой странице у меня, там и пару уроков есть. https://www.liveinternet.ru/users/5093970/rubric/5527041/

Ответить С цитатой В цитатник Обратиться по имени

Воскресенье, 14 Июля 2019 г. 21:28ссылка

Татьяна_Волкова_Литвинова

Верочка, спасибо! У меня есть рамочки в закладках. А твоей ссылкой при случае воспользуюсь. А сейчас только посмотрела.

Ответить С цитатой В цитатник Обратиться по имени

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Музыка

-Метки

-Рубрики

-Приложения

-Новости

-Ссылки

-Фотоальбом

-Стена

-

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

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