Автор: Кристофер ШмиттСоздаем печатную версию сайта
Один HTML-код — две версии сайта
Интернет повысил доступность информации многократно, но не отменил книги, учебники, газеты. А потому информация, изложенная на бумаге, как и прежде, нужна. Поэтому я вижу смысл в том, чтобы обеспечить обратную связь, т.е. переход сетевых материалов на бумагу.
Тем более, что это сделать просто. Для этого вам не нужно дублировать информацию специально для печати.
Правда, в том случае, если ваш сайт удовлетворяет условиям:
- HTML-код ваших страниц свободен от оформительского кода, т.е. внешнее оформление сайт получает с помощью CSS — каскадной таблицы стилей.
- Вы не использовали таблицы при верстке страниц.
- Каждый блок на странице имеет свое уникальное имя.
В таком случае работа по созданию печатной версии не займет у вас более 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 добавляем правило, в моем случае:
{
display: none;
}
Устанавливаем размер шрифта, удобный для чтения на бумаге.
В моей печатной версии для шрифта установлены правила:
font: 14px/18pt Arial, Helvetica, sans-serif;
text-align: justify;
Цифра, которая следует после / — это межстрочный интервал.
Так же важно добавить стили заголовкам.
Ссылка на мой файл CSS для печатной версии сайта.
Шаг #3.
Теперь посетитель должен увидеть, что страница доступна для печати. При наличии отдельной страницы можно было поставить ссылку на нее с названием «Версия для печати». Но у нас такой страницы нет.
Какое решение выбрала я?
О том, что каждую страницу можно распечатать посредством браузера (Файл > Печать), знают не все. Поэтому я подготовила ссылку «Версия для печати» и всплывающую подсказку, которая появляется при наведении курсора мыши. Предлагается прежде просмотреть версию для печати, потому что человек должен убедиться, что в печатную версию не попадет ненужная ему информация.
Саму же ссылку можно сделать фиктивной, т.е. без адреса:
<a href="#">Печатная версия</a>.
Посетитель, если и нажмет на ссылку, то все равно останется на этой же
странице.
- Почему XHTML+CSS? 15 доводов в пользу перехода на XHTML+CSS.
- Как декларация DOCTYPE влияет на отображение браузерами?
- Какой стандарт предпочтительнее выбрать при создании нового сайта? Отличия XHTML от HTML.
- Web-студии и web-стандарты — две вещи несовместные?
- Недостатки меню на javascript. Из опыта создания ниспадающих меню в NavStudio.