ТЕХНОЛОГИЯ:CSS
ПОДДЕРЖКА: все распространенные браузеры (проблема с новым цветом страницы для печати в браузере Opera).
Некоторые страницы сайта нужно распечатывать на бумаге. Поэтому создают версию сайта для печати.
Создана страница сайта, основной текст которой помещен в блок <div id="text"></div>, а меню в блок <div id="navigation"></div>:
Листинг 2_print_version – Версия страницы сайта для печати на бумаге.
<html>
<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">
Использование языков программирования, работающих на стороне клиента, - JavaScript, VBScript - ограничено в основном различными визуальными эффектами и повышением удобства работы с веб-сайтом. Главное достоинство клиентских технологий в том, что для взаимодействия с пользователем они не требуют перезагрузки страницы и обмена данными с Интернетом, отсюда и недостаток - эти языки контролируются клиентом и не подходят для решения ответственных задач, например для проверки пароля пользователя при входе на какой-нибудь онлайн-сервис. Впрочем, у каждого средства разработки есть свои плюсы и минусы, которые определяет его сфера применения.</p>
Отличительная особенность клиентских технологий в том, что их работоспособность зависит от "пользовательского агента" (в подавляющем большинстве случаев это обычный интернет-браузер), который и берет на себя всю работу по отображению информации. Отсюда проблема - выбирая серверную основу сайта, вы определяетесь лишь однажды, выбирая клиентские языки, обязательно нужно знать о степени их востребованности среди потенциальной аудитории вашего веб-сайта. Распространенность - одна из важнейших характеристик клиентской технологии.</p>
<p><a href="/page2.html">Далее ></a></p>
</div>
</body>
</html>
Для страницы сайта указано два независимых стиля.
● Стиль <style media="screen"> для браузеров (отображение на экране монитора):
<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>
Экранный стиль отображает черный текст на светло-сером фоне и темно-серое меню навигации.
Рис.3. Отображение текста на экране монитора.
● Стиль <style media="print"> для печатающих устройств:
<style type="text/css" media="print">
* {
font-family: "Times New Roman", Times, serif;
background-color: #fff;
color: #000;
}
#navigation { display: none; }
</style>
Для печати описание страницы другое. CSS-селектор «*» означает, что выбираются все элементы страницы. Для них используется шрифт Times New Roman черного цвета и белый фон, так как не в каждом офисе есть цветные принтеры. С помощью свойства display: none полностью удаляется с печатной версии блок навигации — на бумаге он бесполезен.
В результате получается качественная версия страницы для печати.
Рис.3. Отображение того же текста на бумаге.