|
|
Печатаем по-умному
Сегодня мы поговорим о том, как сделать так, чтобы выводить на экран
одну web-страницу, а при печати этой страницы на принтере результат был
несколько иным. А делается это с помощью CSS.
В CSS есть одна
очень полезная функция: Вы можете для одного и того же HTML-элемента
указать разные способы отображения при печати и при показе в браузере.
Для лучшего понимания рассмотрим следующий пример:
CSS-файл (style.css):
@media screen {
p {
color: #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 только для защиты
информации. Порой необходимо некоторые данные при печати представить в
несколько другом виде. Впрочем, как пользоваться – решайте сами.
|
| Категория: CSS | Добавил: Djakob (16.10.2008)
|
| Просмотров: 366
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
Сейчас на сайте: 1 Гостей: 1 Пользователей: 0
|
& design by Sapon&manysoft-net.ru