По ту сторону Веб-страницы

Подписано в печать: версии страниц

Если вы видите на странице ссылку «Версия для печати», радуй­тесь. Это значит, что создатели сайта знают, что сайт нужен не для дизайнера и не для заказчика, а для посетителя. Потому что версия страницы для распечатки на принтере нужна исключительно посе­тителю.

Большинство современных браузеров в меню «Файл» предлагают возможность просмотра того вида страницы, который получится при печати на принтере. На экране верстка документа может быть удиви­тельно красивой, но при печати она способна значительно исказиться.

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

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

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

Человечество, трудящееся на ниве веб-разработок, со временем нашло несколько решений это проблемы.

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

Но лень — двигатель прогресса. Почему бы процесс создания вер­сий для печати не автоматизировать, поручив это серверу? Тут доступны два основных подхода.

Если вид страницы генерируется автоматически, а содержимое берется из отдельного файла или из базы данных, то проблем вообще возникнуть не может: создается страница, в которой сценарий, анало­гичный основному, включает информацию с минимальным оформле­нием, без навигационного меню и прочей информации, которая на бумаге стала бы излишней. Хорошо бы в этом случае превращать ссылки в реальные адреса (или де­лать так, чтобы после ссылки в скобках отображался адрес этой ссылки), чтобы польза от печатной версии страницы еще больше возросла. Правда, редкий пользователь набирает URL от руки, особенно если он содержит не только имя домена. Страница обычно со­здается не с жесткой версткой, а с тянущейся, чтобы не воз­никало проблем с полями, размером шрифта и т. п.

Если же страница ста­тическая, то функции сер­верного сценария сводятся к тому, чтобы удалить лишнее содержимое: меню, посто-

Достаточно универсальным решением является использование CSS. Во-первых, лишняя нагрузка на сервер минимальна: дополнитель­ные строчки CSS-разметки не могут существенно повлиять на работос­пособность сервера. Во-вторых, кроме дополнительного кода (который кэшируется, то есть загружается один раз и после этого сохраняется во временной папке) посетителю ничего не нужно загружать: он может просто, находясь на странице, нажать Ctrl+P или «Файл > Печать», и на принтер будет выведена страница, на которой будет отсутствовать лиш­няя информация, а нужна информация не будет жестко фиксирована по ширине.

Как это работает?

При включении стилевых файлов чаще всего используется тэг

<link>:

<link rel="stylesheet" type="text/css" media="all" href="/styles. css" />

Обратите внимание на параметр media. Он сообщает браузе­ру, на какой тип вывода ориентирована данная таблица стилей. В на­стоящий момент браузеры понимают три значения этого атрибута: all, screen и print. Значение all используется, когда разработ­чику не принципиально, будет ли страница просматриваться на экра­не или распечатываться. Поскольку это значение является значением по умолчанию, его можно и не указывать, и веб-дизайнеры оставляют его для порядка. Два других атрибута более конкретны: если указать media="print", то стили, указанные в данной стилевой таблице, бу­дут применяться к элементам только во время печати. На экране же бу­дут информация из такого стилевого файла будет игнорироваться. Па­раметр media="screen" действует противоположным образом. Такой параметр допустим и для тэга <style>:

<style type="text/css" media="all">@import "http://zeldman. com/c/c09.css";</style>

Решение напрашивается само собой. Создаются три стилевых описания, причем неважно, в отдельных ли CSS-файлах или внутри са­мого HTML-документа (первый способ логичнее: файл можно включить во множество документов сразу, а кроме того, он кэшируется, то есть не загружается каждый раз при загрузке очередной страницы с сайта). Первое описание, снабженное атрибутом media="all", максимально подробно описывает все стили документа. Это описание является глав­ным и универсальным. Далее включаются второе описание (для экрана) с параметром media="screen" и третье (для печатной версии) — оно снабжено атрибутом media="print". Эти два файла (или эти вклю-

Ченные описания) значительно короче: в них определяются стили для тех элементов страницы, которые на экране и на печати должны выгля­деть по-разному. Например, в стилевом файле для печати для тех эле­ментов, которые нужно скрыть, применяется свойство:

Display: none;

Эта строчка просто скроет блоки со страницы и позволит осталь­ному содержимому занять главенствующее место:

<style type="text/css" media="print">

#menu { display:none;

}

</style>

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

<link rel="stylesheet" type="text/css" media="all" href="/styles/main. css" />

<link rel="stylesheet" type="text/css" media="screen" href="/styles/screen. css" />

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

В результате программист забудет о генерации печатной версии, а посетитель — о потере трафика и лишних действиях для загрузки пе­чатной версии. Пиктограмма в виде принтера исчезнет с веб-страниц.

Несомненно, не все так радужно.

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

Отдельная проблема связана с таблицами и изображениями. Чаще всего это блоки, которые при всем желании не удается сделать тянущи­мися, поэтому в каждом конкретном случае приходится придумывать свое решение. Например, в версии для печати использовать миллимет­ровые указания на размер изображения: всем известно, что стандартная ширина листа бумаги в принтере — 210 миллиметров, а чтобы на всех принтерах без исключения печать происходила без обрезки полей, нуж­но вычесть еще по два сантиметра с каждой стороны. Получается, что максимальная ширина изображения — 17 см, и то, если изображение не включено в абзац, у которого может быть отступ.

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

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

Есть вариант, когда для экрана и для печати используются таб­лицы стилей, различающиеся между собой, как пылесос и стиральная машина. То есть, конечно, они служат общей цели, но с объектами де­лают абсолютно разные вещи. В таком случае достаточно двух стилевых файлов, каждый из которых выполняет только свою задачу. Рассмотрим небольшой пример. Перед нами три скриншота:

1. Основной вид страницы при загрузке:

Компания Татуїо была создана совершенно случайно после вечера работы в АсІоЬе РЬоІозЬор. После разработки первых эскизов инновационной косметики и косметической парфюмерии было принято решение вывести разработку на промышленные масштабы.

В июле 2007 г°Да инновационные тренды и концепция были утверждены советом директоров, созданным месяцем ранее. В качестве производителей были приглашены четрырнадцать французских компаний

2. Вид страницы при наведении курсора мыши на первый пункт меню (блок-ссылка приобретает другой вид, смещая остальные ссылки):

3. Вид страницы для распечатки на принтере:

Директоров, созданным месяцем ранее. В качестве производителей были приглашены

Страница (условно созданная специально в качестве примера) является примером того, как CSS может влиять на финальный вид сайта в браузере. Дело в том, что HTML-разметка тут минимальная:

<html>

<head>

<title>Tamylo Cosmetics</title>

<meta http-equiv="Content-Type" content="text/ html; charset=windows-1251">

<meta http-equiv="Pragma" content="no - cache"><meta http-equiv="Expires" content="0">

<meta http-equiv="imagetoolbar" content="false"> <meta name="Author" content="Erlang">

<link rel="stylesheet" type="text/css" media="screen" href="main. css">

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

</head>

<body>

<h1>Tamylo Cosmetics</h1>

<div id="navigate">

<ul>

<li><a href="/spectr/"><span>CneKTp</span> Косметика, парфюмерия, каталоги <br /><br />Линии <i>Tamylo Violet, Sempre Bene, Salut M-lles!</i> и <i>55-R</i></a></li>

<li><a href="/visit/"><span>Заходитe в гости</ span> Контакты, сотрудничество, штат</а></^>

<li><a href="/offic/"><span>Официально</span> Лицензии, авторское право<^></^>

</ul>

</div>

<div id="read">

<р>Компания <span class="tamylo">Tamylo</ span> была создана совершенно случайно после вечера работы в Adobe Photoshop. После разработки первых эскизов инновационной косметики и косметической парфюмерии было принято решение вывести разработку на промышленные масштабы.</p>

<p>B июле 2007 года инновационные тренды и концепция были утверждены советом директоров, созданным месяцем ранее. В качестве производителей были приглашены четрырнадцать французских компаний<^> </div>

<div id="automate">

<form method="post" action="/search/">

<input type="text" name="search item"> <input type="submit" value="Найти">

</form>

</div>

</body>

</html>

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

Тэгом <div>: в одном случае блок образуется тэгом заголовка <h1>. Эти блоки: заголовок страницы (оформленный тэгом <h1>); навигацонное меню (<div> с идентификатором «navigate»); основное текстовое содержимое страницы (<div> с идентификатором «read»); вспомога­тельный блок, в котором в данном случае помещается поисковая форма (<div> с идентификатором «automate»). Если не считать элементов поисковой формы, больше на этой странице нет идентификаторов.

Если пользователь отключит авторские стили (такая возможность есть во многих современных браузерах), то он увидит следующую кар­тину:

Это говорит лишь о том, что даже на альтернативных устройствах вывода страница будет отображаться хотя и не с предусмотренным ди­зайном, но вполне корректно в том смысле, что все блоки логически разделены: заголовок выглядит как заголовок, будучи оформленным привычным для заголовка тэгом, список ссылок оформлен как обычный список, а два других блока просто визуально отделены друг от друга.

Но для создания некоторой стилевой специфики каждый из эле­ментов снабжен стилевыми описаниями: заголовок сделан цветным, с подчеркиванием по всему блоку, навигационный блок отделен от за­головка прерывистой линией, а пункты меню решены как прямо­угольные блоки с тенью, причем основное слово в блоке (в разметке оно отграничено парным тэгом <span>...</span>) явно выделено. Большой отступ слева решен точным позиционированием элементов, в том числе и заголовка. Навигационный блок тоже точно позицио­нирован, а список со ссылками, которые стали блочными элемента­ми, обрели рамку и тень (тень — единственный графический элемент). За счет того, что для ссылок прописаны точные размеры и параметр overflow:hidden (при переполнении блока не уместившаяся часть скрывается без возникновения полос прокрутки) ссылки приобретают «обрезанный» вид. При наведении на ссылку (псевдокласс : hover) она приобретает другие атрибуты: цветную рамку, увеличенные разме­ры, отсутствие обрезания, другие цвета и отступы. Блок для основно­го текста особенно не украшался: есть только ограничивающая линия справа (border-right), а блок для поисковой формы просто точно позиционирован.

За все это отвечает файл main. css:

* {

Margin:0;

Padding:0;

Font-family:Georgia, Times New Roman, Times,

Serif;

}

Hi {

Position:absolute; left:200px; top:7 0px; width:450px;

Background-color:#FFCC9 9;

Padding:7px;

Color:#CC0000;

Font-size:14pt;

Font-weight:bold;

Border-bottom:2px solid #CC0000;

}

A {

Color:#6699FF;

}

A:hover { color:#330099;

}

Div#navigate { position:absolute; left:200; top:125px; padding:7px; font-size:10pt; font-weight:normal; border-top:1px dashed #CC0000; z-Index:100;

}

Div#navigate li { display:inline; float:left; height:100px; vertical-align:top; margin-right:10px;

Background:white URL(reds/shad. jpg) no-repeat; }

Div#navigate 1і a { display:block; width:90px; height:77px; overflow:hidden; background-color:#FFFFFF; border:1px solid #EEEEEE; text-decoration:none; padding:3px;

}

Div#navigate 1і a:hover { width:180px; height:150px; background-color:#FFFFFF; border:2px solid orange; overflow:none; padding:5px;

}

Div#navigate 1і a span { display:block; font-weight:bold; со1ог:#СС0000;

Border-bottom:1px solid #CC0000; font-size:13pt; white-space:nowrap; padding:3px 0рх; margin-bottom:3px;

}

Div#read { position:absolute; left:200; top:255px; width:65%; height:200px; overflow:auto; padding:7px; font-size:12pt;

Border-right:1px solid #CC0000;

}

Div#automate { position:absolute;

1е^:200; top:500px; padding:7px; font-size:12pt; )

Стоит прокомментировать только несколько вещей (осталь­ные уже должны быть понятны). Стили для ссылок описаны два раза: первый раз (вне списка) на тот случай, если встретятся ссылки отде­льно, не в меню, а второй раз (во вложенном описании) описываются конкретно ссылки, находящиеся внутри списка, который содержится внутри навигационного блока (на самом деле HTML-разметку можно было упростить еще больше, избавившись от блока и просто точно по­зиционировав список, но так разметка стала бы чуть менее структури­рованной; кроме того, это позволит при необходимости добавить в на­вигационный блок другие элементы, помимо списка ссылок). Строка div#navigate li a:hover должна быть понятна: это стиль ссылки, находящейся внутри элемента списка в блоке «navigate», активизи­рующийся при наведении курсора мыши. Есть и более сложная вложен­ность: div#navigate li a span (фрагмент текста <span> внутри ссылки внутри элемента списка внутри блока «navigate»). Первый же элемент в стилевой таблице (звездочка, обозначающая все элементы) сообщает всем элементам страницы нулевые отступы и (если эти эле­менты текстовые) гарнитуру шрифта.

Для отрисовки страницы, которая будет распечатана на принтере, используется файл print. css:

Hi { color:#CC0000; font-size:14pt; font-weight:bold; border-bottom:2px solid #CC0000;

}

A {

Color:black;

}

Div#navigate { margin-top:5px; padding:7px; font-size:10pt; font-weight:normal;

}

Div#navigate li { display:block; margin-left:10px; margin-bottom:10px; list-style-type:none;

}

Div#navigate li a { text-decoration:none;