Как сделать рамку "Слушать и скачать"

Попросили написать урок, как делать такие рамки. А писать, честно, не знаю что. Это ведь обычная рамка, которые мы уже учились делать здесь.
Я просто дам HTML-код такой рамки и покажу на примере как будет меняться рамка в процессе.

Итак.
Подготовим картинки. Я взяла такие:
1.
её адрес http://content.foto.mail.ru/mail/moisin/3320/i-3355.jpg
размер картинки 600х321

2.
её код http://content.foto.mail.ru/mail/moisin/3320/i-3356.jpg">
размер 22х30

Вставляем в Новую запись код рамки:

ИМЯ АВТОРА НАЗВАНИЕ РАМКИ МУЗЫКАЛЬНЫЙ ТРЕК КАРТИНКА - КНОПКА СКАЧАТЬ МУЗЫКАЛЬНЫЙ ТРЕК КАРТИНКА - КНОПКА СКАЧАТЬ МУЗЫКАЛЬНЫЙ ТРЕК КАРТИНКА - КНОПКА СКАЧАТЬ МУЗЫКАЛЬНЫЙ ТРЕК КАРТИНКА - КНОПКА СКАЧАТЬ МУЗЫКАЛЬНЫЙ ТРЕК КАРТИНКА - КНОПКА СКАЧАТЬ

Вставляем на место записи ЛИЦЕВОЙ ФОН адрес картинки №1
Было:

Стало:
http://content.foto.mail.ru/mail/moisin/3320/i-3355.jpg" border="0">

Точно также на место записей КАРТИНКА - КНОПКА СКАЧАТЬ вставляем код картинки №2.

Нажмём на предпросмотр и глянем, что у нас получилось.

НАЗВАНИЕ РАМКИ МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК

Да... некрасиво... А всё потому, что мы не указали размер рамки. А размер должен соответствовать размеру картинки.
Подставим значение ширины картинки (её ширина 600) на место записи ШИРИНА ФОНА

НАЗВАНИЕ РАМКИ МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК МУЗЫКАЛЬНЫЙ ТРЕК

Совсем другое дело!

Теперь вставляем музыку с Мейла.

Для тех, кто ещё не знает, как вставить музыку из альбома:

В Новой записи справа нажать на кнопку АУДИО . выбрать нужный трек и нажать кнопку ВСТАВИТЬ.

На место записи МУЗЫКАЛЬНЫЙ ТРЕК ставим курсор и вставляем музыку.
Было:

МУЗЫКАЛЬНЫЙ ТРЕК

Стало:

http://music20.my.mail.ru/file/18b58e8d76e339d72a4c9f4e37810a60.mp3">

На место записи ССЫЛКА НА ЭТОТ ТРЕК вставляем ссылку из вставленного кода музыки. Ссылка всегда начинается с http:// и заканчивается mp3 В данном коде ссылка http://music20.my.mail.ru/file/18b58e8d76e339d72a4c9f4e37810a60.mp3 Было: Стало: Теперь подставляем атрибуты текста (размер, цвет, ...), ссылку на автора, пишем заголовок. И получаем вот такую рамочку. Людмила Сенчина Джулия - Полевые цветы 03:35  - День рождения 03:50  - У природы нет плохой погоды 03:10  - Сладка ягода 03:01  - Колыбельная 03:26

Можно оформить рамку дополнительными фонами вокруг.

Людмила Сенчина - Полевые цветы 03:35  - День рождения 03:50  - У природы нет плохой погоды 03:10  - Сладка ягода 03:01  - Колыбельная 03:26

Желаюудачи!