Главная » Бизнес в Интернете

Письмо HTML и программа Dreamweaver

письмо HTMLДумаю, все получали в свои почтовые ящики красочные письма, с разноцветным текстом и картинками. Такие письма делаются в коде HTML и каждый, кто ведет свои рассылки с помощью сервиса Смартреспондер, может тоже сделать такие письма.

Письма HTML можно сделать прямо на сервисе Смартреспондер. Когда Вы заходите на этот сервис, и создаете новое письмо, причем неважно дополнительное оно, или будет находиться в серии, Вы можете выбрать HTML-версию письма, и создавать письмо с помощью HTML редактора.

html письмо в смартреспондереВ HTML редакторе сервиса SmartResponder все достаточно очевидно, и после небольшой практики Вы быстро разберетесь, как делать в нем HTML письма. Если Вы наводите мышкой на одну из кнопок HTML редактора, появится всплывающая подсказка о том, каково назначение данной кнопки. Например, можно сделать таблицу из двух строчек и одного столбца, в первой строчке будет заголовок, а во второй строчке текст и картинки. Картинки тоже легко добавить, только они уже должны быть в Интернете, и при добавлении Вы просто указываете их URL-адрес.

код HTML письма в смартреспондереURL-адрес почти любой картинки, которую Вы видите в Интернете, можно определить, нажав на картинку правой клавишей мыши, и выбрав Копировать URL-адрес. Нажав на кнопку Источник, можно увидеть код HTML письма.

Но гораздо больше возможностей создания и редактирования HTM писем не в редакторе сервиса Смартреспондер, а в программе Dreamweaver.

Процесс создания HTML писем в Дримвивере похож на процесс создания в нем одностраничного сайта. Но есть отличия. Самое большое отличие — файл, в котором Вы будете создавать код HTML для письма, Вы отправлять на хостинг не будете. При желании, Вы можете оставить его у себя на компьютере, и воспользоваться им, как шаблоном, для создания других писем.

Из этого файла Вы берете только код — и ставите его в поле HTML-версии письма в Смартреспондере, в редакторе, нажав предварительно на ссылку Источник.

html письмо в программе DreamweaverЕще один нюанс — в коде Вам нужно только то, что в одностраничнике находится между тэгами <body> и </body>, открывающим и закрывающим. Все остальное, включая сами тэги <body>, </body>, можно удалить.

настройки программы DreamweaverКроме того, в настройках программы Dreamweaver нужно произвести следующие изменения. Зайдите в Редактировать — Установки — Общие, и уберите птичку напротив строки Использовать CSS вместо тегов HTML.

Дело в том, что  Смартреспондер, в котором мы делаем наши письма HTML, код со стилями CSS не воспринимает.

После того, как Вы настроите программу Dreamweaver, можно будет приступить непосредственно к самому письму HTML. Для письма удобно создать таблицу, к примеру, с одним столбцом и двумя строчками. Только нужно сделать ее уже, чем Вы обычно делаете для одностраничных сайтов. Дело в том, что письмо подписчику будет показано в почтовом ящике, где места справа и слева будут заняты. Делайте ширину таблицы не больше 550 пикселей. Ширину границы можете сделать равной 0, тогда она не будет видна. А можно оставить ее видимой, или даже покрасить.


Верхнюю строчку оформляете, как заголовок, а нижнюю оставляете для основного текста и картинок.

html письмо

Чтобы поставить картинки, нужно, чтобы они уже были в Интернете. Если они уже там есть, узнайте их URL-адрес, нажав правой клавишей на картинке. Если картинки в Интернете нет, нужно ее положить на хостинг. В таком случае URL-адрес картинок будет следующий:

http://домен или поддомен/вложенная папка/еще вложенная папка/название картинки
К примеру, если я в папку своего домена pro444.ru в папку UserFiles положу картинку с названием its_me.jpg, то URL адрес картинки будет такой:

/UserFiles/its_me.jpg

Видео о том, как создавать письма HTML в программе Dreamweaver


Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

Еще по теме...

12 комментариев »

  • Олег пишет:

    Dreamweaver есть, но для этих целей его не использовал. Сам не знаю почему. Выходит намного привлекательнее и выглядят такие письма более профессионально.

    # 11 июля 2012 в 20:12
  • Владимир пишет:

    Большое Вам, спасибо, Александр, за такое чудесное видео о создании писем HTML! С интересом просмотрел. Повторение — мать учения. При просмотре появилась идея.

    # 11 июля 2012 в 20:27
  • Надежда Юдина пишет:

    Отличный видеоурок! Иногда пользуюсь этой программой, программа полезная и удобная. Только, к сожалению, она у меня не дружит с Windows7. Для выхода из ситуации была создана виртуальная машина с Windows XP специально для работы с программой Dreamweaver. Для работы с программой запускаю виртуалку и в ней загружаю программу.

    # 12 июля 2012 в 0:09
  • mrs. interesno пишет:

    Хорошую идейку вы подкинули.

    Воспользуюсь обязательно.

    # 12 июля 2012 в 14:34
  • Николай пишет:

    Спасибо большое за идею с раскраской писем. Давно хотел узнать как это получается.

    # 4 августа 2012 в 20:59
  • Александр пишет:

    Очень мало таких полезных сайтов в рунете. Спасибо Вам! Сохранил в закладках)))

    # 8 августа 2012 в 21:48
  • Ирина пишет:

    Александр! Спасибо! Спасибо! Спасибо! Вот просто бери — и делай себе красочное письмо.Кратко! Понятно! Главное недолго по времени! Я Ваши видеоуроки обожаю!!!

    # 24 августа 2012 в 22:27
  • Мария Баженова пишет:

    Александр, добрый день.

    Я создала письмо по Вашей лекции и добавила в него видеоролик. В браузере всё отлично показывает. А SmartResponder «не видит» ссылку на видеоролик.

    В письме появляется пустое место.

    Подскажите в чём дело?

    P.S. Ролик добавила, сгенерировав ссылку на YouTube. А может надо перенести видео на свой хостинг и оттуда уже загружать?

    # 2 октября 2012 в 8:28
  • Анна пишет:

    Красивое получилось письмо. Приятно его получить. Но было бы гораздо легче тем, кто не дружит с программой Дримвивер, иметь шаблон кода для такого письма. Чтобы только подставлять данные в письмо. Вы не хотите, Александр,это сделать? Спасибо за полезную информацию. Удачи во всём и всегда.

    # 6 октября 2012 в 0:58
  • Павел пишет:

    Спасибо огромное за материал! Давно хотел научиться создавать подобные письма без помощи программ для рассылки. Можно еще видео вставлять, классно получается =)

    # 6 ноября 2012 в 13:59
  • Ильдар пишет:

    Добрый день! вопрос у меня такой! а как такое письмо после того как мы его создали выложить на почту перед отправкой, чтоб html письмо выглядело не как вложение а по центру как картинка большая с ссылками для перехода на нужный адрес сайта?

    # 2 февраля 2015 в 8:21
  • Николай пишет:

    Вот сервис makemail.ru на нем можете сверстать красивое письмо, в блочном (мышкой) или html редакторе, кому как удобнее. Потом тестируете как выглядит письмо в различных почтовых системах, типа mail.ru, yandex и так далее. и после этого получаете готовый html, который можете разослать через любой сервис рассылок. и все это полностью бесплатно.

    # 14 августа 2017 в 6:39

Оставьте свой комментарий и ответный визит Вам обеспечен