Скучно читать письмо, состоящее из одного сплошного текста. Такое послание вряд ли вызовет интерес и легко сотрется из памяти. Чтоб ваши рассылки небыли унылыми их нужно красиво оформлять! Визуальные эффекты могут сделать его незабываемым, что поспособствует успешному продвижению вашего бренда.
Это все известно, но создание html письма полностью с помощью таблиц не может бать настолько красиво оформлено как при помощь изображения. Особенно если Вы хорошо владеете Photoshop.
В это статье мы расскажем как создать html письмо с помощью карты ссылок (такой способ использует фирма Samsung в своих рассылках).
Карта ссылок - это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. После щелчка кнопкой мыши в пределах зоны браузер открывает страницу, отвечающую этой зоне.
Создание основы
От таблиц полностью мы отказываться не будем.
Создаем таблицу с двумя строками и одним столбцом, шириной 100%, толщиной границы 0, поля ячеек 0, интервал ячеек 0.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody></table>
В первой строке впишем ссылку на копию письма.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center"><font color="#CCCCCC" size="2">Если у Вас некорректно отображается данное сообщение - нажмите <a target="_blank" href="http://dijjon.ru/index/0-20">здесь</a></font></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody></table>
Создание карты ссылок
Итак, для создания карты ссылок необходимо выполнить такие действия:
добавить изображение на Web-страницу с помощью элемента ‹img /›;
создать определение карты элементами ‹map› и ‹area /›;
сопоставить карту изображению атрибутом usemap элемента ‹img /›.
Карты ссылок, элемент ‹map›.
Элемент ‹map› служит для определения карты ссылок. Между тегами элемента ‹map› располагаются элементы ‹area /›, определяющие «горячие» области на изображении.
Области на карте ссылок, элемент ‹area /›.
Параметры каждой области задаются атрибутами href, alt, shape и coords.
Атрибут href указывает относительный или абсолютный путь к ресурсу, на который ведёт данная область. Возможные значения такие же, как и для атрибута href элемента ‹a›.
Атрибут alt несёт в определении области ту же функцию, что и в элементе ‹img /›. Значение этого атрибута отображается как всплывающая подсказка к «горячей» области и позволяет ориентироваться в текстовом режиме. Атрибут alt является обязательным, то есть на карте ссылок не может быть областей, которым не назначен заменяющий текст.
Атрибут shape определяет форму «горячей» области на карте ссылок. Этот атрибут может принимать одно из трёх значений:
rect — прямоугольная область;
circle — круглая область;
poly — область произвольной формы.
Атрибут coords описывает размеры и расположение области. Как значение этого атрибута задаются координаты ключевых точек фигуры, образующей «горячую» область. Координаты точек задаются относительно верхнего левого угла изображения в пикселях либо процентах и разделяются запятыми и необязательными пробелами. Как десятичный разделитель для дробных чисел используется точка.
Ниже представлена простая карта ссылок с исходным кодом ее мы и будем использовать.
<img src="http://dijjon.ru/email/gomail/kp/kp_pismo.gif" alt="dijjon.ru" width=600 height=472
usemap="#sitemap" border=0 /><map name=sitemap>
<area shape=RECT
alt="gijjon" coords="20,9,231,201"
href="http://dijjon.ru" />
<area shape=RECT
alt="шаблон узнать подробнее" coords="451,227,577,246"
href="http://dijjon.ru/index/html_pisma/0-21" />
<area shape=RECT
alt="заказать"
coords="372,228,443,246" href="http://dijjon.ru/index/0-3" />
<area shape=RECT
alt="заказать"
coords="358,441,429,459" href="http://dijjon.ru/index/0-3" />
<area shape=RECT
alt="кп узнать подробнее" coords="437,440,563,459"
href="http://dijjon.ru/index/html_pisma/0-21" />
</map>
Теперь во вторую строку мы вставляем карту ссылок.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><font color="#CCCCCC" size="2">Если у Вас некорректно отображается данное сообщение - нажмите <a target="_blank" href="http://dijjon.ru/index/0-20">здесь</a></font></td>
</tr>
<tr>
<td align="center"><img src="http://dijjon.ru/email/gomail/kp/kp_pismo.gif" alt="dijjon" width=600 height=472
usemap="#sitemap" border=0>
<map name=sitemap>
<area shape=RECT
alt="gijjon" coords="20,9,231,201"
href="http://dijjon.ru">
<area shape=RECT
alt="шаблон узнать подробнее" coords="451,227,577,246"
href="http://dijjon.ru/index/html_pisma/0-21">
<area shape=RECT
alt="заказать"
coords="372,228,443,246" href="http://dijjon.ru/index/0-3">
<area shape=RECT
alt="заказать"
coords="358,441,429,459" href="http://dijjon.ru/index/0-3">
<area shape=RECT
alt="кп узнать подробнее" coords="437,440,563,459"
href="http://dijjon.ru/index/html_pisma/0-21">
</map></td>
</tr>
</table>
Результат Вы можете посмотреть здесь.
