Кращий спосіб зрозуміти будь-який процес - виконати його самостійно, з самого початку. Сьогодні ми виконаємо це з дизайном електронного листа, створюючи його з нуля.
Для початку варто згадати, де я взяв деякі ресурси.
Тепер, як ми вже обговорювали в попередньому уроці. починаємо HTML лист з XHTML doctype:
Після цього можемо почати будувати іншу частину листа.
Створення контейнера і основної таблиці.
Перш за все ми створимо спільну структуру нашого листа за допомогою тега
і задамо йому нульові margin і padding, щоб уникнути несподіваного простору.Ми також створимо table з шириною 100%. Це і буде служити основним контейнером нашого листа, т. К. Стилі для body не скрізь підтримуються. Якщо Ви хочете додати фон для body, Вам необхідно буде застосувати цю властивість для основної таблиці.
Встановіть нульові значення cellpadding і cellspacing, щоб уникнути несподіваного простору в таблиці.
Увага: ми збираємося залишити значення border = "1" для всіх таблиць, щоб бачити скелет макета. В кінці ми видалимо це значення за допомогою простої функції Знайти і Замінити.
Якщо який-небудь атрибут існує в HTML, використовуйте його замість CSS властивості.
Тепер помістіть таблицю шириною 600px всередину контейнера основної таблиці. 600px є безпечною максимальною шириною електронного листа, щоб комфортно відображатися в більшості настільних і поштових клієнтів на різних дозволах моніторів.
Задайте ширину в HTML замість CSS, використовуючи атрибут width. Золоте правило в розробці HTML листів: якщо який-небудь атрибут існує в HTML, використовуйте його, замість CSS властивості.
Тепер замінимо наше невелике привітання 'Hello!' На цю таблицю:
Ми також додали інлайновие стилі, які задають властивості border-collapse значення collapse. Якщо ми цього не зробимо, останні версії Outlook додадуть невеликий простір між таблицею і обведенням.
Створення Структури і Шапки.
У нашому дизайні ми бачимо, що лист розділене на три логічних розділу, тому створимо рядок для кожного з них.
Візьмемо рядок, яку ми вже створили і продублюємо її три рази. Я змінив текст всередині них так, щоб ми могли розрізнити кожен рядок.
Тепер задамо їм колір відповідно до дизайну. Оскільки bgcolor є дійсним атрибутом HTML, ми будемо використовувати його замість CSS, щоб задати колір фону. Пам'ятайте, щоб завжди використовувати повне шестизначне значення hex коду, тризначні скорочення не завжди працюють.
Добре, в наступному кроці сфокусуємось на Строке 1. Нам необхідно задати padding в осередку і потім вставити зображення.
Використання Padding
Коли використовуєте padding в HTML листах, завжди необхідно ставити кожне окреме значення (top, right, bottom і left), в іншому випадку результати можуть бути непередбачувані. Я вважаю, тут все ще можна використовувати скорочену форму запису padding: 10px 10px 8px 5px ;. але якщо у Вас виникнуть проблеми, напишіть повну форму padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;
Якщо у Вас все ж виникли великі проблеми з padding (наприклад поштовий клієнт видаляє Ваш CSS), не використовуйте їх зовсім. Просто використовуйте порожні клітинки, щоб створити простір. Зовсім не обов'язково використовувати gif розпірку, можна просто додати style = "line-height: 0; font-size: 0;" для осередку, вставити всередину і задати певну висоту або ширину. Приклад нижче:
Також зверніть увагу, що безпечніше використовувати padding в
або
Отже, ми використовували трохи інлайнових стилів CSS, щоб задати padding для осередку. Тепер вставимо зображення, додавши alt і style = "display: block;". Це робиться для того, щоб деякі поштові клієнти не додавали прогалини під зображенням. Отцентріруем зображення за допомогою align = "center" для нашого
Примітка: якщо інформація в шапці є дуже важливою, не використовуйте там зображення. Пам'ятайте, що зображення блокуються за умовчанням в більшості поштових клієнтів, так що якщо у Вашому листі є який-небудь важливий аспект, ніколи не вставляйте його зображенням. У цьому прикладі, проте, мій заголовок швидше зайвий.
Створення області конент
Перш за все додамо padding для середньої осередки, так, щоб таблиця всередині мала навколо трохи простору, відповідно до дизайну.
Тепер додамо таблицю з трьома рядками для головного контенту - одна для головного заголовка, друга для вступного тексту і третя для рядка з двома колонками. Задамо ширину таблиці 100%, використовуємо відсотки, а не пікселі, тому що це допоможе нам надалі зробити лист адаптивним. Якщо весь час використовувати значення в пікселях, в кінцевому підсумку можна заплутатися з величезною кількістю значень, які доведеться перевизначати за допомогою медіа запитів. Якщо задати певну ширину батьківського контейнера, а вкладеним в нього таблицями розміри в процентах, все елементи будуть адаптуватися пропорційно.
Тепер вставимо наш контент і додамо padding для середньої осередки.
Додамо дві колонки з контентом для рядка 3. Нам потрібен margin між двома осередками, але margin не підтримується, тому ми створимо таблицю з трьома колонками і середня колонка залишиться порожньою.
Скільки б я не дотримувався відсотків, але, якщо Вам потрібен контент певного розміру, може бути непросто перевести його в відсотки (наприклад, колонки будуть рівні 48,1%, що може призвести до плутанини). Саме тому, з огляду на, що наші зображення рівні 260px, ми створимо колонки шириною 260px, з осередком для margin в 20px посередині. (Загалом виходить 540px: 600px ширина таблиці мінус padding 30px з кожного боку). Обов'язково обнуліть font-size і line-height і додайте нерозривний пробіл в клітинку з margin.
Також встановимо valign значення "top" для кожного осередку, щоб вирівняти їх по вертикалі, навіть якщо одна з колонок має більше вмісту, ніж інші. Значення за замовчуванням "middle".
Тепер додамо зображення і контент в ці колонки. Оскільки нам потрібно кілька рядків, вставимо ще одну таблицю, тому що ми не можемо використовувати colspan або rowspan. Ми також додамо padding між зображеннями і скопіюємо кожну колонку.
Тут ми встановили ширину зображень за допомогою HTML на 100% ширини колонки. Це, знову ж таки, для того, щоб зробити лист адаптивним. Ми можемо використовувати тільки медіа запити, щоб змінити ширину батьківського елемента. Нам потрібно перевизначити висоту в пікселях, тому що використовуючи style = "height: auto" тепер не буде працювати скрізь (кашель, Outlook). Так що задамо в пікселях. Це означає, нам доведеться встановити height: auto! Important цим зображенням використовуючи медіа запити, щоб перевизначити значення в пікселях, але ми могли б зробити це за допомогою одного класу. Як тільки встановимо ширину у відсотках, не потрібно буде нічого перевизначати. Чим менше елементів для перевизначення, тим краще.
Тепер додамо padding для рядка footer.
Всередину цього осередку вставимо іншу таблицю, щоб отримати дві колонки.
Тепер вставимо текст і задамо ширину для осередків, про всяк випадок, навіть якщо між ними досить простору. Встановимо ширину цього осередку на 75% і інших на 25%.
Ну от і все! Наша верстка закінчена.
Давайте проженемо код через W3C валідатор. щоб переконатися, що нічого не зламалося. Якщо Ви точно всьому слідували, то валідатор скаже, що все в порядку.
Далі запустимо тест через Litmus, щоб переконатися, що структура нашої електронної пошти відмінно працює. Ось зведення з мого тесту:
стилізація тексту
Наша перша рядок - це заголовок. Будемо використовувати тег . щоб зробити текст жирним, тому, що, як ми знаємо, якщо є можливість стилізувати в HTML, використовуємо це, замість CSS властивостей.
Також додамо ці стилі до всіх іншим осередкам тексту:
Далі нам потрібно стилізувати текст футера і, крім цього, наведемо в порядок посилання откказа від розсилки. Стилізуємо посилання використовуючи одночасно CSS і HTML тег . Дублювання тегів - це найкращий спосіб переконатися, що Ваші посилання не будуть виділені блакитним за замовчуванням.
І ось воно! Все готово! Час, щоб вимкнути кордону і побачити, як все красиво виглядає. Пройдіться по коду і замініть кожне border = "1" на border = "0"
Зараз все виглядає трохи сумно, плаває в білому просторі, так що давайте повернемося до нашої першої ширині 600px і додамо:
Тепер нічого не плаває в просторі. В якості останнього штрих я додам 30px padding до нижньої частини найпершої осередки, щоб запобігти раптову зупинку нашої електронної пошти на деяких поштових програм (таких, як Apple Mail), і 10px padding зверху, так, щоб наш синій заголовок мав трохи повітря.
І це все! Ми готові до фінального тесту.
Зараз найкращий час для фінального тесту і тоді Ваше електронного листа готове до відправки!
Ну а щоб підняти Ваші знання на новий рівень, дивіться наступні уроки: