Урок 3. Табличный дизайн рассылки для "чайников"

Урок 3. Табличный дизайн рассылки для "чайников"
5 (100%) 1 vote

Верстать таблицы в Блокноте - удел Избранных. Для абсолютного большинства этот путь неприемлем. И тут нам на помощь приходит любимый до слез HomeSite.

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

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

За сим, приступим, засучив рукава...

Запускаем HomeSite. В блоке панелей инструментов выбираем Table (Таблицы), где смело нажимаем на первую же кнопку  Table Wizard.

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

Где:

  1. Объединить ячейки по горизонтали
  2. Добавить столбцы
  3. Объединить ячейки по вертикали
  4. Добавить строки

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

Ай, да мы! Нажимаем кнопку Next (Далее). Спокойно! Голова не кружится, паниковать рано! Видим вот такой расклад:

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

Жмем Next (Далее). Боже!!! Что ЭТО?!!! Спокойно! Без паники, мы начинаем КВН - сообщаем HomeSite что и в какой ячейке у нас будет жить. В частности в крайней слева будет жить название нашей рассылки. А потому в поле Content мы вставим такую фразу:

рассылка новостей<br><b>&laquo;[ SUBSCRIBE list_name ]&raquo;</b> 
(выделите, скопируйте и вставьте).

Сделано? Отлично! В поле Width (ширина) поставьте 33%, выберите горизонтальную ориентацию center .

Теперь не нажимая Next, кликаем мышкой в среднюю верхнюю ячейку.

Можете сделать так, как написано на картинке. А можете выделить, скопировать и вставить в поле Content следующий текст:

<img src='http://subscribe.ru/catalog/код_Вашей_рассылки/logo.png' border='0' width='100'>

Замените код_Вашей_рассылки на собственно код, который дала Вам служба Subscribe.

Кстати, если Вы еще не украсили свою рассылку логотипом, сделать это можно в Вашем аккаунте на SubScribe в меню "Конфигурации" -> "Отображение в каталоге".

В поле Width (ширина) поставьте 33%, выберите горизонтальную ориентацию center .

Кликаем мышкой в следующую ячейку.

Здесь у нас будут жить дата выпуска, его номер и, до кучи, его название. В поле Content вставляем:

выпуск No [ SUBSCRIBE issue_number ]&nbsp;от [ SUBSCRIBE issue_date ]<br><b>&laquo;[ SUBSCRIBE issue_name_add ]&raquo;</b>

Выставляем ширину ячейки, центрируем - все, как обычно.

Следующая ячейка у нас - самая большая. Там будут жить наши выпуски. Недрогнувшей рукой кликаем в центральную ячейку.

Ширину мы здесь не проставляем, однако указываем, что текст нам крайне желателен по левому краю а по вертикали привязываться к верху ячейки, а не к ее середине.

В поле можно просто вставить __ISSUE__, а можно сделать еще удобнее - сразу и поздороваться со всеми:

<p>Добрый день, друзья. С вами [ SUBSCRIBE list_author_name ] с очередным выпуском рассылки &laquo;[ SUBSCRIBE list_name ]&raquo;.
<p>__ISSUE__
<br><br>

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

Идем далее... Видите? Все легче и легче 😉

Дерзко копируем и вставляем в поле Content:

<center><b>Контакты</b>:<br><a href=[ SUBSCRIBE list_url ]>[ SUBSCRIBE list_url ]</a><br> <a href=mailto:[ SUBSCRIBE list_author_email ]>[ SUBSCRIBE list_author_email ]</a></center>

В нижних ячейках уже не обязательно указывать ширину - она будет по умолчанию 33%

В средней ячейке у нас будут жить оценки Ваших выпусков:

[ SUBSCRIBE list_votebar_email ]

Разумеется - по центру.

Ну и в конце можно добавить что-то лично от себя: пожелания, просьба рекомендации и т.д. Например так:

Если Вам нравится эта рассылка, будет здорово, если Вы порекомендуете своим друзьям и коллегам. Спасибо!

Вот теперь самое время нажать Finish (Конец). Вот что Вы увидите в окне HomeSite:

Все это безобразие Дизайн рассылки нужно выделить (лучше использовать комбинацию клавиш Ctrl+A), скопировать и вставить в поле Шаблон HTML-письма в разделе "Шаблоны оформления"

Кстати, чуть не забыла. Если Вы не хотите, чтобы вся Ваша таблица была одним цветом, а хотите, чтобы внутри ячейки были, скажем, белыми, просто добавьте вот такой код в каждую ячейку:

bgcolor="#ffffff"

Т.е., выглядеть это будет так: открывающая скобка, td или th (если это ячейка с заголовками), пробел, цвет,  ну и  код, который лучше не менять 😉

<td bgcolor="#ffffff" align="center">

Всего-то делов! Только не забудьте сохранить изменения в Вашем шаблоне на Subscribe.

И скажите после этого, что создать свой собственный дизайн рассылки не просто!

Домашнее задание

  1. Скачать HomeSite и отверстать свой табличный дизайн
Рекомендую
Если Вы хотите научиться создавать качественные сайты, делать красивую графику в Photoshop, свободно овладеть языком разметки HTML и стилями CSS, то я рекомендую Вам обратить внимание на этот обучающий видеокурс

Лола Пирхал

Сертифицированный коуч, бизнес-тренер, интернет-предприниматель, веб-разработчик

+38 067 7923605 KartaUspeha.ru

QR:  '.get_the_title().'

Что Вы об этом думаете?

Подарок

Оставьте Ваш первый комментарий и получите замечательный подарок!


5 комментариев

Добавить комментарий

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