 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
Hier erst einmal eine simples Beispiel
Hier auf dieser Seite möchte ich erst einmal nur das Ein- und Ausblenden von Seitensegmenten erklären. 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 auf dem Ausdruck erscheinen und welche auf beiden Medien zu sehen sein sollen.
Interessant ist der Aspekt, dass die auf beiden Medien angezeigten Seitenelemente trotzdem unteschiedlich formatiert werden können. So könnte ein Formularfeld auf dem Bildschirm farblich hervorgehoben sein und Ränder und Schattierungen erhalten, beim Ausdruck aber ohne dargestellt werden.
CSS-Anweisungen
Die Style-Angaben im Head-Bereich der HTML-Datei oder in einer externen CSS-Datei haben in der kombinierten Schreibweise einen separaten Block für @media screen, handheld und @media print. Schauen sie in mein Beispiel, das sie als Textdatei (oben im Kopfbereich) aufrufen können.
1 CSS-Datei
Verwenden sie eine externe CSS-Datei (kombiniert), muss im Head der HTML-Datei die Referenz so eingetragen werden:
<link rel="stylesheet" href="styleskombi.css" type="text/css">
2 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:
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">
<link rel="stylesheet" href="stylesprint.css" type="text/css" media="print">
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:
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 Drukversion Rücksicht nehmen zu müssen.
|
HOME
DOWNLOAD
Demo
ZURÜCK 
