Страница для печати

Печать шапки таблицы на каждой странице листа Excel

На предыдущих уроках было описано о закреплении областей для удобного просмотра больших документов при вертикальной или горизонтальной прокрутке. Как правило, закрепляются заголовки строк и столбцов таблиц. Но невольно возникает вопрос: «Как Excel зафиксировать шапку таблицы при печати?».

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

Печать заголовка таблицы на каждой странице Excel

  1. Выберите «Разметка страницы»-«Параметры страницы»:
  2. В появившемся диалоговом окне перейдите на закладку «Лист».
  3. В разделе «Печать на каждой странице» заполните параметры диапазонами «сквозные строки – 1:1» (данный параметр позволяет выполнить печать первой строки на каждом листе) и «сквозные столбцы – A:В» (отображение первых двух столбцов на каждом листе) и нажмите ОК:

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

Excel обладает более широкими возможностями по настройки печати документов, чем Word.

Советы и приемы по подготовке стилей для печати

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

Что бы перешагнуть через пропасть между дизайном для печати и экрана веб-разработчики могут:

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

Разрабатывайте дизайн для печати, а не для экрана

Для начала, давайте рассмотрим основы. Современные стили для печати обычно размещаются внутри медиа-выражения:

Вам не нужно создавать заново весь CSS, потому что стили по умолчанию будут полностью унаследованы медиа-выражением для печати – необходимо указать только различия. Большинство браузеров автоматически инвертируют цвета при печати в целях сохранения тонера, но для получения качественного результата вам придется явно указать изменяемые цвета. В итоге, простейшее медиа-выражение для печати должно выглядеть вот так:

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

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

Стили для печати — это один из тех немногих случаев, когда вы увидите использование сантиметров или дюймов в CSS. Совершенно не свойственные для экранов, системы измерений из реального мира становятся полезными при печати. Чтобы эффективно использовать лист бумаги при печати, размещайте содержимое на максимальной площади листа с помощью CSS, избавившись от всех возможных отступов и полей, управляя полями страницы с помощью правила :

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

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

Во-вторых, что бы предотвратить печать изображений, превышающих по ширине печатный лист:

В-третьих, убедимся, что статьи всегда начинаются с новой страницы:

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

Несмотря на то, что эти не все необходимые правило, это хорошее начало.

Принудительная печатать фоновых изображений и цвета

На некоторых сайтах, например портфолио, фоновые изображения и цвет являются важными визуальными компонентами. Если пользователь печатает страницу из браузера на основе WebKit (Google Chrome или Safari), мы можем заставить принтер отобразить цвета так, как мы видим их на экране (то есть заставить браузер распечатать фоновые изображения и цвета на странице). В общем-то, мы сделаем это только для цветных принтеров, которые можем определить с помощью медиа-выражения:

К сожалению, в настоящее время Firefox, Opera или Internet Explorer не поддерживают аналогичные свойства.

Покажите URL внешних ссылок при печати

На сегодняшний день мы (еще) не можем переходить по ссылкам на печатных страницах, поэтому URL ссылок необходимо показывать при печати страницы. Чтобы не захламлять страницу, я предпочитаю показывать в статьях только ссылки на внешние ресурсы, а внутренние ссылки скрывать. Если вы используете на сайте относительные URL для внутренних ссылок, вы можете легко сделать это с помощью селектора по атрибуту и псевдо-элемента , не допустив печати внутренних ссылок и ссылок с изображениями внутри:

Рассмотрим следующий фрагмент HTML:

Так выглядит распечатанный результат:

Проблема в том, что якоря и ссылки с изображениями внутри тоже будут распечатаны. Мы можем запретить печать якорных ссылок с помощью отменяющего правила:

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

С приходом CSS4 показать только внешние ссылки будет значительно проще:

Этот подход предполагает, что пользователь будет вводить распечатанный URL вручную. Лучшим решением будет сделать цифровую версию распечатанной страницы доступнее, распечатав соответствующего QR-кода.

Распечатайте QR-коды для упрощения работы со ссылками

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

Страница с распечатанным QR-кодом, ведущим на веб-версию. Увеличенное изображение.

Для создания соответствующего QR-кода мы используем Google’s Chart API, который имеет 4 обязательных параметра:

  • Тип информации, которую мы хотим получить от Google (в нашем случае это QR-код);
  • Размер получаемого QR-кода в пикселях;
  • URL, который необходимо закодировать;
  • Используемая кодировка.

Обычно URL стоит привязать к заголовку в верхней части страницы:

При печати мы оставим поле справа от заголовка h1, и разместим в этой области QR-код:

Так как QR-код будет уникальным для каждой страницы, его стоит добавлять прямо на страницу с помощью элемента :

У этого приема есть один недостаток, заключающийся в том, что разработчику необходимо вводить URL каждой страницы для обращения к API для получения кода. Если ваш сайт работает на PHP, вы можете добавлять URL текущей страницы автоматически:

Для WordPress:

Очевидно, что оба предложенных выше решения будут работать только для страниц на PHP и WordPress.

Используйте CSS3-фильтры для улучшения качества печати

При печати логотипов браузеры зачастую испытывают проблемы, особенно, если светлый логотип расположен на темном фоне страницы:

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

CSS3-фильтры делают именно то, что вы и ожидаете – инвертируют цвета изображения в заголовке, делая белое черным, и наоборот – но они работают только в Chrome и Safari. Для того, чтобы инвертировать изображения в Firefox, нам необходим другой подход – аналогичный фильтр, записанный в виде отдельного SVG-файла:

Принцип работы SVG-фильтра слишком сложен, чтобы раскрывать его в рамках этой статьи. Подробнее о его работе вы можете прочесть в статье «Тонирование веб-страниц с помощью SVG-фильтров и JavaScript» на Dev.Opera.

Результат печати любого из типов логотипа (PNG с альфа-каналом или логотипа с заливкой фона) выглядит так:

Заключение

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

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

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

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

Ссылки для дальнейшего чтения

A List Apart имеет объемный и заслуживающий похвалы архив статей и руководств по поддержке стилей для печати. Несмотря на то, что многие из материалов опубликованы достаточно давно, они по-прежнему остаются полезными для тех, кто готов рассматривать печать как равноценную часть веб-дизайна.

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

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

Другой способ — создание стилей сайта для печати.

Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами <head></head> следующей строкой:

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

Чтобы скрыть определенные элементы со страницы при печати можно использовать следующий приём:

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

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

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

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

Версия варианта для печати

Модуль «Конкретно Реальная математика»

Модуль «Часть 2»

Приложенные файлы

  • 25161982
    Размер файла: 153 kBЗагрузок: 0

Запись опубликована автором uploader в рубрике Прочее.

Версия варианта для печати

Модуль «Конкретно Реальная математика»

Модуль «Часть 2»

Приложенные файлы

  • 25161982
    Размер файла: 153 kBЗагрузок: 0

Запись опубликована автором uploader в рубрике Прочее.


© 2018 Образовательный портал «DocumentSite.net». Обратная связь | Пользовательское соглашение | Распечатать страницу

Версия варианта для печати

Модуль «Конкретно Реальная математика»

Модуль «Часть 2»

Приложенные файлы

  • 25161982
    Размер файла: 153 kBЗагрузок: 0

Запись опубликована автором uploader в рубрике Прочее.


Расширение решения Sinan Ünür:

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

Если вы попытаетесь отобразить: заблокируйте тэг TR и используйте там break-in: избегайте, он работает, но беспорядок вокруг вашего макета таблицы.


Используйте эти свойства CSS:

Например:

via


Я закончил с подходом @ vicenteherrera, с некоторыми настройками (которые, возможно, являются бутстрапом 3).

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

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


Ну парни …

Большинство решений здесь не сработало. Так вот как все работает для меня ..

HTML

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


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

Структура html была:

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

Из-за проблем с заголовком я в конечном итоге закончил:

Это не помешало рядам сломаться; только содержимое каждой ячейки.


Добавить комментарий

Закрыть меню