» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Октябрь » 12 » Печатаем по-умному или ещё один способ защиты информации

Печатаем по-умному или ещё один способ защиты информации
12.Окт.2008 | 22:26:04

Печатаем по-умному или ещё один способ защиты информации


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

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



CSS-файл (style.css):



@media screen {

   p { сolor: #000000; }

}



@media print {

   p { color: #ff0000; }

}



HTML-файл (index.html):



<html>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<body>

<p>hello</p>

</body>

</html>



Теперь при просмотре HTML-страницы в браузере Вы увидите слово Hello
чёрного цвета. Однако попробуйте распечатать эту страницу на цветном
принтере, и слово Hello окрасится в красный цвет.



Извлекаем выгоду



Теперь немного изменим CSS-файл:



CSS-файл (style.css):



@media screen {

   p { display: block; }

}



@media print {

   p { display: none; }

}



Что будет, если мы снова откроем в браузере, а затем распечатаем
HTML-файл? В браузере текст будет спокойно отображаться, а вот при
печати пользователь получит чистый лист бумаги. Вот это и есть ещё один
способ защиты информации.

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



CSS-файл (style.css):



@media screen {

   input { display: block; }

}



@media print {

   input { display: none; }

}



А ещё можно добавить текст о том, что «Статья скачана с сайта Site.Ru».
Тут лучше сделать всё наоборот –в браузере её нет, а при печати – есть.




Итоговый CSS-файл (style.css):



@media screen {

   input { display: block; }

   p.advert { display: none; }

}



@media print {

   input { display: none; }

   p.advert { display: block; }

}



HTML-файл (index.html):



<html>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<body>

<p class=advert>Страница скачана с сайта Site.Ru</p>

… здесь идёт текст, который должен быть распечатан …

<input type=”button” value=”Печать” onClick=”javascript:print(document);”>

</body>

</html>



Собственно, пример такой реализации Вы можете увидеть у меня на сайте:
http://web-build.info/print.php?type=html&id=1102500209. На
странице внизу видно строку «Печать :: Закрыть», которая не печатается,
зато наверху страницы не видно строки «Статья скачана с web-портала
Web-Build.Info», которая появится при печати.

Подчас, не обязательно использовать данную функцию CSS только для
защиты информации. Порой необходимо некоторые данные при печати
представить в несколько другом виде. Впрочем, как пользоваться –
решайте сами.
Категория: Статьй и уроки | Просмотров: 1129 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]