Версия для печати: Создание версии для печати / Как сделать сайт самому? / Интеграция макета сайта / Документация

Содержание

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

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

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

Содержание файла nubexPrint. css следующее:

.noprint {display: none !important;}

То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).

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

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

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

Вы здесь: Главная — CSS — CSS Основы — Как сделать версию для печати

Часто на сайтах можно встретить версию для печати той или иной страницы

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

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

Так же убедитесь, что ширина версии для печати не превосходит 650px, иначе браузер может порезать края.

Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.

Есть 2 варианта: создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу

с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через «Файл»->»Печать» он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none;) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css. Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

Вот таким образом создаётся версия для печати любой страницы сайта.

  • Создано 25.12.2013 08:52:27
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk. com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Дополнение для print версии сайта. Редактируемая print версия сайта.

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

Данный сервис называется FriendlyPrint — https://www.printfriendly.com