Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Как сделать версию для печати

теги: html, css

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

Конечно, самый простой способ решения данной проблемы - отдельная версия для печати для сайта. В таком случае создается новая страница, с которой удаляются все ненужные для печати элементы и страница подгоняется под формат 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 (отображение запрещено).

В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.

В конструкторе сайтов "Нубекс" есть версия страниц для печати.

Комментарии 0