Stylesheet für den Ausdruck anlegen
Nicht jeder liest gerne am Bildschirm und druckt deshalb eine Website aus. Mit einem Print-Stylesheet erhöhen Sie den Lesespaß dieser Besucher, denn ein Ausdruck ist ohne angepasste CSS-Eigenschaften zwar tauglich, aber alles andere als optimal.
Stylesheet für den Ausdruck anlegen
Nicht jeder liest gerne am Bildschirm und druckt deshalb eine Website aus. Mit einem Print-Stylesheet erhöhen Sie den Lesespaß dieser Besucher, denn ein Ausdruck ist ohne angepasste CSS-Eigenschaften zwar tauglich, aber alles andere als optimal.
Stylesheet für Printmedien einbinden
Zunächst legen wir ein neues Stylesheet, beispielsweise print.css, an und notieren im Head des HTML-Dokuments den Pfad zu dieser Datei. Wichtig ist, dass wir dabei auch den Medientyp print angeben.
Unnütze Elemente für den Ausdruck verschwinden lassen
Es macht Sinn, all jene Elemente für den Ausdruck Ihrer Website auszublenden, die auf dem Papier nur Platz verschwenden beziehungsweise unnötig Tinte verbrauchen. Das funktioniert wie bei Online-Elementen, indem wir die CSS-Eigenschaft display auf none setzen. Kandidaten für so eine Maßnahme sind Kopf- und Fußbereich der Website inklusive Navigation und Bilder, sofern diese nicht für das Verständnis des Textes erforderlich sind. Der CSS-Code könnte demnach so aussehen:
#header, #navigation, #footer, img
{
display: none;
}
Seitenumbrüche im Stylesheet festlegen
Die einzigen druckerspezifischen CSS-Eigenschaften sind page-break-before beziehungsweise page-break-after. Mit ihnen legen Sie fest, an welchen Stellen des Ausdrucks Seitenumbrüche eingefügt werden sollen. So verhindern Sie zum Beispiel mit der folgenden Anweisung, dass Kapitel am Ende einer Seite beginnen.
h1
{
page-break-before: always;
}
Darstellung von Links im Ausdruck
Die Markierung von Hyperlinks bringt auf dem Papier natürlich nichts, daher entfernen wir Unterstrich und Einfärbung mittels:
a
{
color: black;
text-decoration: none;
}
Es kann unter Umständen sinnvoll sein, die URL, auf die der Hyperlink in der Online-Version verweist, auch in der Druck-Version aufzuführen. Hier kann uns CSS allerdings nicht weiterhelfen. Wir müssen uns die Mühe machen, besagte URL im HTML-Code einzutragen und für die Online-Variante ausblenden.
Die gleiche Methode wenden wir an, um die URL der Website, die ausgedruckt wird, anzugeben.
Wenig Aufwand beim Ausdruck dank Layer-Struktur
Wie Sie sehen, ist das Erstellen einer für den Ausdruck optimierten Website mit wenig Arbeit verbunden. Es muss lediglich ein neues Stylesheet angelegt und falls notwendig minimale Eingriffe im HTML-Code vorgenommen werden.
Wir haben Ihnen bis hierhin allerdings auch verschwiegen, dass die erwähnten Maßnahmen nur bei Websites greifen, deren Layout auf Layern basiert. Sollte Ihre Website immer noch als Tabelle strukturiert sein, wird es wesentlich komplizierter. Hier haben Sie nämlich nicht die Möglichkeit, gezielt Elemente mit wenigen Zeilen Code auszublenden.
Sonderfall: Tabellen-Layout für den Ausdruck optimieren
Hier ist die beste Lösung neben der Umstellung auf Layer das Anlegen eines separaten Druck-Layouts. Dafür erzeugen Sie eine Kopie Ihrer Website und schmeißen alle Zeilen und Spalten raus, die für einen Ausdruck unerheblich sind. Auf der originären Seite bringen Sie dann noch einen Link zur Print-Version unter. Aber Sie merken schon, keine sonderlich elegante Lösung.
Webdesign Info
Layoutgestaltung
Entwicklung
CMS
Suchmaschine / SEO
Referenzen
Webdesign Preise
