Создание версии для печати на вашем сайте

Описан процесс создания версии для печати на сайте, построенном на основе системы управления сайтом InlifeCMS

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

  • Логотип компании
  • Координаты компании
  • Название страницы, которая распечатывается.

Далее обычно идет содержимое страницы.

Получить версию для печати несложно, если сайт построен на InlifeCMS, нашей системе управления сайтом. Для этого достаточно к любому адресу страницы добавить параметр print=on. В этом случае в браузер посетителя выводится содержимое только так называемой контекстной части сайта. Чтобы пояснить, что такое контентная часть сайта, проведем небольшой экскурс.

Сайт обычно состоит из трех частей:

  1. Хэдера (header) - заголовочной или верхней части сайта. В хэдер входит обычно и левая часть страницы, которая часто содержит меню;
  2. Контентная часть (content) - средняя, центральная часть страниц сайта, которая выводит основной текст страницы;
  3. Футер (footer) - нижняя часть страницы сайта. Обычно содержит информацию о копирайте, контакты компании, счетчики посещаемости.

Когда наша система управления сайтом видит среди параметров адреса страницы параметр print=on, то в браузер посетителю выдается только содержимое контентной области внутри шаблона print.tpl. Вам достаточно перекрыть этот шаблон и вставить свою контактную информацию для окончательного оформления страницы версии для печати для вашего сайта.

Особенность версии для печати состоит в том, что для печати на бумаге часто требуется замена стилей. Это нужно для улучшения вида элементов, которые распечатываются на странице версии для печати на черно-белом принтере. Часто бывает, например, на странице расположена таблица с красными рамками. На листе бумаги при печати рамки не видны или почти не видны. Поэтому необходимо, чтобы при печати рамка у таблицы была черного цвета. Это достигается путем комбинирования стилевых файлов для разных носителей с помощью атрибута media теге <link ...>. Рассмотрим пример кода:

<link media="screen" rel="stylesheet" href="/style/main.css" type="text/css" />
<link media="print, handheld" rel="stylesheet" href="/style/print.css" type="text/css" />

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

Вот пример реализации всего вышесказанного:

А еще страницу версии для печати можно подвергнуть небольшой обработке, и посетителю выдается эта же страница, только в виде файла формата .pdf (Adobe Acrobat Reader).