Создание email-шаблонов
При создании email-шаблонов, как правило, используется табличная верстка. Все email-кленты поддерживают <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.02 Final//EN"> на который и следует ориентироваться. В большинстве случаев, нельзя использовать некоторые свойства CSS: background-image, кроме как на body; float; position и много еще чего, полная таблица поддержки email-клиентами свойств CSS в .
Особенности создания принт-версии страницы
При создании принт-версии надо учитывать, что px на экране и px на принтере – это далеко не одно и то же. Принтер работает с таки понятием, как dpi (dots per inch) – количество точек на дюйм. Т.е., если, допустим, изображение шириной 700×700px на экране занимает половину окна браузера, то это еще не значит, что и на листе формата А4 оно будет занимать пол-листа. Также надо учитывать, что при выводе на принтер каждый браузер ставит свои поля печати и вообще имеет собственное представление об области печати и разрешающей способности принтера. Таким образом, надо иметь ввиду, что сделать абсолютно одинаковую для всех браузеров принт-версию невозможно. Исходя из всего вышесказанного, писать принт-версию «вслепую» нельзя: каждый шаг перепроверяем под всеми браузерами.
Есть два основных метода создания принт-версий:
-
модификация all.css;
-
с нуля.
В первом случае мы используем уже готовые стили, описанные в all.css (см. ). В print.css выносятся только те фрагменты, которые надо изменить: контейнерам, которые надо удалить присваивается свойство display:none;, переназначаются размеры блоков и иллюстраций и т.д.
Во втором пишем отдельно screen.css и print.css (см. ). В этом случае принт-версия не зависит от стилей экранной версии.
При верстке принт-версии рекомендуется при обозначении горизонтальных параметров пользоваться относительными единицами измерения, т.е. %.
Например:
HTML
<div id="main">
<div id="header">header </div>
<div id="leftcolumn">left column</div>
<div id="content">content</div>
<div id="footer">footer </div>
</div>
screen.css
#main {
margin: 0 auto;
width: 710px;
}
#header {
width: 710px;
height: 50px;
}
#footer {
width: 710px;
height: 50px;
clear: both;
}
#leftcolumn {
width: 100px;
float: left;
}
#content {
width: 610px;
float: left;
}
print.css
#main {width: 100%;}
#header {
width: 100%;
height: 50px;
}
#footer {
width: 100&;
height: 50px;
clear: both;
}
#leftcolumn {
width: 20%;
float: left;
}
#content {
width: 80%;
float: left;
}
Не забывайте постоянно контролировать результаты внесенных изменений.
Свойство page-break- before в состоянии always устанавливает разрыв страницы перед блоком, т.е. указав это свойство тэгам <h1>-<h6> можно начинать соответствующий раздел с новой страницы.
Свойство page-break-inside в состоянии avoid запрещает разрыв страницы внутри блока, т.е. указав это свойство тэгу <p> можно переносить на следующую страницу полный абзац.
Свойства orphans и widows указывают, сколько строк можно оставить внизу и верху страницы соответственно. По-умолчанию у обоих свойств указано значение 2.
Не рекомендуется ставить разрывы страниц слишком часто, т.к. это может привести к бесполезному перерасходу бумаги.
Подроблее о свойствах, предназначенных для принт-версий на http://www.w3.org/TR/CSS21/page.html