php, java
статьи, книги
рефераты, ГДЗ

Бесплатные ключи и сброс
пробной версии для Касперского

Все для cs 1.6

Самые лучшие сеты моделей и избранные подборки девушек

Четверг, 06 Авг 2020, 11:10:36

Приветствую Вас Гость | RSS
Главная | Каталог статей | Регистрация | Вход
Меню сайта

ФИЗИКА!!! NEW!!!

Русский!!! NEW!!!

Категории раздела
Дизайну, графика и баннеры [17]
Советы, примеры, уроки, заметки по дизайну, графике и баннерам
PHP - примеры скриптов [21]
PHP - примеры скриптов
Программирование и заработок [114]
Программирование на самых популярных языках, заметки о заработке, оболочки
Статьи по поисковой оптимизации [9]
Статьи по поисковой оптимизации
php и базы данных [14]
Хитрости при программировании php, заметки по базам данных
Заработок в Интернете [7]
Материалы по заработку в интернет

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Статьи по Web дизайну » Программирование и заработок

Версия сайта для печати средствами 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 достичь такого результата чрезвычайно легко.
Категория: Программирование и заработок | Добавил: ceg (16 Авг 2007) | Автор: linuxcenter.ru
Просмотров: 239 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Реклама

Поиск

Друзья сайта
  • Играете в Counter-Strike??? ВАМ СЮДА!!!

  • Copyright CEG © 2020