На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

CSS. Печатаем со стилем

Автор: Никита Вакорин
Источник: Umade.Ru
25.03.06

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

Помню, когда я впервые пытался распечатать веб-страницу. Также помню, что мне этого не удалось сделать. Я испортил около 10 листов. На бумаге появлялась только одна четвёртая часть страницы. Мне даже думалось, что виновник моих неудач — это принтер, но в настоящее время я понимаю, что виновником был тот самый веб-сайт, дизайн которого не был рассчитан на пользователя, которому может понадобиться распечатать страницу.

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

Что именно печатать?

Если распечатанная веб-страница идентична своей экранной копии, это не всегда есть хорошо. Даже наоборот. Лично я считаю, что при печати интернет-старницы, на бумаге должно выводиться содержимое первостепенного материала — то, за чем пользователь пришёл на эту самую страницу.

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

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

Роль CSS в печати веб-страниц

Большинство сайтов, предоставляющих возможность распечатать содержимое, используют PHP и с его помощью преобразовывают оригинал страницы, или просто создают отдельные для печати страницы. Зачем? Можно обойтись без дубликатов.

Веб-страницы, предназначенные для печати, зачастую являются отдельно созданными страницами. Я не вижу ни одного достоинства у такого подхода — только недостатки. Главные из этих недостатков:

  • Расходуется лишний объём дискового пространства
  • Необходимо изменять структуру (X)HTML-кода страниц
  • Ненужное дублирование текста

Как быть? Использовать CSS! Экран монитора — это не единственная среда, в которой может работать CSS. Каскадные таблицы ещё предусмотрены для следующих типов носителей:

  • all (все)
  • aural (звуковой)
  • braille (брайль-устройство)
  • embossed (брайль-принтер)
  • handheld (портативный)
  • print (печатный)
  • projection (проектор)
  • screen (экран)
  • tty (для устройств с фиксированным размером символов)
  • tv (для устройств типа телевизора, с ограниченными возможностями)

В данный момент нас интересует печатный тип носителя. В качестве вводного материала по печати с помощью CSS прочитайте статью В Печать! (перевод на русский язык статьи Эрика Майера Going to Print).

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

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

Распечатать эту страницу

Итак, CSS-файл для печати создан и подключён с помощью следующей строки кода, которую необходимо поместить между тэгами <head> и </head>:

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

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

Как подключать новые CSS-файлы?

Теперь, необходимо, чтобы при нажатии ссылки, подключался необходимый нам CSS-файл. Я выбираю метод с использованием PHP (есть несколько вариантов с использованием JavaScript), а именно метод, который успешно работает на Zen Garden (меняет дизайны), и который Дэйв предлагает использовать любому желающему.

Код следующий:

<?php $tempCSS = $HTTP_GET_VARS["cssfile"];
if ($tempCSS != "") {
$loadCSS = $tempCSS;
} else {
/* устанавливается CSS-файл поумолчанию в том случае, если нет строки запроса */
$loadCSS = "default.css";
};
$currentDesign = $loadCSS;
?>

Этот PHP-скрипт необходимо вставить в каждую страницу вашего сайта, где будут подгружаться новые CSS-файлы. default.css - название оригинального CSS-файла, предназначенного для экрана монитора. Также необходимо заключить между <head> и </head> следующую строку кода, которая заменяет оригинальную строку:

<link rel="stylesheet" type="text/css" href="<?php echo $loadCSS; ?>" title="default" media="screen" />

и так тоже работает:

<style type="text/css" media="all">@import "<?php echo $loadCSS ?>";</style>

Наконец, чтобы сослаться на конкретный CSS-файл и применить его к конкретной интернет-странице, необходимо прописать следующее:

<a href="thispage.html?cssfile=print.css">Изменить стиль

thispage.html — название конкретной веб-страницы, на которой будет выполняться подгруздка каскадных таблиц, а print.css — это уже непосредственно название самого CSS-файла. Будьте внимательны, и прописывайте правильные пути к файлам.

Текст Изменить стиль можно заменить любым другим. Один из популярных и понятных заголовков – версия для печати.

Печатайте на здоровье! Удачи.

Статьи по теме:

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100