Делаю музыкальную открытку.
HTML-код музыкальной открытки:
<center><div style="background-image: url(АДРЕС КАРТИНКИ);border-style: double; background-position: 50% 0%; padding:280px 0px 0px 0px; background-repeat:;width:480px"><div style="background-image: url();border-style: ; background-position: 0% 0%; padding:0px 0px 0px 20px; background-repeat:no-repeat;"><div style="text-align: center; font: 20px Arial;font-style: italic; color: #ffffff; padding:2px;">АВТОР МУЗЫКИ И НАЗВАНИЕ</div><center>КОД ПЛЕЕРА</center></div></div></center>
(Чтобы открытка располагалась в центре страницы, HTML-код записывается между тегами: <center>КОД</center>).
Все данные, в том числе размеры картинки, могут изменяться. В данном случае картинка располагается горизонтально, но может располагаться и вертикально. Так что готовится черновой вариант, а затем редактируется.
АДРЕС КАРТИНКИ. Загружаю картинку через файловый менеджер и копирую прямую ссылку на эту картинку. Вставляю ссылку в HTML-код: АДРЕС КАРТИНКИ (скобки сохраняются).
(Воспользоваться можно любым фотохостингом, но помнить: "чужие" фотохостинги вечно картинки не хранят, и в одно "прекрасное" время картинка может просто исчезнуть).
КОД ПЛЕЕРА. Открыть в редакторе окно "Виджеты" - "простой плеер". "Выбрать" через файловый менеджер музыку, предварительно загрузив ее на свой сайт. Поставить галочку, указывающую на вид плеера, выбрать цвет плеера. "Получить код". Скопированный код плеера вставить в HTML-код муз.открытки вместо слов "КОД ПЛЕЕРА". Записать название, исполнителя и т.д. (ненужный текст можно будет удалить при редактировании в текстовом редакторе).
Открытку размещаю на фоне. HTML-код фона:
<center><table border="0" cellspacing="8" cellpadding="0" width="100%"background="АДРЕС КАРТИНКИ-ФОНА"><tbody><tr><td><CENTER> <span style="font-family:Arial; color:black; font-size:12px"> ТЕКСТ или другие данные</span> </CENTER></td></tr></tbody></table></center>
Адрес картинки заполняю аналогично: копирую прямую ссылку на картинку через файловый менеджер и вставляю ссылку в код "адрес картинки-фона". Размер фона (100%) корректирую при редактировании по размерам картинки. 100 % можно заменить размерами. Как удобно для ровного размещения картинки на фоне.
Вместо слов "ТЕКСТ и другие данные" вставляю ранее подготовленный HTML-код музыкальной открытки.
HTMl-код музыкальной открытки на фоне готов. Записываю его в редактор "Панель HTML кодов. Редактирую при необходимости.
Вот такая музыкальная открытка в итоге получилась:
Александр Малинин
У самовара
|
Открытка. Фотохудожник Г.Куприянов. 1968
* * *
|
Исполняется детская песенка "Ужасно интересно".
Рис. В. Зарубина. Открытка 1969 года.
HTML код плеера:
<table width="223" height="228" style="border:0px none #000000" background="ПРЯМАЯ ССЫЛКА НА КАРТИНКУ ПОД ПЛЕЕР" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="left"><span style="color:#000000;font-size:14px"> КОД ПЛЕЕРА </span><div </tr></table>
Размеры "223" и "228" изменяются в зависимости от размеров картинки под плеер.
Прямую ссылку на картинку копирую открыв файловый менеджер, предварительно загрузив ее через файловый менеджер.
Положение кнопки плеера (в этом коде "left" слева) можно изменить на "right" справа или "сеnter" центр.
"Код плеера" копирую открыв в здесь в редакторе "Виджеты" - простой плеер и заполнив здесь все пункты: при нажатии на кнопку "Выбрать" открывается файловый менеджер, где выбираю музыкальный файл; цвет плеера; ставлю галочку, указывающую на размер плеера. Копирую код в открывшемся окне.
Другие данные в HTML коде также можно изменять по вкусу.
Заполнив HTML код в любом текстовом редакторе (блокнот или Word (по вкусу редактор WordPad), копирую код и вставляю его в редактор сайта "Панель HTML кодов". Сохраняю, смотрю, что получилось, при необходимости редактирую.
Для размещения плеера в центре страницы записываем HTML код в теги "<center>" КОД "</center>". (По умолчанию он устанавливается слева).
Вот такой (вверху) симпатичный музыкальный плеер получился.
* * *