Новогодняя открытка HTML CSS (поздравительное письмо)

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

Для тех кому лень заниматься оформлением поздравительных и-мейл писем предлагаю готовый вариант:


Создайте в блокноте (я использую Notepad++) простой текстовый документ. Переименуйте его из *.txt В *.html. Откройте его одновременно в блокноте (для редактирования) и в браузере (для просмотра результата).

Скопируйте в тело документа (в блокноте) этот код:

<body style="background-color: #f0f0f0;">
<div style="margin: 0 auto; width: 600px;  font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; ">
 <div style="margin: 5px 0; background-color: #f8f8f8; line-height: 2px; color: #8e8e8e; font-size: 10px; padding: 1px 0 0 1px; border: 10px #eeedec; border-style: solid;"><p align="center">Если Вы не видете содержимое письма, то нажмите <a href=http://ваш_сайт/ссылка_на_поздравительный материал>сюда</a></p></div>


 <div style="margin: 5px 0; background-color: #f8f8f8; line-height: 2px; color: #8e8e8e; font-size: 10px; padding: 1px 0 0 1px; border: 10px #eeedec; border-style: solid; "><p align="center">Имя Фирмы | Skype: <a style="text-decoration:none;" href="skype:ваш_ник_в_скайпе?add">ваш_ник_в_скайпе</a> | <a style="text-decoration:none;" href="http://www.ваш_сайт">www.ваш_сайт<a/> | <a style="text-decoration:none;" href="mailto:ваш@адрес.eu">ваш@адрес.eu</a> | <a style="text-decoration:none;" href="skype:+ваш_телефон?call">+ваш_телефон</a></p></div></div>
</div >
</body>

Сохраните, обновите страницу в браузере - F5. Обратите внимание, в коде Вам нужно вставить следующие вещи: в первом абзаце нужно будет вставить ссылку на поздравительный материал на Вашем сайте, чтобы человек получивший письмо и по каким то причинам не сумевшим прочитать его содержимое прошел по ссылке на Ваш сайт и увидел поздравление на нем.
Об этом я расскажу ниже.

Далее во втором абзаце, поместите нижеследующую картинку на Ваш сервер или на хостинг изображений и пропишите адрес до этой картинки.
 
В третьем абзаце пропишите имя своей фирмы, скайп, имейл, адрес сайта и телефон. Все по выбору и на свое усмотрение.
 
Теперь по поводу поздравительного материала на своем сайте:
 
Создайте материал в любой категории, назовите его "С Новым годом!" и поместите в него следующий код:
 
 
 <div style="margin: 5px 0; background-image: url(http://ваш_сайт/images/otkritka.jpg); background-repeat: no-repeat; height: 450px; background-color: #f8f8f8; padding: 3px; border: 10px #eeedec; border-style: solid;">
<div style="position: absolute; width: 260px; height: 200px; margin-left: 305px; margin-top: 165px; color: #fff; font-size: 14px;">
Желаем встретить Новый год<br />
Весельем шумным и с размахом.<br />
Пусть праздник радость принесёт,<br />
И это будет добрым знаком.<br />
Желаем ярких перспектив,<br />
Удачи, смелых начинаний.<br />
Пусть в жизни будет позитив<br />
И много сбывшихся желаний!<br />
</div>
</div>

Это копия второго абзаца. Пропишите алиас: s-novym-godom. Создайте новое меню, назовите его Hidden Menu и тип меню например hiddenmenu. Модуль этого меню публиковать не нужно, оно необходимо лишь для того чтобы материал на сайте был доступен по ссылке. Создайте пункт меню в этом меню. Назовите как угодно, например "С Новым годом!", тип пункта меню статья, соответственно выбираем материал "С Новым годом!".
Теперь Ваша статья будет доступна по ссылке http://ваш_сайт/index.php/s-novym-godom. Эту ссылку собственно и нужно вставить в первом абзаце кода письма.

Вот так поздравительная открытка будет выглядеть:

 
Еще раз с наступающими праздниками Вас!!!!


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

Технологии Blogger.