Надсилання електронної пошти у форматі HTML. Як створювати та надсилати HTML-листи до Gmail за допомогою Stripo? Оформлення email листів html

Можливо, Ви вже задавалися цим питанням і не змогли знайти чіткої відповіді. Постараюся Вас не розчарувати та дати зрозумілі для перетравлення інструкції відправки HTML листівпоштою Mail.ru.

Mail реєстрація поштової скриньки

Заклад поштової скриньки на Майл, я описую виключно як допоміжну частину статті " ". Про HTML листи читайте після цього пункту.

3. Заповнюємо необхідні дані

4. Після, Вам пропонують завантажити фотографію та створити передплату (підписка відображається в кінці кожного надісланого повідомлення).

Ми закінчили створення поштової скриньки

Як надіслати HTML лист

Спосіб, який я Вам пропоную дуже простий, але його простота обмежена можливостями. У листі можна буде відправити наприклад ы, відео з YouTube і т.д.

Надсилання відео

Для відправки відео-листа, нам необхідний YouTube і бажано Google Chrome, можна завантажити .

1. Заходимо на свій Mail.ru і тиснемо

2. Знаходимо будь-яке відео на YouTube і тиснемо по ньому правою кнопкою миші, далі "Копіювати HTML-код"

За картинкою
Ваш бонус!
Розгорни її!
Тисни сюди!

3. На Mail.ru, тиснемо на поле під текст правою кнопкою миші і далі "Перегляд коду елемента"

4. Браузер видає нам наступне вікно

5. По виділеній області у вікні HTML, тиснемо правою кнопкою миші і далі "Edit as HTML"

6. З'явиться наступне вікно. Вікно редагування

7. У вікні, вставляємо наш скопійований код HTML відео. Вставляти потрібно в поле для тексту. Поле для тексту завжди чорними літерами, якщо такого немає, пишемо у листі 111, а в коді міняємо 111 на HTML-коднашого відео. Нижче візуально показано

8. Після того, як вставили код, клацаємо в будь-яку порожню область на сайті Mail.ruта відео має з'явитися у повідомленні.

9. Розмір відео занадто великий, щоб його змінити, проробляємо все те саме до 6 пункту і змінюємо його розміри. width="854" - це ширина, а height="480" - це висота. Змінюємо тільки цифри, як тільки змінили, також тиснемо в будь-яку порожню область сайту Майл.

Ось такий простий спосіб додавання HTML до листів. Те саме можна зробити з банерами та багатьом іншим.

Сподіваюся, стаття виявилась Вам корисною.

Бажаю успіхів!

Є багато способів відправки html-листів через поштові клієнти та, звичайно, через сервіси розсилок. Але що робити, якщо потрібно надіслати пару листів, а жодних програм під рукою немає? Є хитрий спосіб надіслати html-лист через Яндекс Пошту.

Крок 1. Підготовка листа

Важливим правилом при надсиланні листа в такий спосіб є те, що посилання на зображення в коді повинні бути повністю прописані, а самі зображення повинні знаходитися на сервері. Якщо посилання ведуть на зображення з вашого комп'ютера, програма їх не побачить.

Якщо ви замовляли шаблон у нас, то ми вже про все подбали і у ваших вихідниках вже є заздалегідь підготовлений шаблон з правильно прописаними посиланнями.

Відкрийте шаблон через звичайний блокнот і скопіюйте вміст листа. Потім весь цей код нам потрібно буде вставити в тіло листа в Яндекс Пошті.

Крок 2. Вставка листа в Яндекс

Увійдіть в Яндекс Пошту та створіть новий лист. Далі піде хитрість. Натисніть кнопку "Оформити листа", щоб перевести Яндекс Пошту в режим, що підтримує оформлення.

У вас має з'явитися така панель (вона виділена синім). Тепер інтерфейс підтримує різне оформлення, отже, і код листа. Правда, просто так його вставити не вийде.

Ми підемо на хитрість і вставимо код нашого шаблону у код сторінки. Для цього потрібно знайти шматок у коді, який відповідає за зміст листа, та підмінити його нашим змістом.

Для цього натисніть правою кнопкою миші на порожню область листа і виберіть "переглянути код" (У кожному браузері цей пункт називається по-своєму, але зміст зберігається).

Всі ці хитрі маніпуляції ми проводили для того, щоб з'явився цей блок, який відповідає за вміст листа. (Панель може відрізнятися залежно від вашого браузера. Ми показуємо на прикладі Google Chrome).

Тепер нам потрібно видалити цей блок, а на його місце вставити код листа. Для цього клацніть на цей блок правою кнопкою миші та виберіть “Edit as HTML”,

тепер нам необхідно видалити поточний код.

… і його місце вставити код нашого листа. Після цього закрийте панель, натиснувши на хрестик у верхньому правому кутку панелі.

Якщо ви зробили все правильно, то шаблон відобразиться в тілі листа. На даний момент у ньому немає картинок, але не турбуйтеся з цього приводу. У надісланому листі картинки будуть за умови, що посилання на картинки правильні (див. Крок 1). Якщо переживаєте за результат, то просто надішліть цей лист собі, і ви побачите, що все вийшло як слід.

Крок 3. Надсилання html-листу в Яндекс Пошті

Внесіть потрібні зміни до змісту листа, просто передруковуючи тексти та використовуючи різні стилі. Можна використовувати всі інструменти з верхньої панелі.

Після того, як лист готовий - впишіть пошту одержувача, тему листа та надсилайте!

У цьому туторіалі я вам покажу, як створити простий HTML-шаблон електронного листа, який цілісно відображатиметься у будь-якому сучасному поштовому клієнті та додатку нинішніх смартфонів.

Медіа-запити: лише півсправи

Був час, коли було цілком достатньо визначення типу пристрою для створення адаптивного шаблону електронного листа, який однаково добре відображався б і в iOS, і в Android поштових клієнтах, обидва сімейства смартфонів підтримували CSS властивість @media.

З того часу кількість поштових додатків для обох платформ з різним рівнем підтримки методів розробки адаптивних шаблонів зросла.

Найбільш примітним є останнє оновлення програми Gmail для Android, яке є вдвічі більш популярним, ніж стандартний поштовий Android-додаток (що складає 11% від загальних запусків). Воно ніколи не підтримувало media-запити, і досі не підтримує, проте зараз він масштабує ваші електронні листи шляхом стиснення розміру зовнішньої таблиці для заповнення всієї доступної області відображення екрана. Цей процес складно проконтролювати і, якщо всі ваші листи залежать від медіа-запитів для правильного відображення на мобільних пристроях, створюється кілька неприємних результатів.

Чому плаваючий шаблон "темна конячка"

Хорошою новиною є те, що ви можете створити дизайн і розробити такий шаблон електронного листа, який добре буде виглядати в будь-якому поштовому додатку, включаючи ті, які не тремтять медіа-запитів.

Однак є кілька дизайн-компромісів, які ви повинні застосувати. Улюблене всіма "схлопування" в одну стрічку колонкових макетів не так добре працює з цим методом. Якщо ви навчитеся обходитися без них, ви зможете застосовувати функціональний дизайн, який працює максимально добре.

Сьогодні ми цим і займемося.

Перший етап

Почнемо зі створення порожнього шаблону.

Hello!

Я розташувала головну таблицю контенту центром за допомогою класу "content".

Зверніть увагу

Примітка:під час виконання уроку ви помітите те, що я збираюся розмістити CSS у заголовку сторінки. Зазвичай я розміщую стилі в заголовку сторінки, коли збираюся використовувати їх знову, або залишити вбудованими одноразові стилі.

Важливо:Коли ви використовуєте CSS у заголовку вашого документа, ви повинні в кінці розробки використовувати інструменти для їх перетворення на вбудовані. Якщо ви використовуєте сервіси, такі як MailChimp або Campaign Monitor , вони автоматично запропонують вам перетворити ці стилі на вбудовані, коли ви імпортуєте вашу розмітку. Ви повинні це робити, тому що деякі поштові клієнти, такі як Gmail, проігнорують або виріжуть зміст вашого тега

Створення заголовка

Створюємо перший рядок таблиці – заголовок. Додаємо вказане нижче для стилізації рядки, який ми створили:

Hello!

І потім у своїх CSS стилях, задаємо підкладку для нашого заголовка.

Header (Padding: 40px 30px 20px 30px;)

Створення першого адаптивного рядка

Тепер ми створимо перший адаптивний рядок. Спосіб, за допомогою якого ми робимо це, полягає у використанні двох плаваючих таблиць розташованих одна відносно іншої HTML-властивістю "align".

Ліва колонка

Замінимо наше маленьке привітання тим, що наведено нижче.

Створюємо таблицю в 70px і також додаємо невелику підкладку, яка буде виглядати як зазор між нашими двома колонками. Підкладка знизу додасть вертикального просвіту, коли наші колонки нагромаджуються один на одного на смартфоні.

Права колонка

Також ми створимо праву колонку знову застосувавши вирівнювання до лівого краю. Таблиця буде 445px завширшки, що дозволить нам заощадити 25px для правої сторони. Це дуже важливо, тому що Outlook автоматично нагромадить ваші таблиці, якщо не буде залишено принаймні 25px для кожного створеного рядка.

Якщо ви залишатимете в запасі принаймні 25px, ваші таблиці будуть такими, як ви очікуєте.

До більш широкої правої таблиці ми збираємося застосувати той самий метод, що і для нашої таблиці-контейнера, який включає створення класу і також умовного коду-обгортки. Для цієї таблиці ми також задаємо 100% ширини доступної на смартфоні, на якому вона провалюватиметься вниз щодо лівої таблиці.

style="width: 100%; max-width: 425px;">

Як ви можете побачити, що я створила клас, названий "col425", для цієї таблиці і поставив ширину 425px для нього. Я помістила таблицю, яка буде містити в собі іншу таблицю в ширині 425px, в код умови. Потім ми додаємо наш клас також і медіа-запит, який ми створили для Apple Mail.

Col425 (width: 425px!important;)

Зараз усередині нашого осередку додамо стилізований заголовок.

CREATING

Responsive Email Magic

Subhead (font-size: 15px; кольори: #ffffff; font-family: sans-serif; letter-spacing: 10px;) .h1 (font-size: 33px; line-height: 38px; font-weight: bold;) .h1, .h2, .bodycopy (color: #153643; font-family: sans-serif;)

Наш заголовок закінчений і, як ви бачите на малюнку внизу, саме так наші колонки наїжджатимуть один на одного на мобільному пристрої.

Створення одноколонкового рядка тексту

Для створення одного рядка тексту просто додамо новий рядок в нашу таблицю з класом ".content". Цьому рядку додамо клас ".innerpadding" з значеннями підкладки, що багаторазово використовуються. Також додамо клас "borderbottom", щоб створити рамку для кожного рядка.

Welcome to our responsive email!

CSS цієї секції:

Innerpadding (padding: 30px 30px 30px 30px;) .borderbottom (border-bottom: 1px solid #f2eeed;) .h2 (padding: 0 0 15px 0; font-size: 24px; ;) .bodycopy (font-size: 16px; line-height: 22px;)

Створення двоколонкової статті

Зараз я додам адаптивний рядок, такий самий, як наш заголовок, але трохи з іншими розмірами, тому ми можемо використовувати більшу картинку.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat. Claim yours!

Ми додали кнопку з класом "buttonwrapper". Вона містить осередок-розпірку з колірною заливкою фону і текстове посилання всередині себе. Я волію використовувати цей спосіб, тому що він дозволяє використовувати кнопки з плаваючою шириною, що дуже корисно при створенні шаблонів, що багаторазово використовуються, де ширина кожної кнопки може бути різною. Якщо ж ширина вашої кнопки фіксована, ви можете віддати перевагу Bulletproof Button Generator .

Стилі для нашої кнопки:

button (text-align: центр; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;) .button a (color: #ffffff; text-decoration: none ;)

Також встановимо ширину для нового класу "col380" і додамо наш розмір у стилі, щоб подбати про Apple Mail. І тепер стилі виглядають так:

@media only screen and (min-device-width: 601px) ( .content (width: 600px !important;) .col425 (width: 425px!important;) .col380 (width: 380px!important;) )

Створення однієї колонки для зображення

Це дуже простий рядок. Просто встановимо для зображення 100% ширину листа та переконаємось, що його висота встановлена ​​в auto.

У наших CSS:

Img (height: auto;)

Створення фінального рядка звичайного тексту

Нарешті, ми додамо рядок тексту без рамки внизу.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat.

Створення підвалу

Для створення підвалу додамо новий рядок з таблицею всередині. Один із рядків міститиме іншу таблицю для наших іконок соціальних мереж.

® Someone, somewhere 2013 Unsubscribeвід цього newsletter instantly

Додамо необхідні стилі для підвалу CSS:

Footer (padding: 20px 30px 15px 30px;) .footercopy (font-family: sans-serif; font-size: 14px; color: #ffffff;)

Оптимізація кнопок для мобільних пристроїв

Для мобільних пристроїв ідеально, якщо вся кнопка – це посилання, а не просто текст, тому що набагато складніше потрапити нашим пальцем за маленьким текстовим посиланням. Оскільки це неможливо реалізувати для всіх десктопних користувачів (тег a не повністю підтримує властивість padding), це те, що я можу додати в мобільну версію за допомогою медіа-запитів.

Видалити колір з тега td, до якого він був застосований і потім додати його в тег a з великою підкладкою.

Я використовую обидві властивості max-width та max-device-width у цьому медіа-запиті у спробі уникнути баг Oulook.com IE9

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) ( body .buttonwrapper (background-color: transparent!important;) body .button a (background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;) )

Тепер, коли ви натисніть на будь-якій частині кольорової кнопки це буде посилання.

Подальші удосконалення з використанням медіа-запитів

Якщо ви хотіли, зараз ви можете приступити до вдосконалення вашого макета присвоєнням імен класів елементам, які ви хотіли контролювати, а потім додати нові правила всередині медіа-запиту, який ми створили раніше.

Unsubscribe від цього newsletter instantly

і додаємо відповідні CSS стилі в медіа-запит:

Body .unsubscribe (display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; : none!important;)

Ви також можете намітити класи.innerpadding, .header і.footer, щоб зменшити вплив підкладки для клієнтів, які підтримує медіа-запити.

Тестируй і рухайся далі!

Нарешті, як і завжди, переконайтеся, що ви пройшли валідацію (використовуючи W3C Validator - ви можете мати лише одну помилку з власним атрибутом "yahoo" тега body) і протестуй чи все гаразд, використовуючи реальні пристрої та на Інтернет-переглядачах, на зразок Litmus або Email on Acid.

Отримуй задоволення, створюючи адаптивні електронні листи, які виглядають чудово у будь-якому поштовому клієнті!

2.1K

У цій статті наводиться покроковий посібник зі створення динамічного шаблону електронного листа за допомогою HTML та PHP.

Основні принципи

Найбільша проблема при розробці HTML шаблон листа- Це забезпечення його сумісності з різними платформами. Існує безліч різних поштових клієнтів, наприклад, Google Mail, Apple Mail, Outlook, AOL, Thunderbird, Yahoo! , Hotmail , Lotus Notes . Деякі з них вже давно не при справах. Особливо це стосується підтримки CSS, тому нам потрібно використовувати HTML таблиці, щоб забезпечити коректне відображення листів. Фактично, використання HTML таблиць є єдиним способом створити макет, який однаково відображатиметься у різних поштових клієнтах.

Також потрібно використовувати вбудований CSS для керування елементами усередині шаблону. Наприклад, кольором фону та шрифтами. Оголошення стилів CSS має бути простим, без використання будь-яких CSS файлів.

Щоб переконатися в цьому, розгляньте приклад нижче, де я застосував атрибут border , щоб вивести кордон кожної таблиці. Зверніть увагу, що символи %s є місцем, де буде розміщено динамічний текст та зображення:

Весь макет побудований на основі HTML таблиць. Ми скористаємося PHP бібліотеками для аналізу маркера %s та його заповнення динамічним текстом перед відправкою листа.

Розробка статичного шаблону

Почнемо програмувати! Перш ніж приступити до створення гарного шаблону HTML листапотрібно почати HTML файл з XHTML документа :

My first email template!

Встановіть cellpadding і cellspacing в нуль , щоб уникнути непередбаченого простору в таблиці. Також встановіть ширину 100%, оскільки ця таблиця є тілом листа ( стилізація тега body повністю не підтримується).

Тепер ми додамо замість тексту « My first email template!» (« Мій перший шаблон електронного листа!») іншу таблицю:

This is the email template body

Для ширини встановлено значення 600 пікселів. Це безпечно максимальна ширина електронних листів для коректного відображення більшості поштових клієнтів. Додатково встановіть для властивості border-collapse значення collapse , щоб уникнути виведення зайвого простору між таблицями та межами.

У прикладі видно, що наш шаблон листа для розсилки HTML складається з п'яти секцій (рядків). Спочатку створимо ці рядки і потім додамо таблиці до кожного з них, щоб завершити шаблон:

Row 1

Row 2

Row 3

Row 4

Row 5

У кожному рядку ми створимо нову таблицю, на яку застосуємо підхід, схожий з наведеним вище. Ми також додамо відповідні стовпці та правильні відступи, щоб вирівняти всі об'єкти у HTML шаблон email листів:

%s GIVE US A CALL EMAIL US BROWSE FAQ PAGE

Декілька зауважень перед тим, як зробити шаблон HTML листа:

1. Додайте атрибут alt там, де потрібно показати текст замість зображень на випадок, якщо поштовий клієнт зможе правильно завантажити їх;
2. Додати маркер %s там, де потрібно, щоб дані з'являлися динамічно в залежності від варіанта листа;
3. Відсоткові значення позначаються додатковим знаком %. Це зроблено так, щоб бібліотека PHP, яка використовується для динамічної обробки, знала, як правильно аналізувати текст.

Ми успішно розробили статичний електронний лист. Тепер давайте зробимо його динамічним!

Розробка динамічного шаблону

Збережіть наведений вище код у вигляді файлу template.html. Тепер створимо новий PHP файл.

На серверній стороні поставимо метод відправки HTML шаблон листа, описаний нижче:

function send_mail_template($to, $from, $subject, $message) ( $headers = "MIME-Version: 1.0" . "rn"; $headers .= "Content-type:text/html;charset=UTF-8" "rn"; $headers .= "From: ContactNameGoesHere<" . $from . ">rn"; $response = mail($to, $subject, $message, $headers); )

Якщо уважно подивитися на HTML шаблон листа, можна побачити, що я додав маркери %s для заповнення в певних місцях. Конкретніше, елемент зображення банера і основний текст. Зараз все, що нам потрібно зробити, це імпортувати описаний вище HTML шаблон, розібрати його як звичайний текст, додати відповідний текст замість %s і скористатися вищезазначеним методом send_mail_template :

function build_email_template($email_subject_image, $message) ( // Отримуємо шаблон листа у вигляді рядка $email_template_string = file_get_contents("template.html", true); // Заповнюємо шаблон листа змістом і відповідним зображенням банера $email "URL_to_Banner_Images/banner_" . $email_subject_image. ".png", $message, $mobile_plugin_string); return $email_template;

Тепер, коли все готово, можна використовувати обидва методи і надіслати наш перший динамічний лист! Давайте скористаємося створеним шаблоном листа для розсилки HTML. Припустимо, що новий користувач тільки-но підтвердив свою електронну адресу. Хотілося б надіслати користувачеві лист із текстом Ваш email has been successfully verified (« Вашу електронну пошту успішно підтверджено»).

Припустимо, що ми маємо підтверджену пошту користувача [email protected]та пошта компанії [email protected]. Тепер можна надіслати автоматичний лист:

$from = " [email protected]$to = " [email protected]$body_text = "Ви електронна пошта буде успішно здійснена..."; $banner_image_subject = "account_verified"; ", $ Final_message);

Всі! Цей підхід можна використовувати. Ось остаточний HTML шаблон email листи, надісланого користувачу:

Дана публікація є перекладом статті « How to create a dynamic HTML Email Template» , підготовленою дружною командою проекту

Поштові розсилки є важливою частиною рекламних кампаній. Створення листів їм багато в чому нагадує розробку простих веб-сторінок. У той самий час слід враховувати певні важливі відмінності. Зокрема, розсилка HTML-листів буде ефективною, тільки якщо вони самі складені коректно в технічному відношенні, а їх зміст та стиль відповідають вашим цілям. При цьому існує думка, що нефахівець не може впоратися з цим завданням. У цій статті представлена ​​докладна покрокова інструкція, як написати та як надіслати HTML-лист.

Особливості створення

Сучасна людина щоденно отримує в середньому 5-6, а часом і до 10 електронних листів. Це означає, що у вас є менше секунди, щоб встигнути привернути увагу адресата, до того як він перейде до прочитання наступної кореспонденції. В іншому випадку ваше розсилання HTML-листів буде абсолютно неефективним, і ви просто витратите час дарма.

Одним із нюансів, які збільшують ваші шанси на привернення уваги потенційних клієнтів чи іншої цільової аудиторії, є створення кореспонденції, яка адаптована до мобільних пристроїв. Адже більшість тих, кому вона адресована для перегляду пошти, напевно, використовують їх набагато частіше, ніж настільні комп'ютери та ноутбуки.

З цією метою можна застосовувати, наприклад, «чуйний дизайн», що легко адаптується до розміру екрану.

Яким має бути шаблон листа

При верстці документа, призначеного для надсилання кореспондентам, слід дотримуватись таких вимог:

• Його слід зробити досить вузьким, тобто за розмірами воно не повинно перевищувати діапазон 500-600 пікселів, що забезпечить коректне відображення тексту та іншого контенту на пристроях будь-якого типу.
• Потрібно використовувати досить великий шрифт для всієї текстової інформації, тому що на iOS-пристроях HTML-лист буде незручно читати, якщо розмір шрифту менше ніж 13 пікселів.
• Елементи, якими можна зробити клік, повинні бути досить великими та ізольованими від найближчих посилань. У такому разі адресат зможе легко активувати їх з першої ж спроби.

Підготовка

Перш ніж розробити HTML-лист, слід створити на одному з дисків нову папку та назвати її, наприклад, «Розсилки». Крім того, необхідно завантажити та встановити програму Dreamweaver CS3. Цей продукт від Adobe є одним із досить простих інструментів для конструювання веб-сайтів і добре підходить для розробки розсилочного листа у форматі HTML.

Створення та збереження документа

Перед тим, як написати текстову частину листа, потрібно:

• відкрити досить популярну програму-конструктор HTML-листів Dreamweaver CS3 (DW);
• створити документ, обравши як тип «Перехідний HTML 4.01»;
• зберегти файл із розширенням «.html»;
• у верхньому меню знайти команду редагування;
• прибирати галочку з чек-боксу «Використовувати CSS замість HTML-тегів».

Покрокова інструкція

Тепер розглянемо, як створити HTML-лист. Для цього:

• Послідовно відкривають у меню вкладки «Вставити» та «Таблиця» та виставляють потрібні параметри таблиці. Наприклад, рядки – 2, стовпці – 1, ширина – 700, заголовок – зверху. Межі можна виставляти, а можна обійтись без них, вказавши 0.
• Формують заголовок листа. Оскільки HTML-лист призначено для більшої кількості одержувачів, тому використовують оператор , що підставляє потрібне ім'я одержувача.
• У нижньому вікні «Властивості» виставляють потрібні параметри для шрифту, розміру та кольору тексту заголовка та
• "Виходять" з області заголовка. У нижній частині екрана виставляють параметри для курсору "По центру" та "По середині".
• Вставляємо готовий текст листа або «пишемо» його прямо в програмі DW, вибравши потрібний тип і розташування тексту на сторінці.

Створення гіпертекстових посилань

Постараємося зробити HTML-лист більш професійним та просунутим. З цією метою приховаємо у контенті гіпертекстові посилання. Для цього потрібно виділити те місце в тексті, яке вибрали як гіпертекстове посилання. У лівому кутку у верхній частині екрана слід «відкрити» відповідну іконку і вставити своє посилання у вікно, що випало. При цьому потрібно не забути виставити галочку в чек-боксі «_blank», щоб посилання відкривалося в новому вікні, і адресат після перегляду не втратив доступ до основного листа.

Як вставити картинки

Зазвичай лист у форматі HTML завершується контактною інформацією, бажано з фото автора або з відповідним тематичним малюнком. Її можна завантажити з інтернету або попередньо завантаживши в Інтернет, оскільки вам потрібна буде URL цього зображення. Найкраще це зробити за допомогою одного із безкоштовних сервісів.

Для того, щоб оформити такий симпатичний фінал:

• вставляють у нижній частині листа, всередину основної таблиці ще одну з 3 стовпцями та параметром для межі 0 пікселів;
• виставляють курсор там таблиці, де хочуть бачити картинку;
• відзначають у нижньому вікні «Посередині» та «По верхньому краю» для кожної секції;
• вибирають у верхньому меню вкладку "Вставка";
• робимо клік за написом «Зображення» і в меню вставляємо скопійовану нами адресу;
• натискаємо "Ok" 2 рази.

Перегляд

Тепер, коли ви знаєте, як зробити HTML-лист, слід переконатися, що його адресат побачить у коректному вигляді. Для цього перед відправкою потрібно переглянути ваш твор у браузері Dreamweaver CS3. Для цього потрібно натиснути на іконку із земною кулею у середньому верхньому меню. Якщо замість літер на екрані з'явилася абракадабра, слід виставити в налаштуваннях вашого браузера автокодування.

Кодування

З розділу "Проект" і переходять до кодової частини - "Код". У вікні виділяють і копіюють все, що укладено між тегами і. Зберігаємо файл. Далі вставляємо HTML-код.

Надсилання HTML-листа

• вибираємо або створюємо новий лист, заповнивши рядки «Ім'я» та «Адреса відправника».
• заповнюють рядок "Тема листа";
• відзначають у верхньому лівому меню HTML-код;
• вставляють код, скопійований у програмі DW-код у велике поле «Джерело»;
• перевіряють коректність відображення за допомогою інструмента «Перегляд»;
• видаляють текстову версію листа;
• тестують його на спам за допомогою однойменної кнопки, розташованої поряд з кнопкою «Відправити».

Декілька популярних шаблонів

Використання фреймворку допомагає значно прискорити процес створення листа і зробити його більш доступним для розробника, який ще осягає ази створення веб-документів. Найбільш популярними шаблонами є:

• Cerberus. Цей набір так званих чуйних шаблонів дозволяє створювати листи, які нормально відображаються як у мобільному додатку Gmail, так і в Outlook. Він дозволяє використовувати блоки HTML-коду або окремо, або об'єднуючи їх.
• Ink— це заготівля листів, розсилки яких практично універсальні та сумісні з будь-якими пристроями та клієнтами.
• Really simple HTML email template.Шаблон дозволяє створювати розсилочні листи дуже просто та швидко. Щоправда, у них буде вкрай простий дизайн у вигляді одного стовпця, в якому полягає заклик до дії.

Як вставити HTML у лист

Розглянемо тепер дещо інше завдання. Щоб вставити код HTML в електронний лист, наприклад, gmail використовуючи, як у наведеному нижче прикладі браузер Google Chrome, слід:

• натиснути кнопку «F12» чи вибрати відповідну послідовність команд у меню;
• у вікні з кодом поточної сторінки клієнта gmail знайти те місце, куди має бути вставлений HTML-лист, зробити правий клік і вибрати "Edit as HTML".
• вставити скопійований HTML-код;
• натиснути комбінацію двох клавіш «Ctrl» та «Enter».

Для тієї ж мети можна завантажити просту у використанні програму Mozilla Thunderbird. З її допомогою можна створити лист, а потім спочатку вибрати пункт «Вставити», а потім «HTML» і вставити туди код свого розсилки.

Інструменти

Вордпресівський плагін e-Newsletter дозволяє професійно керувати розсилками та абонентами. Причому те й інше робиться прямо через панель адміністратора WordPress. Ця обставина забезпечує повний контроль та абсолютно безкоштовно, що не може не радувати.

Ще один простий інструмент - Bulletproof background images, що є простим інструментом, який дозволяє отримати код для фонового зображення створюваних листів. З його допомогою можна зробити кореспонденцію набагато красивішою. Для просто слід вказати URL фонового зображення, що сподобалося, і його резервний колір, а також чи повинні ці параметри застосовуватися до всього тіла HTML-листа або вони призначені тільки для однієї з комірки таблиці. В результаті буде отримано готовий код, який потрібно скопіювати та вставити у свій шаблон.

Тепер ви знаєте, як надіслати HTML-лист. Його створення не становить особливої ​​складності, особливо якщо користуватися готовими шаблонами, в яких у Мережі не бракує. Тому навіть ті, хто не має особливих знань, зможуть легко впоратися із цим завданням.