 Druckversion mit CSS 03 (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
Das Beispiel könnte für eine Vereinsseite eine Beitrittserklärung zum Ausdruck anbieten, für eine Firmenseite ein Rücksendeformular zur Registrierung der Seriennummer oder als Faxvorlage (zum Ausdrucken) für andere Einsatzbereiche verwendet werden.
Funktion und Arbeitsweise
Die Erklärungen entnehmen sie bitte der Beispielseite  Druckversion mit CSS 02.
Anders als im Beispiel 02 verwende ich hier (damit das auch einmal demonstriert wird) 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