Ідеальна сторінка для друку
Автор статті: Сергій Камінський
Здавалося б що складного в створенні сторінки для друку? Просто створюємо такий же документ з текстом але без будь-якого дизайну і ставимо на нього посилання зі звичайною сторінки. Але в пошукових системах з'явився фільтр дублюючого контенту і веб-майстрам доводиться ховати сторінки для друку від індексації. До того ж відвідувачам сайту теж не дуже зручно, адже потрібно спочатку перейти на копію потрібної йому сторінки, в якій відсутні елементи дизайну, і потім вже натискати на кнопку "Друк".
Тут нам на допомогу може прийти 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
Копіювання статті заборонено.