Как создать печатную версию сайта?

Статьи

Создаем печатную версию сайта
Один HTML-код — две версии сайта

Создаем печатную версию сайта

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

Тем более, что это сделать просто. Для этого вам не нужно дублировать информацию специально для печати.

Правда, ваш сайт долежен удовлетворять условиям:

  1. HTML-код ваших страниц свободен от оформительского кода, т.е. внешнее оформление сайт получает с помощью CSS — каскадной таблицы стилей.
  2. Вы не использовали таблицы при верстке страниц.
  3. Каждый блок на странице имеет свое уникальное имя.

В таком случае работа по созданию печатной версии не займет у вас более 5 минут.

Шаг #1.

Ваш сайт уже имеет версию для вывода на экран. Для этого вы связали каждую страницу с CSS-файлом. В теге head есть запись (для страниц, которые находятся в корне сайта):
<link rel="stylesheet" type="text/css" href="css/style.css" />

Необходимо добавить в эту строчку media="screen".

Теперь строчка выглядит так:
<link rel="stylesheet" type="text/css" media="screen" href="css/stylе.css" />

Если мы хотим, чтобы каждая страница имела печатную версию, добавляем одну строчку:
<link rel="stylesheet" type="text/css" media="screen" href="css/stylе.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />

Шаг #2. 

В печатной версии убирается все, что не относится к главному содержанию на странице: блоки с навигацией, картинками, flash, формами для обратной связи   и т.д. при помощи display: none. В таблице стилей print.css добавляем правило, в моем случае:

#block1, #block2, #block3, #block4, #block5
{
display: none;
}

Устанавливаем размер шрифта, удобный для чтения на бумаге.

В моей печатной версии для шрифта установлены правила для body:
font: 14px/18pt Arial, Helvetica, sans-serif;
text-align: justify;

18pt после / — это межстрочный интервал.

Так же важно добавить стили заголовкам.
Ссылка на мой файл CSS для печатной версии сайта.

Как распечатать печатную версию страницу

Любую страницу можно распечатать посредством браузера (Файл > Печать).

Статьи
Блочная верстка сайтов
Контент для сайта
Реклама