	Главная стр. www.izcity.com \| Архив выпусков Domino \| Computer FAQ \| Статьи, обзоры \| Форум

Эта статья размещена на сайте онлайн-журнала Internet Zone. Читайте у нас и другие статьи и обзоры: http://www.izcity.com/data/

Версия сайта для печати средствами CSS

Автор: Земсков Юрий
http://computerlibrary.info/

Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны и с монитора читать не приучены. Они больше доверяют бумаге — там и подпись поставить можно если что и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати.

Версия сайта для печати средствами CSS - один стиль для браузера:

Код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Смысл жизни решительно творит объект деятельности</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css" media="screen"> body { background-color: #f0f0f0; font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif; } #text { width: 65%; } #navigation { float: right; width: 30%; background-color: #ccc; padding: 1%; margin-left: 1%; } </style> <style type="text/css" media="print"> * { font-family: "Times New Roman", Times, serif; background-color: #fff; color: #000; } #navigation { display: none; } </style> </head> <body> <div id="navigation"><a href="/index.html">Главная</a><br /> <a href="/news.html">Новости</a><br /> <a href="/products.html">Товары</a><br /> <a href="/about.html">О компании</a></div> <div id="text"> <p>Смысл жизни решительно творит объект деятельности…</p> <p>Представление нетривиально…</p> <p><a href="/page2.html">Далее ></a></p> </div> </body> </html>

Предположим, есть сайт, основной текст которого помещен в блок <div id="text"></div>, а небольшое меню в блок navigation. Обратите внимание, для страницы указано два независимых стиля: <style media="screen"> для браузеров и <style media="print"> для печатающих устройств. Экранный стиль — черный текст на светло-сером фоне и темно-серое меню навигации. В рамках данной заметки это не главное.

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

Версия сайта для печати средствами CSS - отдельный стиль страницы для принтера:

В результате получается качественная версия страницы для печати. Благодаря CSS достичь такого результата чрезвычайно легко.

Главная страница >>

Copyright © Internet Zone. Информация об использовании материалов сайта: http://www.izcity.com/info/copyright.htm