Главная страница статей --> Программирование, заработок, оболочки

Версия сайта для печати средствами CSS

Источник: linuxcenter.ru

Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны и с монитора читать не приучены. Они больше доверяют бумаге — там и подпись поставить можно если что и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати.

Версия

Код страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <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">
      <p>Смысл жизни решительно творит объект деятельности…</p>
      <p>Представление нетривиально…</p>
      <p><a href="/page2.html">Далее ></a></p>
    </div>
  </body>
</html>

Есть сайт, основной текст которого помещен в блок <div id="text"></div>, а небольшое меню в блок navigation. Обратите внимание, для страницы указано два независимых стиля: <style media="screen"> для браузеров и <style media="print"> для печатающих устройств. Экранный стиль — черный текст на светло-сером фоне и темно-серое меню навигации. В рамках данной заметки это не главное.

Стиль для печати описывает страницу по-своему. CSS-селектор * означает, что мы выбираем все элементы страницы. Для них используется шрифт Times New Roman, белый фон и черный цвет шрифта — согласитесь, не в каждом офисе есть цветные лазерные принтеры. С помощью свойства display: none полностью удаляем с печатной версии блок навигации — на бумаге он бесполезен.

Версия

В результате получается качественная версия страницы для печати. Благодаря CSS достичь такого результата чрезвычайно легко.



Похожие статьи:
- Page Promoter 7.0: практический кибермаркетинг
- Словари Рунета
- Кибермаркетинг: результаты первых шагов
- Использование интернет-форумов
- Теория веб-специализации
- Доступность имеет значение
- Свойство CSS float: обтекание рисунка текстом и врезка к статье
- Проверка полей формы с помощью JavaScript
- О ценах, ценностях и убогом дизайне
- Page Promoter 7.2: анализ поисковой рекламы
- Обзор технических решений для интернет-магазинов
- К вопросу о ссылочном ранжировании
- Создание профессионального логотипа компании


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
Контакты
Редакция:
[0.001]