RTFM! статьи, советы, скрипты
::Заработок с помощью сайта ::JScript по-русски! ::Все русские мануалы::
МЕНЮ
О САЙТЕ
НОВОСТИ
СТАТЬИ
КНИГИ
АППЛЕТЫ
СВЯЗЬ

СЧЕТЧИКИ
Rambler's Top100
Рейтинг@Mail.ru
Яндекс цитирования

Печатаем по-умному

Автор: Неверов Евгений Сайт: http://web-build.info/     Рейтинг: N/A из 7       <<НАЗАД
   
   Сегодня мы поговорим о том, как сделать так, чтобы выводить на экран одну 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 только для защиты информации. Порой необходимо некоторые данные при печати представить в несколько другом виде. Впрочем, как пользоваться – решайте сами.
   
   
   


<<НАЗАД      ОЦЕНИТЬ СТАТЬЮ    ВЕРСИЯ ДЛЯ ПЕЧАТИ>>
Статья прочитана :  раз.




пейкюлю



 
 
 
 
 
pauk ©® 2000-2015. All rights reserved.
При перепечатке ссылка на сайт и указание обязательны.
Мнение администрации сайта не всегда совпадает с мнением автора.
Орфография и пунктуация - авторские.
Администрация не несет никакой ответственности за использование материалов.
.
Protected by Copyscape DMCA Takedown Notice Infringement Search Tool