Главная » Статьи » Мой компьютер

КАК СОЗДАТЬ EMAIL С КАРТИНКАМИ

КАК СОЗДАТЬ EMAIL С КАРТИНКАМИ

        В настоящее время многие считают, что письма уже отошли в прошлое. Большинство людей предпочитают общаться друг с другом по телефонам или через компьютеры. Если кто и получает письма, то в основном деловые или рекламные. Не смотря на все это, когда человек получает письмо от своего знакомого, он с удовольствием его читает. Я нередко встречался со случаями, когда хорошо оформленные письма распространялись через сеть и передавались от знакомых к знакомым. Так почему же так происходит? Почему люди перестали писать письма, но с удовольствием их получают? Может, из-за лени и неумения людей нормально общаться между собой? Скорее всего, потому, что просто не умеют сами красиво оформить письмо.

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

        Для создания подобных писем вам понадобится компьютер под управлением любой операционной системы Windows, любой графический редактор (можно использовать встроенную в ОС программу «Paint») и визуальный HTML- редактор.

        В принципе, операционная система может быть любой, просто данную тему мы будем рассматривать на примере Windows.

        Обращаю ваше внимание, что данный вопрос созвучен с тем, который рассматривался в статье «Как создать рекламный баннер». Только в том случае для преобразования необходимого нам рисунка в HTML- код, доступный любому пользователю интернета, применялся сайт разработчика рекламного баннера. Но, ввиду того, что не все пользователи интернета являются владельцами сайтов, для создания email с картинками метод, используемый в вышеуказанной статье, может не подойти.

 

        Для начала выберите фотографии (рисунки). Затем с помощью графического редактора приведите их к единому размеру по горизонтали. Если вы планируете разместить в ряд по три рисунка, то их ширина желательно должна составлять 266 пикселей, так, чтобы эти три рисунка (фотографии) занимали стандартную страницу по ширине. Как это делать, подробно описано в статье «Как создать рекламный баннер», поэтому я не буду повторяться. После этого сохраните созданные и преобразованные вами рисунки на своем компьютере. Количество используемых в письме рисунков определяете вы сами. В данном примере я использовал шесть рисунков, по три рисунка в одной строке.

        P.S. Выбирать именно такие размеры – не обязательно, но это облегчит вам форматирование вашего письма.

        Затем запустите свой визуальный HTML- редактор. Я предлагаю вам использовать бесплатную программу «Nvu».  В окне программы «Nvu» (см. Рис.1) в рабочем поле (см.1 Рис.1) создайте таблицу из одной ячейки. Для этого на панели инструментов программы «Nvu» выберите инструмент «Таблица» (см.2 Рис.1), откройте вкладку «Вставить» (см.3 Рис.1) и нажмите кнопку «Таблица» (см.4 Рис.1).

        После этого у вас откроется окно «Вставка таблицы» (см.5 Рис.1). На Рис.1 это окно я сместил вправо и вниз, чтобы данный рисунок легко читался. В окне «Вставка таблицы» наведите курсор на левую верхнюю ячейку (см.6 Рис.1) и щелкните левой кнопкой мыши.

        После этого в рабочей части окна программы «Nvu» появится таблица, состоящая из одной ячейки (см.0 Рис.2).

        Теперь приступаем к созданию макета письма. Все письмо будет вставлено в созданную нами таблицу из одной ячейки. Для заголовка внутрь таблицы из одной ячейки вставляем еще одну таблицу из одной ячейки (см.1 Рис.2). Делается это по аналогии с предыдущим пунктом. Затем, под вставленной таблицей напишите какой-нибудь текст, в моем случае «Тут мы проезжали:». Далее я размещаю еще одну таблицу, которая состоит из одной строки и трех столбцов (см.2 Рис.2). Под новой таблицей я размещаю новый текст – «А здесь мы отдыхали». Затем вставляю новую таблицу из одной строки и трех столбцов (см.3 Рис.2). И в заключение добавляю текст «На днях мы снова планируем прокатиться этим маршрутом. Если хочешь, присоединяйся. Будем рады видеть тебя в нашей компании!». Все, макет письма создан. Конечно, ваш макет будет существенно отличаться от предложенного мной, вы можете менять компоновку, писать любой текст, вставлять любое количество рисунков и т.д. Но принцип создания макета будет тот же самый.

        Теперь можно немного настроить ваш макет письма – выровнять его содержимое. Для этого внутри области первой таблицы (см.0 Рис.2) щелкните правой кнопкой мыши. У вас появится контекстное меню, в котором нужно выбрать пункт «Свойства ячейки таблицы», после чего появится окно «Свойства таблицы» Рис.3. В этом окне настройте параметры выравнивания. В разделе «Выравнивание содержимого» (см.1 Рис.3) поставьте галочки слева от надписей «Вертикальное» (см.2 Рис.3) и «Горизонтальное» (см.3 Рис.3). Задайте параметры выравнивания из выпадающего меню (см.4 и 5 Рис.3). После этого нажмите последовательно кнопки «Применить» (см.6 Рис.3) и «ОК» (см.7 Рис.3). После этого произойдет выравнивание содержимого вашего письма.

        В таблицу заголовка (см.1 Рис.2) введите нужный вам текст. В моем случае я ввел «Привет дружище! Недавно мы с друзьями провели выходные в Карпатах. Посмотри некоторые пейзажи». Текст заголовка вы можете увидеть на Рис 4 (см.2 Рис.4).

        Теперь в подготовленные ячейки вставьте те рисунки, которые вы заготовили для отправки электронным письмом. Найдите свои заготовленные рисунки, не открывая их, поочередно копируйте прямо из папки, в которой вы их сохранили. Как вы будете копировать - нажатием кнопок «Ctrl+C» или из контекстного меню - дело ваше. Скопировав картинку, вставляйте ее в нужную вам ячейку в рабочем окне программы «Nvu». Поочередно скопировав и вставив картинки, вы получите примерно такое окно, как на Рис.4, где в одну из подготовленных таблиц, состоящую из одной строки и трех столбцов, вставлены заготовленные рисунки (см.1 Рис.4).

        Теперь наша основная таблица приобрела конкретные размеры по ширине. В связи с этим можно выравнивать таблицу заголовка под размеры основной таблицы. Для этого выделяем таблицу заголовка нажатием на ней левой кнопки мыши, и при появлении по периметру таблицы небольших квадратиков, перемещаем средние квадратики в нужном направлении до предельно допустимой границы (см. Рис.4). Когда таблица приобретет нужные размеры, измените размер текста заголовка. Выделите текст и поменяйте его тип, выбрав необходимый из выпадающего списка (см.3 Рис.4).

        Вставьте на свои места остальные рисунки и подберите необходимый размер для остального текста.

        Наш email с картинками почти готов, и он будет иметь вид, как на Рис.9. Но отправлять письмо пока рано, т.к. картинки не размещены в интернете и видны будут только на вашем компьютере. Чтобы устранить эту проблему, либо разместите свои картинки на каком-нибудь сайте, либо преобразуйте изображения в HTML- код. Для этого воспользуйтесь услугами сайта //www.base64-image.de/. Там вы сможете бесплатно преобразовать ваши картинки в HTML- код. На главной странице сайта (см. Рис.5) нажмите кнопку «Upload image» (см.1 Рис.5).

        В новом окне Рис.6 нажмите кнопку «Выберите изображение» (см.1 Рис.6). Перед вами появится обычное окно выбора файлов, в котором вы должны указать свое изображение, которое необходимо преобразовать. После того, как вы выберете файл, на месте текста «Файл не выбран» (см.2 Рис.6) появится название вашего изображения. Затем нажимаете кнопку «Кодировать изображение» (см.3 Рис.6).

        В новом окне Рис.7 копируете код в разделе «HTML- image» (см.1 Рис.7).

        После этого переходите в окно программы «Nvu» и откройте свое письмо на вкладке «Код» (см.8 Рис.1). По умолчанию окно программы запускается на вкладке «Предварительный просмотр» (см.9 Рис.1).

        После того, как вы переведете работу программы «Nvu» в режим «Код», ее окно приобретет вид, как на Рис.8. В этом окне вам необходимо найти HTML-код, указывающий путь к вашим рисункам на вашем компьютере и заменить на тот, который вы скопировали в окне Рис.8. Искать HTML-код, указывающий путь к вашим рисункам на вашем компьютере, необходимо по слову «img». Это можно делать визуально или с помощью пункта меню «Правка» (см.1 Рис.8). При выборе пункта «Правка» на панели инструментов программы «Nvu» у вас откроется меню, в котором необходимо выбрать подменю «Найти и заменить». При этом у вас откроется окно, в поле поиска которого введите ключевое слово «img» (без кавычек). Затем нажмите кнопку «Найти далее», и программа найдет вам это слово.

        Внимание: В связи с изменениями, внесенными в HTML-код предоставляемый сайтом https://www.base64-image.de/, в статью внесены изменения в порядок замены кода.

        Вам необходимо выделить и удалить весь участок кода, указывающий на ваш рисунок на компьютере, от открывающейся и до закрывающейся кавычки, включая атрибут «alt=». На Рис.8 (см.2 Рис.8) этот участок кода обведен черным контуром (см.3 Рис.8).

        После того, как вы удалите участок кода, на его место вставьте тот, что вы скопировали в окне Рис.7.

        Есть небольшая особенность программы «Nvu». После того, как вы вставите код (а вставлять желательно методом одновременного нажатия кнопок Ctrl+C), вставленный код значительно смещается вправо. Пусть вас это не пугает. Это совершенно нормально.

        Аналогичным образом вы преобразовываете другие ваши рисунки в HTML-код и меняете коды ссылок на изображения, сохраненных на вашем ПК, на код, преобразованный с помощью сайта //www.base64-image.de/.

        Когда вы замените код для всех изображений, в окне программы «Nvu» снова перейдите на вкладку «Предварительный просмотр» (см.9 Рис.1). Если вы все сделали правильно, внешний вид вашего письма после замены HTML-кода будет точно такой, как и до замены.

        В завершение создания электронного письма с картинками вы можете создать цветной фон письма, воспользовавшись настройками меню «Свойства таблицы» (см.7 Рис.1). В этом же меню вы можете оставить или убрать рамки таблиц. Об этом говорилось в статье «Как создать рекламный баннер», но убирание или оставление рамок в данном случае ни на что не влияет, в отличие от того, как это было в случае с рекламными баннерами.

        После того, как вы создали письмо с помощью программы «Nvu», вам необходимо его сохранить. Пункт меню сохранения файла вы найдете в открывающемся меню кнопки «Файл» на панели инструментов программы «Nvu» (см.10 Рис.1). При сохранении файла присвойте ему понятное имя, по которому вы сможете найти созданный вами файл.

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

        Для начала откройте созданный вами файл. Для этого либо дважды щелкните по этому файлу левой кнопкой мыши, либо выберите пункт «Открыть» из контекстного меню, которое появится у вас на экране, если вы щелкнете правой кнопкой мыши на этом файле. После этого созданный вами файл откроется в окне браузера, который стоит у вас по умолчанию. Вам остается только выделить изображение, появившееся в окне вашего браузера, и скопировать его в буфер обмена (либо нажать кнопки Ctrl+C, либо выбрать пункт «Копировать» из контекстного меню).

        Затем откройте ваш почтовый ящик (лучше всего на почтовом сервере Rambler). После этого подготовьте письмо к отправке. Заполните все поля (адрес получателя и тему письма) и вставьте ваше письмо из буфера обмена в окно ввода содержимого письма одновременным нажатием кнопок Ctrl+V. Все, ваше письмо готово к отправке, вам остается только нажать кнопку отправить.

        Обращаю ваше внимание, что не все почтовые службы позволяют создавать подобные письма с картинками методом вставки. Например, почтовая служба Яндекса этого не делает, и именно поэтому я рекомендовал пользоваться почтовой службой  Rambler. Что же касается получения писем с картинками и их пересылки, это позволяют практически все почтовые службы. Следует отметить, что ограничения в получении подобных писем имеют некоторые почтовые клиенты. Поэтому в рекламных письмах, которые, кстати, создаются методом, подобным описанному, всегда присутствует фраза «Не можете открыть содержание письма - тогда перейдите по ссылке».

        Описанный метод может пригодиться вам, если вы собираетесь посылать email с картинками не только своим друзьям, но и пользователям вашего сайта в целях его рекламы. Только в этом случае вам целесообразно готовые письма сохранять на вашем сайте. Это позволит открывать их пользователям сайта, даже если они используют различные почтовые клиенты.

        Несмотря на то, что с первого взгляда создание email с картинками может показаться трудоемким, на самом деле это не так. Для создания письма, рассмотренного в нашем примере, я потратил 15-20 минут. Что же касается самого письма, то в качестве выбранных текстов и картинок я выбирал первое, что пришло в голову, т.к. не создавал конкретного письма конкретному адресату. Само же письмо (как образец), после некоторых настроек свойств таблицы, о которых я писал выше, вы можете посмотреть здесь.  

        Иценко Александр Иванович

Категория: Мой компьютер | Добавил: inok (13.11.2014) | Автор: Иценко Александр Иванович W
Просмотров: 1216 | Теги: создание email с картинками, преобразование изображение в HTML- | Рейтинг: 5.0/5
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]