<
  • Главная
Статьи

Ідеальна сторінка для друку

  1. структура сторінки
  2. додаємо CSS
  3. Окремі файли стилів
  4. Корисні поради

Автор статті: Сергій Камінський

Здавалося б що складного в створенні сторінки для друку? Просто створюємо такий же документ з текстом але без будь-якого дизайну і ставимо на нього посилання зі звичайною сторінки. Але в пошукових системах з'явився фільтр дублюючого контенту і веб-майстрам доводиться ховати сторінки для друку від індексації. До того ж відвідувачам сайту теж не дуже зручно, адже потрібно спочатку перейти на копію потрібної йому сторінки, в якій відсутні елементи дизайну, і потім вже натискати на кнопку "Друк".

До того ж відвідувачам сайту теж не дуже зручно, адже потрібно спочатку перейти на копію потрібної йому сторінки, в якій відсутні елементи дизайну, і потім вже натискати на кнопку Друк

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

структура сторінки

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

<Html> <head> <title> Назва статті </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251" /> <link rel = "stylesheet" type = "text / css" href = "/ style.css" /> </ head> <body> <table> <tr> <td id = "leftcolumn"> Навігація <br /> <a href = "/ index.php "> Головна сторінка </a> <br /> <a href="/articles.php"> Статті </a> <br /> <a href="/contacts.php"> Контакти </a> </ td> <td id = "content"> <H1> Назва статті </ H1> Дана сторінка може бути роздрукована. Надрукований буде тільки текст статті. <br /> <br /> </ td> <td id = "rightcolumn"> Тут могла б бути ваша реклама </ td> </ tr> </ table> </ body> </ 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":

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

Корисні поради

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

Також при друку ми строго зменшуємо ширину блоку з контентом до 600px, тому як при ширині 100% принтер "обрізає" невелику смугу тексту з правого боку сторінки. Зверніть також увагу на те, що при друку з Opera відступ по краях листа трохи менше ніж в Internet Explorer і рядки тексту на аркуші паперу виходять ширше.

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

Інші записи по темі в розділі статті по HTML і CSS

Копіювання статті заборонено.



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

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

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью