CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 05.12.2019
     
Mittels CSS für den Druck optimieren

Die Informationsflut des Internets ist eigentlich schon fast erdrückend. So kann man mittlerweile zu so gut wie jedem Thema im Internet Informationsquellen finden. Ist die richtige Seite gefunden will der Suchende oftmals die Seite ausdrucken. Ärgerlich wird das ganze erst, wenn neben dem eigentlichen Text, die ganze Seite samt Logos, Menü und anderem für den Ausdruck nicht benötigte Websitebestandteile mit ausgedruckt werden, denn das kostet Zeit und vor allem Geld. Wer seinem Besucher einen echten Service bieten will muss seinen Besuchern eine Möglichkeit geben, bei einem Ausdruck lediglich relevanten Content auszudrucken. Logos, Banner oder sonstiges sollten beim Ausdruck außen vor bleiben.

Die einfachste Möglichkeit wäre natürlich, dass für jede Unterseite der Website eine separate druckoptimierte Seite, auf welcher lediglich der Content zu sehen ist, erstellt wird. Dies für eine Website mit vielen Unterseiten zu erstellen, wäre jedoch viel zu umständlich und arbeitsaufwändig. Die Nutzung eines Content Management Systems CMS, das die Möglichkeit bietet, den Inhalt vom Design zu trennen, ist hier schon eher angebracht. Diese CMSs kosten jedoch, bis auf einige Ausnahmen, eine Menge Geld und sind somit für den "Ottonormalwebmaster" eher außer Acht zu lassen.

Eine wirklich effektive Alternative hierzu bietet CSS. Hierbei kann auf die Erstellung einer zweiten druckoptimierten Seite verzichtet werden, auch das Design und der Inhalt wird nicht unbedingt in diesem Sinne voneinander getrennt. Es wird lediglich der Ausdruck bestimmter Bestandteile der Website, mittels einer vordefinierten Klasse, unterbunden.

Die beste Möglichkeit zur Verwendung eines CSS zu diesem Zwecke ist das Erstellen einer Klasse, die die Aufgabe hat das mit der Klasse definierte Tag auszublenden.
Diese Klasse sollte in einer externen Datei gespeichert werden, welche dann in jeder Unterseite der Website eingebunden werden soll. Die Klassifizierung wird dann bei jedem Tag der Website angewendet, welches beim Ausdruck ausgeblendet werden soll.

Hier die genaue "Bauanleitung":
Zuerst wird eine externe CSS Datei erstellt. Diese sollte eine Klasse mit der Eigenschaft display:none; enthalten.
Bsp: .druck { display:none; }
Diese Datei wird auf einen mit der Endung .css abgespeichert. Dann wird in jede Unterseite Ihrer Website diese CSS Datei in den Headbereich eingebunden.
<link rel="stylesheet" media="print" href="print.css">
Achten Sie darauf media="print" zu setzen, denn das besagt, dass das Bestandteil der Website lediglich beim Ausdruck ausgeblendet werden soll. Sollten Sie media="print" nicht setzen so wird es immer ausgeblendet.
Dann definieren Sie diese Klasse für jedes Tag, dass für die Auszeichnung eines Bestandteiles Ihrer Website bestimmt ist, welches nicht ausgedruckt werden soll.
Bsp:
<img scr="hallo.gif" alt="hallo" class="druck"> oder:
<span class="druck">Logo</span>

Wer seinen Besucher ein Höchstmaß an Service anbieten will, kann nun zusätzlich einen Link setzen, mit welchem die Seite automatisch ausgedruckt werden kann. Hierfür ist lediglich ein kleiner JavaScriptbefehl von Nöten. Beispiel:
<a href="javascript:self.print()">Diese Seite drucken</a>

Benjamin Guin