Похожие статьи

Основные ошибки при оптимизации сайта для поисковых систем (43,75%)
Алгоритмы анализа сайтов у поисковых систем постоянно меняются, поэтому к оптимизации сайта надо подойти с должным вниманием. В статье приведены 5 советов, которые помогут привести ваш сайт в полную боевую готовность к индексации в поисковых системах…

Особенности создания сайтов: мелочи имеют значение! (40,45%)
Несмотря на укоренившееся мнение о том, что «пользователи не читают», тем не менее, споры о текстовом оформлении продолжаются, и на эту тему опубликовано немало статей. Если вы уделяли внимание оформлению текстов, то наверняка уже знаете, что для этого нужен хорошо подобранный шрифт и важен CSS. Кроме этого, есть ещё один аспект текстового…

Создание капель воды средствами Adobe Photoshop (40%)
В этой статье я расскажу о достаточно простом, но вполне реалистичном эффекте. Моя цель состоит в том, чтобы показать читателю принцип создания капель, а уж при желании можно модифицировать этот эффект для конкретных нужд……

Автор: Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

Дата публикации 18-08-2005 19:46
Статья просмотрена 8137 раз

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

Версия сайта для печати средствами CSS - один стиль для браузера

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

<!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 - отдельный стиль страницы для принтера

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

Похожие статьи

Создание сайта с помощью фреймов (40%)
Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…

CSS верстка сайта: макет в три колонки (39,47%)
Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Теория веб-специализации (38,71%)
Происходит процесс разделения профессий. Специалист знает всё больше о всё меньшем. С каждым годом к качеству знаний интернет-работников сеть предъявляет более высокие требования. Научно-технический прогресс, социальные перемены, экономические процессы бегут настолько быстро, что человек не всегда способен дать точное определение тому, чем он занимается в интернете и как называется его профессия…

Программы для работы с help-файлами (38,36%)
В статье описываются различные программы для создания и файлов справок (hlp, chm). Рассматриваются самые достойные бесплатные и условно-бесплатные программы для работы с файлами справок…

Punto Switcher — печатаем с удобствами (36,78%)
Наверное многие люди, набирающие тексты на компьютере, встречались с такой проблемой: пишешь, к примеру, «Здравствуйте», а получается «Plhfdcndeqnt», т. к. забыли переключить раскладку клавиатуры. Punto Switcher делает это автоматически, по совпадению букв в русском или английском слове определяя нужный язык…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (1) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

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

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

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