• Авторизация


фотошоп 15-12-2012 06:46 к комментариям - к полной версии - понравилось!

Это цитата сообщения Милая_Любаша Оригинальное сообщение

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


Уроки от Джулии



Рамка "Слушать и скачать"


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

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

2. [показать]
её код <img src="http://content.foto.mail.ru/mail/moisin/3320/i-3356.jpg">
размер 22х30

Вставляем в Новую запись код рамки:
<table cellspacing="0" cellpadding="0" background="ЛИЦЕВОЙ ФОН" border="0"><tr><td width="ШИРИНА ФОНА"><right><a href="ССЫЛКА НА АВТОРА">ИМЯ АВТОРА</a></right><text face="verdana" size="РАЗМЕР ТЕКСТА" color="ЦВЕТ ТЕКСТА"><b><center><u>НАЗВАНИЕ РАМКИ</u></center></b></text><br><table cellspacing="0" cellpadding="0"border="0"><tr><td width=330>
МУЗЫКАЛЬНЫЙ ТРЕК</td><td><a href='ССЫЛКА НА ЭТОТ ТРЕК'><br>КАРТИНКА - КНОПКА СКАЧАТЬ</a>
</td></tr>
<tr><td>МУЗЫКАЛЬНЫЙ ТРЕК</td><td><a href='ССЫЛКА НА ЭТОТ ТРЕК'><br>КАРТИНКА - КНОПКА СКАЧАТЬ</a>
</td></tr>
<tr><td>МУЗЫКАЛЬНЫЙ ТРЕК</td><td><a href='ССЫЛКА НА ЭТОТ ТРЕК'><br>КАРТИНКА - КНОПКА СКАЧАТЬ</a>
</td></tr>
<tr><td>МУЗЫКАЛЬНЫЙ ТРЕК</td><td><a href='ССЫЛКА НА ЭТОТ ТРЕК'><br>КАРТИНКА - КНОПКА СКАЧАТЬ</a>
</td></tr>
<tr><td>МУЗЫКАЛЬНЫЙ ТРЕК</td><td><a href='ССЫЛКА НА ЭТОТ ТРЕК'><br>КАРТИНКА - КНОПКА СКАЧАТЬ</a>
</td></tr></table>
<br></td></tr></table>



Вставляем на место записи ЛИЦЕВОЙ ФОН адрес картинки №1
Было:
<table cellspacing="0" cellpadding="0" background="ЛИЦЕВОЙ ФОН" border="0">
Стало:
<table cellspacing="0" cellpadding="0" background="http://content.foto.mail.ru/mail/moisin/3320/i-3355.jpg" border="0">

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

Нажмём на предпросмотр и глянем, что у нас получилось.
НАЗВАНИЕ РАМКИ






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

[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]




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

НАЗВАНИЕ РАМКИ






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

[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]
МУЗЫКАЛЬНЫЙ ТРЕК
[показать]



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

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

Для тех, кто ещё не знает, как вставить музыку из альбома:
В Новой записи справа нажать на кнопку АУДИО [показать]. выбрать нужный трек и нажать кнопку ВСТАВИТЬ.


На место записи МУЗЫКАЛЬНЫЙ ТРЕК ставим курсор и вставляем музыку.
Было: <tr><td>МУЗЫКАЛЬНЫЙ ТРЕК</td><td>
Стало: <tr><td><music author="" title="День рождения" duration="03:50" url="music:http://music20.my.mail.ru/file/18b58e8d76e339d72a4c9f4e37810a60.mp3"></td><td>

На место записи ССЫЛКА НА ЭТОТ ТРЕК вставляем ссылку из вставленного кода музыки.
Ссылка всегда начинается с http:// и заканчивается mp3
В данном коде ссылка http://music20.my.mail.ru/file/18b58e8d76e339d72a4c9f4e37810a60.mp3

Было: <a href='ССЫЛКА НА ЭТОТ ТРЕК'>
Стало: <a href='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 


Скачать файл





Желаю удачи!








вверх^ к полной версии понравилось! в evernote
Комментарии (1):


Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник фотошоп | Библиотекарша_Танюша - Дневник Библиотекарша_Танюша | Лента друзей Библиотекарша_Танюша / Полная версия Добавить в друзья Страницы: раньше»