Сделать коллаж в HTML

   Тем, кто хоть немного знаком с фотошоп, знаком термин "коллаж", означающий фотомонтаж из двух или более изображений. Простой коллаж можно составить, не прибегая к помощи фоторедакторов. Сегодня мы рассмотрим, как это сделать.
Пример:
Сделать коллаж в HTML   Адрес фона: http://content.foto.mail.ru/mail/pantv966/_blogs/i-5399.jpg
адрес клипарта: https://fotki.yandex.ru/get/5900/i-nat2010.c/0_3f44a_29b8bb65_XS
Чтобы уменьшить размер клипарта, не прибегая к фотошопу, необходимо:
1.сохранить картинку на компьютере;
2.загрузить на Яндекс.фотки. (внимание! Не на Радикал, так как при загрузки на радикал, у изображения теряется прозрачность фона) В настройках при загрузке на Яндекс указываем уменьшение размера картинки до желаемого размера:
Сделать коллаж в HTML
3.Если картинка нужна совсем маленького размера, то копируем ее адрес со страницы "Мои фотки" или "Мои фотоальбомы/альбом "название":
Сделать коллаж в HTML
4. Щелкаем правой кнопкой мышки по нужной картинки и в открывшемся окне выбираем строку "Копировать адрес изображения". Если такой строки нет, то заходим в свойства и отсюда копируем ссылку. Подробнее я уже писала в сообщении Как быстро скопировать изображение
Подставляем необходимые значения в следующий код таблицы:

<table background="Адрес фона" border="0" cellpadding="5"><tr><td></td></tr><tr><td height="высота фона" width="ширина фона" valign="top"><center><img src="адрес клипарта"></center></td></tr></table>

Значения высоты и ширины фона можно узнать также в свойствах изображения или при загрузке на Радикал, это верхняя строчка "Результат":

Сделать коллаж в HTML Сделать коллаж в HTML

Атрибут valign указывает какое расположение (верхнее - "top" или нижнее - "bottom", среднее - по умолчанию) будет занимать элемент таблицы. Проще говоря, с помощью него можно настроить расположение клипарта на фоне.
Если мы хотим вставить наш клипарт не в центре фона, а например, справа, то вместо тегов <center></center>, можно задать расположение клипарта справа: <div align="right"></div> или слева:<div align="left"></div>
Более сложное расположение клипарта можно задать путем таблицы с пустыми ячейками.
Вот код коллажа из примера:

<table border="0" cellpadding="5" align="center" background="http://content.foto.mail.ru/mail/pantv966/_blogs/i-5399.jpg">
<tbody>
<tr>
<td height="409" width="600" valign="bottom"><center>
<img src="https://img-novosib.fotki.yandex.ru/get/5900/i-nat2010.c/0_3f44a_29b8bb65_XS" alt="Сделать коллаж в HTML"></center>
</td>
</tr>
</tbody></table>

Получается, что фон коллажа представлен в качестве фонового изображения таблицы, а клипарт вставлен с одну из ячеек.

2 ответа к «Сделать коллаж в HTML»

  1. ХОЧУ ВАМ ПООДСКАЗАТЬ .КОГДА БЕРЕТЕ КАРТИНКУ С ЯНДЫКСА А ИМЕННО ССЫЛКУ ТО ПРИ ЗАГРУЗКЕ В РАДИКАЛЕ СНИМАЙТЕ ВСЕ ГАЛОЧКИ И ВАША КАРТИНКА ОСТАЕТСЯ ПРОЗРАЧНОЙ..

  2. Спасибо, ТАМИЛА. Это дейтвительно так. Спасибо за правку. Я уже писала об этом на форуме, а на правку поста все руки не доходили 😉

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *