Zurb Foundation. Верстка HTML Email писем

Главная » Видеоуроки » HTML+CSS » Zurb Foundation. Верстка HTML Email писем
На прошлом уроке мы изучили основы CSS фреймворка Foundation. Но данный фреймворк имеет у себя еще один необходимый и мощный инструмент — фреймворк для создания html email писем. Сегодня мы сделаем простой макет письма с отправкой его на php.
Верстка html email писем — это боль для разработчиков. В этом процессе вы должны использовать таблицы. Есть и другие проблемы и особенности email клиентов, которые вы должны знать. CSS фреймворк Zurb Foundation позволит вам создавать html email письма намного быстрее. Также он имеет несколько готовых шаблонов.
Отправка почты реализуется с помощью стандартной php функции mail.
Код урока (html email)

<!-- Emails use the XHTML Strict doctype -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <style>
    .main-background {
      background-color: #7c4dff !important;
    }
  </style>
</head>

<body>
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
            <table align="center" class="container main-background">
              <tbody>
                <tr>
                  <td style="padding-top: 50px; padding-bottom: 50px;">
                    <h1 style="text-align: center;"><a style="color: #fff;" href="http://kamil-abzalov.ru" data-et-target-link="_blank">kamil-abzalov.ru</a></h1>  
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="container">
              <tr>
                <td>
                  <table class="menu">
                    <tr>
                      <td>
                        <table style="margin-left: auto; margin-right: auto;">
                          <tr>
                            <th class="menu-item"><a href="http://vk.com/kamabzalov">ВК Камиля</a></th>
                            <th class="menu-item"><a href="http://kamil-abzalov.ru">Сайт Камиля</a></th>
                            <th class="menu-item"><a href="https://github.com/kamabzalov">Github Камиля</a></th>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="spacer">
                  <tbody>
                    <tr>
                      <td height="50px" style="font-size:50px;line-height:50px;"> </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="row">
                  <tr>
                    <td class="large-6 columns first">
                      <img style="width: 250px;" src="http://kamil-abzalov.ru/wp-content/uploads/2017/02/phto-1.jpg" alt="" />
                    </td>
                    <td class="large-6 columns last" style="vertical-align: middle">
                      <h2>Камиль Абзалов</h2>
                      <p>Лучшие уроки Камиля Абзалова по версии Камиля Абзалова</p>
                    </td>
                  </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="spacer">
                  <tbody>
                    <tr>
                      <td height="50px" style="font-size:50px;line-height:50px;"> </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table class="button" style="margin-left: auto; margin-right: auto;">
                    <tr>
                      <td>
                        <table>
                          <tr >
                            <td style="border-color: #7c4dff !important;">
                              <a class="main-background" href="http://kamil-abzalov.ru">Посмотреть сайт</a></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                </table>
                </td>
              </tr>
              <tr>
                <td>                
                <table class="callout">
                  <tr>
                    <th class="callout-inner primary">
                      <table class="row">
                        <tbody>
                          <tr>
                            <th class="small-12 large-12 columns first last" style="padding-bottom: 0;">
                              <table>
                                <tr>
                                  <th>
                                    <p style="margin-bottom: 0;">Это очень крутой сайт</p>
                                  </th>
                                </tr>
                              </table>
                            </th>
                          </tr>
                        </tbody>
                      </table>
                    </th>
                  </tr>
                </table>
                </td>
              </tr>
            </table>
        </center>
      </td>
    </tr>
  </table>
</body>
</html>
Код урока (mail.php)
<?php

$mailTpl = file_get_contents('mail.html');

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";

$emails = ['ok_kam90@mail.ru', 'abzalov90@gmail.com', 'mail@kamil-abzalov.ru'];

foreach ($emails as $email) {
	mail($email, "Тема письма", $mailTpl, $headers);
}

0 Комментариев

Оставить комментарий

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

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This