Оглавление

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

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

 

Решение
Можно создать специальную таблицу стилей для печати, например:

 

print-stylesheet.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Print Style Sheet</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" title="default" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div id="banner"></div>
<div id="content">
  <h1>Что такое XOOPS?</h1>
<p><strong>XOOPS</strong> - это динамический OO (Объектно-Ориентированный) 
основанный на открытом  исходном коде скрипт портала, написанный на PHP. 
XOOPS поддерживает  различные базы данных, XOOPS - это идеальный инструмент 
для создания  небольших высоко-динамичных сообществ вэб-сайтов, внутренних 
порталов  компании, корпоративных порталов, web-публикаторов и многого 
другого.</p>
<h2>Технические требования:</h2> 
<ul>
   <li> WWW сервер (<a href="http://www.apache.org/" >Apache</a>, IIS, Roxen, etc)</li>
   <li> <a href="http://www.php.net/" >PHP</a> 5.2 или выше</li>
   <li> <a href="http://www.mysql.com/" >База данных MySQL</a> 5.0 или выше</li>
</ul> 
<p>
	<a href="#">скачать XOOPS</a>
</p>
</div>
<div id="navigation">
  <ul id="mainnav">
    <li><a href="#">Скачать XOOPS</a></li>
    <li><a href="#">Скачать модули</a></li>
    <li><a href="#">Скачать темы</a></li>
    <li><a href="#">Описание</a></li>
  </ul>
</div>
</body>
</html>

 

main.css

body, html {
  margin: 0;
  padding: 0;
}
#navigation {
    font: 90% Arial,Helvetica,sans-serif;
    left: 0;
    position: absolute;
    top: 41px;
    width: 170px;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
#navigation li {
  border-bottom: 1px solid #ED9F9F;
  margin: 0;
}
#navigation li a:link, #navigation li a:visited {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  color: #FFFFFF;
  background-color: #b51032;
  text-decoration: none;
}
#navigation li a:hover {
  color: #FFFFFF;
  background-color: #711515;
}
#content {
    margin-left: 190px;
    margin-right: 10px;
}
#banner {
  height: 40px;
  background-color: #711515;
  border-bottom: 1px solid #ED9F9F;
  text-align: right;
  padding-right: 20px;
  margin-top: 0;
}
#banner ul {
  margin: 0;
  padding: 0;
}
#banner li {
  display: inline;
}
#banner a:link, #banner a:visited {
  font: 80% Arial, Helvetica, sans-serif; 
  color: #FFFFFF;
  background-color: transparent;
}
#content p, #content li {
  font: 80%/1.6em Arial, Helvetica, sans-serif;
}
#content p {
  margin-left: 1.5em;
}
#content h1, #content h2 {
  font: 140% Georgia, "Times New Roman", Times, serif;
}
#content h2 {
  font: 120% Georgia, "Times New Roman", Times, serif;
  padding-bottom: 3px;
}

 


print.css

body, html {
  margin: 0;
  padding: 0;
}
#navigation {
  display: none;
}
#content {
  margin-left: 20pt;
  margin-right: 30pt;
}
#banner {
  display: none;
}
#content p, #content li {
  font: 12pt/20pt "Times New Roman", Times, serif;
}
#content p {
  margin-left: 20pt;
}
#content h1, #content h2 {
  font: 16pt Georgia, "Times New Roman", Times, serif;
  color: #4b4b4b;
  background-color: transparent;
}
#content h2 {
  font: 14pt Georgia, "Times New Roman", Times, serif;
  padding-bottom: 2pt;
  border-bottom: 1pt dotted #CCCCCC;
}


Обсуждение
При наличии отдельной таблицы стилей для печати посетителям будет гораздо удобнее работать с вашим сайтом, в особенности если вы используете много графики. Печать документа, содержащего множество изображений, может оказаться затратной по количеству чернил и времени при печати на старых принтерах. Кроме того, некоторые сайты плохо выглядят на бумаге из-за неудачно подобранных цветов или особенностей структуры документа. На рис. 8.2 изображена страница, состоящая из двух колонок, созданных с помощью CSS, с навигационной панелью сбоку и основной областью, содержащей описание CMS XOOPS.

 

 

Вид страницы, состоящей из двух колонок, в броузере

Рис. 8.2. Вид страницы, состоящей из двух колонок, в браузере (DEMO)

 

На рис. 8.3 изображена та же страница в режиме Print Preview.
Эти рисунки позволяют четко увидеть очевидные отличия между отображением на экране и отпечатком. Стандартный лист бумаги формата А4 имеет ограниченную ширину, поэтому если на нем разместится меню, то на печать рецепта останется только половина ширины листа.

 

Вид страницы в режиме Предварительный просмотр

Рис. 8.3. Вид страницы в режиме Предварительный просмотр печати

 
Это может привести к тому, что длинные рецепты придется печатать на нескольких страницах.
Обычно на сайтах имеется версия для печати тех страниц, которые, по предположениям разработчиков, пользователь может захотеть распечатать. Однако применение такого подхода приводит к необходимости обслуживания сразу нескольких версий документа. Кроме того, пользователь должен найти кнопку Print (Печать) на самой странице вместо того, чтобы воспользоваться соответствующей кнопкой браузера. При использовании CSS страница будет отображена в соответствии с правилами, указанными в таблице стилей для печати, вне зависимости от того, по какой из кнопок щелкнет пользователь – на странице или в браузере.
Рассмотрим процесс создания таблицы стилей для печати и ее привязки к документу более подробно.

 

Привязка таблицы стилей для печати
Откройте текущую таблицу стилей и сохраните ее под именем print.css.
Это наша новая таблица стилей для печатной версии документа. В коде документа необходимо указать ссылку на нее, предназначенную для среды отображения print:

<link rel=”stylesheet” type=”text/css” href=”print.css”
media=”print” />

 

 

Создание правил стилей для печати
После сохранения существующей таблицы стилей под новым именем ее можно взять за основу новой таблицы, изменив уже записанные в ней правила. В моем документе навигационная панель расположена внутри элемента div; для него задано следующее правило стиля:

 
#navigation {
    font: 90% Arial,Helvetica,sans-serif;
    left: 0;
    position: absolute;
    top: 41px;
    width: 170px;
}


Поскольку в печатной версии навигация совершенно бесполезна, ее нужно скрыть. Для этого заменим содержимое приведенного выше блока описания на единственное свойство с заданным значением display:none:

#navigation {
   display: none;
}


Теперь можно удалить все правила, применявшиеся к элементам, расположенным внутри блока navigation.
Кроме того, можно расширить область с основным контентом, чтобы она заняла все свободное пространство страницы. Найдите в таблице стилей раздел, посвященный элементу content:

#content {
    margin-left: 190px;
    margin-right: 10px;
}


Внешний отступ слева можно уменьшить, поскольку теперь не нужно выделять дополнительное пространство для размещения панели навигации. Кроме того, не помешает изменить единицы измерения с пикселов (для отображения на экране) на пункты (для печати), о чем мы подробно говорили в разделе «Выбор единиц измерения для задания размера шрифтов: пикселы, пункты, пики или что-то другое» главы 2:

#content {
  margin-left: 20pt;
  margin-right: 30pt;
}


При просмотре документа в режиме Предварительный просмотр, как показано на рис. 8.4, или при выводе на печать с помощью браузера мы увидим, что панель навигации исчезла и пространство под основной контент используется на странице более эффективно.

 

На рис. 8.4 видно, что в верхней части страницы расположена линия.
Это нижняя часть рамки баннера. С последним можно поступить так же, как и с панелью навигации. Прежде всего для этого нужно найти применяемое по отношению к баннеру правило в таблице стилей:

#banner {
  height: 40px;
  background-color: #711515;
  border-bottom: 1px solid #ED9F9F; 
}

 

 

После удаления панели навигации страница гораздо лучше будет выглядеть на бумаге

Рис. 8.4. После удаления панели навигации страница гораздо лучше будет выглядеть на бумаге

 

По аналогии с панелью навигации зададим для баннера свойство display со значением none и удалим оставшиеся правила для элемента с указанным идентификатором.

#banner {
  display: none;
}


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

 

Ниже приведен измененный код:


#content p, #content li {
font: 12pt/20pt “Times New Roman”, Times, serif;
}
#content p {
margin-left: 20pt;
}
#content h1, #content h2 {
font: 16pt Georgia, “Times New Roman”, Times, serif;
color: #4b4b4b;
background-color: transparent;
}
#content h2 {
font: 14pt Georgia, “Times New Roman”, Times, serif;
padding-bottom: 2pt;
border-bottom: 1pt dotted #CCCCCC;
}


Теперь страница выглядит еще проще, зато читать текст стало значительно удобнее. .

Совет
Таблицы стилей для печати и просто таблицы. Таблицу стилей для печати, предназначенную для сверстанного на CSS документа, создать несложно, однако помимо этого можно создавать такие таблицы стилей и для макетов на основе таблиц, что особенно удобно в том случае, если ширина ячеек была задана с помощью CSS. При этом можно скрыть ячейки, содержащие панель навигации, таким же образом, как мы поступили с элементом div в приведенном выше примере.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити