Demystifying Email Design

Динамический сайт SSI HTML CSS, код скачать. Этап #3 MYsiteD

Демонстрируется простая и актуальная для большинства случаев веб-строительства технология, позволяющая создать динамический сайт с использованием кода html css .

Суть идеи в разнесении всех элементов общего контента и уникального по разным документам с применением на стороне веб-сервера директив ssi . В результате браузер по запросу отображает уже сформированные страницы, как бы «склеенные» из этих разных элементов.

Если посмотреть на изображение или на пример из сети, то может показаться, что от предшествующего варианта этот шаблон отличается лишь наличием правой колонки. На самом деле он принципиально другой. Теперь страницы создаются динамически на вебсервере из документов html с уникальным контентом и shtml с общим. А схожий дизайн принципиального значения в данной ситуации не имеет.

Преимущества такого подхода изложены в прилагаемом видео-ролике.

При просмотре видео отображаемые экраны рекомендуется ставить на паузу.

Программный инструментарий

При создании или отладке динамических сайтов кроме браузера с редактором еще потребуется, так называемый, локальный веб-сервер.

Для Windows существует множество готовых программных решений, выполняющих такое предназначение на базе веб-сервера Apache, системы управления базами данных MySQL и скриптового языка PHP — сокращенно WAMP. В России одним из старейших и популярных подобных продуктов является Denwer, не требователен к ресурсам, прост и надежен. Подробнее рассматривается ниже.

В среде Linux часто используют Xampp являющийся кроссплатформенным продуктом. Или можно обойтись связкой LAMP — аналог WAMP. Тема отдельного рассмотрения.

Установка Денвера

Первый вариант, он же самый простой. Скачать необходимый архив с данного ресурса, распаковать и запустить на исполнение, предварительно выйдя из сети. В процессе установки согласиться со всеми с рекомендациями, включая создание виртуального накопителя Z: и размещением иконок на «рабочем столе».

Второй вариант, воспользоваться официальным сайтом — http://www.denwer.ru/ . Для получения продукта потребуется пройти процедуру регистрации.

В обоих случаях должны появиться на диске C: каталог WebServers с вложенной файловой структурой (1), а на «рабочем столе» три иконки Денвера: « Start . », « Stop . », « Restart . » (2). Также рекомендуется разместить на «рабочем столе» ярлык файла SwitchOff.exe (3) из папки WebServers . Назначение — возможность отключения диска Z: , в будущем пригодится.

Далее необходимо проверить работоспособность полученного приложения:

1. Кликнуть на иконку « Start . » (2), таким образом запустив Denwer. Станет доступен диск Z: со структурой (4), что фактически является копией папки WebServers (1)
2. В браузере перейти по адресу — http://127.0.0.1 , откроется экран похожий на представленное изображение
3. Перейти в раздел « Тестирование . » и пройти предложенные тесты

1. Если все тесты завершились успешно, то в случае появления запроса подтвердить корректность установки Денвера.

2. Во избежание неприятных сюрпризов, требуется отключать ПК от сети при работе Денвера и наоборот. При этом, доступность диска Z: сохраняется, если не будет закрыт специально.

3. При необходимости избавиться от Денвера нужно просто удалить директорию WebServers , предварительно закрыв само приложение, если оно находилось в рабочем состоянии.

4. Работоспособность приложения проверена в средах Windows 7 и 11.

К сожалению, проект больше не поддерживается авторами, но для предлагаемого здесь варианта кода каркаса стандартных функциональных возможностей достаточно с лихвой. В будущем можно обновиться до современных требований, воспользовавшись статьей «Локальный веб сервер Денвер установка обновление с PHP 7».

Шаблон динамического сайта SSI HTML

Если тестирование в пункте «c» предыдущего подраздела прошло успешно, то необходимо получить архив рассматриваемого шаблона:

1. Закрыть Denwer, вернуться в Internet и нажать на ссылку — «СКАЧАТЬ»
2. На ПК диске Z: в директории home создать папку template2.ru , а в ней каталог www , в который распаковать полученный ранее архив
3. Снова выйти из Internet и опять запустить Denwer
4. В браузере перейти по адресу template2.ru , что есть url создаваемого динамического ресурса. В результате браузер должен отобразить экран, как на первом скриншоте

Структура

В значительной степени демонстрируемая картинка похожа на структуру описанную в предыдущей статье, но имеются отличия. В коренной директории теперь находится восемь папок и пять файлов. Один из них index — Главная страница, остальные технические.

Из восьми имеющихся папок две новые — general-includes и general-styles , остальные разделы. В general-styles содержится знакомый файл style.css, который раньше находился в корне. А вот содержимое general-includes необходимо рассмотреть подробнее. Там находятся именно те блоки элементов общего контента, которые упоминались ранее. Файлы с расширениями shtml :

• preamble — часть кода, однажды написанная, практически не меняется;
• header — шапка с названием сайта;
• left — левая часть, колонка с меню навигации;
• right — правая часть, ссылки на статьи в разделах;
• footer – нижняя часть или «подвал».

Для наглядности, их расположение представлено ниже на условной схеме.

В документах с расширениями shtml и html коды выполнены по единым правилам языка разметки. Символ « s » лишь показывает серверу, что этот материал должен обрабатываться с учетом технологии ssi. Это позволяет ускорить процесс динамического формирования, когда элементы общего контента по запросу подгружаются к текущей странице.

Использование директив SSI

Фактически эти директивы являются расширением возможностей языка html , осуществляемых в рамках использования синтаксиса комментариев. Далее представлены примеры практической их реализации.

Такие директивы обладают обширными и гибкими возможностями на стороне сервера:

• вставка одного документа в другой;
• исполнение cgi-скриптов, программ и системных команд;
• вывод размера и времени редактирования материала;
• вывод переменных окружения;
• использование пользовательских переменных;
• обработка условий.

Включение механизма ssi и комплексная его настройка осуществляется самими пользователями в коде файла .htaccess .

Из всех упомянутых возможностей в нашей ситуации используются лишь две c демонстрацией примеров их применения и синтаксиса.

1. Вставка — unclude , соединение одного документа с другим.

2. Обработка условий if в исходном тексте при создании системы навигации.

Схема верстки

Как видно из условной схемы, шаблон состоит из шести различных блоков, которые по запросу с помощью директив ssi собираются в единое целое. А значения свойств им передаются из style.css с помощью соответствующих селекторов.

Заключение

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

А пока завершим начатое. В следующей статье рассмотрим процесс открытия поисковикам доступа к создаваемым сетевым ресурсам, включая динамические, и публикацию сайта html в Интернет пространстве.

Источник

Как создать динамический HTML шаблон электронного письма

В этой статье приводится пошаговое руководство по созданию динамического шаблона электронного письма с помощью 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 документа :

Я рекомендую определить все таблицы границей border=»1″ , поскольку так проще определять ошибки при создании HTML шаблон письма. Для начала создадим базовый макет:

Установите 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 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_template = sprintf($email_template_string,'URL_to_Banner_Images/banner_' . $email_subject_image. '.png', $message, $mobile_plugin_string); return $email_template; >

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

Предположим, что у нас есть подтвержденная почта пользователя user@user.com и почта компании company@company.com . Теперь можно отправить автоматическое письмо:

$from = "company@company.com"; $to = "user@user.com"; $body_text = "Your email has been successfully verified. "; $banner_image_subject = "account_verified"; $final_message = build_email_template($banner_image_subject, $body_text); send_email($to, $from, "You email has been verified", $final_message);

Все! Вы можете использовать этот подход. Вот окончательный HTML шаблон email письма , отправленного пользователю:

МЛ Мария Логутенко автор-переводчик статьи «

Источник