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

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

Создание версии для печати страницы сайта

Автор: Антон Евтеев Сайт: http://accept.ws/     Рейтинг: N/A из 7       <<НАЗАД
   
   В принципе, в этом и на первый взгляд ничего сложного – подумаешь – немного переверстать текст, записать его в новый файл и связать с оригиналом ссылкой? Но это только на первый взгляд. А если страниц не одна а 1000? Это довольно долго. Высокие затраты времени и сил. Ну и денег. Поэтому необходимо найти какой-то более легкий способ.
   
   Решение нам дает CSS. Оказывается, можно назначить таблицы стилей отдельно для различных типов устройств! По умолчанию таблица стилей назначается для all – для всех устройств одна. Нас интересует два варианта – для вывода на экран в браузере и принтера.
   
   Задать это можно так:
   
   @media screen {
   body {
   font-family: verdana, sans-serif;
   font-size: 1em;
   }
   ..другие стили для дисплея..
   }
   @media print {
   body {
   font-family: times, serif;
   font-size: 12pt;
   }
   .. другие стили для принтера..
   }
   
   Это для тэга <style>
   
   Если Вы хотите подгружать файл со стилем, то так:
   
   <link href="styles.css" media="screen" rel="stylesheet" type="text/css">
   <link href="stylep.css" media="print" rel="stylesheet" type="text/css">
   
   Ну а если хотите импортировать стиль внутри тэга <style>, то так:
   
   <style type="text/css">
   @import url("stylep.css") print;
   body {
   font-family: verdana, sans-serif;
   font-size: 1em;
   }
   </style>
   
   В дополнение к этому, ту часть таблицы стиля, которая используется и в версии для печати и на сайте можно выделить в один общий блок, который можно подгрузить так:
   
   <link href="stylea.css" media="all" rel="stylesheet" type="text/css">
   
   или так:
   
   @media screen, print {
   body {
   font-decoration: none;
   }
   ..other style sheet rules for both..
   }
   
   Теперь нам остается назначить классы тем элементам, которые печатаются некорректно или вовсе не нужны при печати, записать два (или три) стиля и сделать ссылку на версию для печати:
   
   <a href=javascript:window.print()>Распечатать страницу</a>
   
   В принципе, ссылку можно и не ставить. Все!
   
   Некоторые замечания:
   Ширина поля для печати 450 пикселей, соответственно, если все содержимое страницы заключено в таблицу, то задаем ей класс (или id) и пишем в версии для печати: width: 450px;
   Те элементы страницы, которые не нужны при печати (например, меню) можно скрыть, назначив им: display: none;
   
   Дополнительный материал по теме можете найти здесь: http://www.gurusnetwork.com/tutorial/css_print/ (на английском)
   


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




пейкюлю



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