Думаю, что некоторые из вас печатали веб-страницу на принтере. Зачастую, многие сайты не создают отдельную версию страниц для печати, и это приводит к тому, что вместе с нужным пользователю контентом распечатываются меню, рекламные баннеры, какие-то ненужные элементы.
Конечно, самый простой способ решения данной проблемы - отдельная версия для печати для сайта. В таком случае создается новая страница, с которой удаляются все ненужные для печати элементы и страница подгоняется под формат A4 (или несколько листов A4).
Другой способ - создание стилей сайта для печати. Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами <head></head> следующей строкой:
<link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">Этот вариант позволяет избежать дублей страниц на сайте. Здесь пользователю для отображения страницы в браузере отдается один CSS-файл, а на печать посылается другой. Причем этот файл со стилями страницы для печати должен быть убирать лишние элементы и делать страницу одинаковой для отображения во всех браузерах и при разных разрешениях (чтобы вид напечатанной страницы не зависел от браузера или разрешения экрана пользователя).
Чтобы скрыть определенные элементы со страницы при печати можно использовать следующий приём:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Страница с версией для печати - "Нубекс"</title>
<link rel="stylesheet" type="text/css" href="nubex.css">
<link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">
</head>
<body>
<div id="logo"></div>
<div id="menu" class="noprint"></div>
<div id="add1" class="noprint"></div>
<div id="content"></div>
<div id="add2" class="noprint"></div>
<div id="footer"></div>
</body>
</html>Содержание файла nubexPrint.css следующее:
.noprint {display: none !important;}То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).
В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.
В конструкторе сайтов "Нубекс" есть версия страниц для печати.