Designbeispiel: eine druckfreundliche Seite mit CSS

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

In diesem Designbeispiel erstellen wir aus einem existierenden Webdokument (siehe nächste Abbildung) eine Version, die sich besser für Ausdrucke eignet. CSS hat nicht nur unsere Webdesignmethoden verändert, sondern bietet Entwicklern auch eine neue Möglichkeit, um druckfreundliche Versionen ihrer Dokumente anzubieten. Anstatt zusätzliche Seiten anlegen oder Skripte schreiben zu müssen, können Sie CSS einsetzen, um eine Druckversion des Dokuments zu erzeugen, sobald der Benutzer den "Drucken"-Button anklickt. Den HTML-Code für die Seite suchen Sie in diesem Buch vergeblich, da die Präsentation allein anhand von CSS angepasst werden kann.

Webseite mit Stildefinitionen für Bildschirmdarstellung

Abbildung: Die Webseite mit Stildefinitionen für die Bildschirmdarstellung.

Beim Erstellen von Stylesheets für den Ausdruck benutzen Sie eigentlich einen Webbrowser. Dadurch können Sie schnell sehen, wie sich die CSS-Regeln auf die Darstellung des Dokuments auswirken. Außerdem schont diese Arbeitsweise die Umwelt und Ihren Geldbeutel, da keine Druckertinte verschwendet wird. Im ersten Schritt kommentieren wir das Stylesheet für die Bildschirmdarstellung aus, um danach neue Regeln für den Ausdruck zu erstellen:

<!-- CSS für Bildschirmmedien während der Arbeit an der Druckversion verstecken -->
<!-- link href="adv.css" type="text/css" rel="stylesheet" media="screen" -->
<style type="text/css">
 /* Die CSS-Regeln für den Ausdruck kommen hier hin */
</style>

Die Seite für Schwarz-Weiß-Ausdrucke vorbereiten

Die erste CSS-Regel bezieht sich auf das Element body. Darin legen wir fest, dass das Dokument in schwarzer Schrift vor einem weißen Hintergrund ausgegeben werden soll:

body {
 background-color: white;
 color: black;
}

Außerdem legen wir fest, dass für den Ausdruck eine Serifenschrift (in unserem Beispiel die Garamond) benutzt werden soll. Bei der Bildschirmdarstellung sind Texte ohne Serifen leichter zu lesen, während bei gedruckten Dokumenten Schriften mit Serifen lesbarer sind. Geben Sie sicherheitshalber noch die Schrift Times an, da diese auf den meisten (wenn nicht sogar auf allen) Rechnern installiert und für die meisten Situationen hervorragend geeignet ist. Für den Fall, dass Times doch nicht installiert ist, sollten Sie ebenfalls Alternativen angeben:

body {
 background-color: white;
 color: black;
 font-family: Times, "Times New Roman", Garamond, serif;
}

Als Nächstes müssen wir die Navigationslinks und die anderen Elemente entfernen, die im Ausdruck nicht erscheinen sollen. Dazu gehören die Navigationsleiste unter der Hauptüberschrift sowie die internen Anker auf der Seite. Wenn Ihre Seite Werbebanner enthält, empfiehlt es sich, auch diese zu verstecken (siehe folgende Abbildung):

#navigation, hr, body>div>a, #blipvert {
 display: none;
}

Navigationsleiste und andere Elemente verstecken

Abbildung: Die Navigationsleiste und andere Elemente verstecken.

Die Hauptüberschrift gestalten

Da für den Ausdruck ausschließlich schwarze und graue Schrift auf weißem Hintergrund benutzt wird, haben Sie nur wenige Optionen bei der Gestaltung der Hauptüberschrift der Seite. Aber auch mit diesen begrenzten Möglichkeiten kann die Überschrift leicht grafisch so abgesetzt werden, dass sie schon von sich aus die nötige Aufmerksamkeit erregt.

Im ersten Schritt erhält die Überschrift einen schwarzen Hintergrund, vor dem die Schrift in Weiß dargestellt wird:

#header h1 {
 color: white;
 background-color: black;
}

Damit die Leute die Überschrift auch lesen, wird hier die Schriftfarbe Weiß gewählt, was für den nötigen Kontrast sorgt. In unserem Fall enthält die Überschrift gleichzeitig einen Link zurück zur Startseite. Aus diesem Grund werden die Farben der Überschrift über die Stilregeln für die Links gesteuert. Damit es hier nicht zu Problemen kommt, benutzen wir eine zusätzliche Regel:

#header h1 {
 background-color: black;
}
#header h1 a {
 color: white;
}

Damit der nun wieder sichtbare Text noch besser wahrgenommen wird, erhält er ein paar zusätzliche Stildefinitionen. Der Text soll zentriert und komplett in Großbuchstaben ausgegeben werden:

#header h1 {
 background-color: black;
 font-size: 24pt;
 text-align: center;
 text-transform: uppercase;
}

Um den Text weiter vom restlichen Dokument zu unterscheiden, benutzen wir eine serifenlose Schrift. Außerdem versehen wir die Überschrift an der Ober- und Unterseite mit Innenabständen (siehe nächste Abbildung):

#header h1 {
 background-color: black;
 font-size: 24pt;
 text-align: center;
 font-family: Helvetica, Verdana, Arial, sans-serif;
 padding: 7pt;
 text-transform: uppercase;
}

Gestaltung der Hauptüberschrift

Abbildung: Gestaltung der Hauptüberschrift.

Stildefinitionen für die Artikelüberschrift und die Verfasserzeile

Für die Artikelüberschrift und die Verfasserzeile wählen wir einen dramatischeren Ansatz: Die Innen- und Außenabstände für h2- und h3-Elemente erhalten den Wert 0.

#inhalt h2 {
 padding: 0;
 margin: 0;
}
#inhalt h3 {
 padding: 0;
 margin: 0 ;
}

Danach erhöhen wir für die Artikelüberschrift die Schriftgröße und erzeugen direkt darunter eine feine Haarlinie. Die Verfasserzeile wird rechts angeordnet und in kursiver Schrift dargestellt (siehe nächste Abbildung):

#inhalt h2 {
 padding: 0;
 margin: 0;
 font-size: 20pt;
 border-bottom: 1px solid black;
}
#inhalt h3 {
 padding: 0;
 margin: 0;
 text-align: right;
 font-style: italic;
 }

Gestaltung von Artikelüberschrift und Verfasserzeile

Abbildung: Die Gestaltung der Artikelüberschrift und der Verfasserzeile.

Teaser einsetzen

Nun befassen wir uns mit dem Inhalt des h4-Elements. Da dieser als Locktext (Teaser) für den Artikel benutzt werden soll, sollte er sich visuell vom übrigen Text des Artikels unterscheiden. Zu diesem Zweck färben wir den Hintergrund grau ein, verwenden eine serifenlose Schrift und legen einen gewissen Innenabstand fest (siehe nächste Abbildung):

#inhalt h4 {
 font-family: Helvetica, Verdana, Arial, sans-serif;
 border-top: 3pt solid black;
 background-color: #BEBEBE; /*~30% black */
 padding: 12pt;
 margin: 0;
}

Der eigentliche Inhalt des Artikels bleibt bis auf zwei Kleinigkeiten unverändert: den hier behandelten Durchschuss und die im folgenden Abschnitt behandelten Links.

Wie Sie sich erinnern, haben wir durch die Regeln für das body-Element festgelegt, dass für das Dokument eine Serifenschrift benutzt werden soll. Diese Schrift wird aufgrund der Vererbung auch in den Absätzen verwendet. Allerdings sollen die Absätze einen größeren Zeilenabstand (beziehungsweise Durchschuss) erhalten. Das erreichen wir mit der Eigenschaft line-height:

#inhalt p {
 line-height: 18pt;
}

Gestaltung des Locktextes

Abbildung: Gestaltung des Locktextes.

URIs nach einem Link darstellen

Normalerweise haben die Links in einem Dokument beim Ausdruck keinen besonderen Nutzen mehr. Um ihnen auch in der Druckversion einen Sinn zu geben, stellen wir sicher, dass auch die URIs der Links mit ausgegeben werden. Mit Hilfe einer weiteren CSS-Regel legen wir fest, dass die URIs jeweils nach den Links mit angezeigt werden. Um die Links visuell etwas ansprechender zu gestalten, entfernen wir die standardmäßigen Unterstreichungen und geben sie stattdessen grau und (mit Hilfe der Eigenschaft font-weight) fett gedruckt aus (siehe nächste Abbildung):

#inhalt a:after {
 content: " <" attr(href) "> ";
 font-family: courier, monospace;
 font-weight: normal;
}
a {
 text-decoration: none;
 font-weight: bold;
 color: #626466;
}

Bitte beachten Sie hierbei jedoch, dass der Internet Explorer weder das Pseudoelement :after noch die Inhaltserzeugung per content unterstützt und daher die URIs der Links in der Druckversion nicht mit ausgibt.

Links und Durchschuss für Inhalt anpassen

Abbildung: Links und Durchschuss für den Inhalt anpassen.

Zum Schluss die Fußzeile

An dieser Stelle ist die Gestaltung der Seite abgeschlossen, und wir können uns mit der Fußzeile beschäftigen, die die Copyright-Hinweise enthält. Um der Seite etwas Ausgeglichenheit zu verleihen, stellen wir den Text der Fußzeile, wie schon bei der Hauptüberschrift, zentriert und in einer serifenlosen Schrift dar. Oberhalb des Hinweises wird außerdem mit der Eigenschaft border-top eine weitere Haarlinie erzeugt. Das Ergebnis sehen Sie in der folgenden Abbildung.

#footer {
 border-top: 1px solid #000; text-align: center;
 font-family: Helvetica, Verdana, Arial, sans-serif;
}

Fußzeile mit Stildefinitionen

Abbildung: Die Fußzeile mit Stildefinitionen.

Nachdem sämtliche Stildefinitionen für den Ausdruck fertig sind, können diese in einem externen Stylesheet print.css gespeichert werden. Danach brauchen Sie nur noch die Kommentarzeichen für den CSS-Code für die Bildschirmdarstellung entfernen und das Stylesheet für den Ausdruck über ein link-Element in das Dokument einbinden:

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

Jetzt wissen Sie, wie man druckfreundliche Stylesheets erstellt. Sofern die Besucher Ihrer Site einen Browser benutzen, der mit Medientypen für Ausdrucke umgehen kann, wird beim Ausdruck automatisch das richtige Layout an den Drucker gesendet.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln