Zurb Foundation. Верстка HTML Email писем
На прошлом уроке мы изучили основы CSS фреймворка Foundation. Но данный фреймворк имеет у себя еще один необходимый и мощный инструмент — фреймворк для создания html email писем. Сегодня мы сделаем простой макет письма с отправкой его на php.
Верстка html email писем — это боль для разработчиков. В этом процессе вы должны использовать таблицы. Есть и другие проблемы и особенности email клиентов, которые вы должны знать. CSS фреймворк Zurb Foundation позволит вам создавать html email письма намного быстрее. Также он имеет несколько готовых шаблонов.
Отправка почты реализуется с помощью стандартной php функции mail.
Отправка почты реализуется с помощью стандартной 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 Комментариев