 Druckversion mit CSS 02 (kombinierte Seite)
In diesem Beispiel möchte ich demonstrieren, wie man mit CSS-Anweisungen für die Medien 'screen' und 'print' (Bildschirm und Drucker) unterschiedliche Formatierungen zuweist. Das kann auch bedeuten Seitenelemente für den Bildschirm / für den Ausdruck auszublenden. |
|
Seitenelemente anzeigen / nicht anzeigen für bestimmte Medien
Eine einzige HTML-Seite mit unterschiedlichen Ausgabe-Resultaten für den Bildschirm und beim Ausdruck. Mit CSS ist das möglich. Auch diese Seite wird in der Druckversion anders ausgedruckt als sie in der Bildschirmversion angezeigt wird.
Hier erst einmal eine simples Beispiel
Hier auf dieser Seite möchte ich erst einmal nur das Ein- und Ausblenden von Seitensegmenten mit CSS erklären. Dabei wird zwischen dem Bildschrim (media screen) und dem Drucker (media print) unterschieden. Ein guter Start, wenn Sie sich zum ersten Mal mit dem Thema beschäftigen.
Die Style-Angaben können im Head-Bereich der HTML-Datei stehen (wie in meiner Demo). Sie können die Style-Angaben aber auch in eine externe CSS-Datei auslagern (siehe Textdatei im Kopfbereich).
Bei dieser Variante gibt es also nur noch 1 HTML-Datei, die auf dem Bildschirm anders erscheint als beim Ausdruck. Das erreicht man durch spezielle CSS-Anweisungen:
- für den Bildschirm: @media screen
- für den Drucker: @media print
Screenshot zur Gegenüberstellung der Ansichten
Voraussetzung ist der strukturierte Aufbau der HTML-Seite. Sie legen vorab fest, welche Elemente auf dem Bildschirm angezeigt, welche im Ausdruck erscheinen und welche auf beiden Medien zu sehen sein sollen.
Interessant ist der Aspekt, dass die auf beiden Medien angezeigten Seitenelemente trotzdem unterschiedlich formatiert sein können. So könnte eine Überschrift auf dem Bildschirm farblich hervorgehoben sein, Ränder und Schattierungen erhalten, beim Ausdruck aber ohne Schnörkel in einem dunklen Grauton dargestellt werden.
CSS-Anweisungen - 3 Möglichkeiten
1 CSS-Notierungen im Head-Bereich
In meiner Demo sind die CSS-Angaben im HEAD-Bereich der HTML-Datei notiert.
Die Style-Angaben im Head-Bereich der HTML-Datei haben in der kombinierten Schreibweise einen separaten Block für @media screen, handheld und @media print.
<style type="text/css">
<!--
@media print {
hier stehen die Anweisungen für Druckerformatierungen
}
@media screen, handheld {
hier stehen die Anweisungen für Bildschirmformatierungen
}
-->
</style>
Schauen Sie in den  Quelltext der HTML-Datei 
2 Eine externe CSS-Datei
In der externen CSS-Datei steht ja nichts anderes als die 'ausgelagerten' CSS-Anweisungen, die normalerweise im Head-Berich notiert werden. Folglich gibt es dort ebenfalls einen separaten Block für @media screen, handheld und @media print.
Verwenden Sie eine einzige externe CSS-Datei (kombiniert), muss im Head der HTML-Datei eine Referenz auf die exterene Datei eingetragen werden (den Dateinamen legen sie selbst fest):
<link rel="stylesheet" href="styleskombi.css" type="text/css">
Innerhalb dieser CSS-Datei stehen Anweisungen für beide Ausgabemedien. Schauen Sie in den Quelltext einer kombinierten CSS-Datei im Window anzeigen
3 Zwei externe CSS-Dateien
Werden die Style-Angaben für die beiden Ausgabemedien in zwei separaten externen CSS-Dateien notiert, gibt es eine für die Bildschirmanzeige @media screen, handheld und eine für die Druckausgabe@media print.
Die Zuordnung für das entsprechende Medium erfolgt durch die Kennzeichnung über media bei der Referenzierung der externen CSS-Dateien.
Verwenden Sie 2 CSS-Dateien (eine für jedes Medium), müssen im Head der HTML-Datei die entsprechenden Referenzen so eingetragen werden (die Dateinamen legen sie selbst fest):
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
<link rel="stylesheet" href="stylesprint.css" type="text/css" media="print">
Mehr Info zu dieser Technik finden Sie im Beispiel Druckversion 03
Meine CSS-Klassen für dieses Beispiel
Neben allen anderen CSS-Anweisungen (die hier nicht weiter aufgeführt sind) legte ich 3 Unterklassen fest, die für jedes Medium unterschiedliche Anweisungen enthalten.
|
.beide
|
- für Inhalte, die auf beiden Medien angezeigt werden sollen
|
|
.drucker
|
- für Inhalte, die nur beim Ausdruck angezeigt werden sollen
|
|
.bildschirm
|
- für Inhalte, die nur auf dem Bildschim angezeigt werden sollen
|
Der Schlüssel: display:none; unterdrückt eine Anzeige
CSS-Angaben für den Bildschirm
@media screen, handheld |
CSS-Angaben für den Druck
@media print |
body {
font-family: Verdana,sans-serif;
font-size:11px;
color:#000000;
background-color:#F8F8F8;
background-image:url(kachel01.gif);
margin:0px;
padding:0px;
}
h1 {
font-size:18px;
font-weight:normal;
color: #E41F26;
font-weight:normal;
}
.beide {
font-size:11px;
color:#000000;
background-color:#F8F8F8;
background-image:url(kachel01.gif);
}
.drucker {
display:none;
}
.bildschirm {
font-size:12px;
color:#000000;
}
|
body {
font-family: Verdana,sans-serif;
font-size:12px;
color:#000000;
background-color:#FFFFFF;
margin:0px;
margin-left:100px;
padding:0px;
}
h1 {
font-size:18px;
font-weight:normal;
color: #8F8F8F;
font-weight:bold;
}
.beide {
font-size:12px;
color:#000000;
background-color:#FFFFFF;
}
.drucker {
font-size:12px;
color:#000000;
}
.bildschirm {
display:none;
}
|
Schematischer Aufbau der Seite
Die Beispielseite hat 6 Inhaltsblöcke. Für die Blöcke werden über <span>-Anweisungen CSS-Unterklassen zugewiesen. Natürlich könnten Sie auch <div>-Anweisungen einsetzen oder die Unterklassen in <table>- <p>- oder <td>-Tags einbinden.
Die 6 Seitensegmente:
<span class="bildschirm">
</span>
<span class="drucker">
</span>
<span class="bildschirm">
</span>
<span class="beide">
</span>
<span class="bildschirm">
</span>
<span class="drucker">
</span>
Das ergibt für die Bildschirmdarstellung:
Das ergibt für den Ausdruck:
In meinem Anwendungsbeispiel blende ich in der Version für den Ausdruck im Fußbereich zusätzliche Informationen ein, die auf Papier ohne Bezug zur Webseite meiner Meinung nach notwendig sind. Schließlich gibt es ja keinen Link zur Seite 'Kontakt' oder 'Impressum'.
Sie haben nun alle Möglichkeiten
Beim Ausdruck der Seite Menüs ausblenden aber z.B. Postanschrift, Web-Adresse und Bankverbindungen zusätzlich anzeigen lassen.
Bei der Bildschirmdarstellung Textformatierungen, Hintergrundfarben und Grafiken frei bestimmen; ohne dabei auf die Druckversion Rücksicht nehmen zu müssen.
 Drucken mit CSS - Grundlagen
Druckversion mit CSS 03 Aufbau - media print + screen
Druckversion mit CSS 04 Aufbau - media print + screen
C03 Druckversion + Bildschirmversion mit CSS media print + screen - Vorlage Download
C04 Druckversion + Bildschirmversion mit CSS media print + screen - Vorlage Download
C05 Druckversion + Bildschirmversion mit CSS media print + screen - Vorlage Download
|
Home • CSS • Diverses • Druckversion 2
ZIP
