 Druckversion mit CSS 04 (Beispiel)
Eine weitere Demo zum Thema Druckversion mit CSS-Angaben formatieren. Unterschiedliche Anweisungen für die Medien 'screen' und 'print' (Bildschirm und Drucker) erlauben es eine HTML-Seite unterschiedlich anzuzeigen / bzw. auszudrucken.
Seitenelemente für bestimmte Medien unterschiedlich formatieren
Dieses Beispiel hat im Gegensatz zum Beispiel 03 Formularfelder zur Eingabe von Daten. Zum Ausdruck einer Beitrittserklärung einer Vereinsseite z.B. würde der Seitenbesucher personenbezogene Daten eintragen. Für eine Firmenseite bietet es die Möglichkeit z.B eine Faxvorlage einer Bestellung oder die Auftragsbestätigung einer Bestellung auszuducken.
Hier wird neben den bereits behandelten CSS-Anweisungen, die unterschiedliche Formatierung von Formularfeldern für das Medium 'Bildschirm' und 'Drucker' demonstriert.
Funktion und Arbeitsweise
Die Erklärungen entnehmen sie bitte der Beispielseite  Druckversion mit CSS 02.
Wie im Beispiel 02 verwende ich hier 2 externe CSS-Dateien. Eine für die Bildschirmanzeige (@media screen) und eine weitere für den Ausdruck (@media print). Bei dieser Variante gibt es also 1 HTML-Datei (die auf dem Bildschirm anders erscheint als beim Ausdruck) und 2 zugehörige externe CSS-Dateien.
Für zwei 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">
2 Screenshots zur Gegenüberstellung der Ansichten
Die beiden Screenshots zeigen eine HTML-Seite wie sie sich für die beiden Medien darstellt. Für die Druckversion wird durch CSS-Anweisungen für das medium 'print' :
1) eine andere Grafik als in der Bildschrimversion angezeigt (Briefkopf / Firmenlogo),
2) das Menü und der Druck-Button ausgeblendet
3) zusätzlicher Text im Kopf- und Fußbereich plaziert
Öffnen sie die Demo-Datei und vergleichen sie die Bildschirmversion mit der Druckversion über das Browsermenü mit Datei - Druckvorschau.
Laden sie die 3 Dateien als ZIP-Datei herunter und experimentieren sie ein wenig.
Bildschimansicht:
Druck-Ansicht:
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
Demo ansehen
Download
ZURÜCK