Home
Главная
Forums
Форум
Your Account
Ваш аккаунт
Web-технологии
HTML, XML, DHTML
JavaScript
SQL
PHP
Perl
SSI
ASP
CSS

Графика
Adobe PhotoShop
Adobe PhotoShop - 2
Macromedia Flash

Компьютеры
Hardware
Мобильные технологии
КПК и ноутбуки

Операционные системы
Unix/Linux
Windows 9x
Windows XP

Стоит посмотреть
  • Web дизайн


  • МПСМ алюминиевый профиль область, алюминиевый профиль.






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

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

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

    CSS-файл (style.css):
    @media screen {
    p {
    color: #000000;
    }
    }

    @media print {
    p {
    color: #ff0000;
    }
    }HTML-файл (index.html):



    hello



    Теперь при просмотре 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):




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


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

    Подчас, не обязательно использовать данную функцию CSS только для защиты информации. Порой необходимо некоторые данные при печати представить в несколько другом виде. Впрочем, как пользоваться – решайте сами.

    Вот, в принципе и всё. Со всеми вопросами, комментариями, уточнениями и т. п. обращайтесь по e-mail: eugene@web-build.info.


    Дата публикации: 09/12/2005
    Прочитано: 1233 раз


    Дополнительно на данную тему:

    Оценка XHTML
    Как поставить ссылку
    Неизвестное о формах
    Работа с фоном. Теория
    Работа с фоном. Фоновый цвет на практике
    Перенос и разбиение слов в HTML
    Немного слов о кодировках
    Основы HTML
    Фрэймы
    Быстрее ветра - быстрый html

    Назад | Начало | Наверх
    Rambler's Top100