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

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

Партнерская программа для туристических сайтов (42,86%)
Партнерская программа для туристических сайтов Travelboom.ru представляет собой систему контекстной рекламы с оплатой за клик. Наша система транслирует на ваш сайт объявления туристической компании Travelboom. Эти объявления представляют собой список туров, получаемый с сайта travelboom.ru автоматически на основе поискового запроса и анализа…

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

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

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

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

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

Версия сайта для печати средствами 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 достичь такого результата чрезвычайно легко.

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

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

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

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

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

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

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

Ваше имя: 

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

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

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

 

Частный дизайнер: наиболее частые заблуждения заказчика Вы опасаетесь работать с дизайнером фрилансером или другим частным разработчиком? Зря, ведь это такой же работник, как тот, что выполняет заказ, который Вы разместили в рекламном агентстве. Дизайнеры в принципе народ беспокойный, творческий. Вчера он пошел работать в рекламное агентство, а сегодня ему надоело работать на дядю, и он решил…

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

Что такое фирменный стиль? Фирменному стилю довольно трудно дать строгое словарное определение. Однако что такое фирменный стиль, понять и представить очень легко. Авангардные художники часто любят издеваться над одним из символов Америки – логотипом компании «Coca-Cola», вписывая в красный круг витиеватым фирменным шрифтом разнообразные тексты, от юмористических до…

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

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

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