Создание html письма

29 июня 2011

Визуальные эффекты могут сделать его незабываемым, что поспособствует успешному продвижению вашего бренда.
Это все известно, но создание html письма полностью с помощью таблиц не может бать настолько красиво оформлено как при помощь изображения. Особенно если Вы хорошо владеете Photoshop.

Карта ссылок — это изображение, разбитое на определенные зоны, каждая из которых представляет собой гиперссылку. После щелчка кнопкой мыши в пределах зоны браузер открывает страницу, отвечающую этой зоне.

Создание основы

От таблиц полностью мы отказываться не будем.
Создаем таблицу с двумя строками и одним столбцом, шириной 100%, толщиной границы 0, поля ячеек 0, интервал ячеек 0.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</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= "#">здесь</a></font></td>
</tr>
<tr>
  <td>&nbsp;</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="kp_pismo.gif" alt="10bukv.ru" width="600" height="472" usemap="#sitemap" border=0 />
<map name="sitemap">
  <area shape="rect" alt="index" coords="20,9,231,201" href="#" />
  <area shape="rect" alt="узнать подробнее" coords="451,227,577,246" href="#" />
  <area shape="rect" alt="заказать" coords="372,228,443,246" href="#" />
  <area shape="rect" alt="заказать" coords="358,441,429,459" href="#" />
  <area shape="rect" alt="узнать подробнее" coords="437,440,563,459" href="#" />
</map>

Теперь во вторую строку мы вставляем карту ссылок.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
  <td align="center"><font color="#CCCCCC" size= "2">Если у Вас некорректно отображается данное сообщение — нажмите <a target="_blank" href= "#">здесь</a></font></td>
</tr>
<tr>
  <td align="center">
    <img src="kp_pismo.gif" alt="10bukv.ru" width="600" height="472" usemap="#sitemap" border=0 />
    <map name="sitemap">
      <area shape="rect" alt="index" coords="20,9,231,201" href="#" />
      <area shape="rect" alt="узнать подробнее" coords="451,227,577,246" href="#" />
      <area shape="rect" alt="заказать" coords="372,228,443,246" href="#" />
      <area shape="rect" alt="заказать" coords="358,441,429,459" href="#" />
      <area shape="rect" alt="узнать подробнее" coords="437,440,563,459" href="#" />
    </map>
  </td>
</tr>
</tbody></table>