Казалось бы что сложного в создании страницы для печати? Просто создаем такой же документ с текстом но без какого-либо дизайна и ставим на него ссылку с обычной страницы. Но в поисковых системах появился фильтр дублирующегося контента и веб-мастерам приходится прятать страницы для печати от индексации. К тому же посетителям сайта тоже не очень удобно, ведь нужно сначала перейти на копию нужной ему страницы, в которой отсутствуют элементы дизайна, и потом уже нажимать на кнопку "Печать".

Тут нам на помощь может придти CSS, который не только уменьшит количество работы для веб-мастеров и упростит пользование сайтом посетителям, но и позволит избежать санкций со стороны поисковиков за дублирующийся контент.

Структура страницы

Итак, давайте сначала с помощью HTML создадим структуру нашего документа. Для примера я решил использовать табличную верстку, чтобы сделать его более простым для понимания:

Навигация Главная страница Статьи Контакты

Название статьи Данная страница может быть распечатана. Напечатан будет только текст статьи.

Здесь могла бы быть ваша реклама

Как видите, у нас есть таблица с тремя ячейками, которые расположены горизонтально. Все как у обычного сайта: слева навигация, посередине контент, а в правой части рекламные блоки или новости. Каждой ячейке был присвоен свой id. Для левой части это leftcolumn, для правой – rightcolumn, а для средней ячейки с контентом – content.

Добавляем CSS

Теперь с помощью CSS нужно указать браузеру какие стили он должен использовать для отображения элементов страницы на экране и какие он должен использовать при печати. Создаем style.css и пишем туда следующее:

@media screen { body { background-color: #0B73BD; font-family: tahoma; color: #FFFFFF; } table { width: 600px; } #leftcolumn { width: 140px; vertical-align: top; font-size: 15px; } #rightcolumn { width: 110px; vertical-align: top; font-size: 15px; } #content { background-color: #32AADB; padding: 5px; font-size: 15px; } a { color: #FFFF00; } } @media print { body { background-color: #FFFFFF; font-family: tahoma; color: #000000; } #content { background-color: #FFFFFF; padding: 5px; font-size: 15px; color: #000000; width: 600px; } #leftcolumn { display: none; } #rightcolumn { display: none; } }

Первый блок CSS-кода описывает как должны отображаться элементы страницы в браузере. Блок был взят в дополнительные фигурные скобки перед которыми мы дописали @media screen. Это дает браузеру понять что данные стили нужно применить для вывода на экран:

Так выглядит страница при просмотре в браузере

Второй блок описывает отображение тех же элементов страницы, что и первый, но в данном случае в том виде, в котором будет выглядеть документ при печати и обозначается параметром @media print. Поскольку мы хотим чтобы был напечатан только полезный контент, то мы запрещаем для отображения левую (#leftcolumn) и правую (#rightcolumn) ячейки присвоив им значение display: none.

Так выглядит распечатанная версия страницы сайта

Отдельные файлы стилей

Обьединять все в один файл стилей совсем не обязательно. Вместо этого вы можете использовать два файла стилей и при их подключении к страницам сайта указывать браузеру какой файл стилей использовать при печати, а какой для вывода на экран. Первый (для вывода на экран) определяется параметром media="screen", а второй будет использоваться для печати и определяется параметром media="print":

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

Также при печати мы строго уменьшаем ширину блока с контентом до 600px, потому как при ширине 100% принтер "обрезает" небольшую полосу текста с правой стороны страницы. Обратите также свое внимание на то, что при печати из Opera отступ по краям листа немного меньше чем в Internet Explorer и строчки текста на листе бумаги получаются шире.

Теперь вам больше не нужно создавать дополнительные страницы для печати. Сообщить пользователям о возможности печати страницы можно, например, при помощи сылки с текстом "печать", при нажатии на которую будет выводиться всплывающая подсказка, с сообщением о возможности напрямую печатать текущую страницу без дизайна.

Копирование статьи запрещено.

Разработка, сопровождение и раскрутка сайтов

Создание "версии для печати" веб-страницы

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

Конечно, никто не мешает получить распечатку исходной страницы прямо в браузере командой Печать или комбинацией CTRL+P, однако при этом будут распечатаны ненужные элементы страницы - меню, шапка и др., которые затрудняют восприятие необходимой информации. Кроме того, цветные элементы при печати на монохромном принтере выглядят обычно малопривлекательно.

Для удобства пользователей разработчики сайтов обычно создают отдельную страницу - версию для печати , на которой оставляют только необходимый текст, рисунки в черно-белом варианте (оттенки серого) и контактные данные для связи.

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

Внизу страницы желательно указать полные контактные данные: адрес, телефон, e-mail, ICQ, URL сайта и др.

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

На самой странице версии для печати хорошим тоном считается установить кнопку Печать, при щелчке по которой открывается окно установок принтера. Для этого используется метод JavaScript window.print(); который печатает на принтере Web-страницу, находящуюся в текущем окне. Неплохо также разместить и ссылку для возврата на основную страницу.

Оформление кнопок можно сделать простыми ссылками
Распечатать (код Распечатать) и , но интереснее - с помощью тега :

HTML-код такой комбинации:

адрес основной страницы ");" />

В обоих случаях будет открываться стандартное окно распечатки документа, которое можете посмотреть, кликнув по приведенным примерам кнопок.

В заключение, не забудьте разместить на страничке печати код счетчика статистики, чтобы отслеживать число посетителей, сохранивших "твердую копию" описания вашего товара или услуги, хотя эти данные не всегда могут вас порадовать. К сожалению...

Полезные статьи по теме "Разработка, сопровождение и раскрутка сайтов"

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

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

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

Задаем цвет фона, выставляем отсупы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати веб-страницы блоки не съезжали.

Убираем лишние стили

При печати многие элементы сайта являются лишними: навигация, реклама, баннеры. Убираем их при помощи display:none .
У меня получилось нечто подобное:

Работа с гиперссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Также выводим URL (в скобках рядом с текстом ссылки).

a{ border : 0 ; text-decoration : none ; }
a img{ border : 0 }

Постраничная разбивка на CSS

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:

@media all
{
.nextpage { display : none ; }
}

@media print
{
.nextpage { display : block ; page-break-before : always ; }
}

Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.
Пример использования:

<html xmlns= "http://www.w3.org/1999/xhtml" >
<head >
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
<title > Пример page-break-before</ title >
<style type = "text/css" >
@media print{
.newpage{page-break-before: always;}
}
</ style >
</ head >
<body >
<h1 > Разрывы страниц на CSS</ h1 >
<p > Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю).</ p >
<p > Это 1-ый параграф, он будет расположен на первой странице при печати.</ p >
<div class = "newpage" >
<p > Это 2-ой параграф, он будет расположен на второй странице при печати.</ p >
<div class = "newpage" >
<p > Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто.</ p >
</ body >
</ html >

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.
Пример:

Другое css-cвойство — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

@media print {
p { widows : 3 ; orphans : 3 ; }
}

Подводим итоги:

В результате у меня получилось что-то подобное:

body{ margin : 0.5in ; font-family : times}
* { background : #fff !important; color : #000 !important; float : none !important; width : auto !important; height : auto !important; }
#context { margin : 0 !important; padding : 0 }
#menu , #topmenu , #thedrot , .meta , #comments , #commentform , #postcomment , #resplink , #footer { display : none }
#zag h1 span{ font-size : small; display : block }
a{ border : 0 ; text-decoration : none ; }
a img{ border : 0 }
a:after { content : " (" attr(href) ") " ; font-size : 90% ; }
a[ href^= "/" ] :after { content : " (http://www.сайт" attr(href) ") " ; }

Данная таблица стилей достаточна проста и, на мой взгляд, требует более детальной проработки отдельных элементов, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей. Разумеется, CSS-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

Периодически в интернете можно встретить настолько ценные статьи, что хочется распечатать их и зачитать до дыр. При этом не на всех сервисах предусмотрена версия статьи для печати или наши желания распечатать не совпадают с предоставляемыми возможностями (хочется оставить картинку или изменить тип основного шрифта). Как же распечатать страницу без лишних элементов? В таком случае поможет веб-сервис .

На главной странице PrintWhatYouLike в середине экрана имеется формочка для ввода адреса страницы подлежащей печати. Адрес ввели, страница загружена и мы видим, что при выборе любого из элементов интерфейса он обводится красной рамкой. Еще одно нажатие левой кнопки мыши и открывается список возможных операций. Элементы интерфейса можно удалять по одному или группой, расширить отдельно выбранный в границах или выбрать один блок текста, удалив все прочие. То есть предоставлена возможность по одиночке убрать ненужные для печати части страницы или быстро изолировать нужное от второстепенного и распечатать.

В левой части экрана присутствует боковая панель с рядом функций для редактируемой страницы:

• сохранение редактируемой страницы в форматы PDF, HTML;
• изменение размера текста, типа шрифта;
• удаление заднего фона или изображений одним нажатием кнопки мыши.

Для удобства пользователя PrintWhatYouLike предлагает поместить на панель закладок кнопку для редактирования перед печатью любой, посещенной нами страницы. Также предусмотрена опция PageZipper. Она будет удобна при чтении тех ресурсов, где любят разделить одну статью на пять, десять или более страниц. Вы жмете “Следующая страница”, еще раз “Следующая страница”, а затем понимаете, что и читать было нечего. PageZipper разложит всю статью целиком на одной странице для дальнейшего редактирования и печати. Если букмарклет ставить не хочется, то доступен плагин для Firefox PageZipper 0.6.1 .

Для зарегистрированных пользователей PrintWhatYouLike предлагает панель управления, где содержится информация о количестве установленных Printer Friendly кнопок, сохраненных и распечатанных листов бумаги, сэкономленных деньгах, не срубленных деревьев и не выброшенного в атмосферу злополучного оксида углерода.

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

Многие пользователи глобальной сети Интернет даже не подозревают, что Web является многофункциональной средой, предусматривающей различные способы предоставления информации. В данном случае имеется в виду не мультимедиа – аудио и видео данные, широко распространенные на сегодняшний день, а реальные источники, посредством которых люди черпают информацию из Web пространства. Львиная доля пользователей Интернета для этих целей использует экран, который может быть как отдельным устройством (монитор ПК), так и неотъемлемой частью мобильного устройства с доступом к сети. Учитывая успешное развитие компьютерных технологий и доступность как стационарных, так и портативных компьютеров и всевозможных электронных гаджетов, можно с уверенностью сказать, что на сегодняшний день монитор является самым популярным средством просмотра веб-страниц.

Как бы там ни было, но в отдельных случаях без распечатки интересуемых нас страниц просто не обойтись. Именно поэтому, на многих веб-узлах для каждого доступного пользователю документа предусмотрен его вариант, используемый при печати на принтере. Но по причине того, что развитие Web технологий нацелено, прежде всего, на визуальное представление информации на экранах мониторов в браузере, множество веб-страниц распечатываются в не совсем удобном для чтения виде. Панели навигации, баннеры различного назначения и другие подобные им элементы веб-страницы захламляют ее визуальное представление в распечатанном виде. К тому же, большинство этих элементов предназначено для взаимодействия с пользователем посредством браузера и поэтому при переносе на бумагу толку от них вообще никакого. Поэтому все чаще на посещаемых веб-страницах можно встретить ссылки типа «Версия страницы для печати» , позволяющие на экране увидеть документ в том виде, в котором он будет распечатан на принтере.

Средства CSS спецификации позволяют веб-разработчикам без труда создавать различные варианты представления страниц в зависимости от способа их отображения (монитор, принтер и не только). В данной статье рассмотрены способы реализации этого подхода средствами CSS .

Создание связей.

Существует несколько способов импорта содержимого внешних таблиц стилей CSS в html документ и определения необходимых правил непосредственно в файле исходного кода страницы.

Мета тег .

Наиболее распространенный и привычный вариант – использование мета тега , в котором предусмотрен атрибут media , позволяющий определить устройство, для которого выполняется форматирование документа с помощью указанного CSS файла. Вот пример:

Приведенный пример подключает CSS файл print_stylesheet.css , предназначенный для форматирования документа при выводе на принтер (media="print" ). То есть для всех других случаев представления веб-страницы (отличных от распечатанного варианта) CSS правила, определенные в файле print_stylesheet.css не учитываться. Спецификацией CSS определено десять допустимых значений для атрибута media , предусмотренных для различных устройств и способов представления Web информации: all , aural , braille , embossed , handheld , print , projection , screen ,tty и tv . В данной статье мы не будем рассматривать все значения, а только определяющие печатное устройство. Но следует также обратить внимание на значение all , которое устанавливается по умолчанию для атрибута media в том случае, если явно не указано другое. Кроме того, если определенный CSS файл предназначен для форматирования страницы при выводе на несколько типов устройств одновременно, то соответствующие им ключевые слова можно указывать в одной строке, разделяя их запятой:

Команда импорта CSS.

Для подключения внешнего CSS файла можно также использовать ключевое слово @media . В определяемом в данном случае правиле можно указывать несколько видов носителей, для которых предназначено форматирование. При этом синтаксис допускает два варианта написания команды:

@import url("styles/stylesheet.css") print, projection;
или
@import "styles/stylesheet.css" print, projection;

Как видно из примера особых различий у допустимых вариантов нет. В одном случае применяется директива url , а второй предусматривает написание пути к требуемому файлу CSS без нее. Приведенное в качестве примера правило предусматривает использование файла stylesheet.css , находящегося в папке styles , который предназначен для форматирования документа для устройств с постраничным выводом информации (print — принтеры, projection — слайд-проекторы и подобные им устройства).

Непосредственно в html документе веб-страницы.

Для этого используется CSS правило @media , в рамках которого указываются свойства форматирования документа и необходимые значения для них. Непосредственно за ключевым словом @media определяется один или несколько типов носителей (через запятую), для которых выполняется форматирование: