Druckversion 01
    
 Home • CSS • Diverses • separate Druckversion  DOWNLOAD  Bildschirm  Drucker

 Druckversion erstellen 01 (separate Seiten)

Hier geht es nicht um differenzierte CSS-Angaben für die Medien 'screen' und 'print'. Es wird lediglich die alte Methode mit zwei unterschiedlich formatierten Seiten beschrieben. Allerdings wird der Aufwand erheblich reduziert.

2 separate HTML-Dateien, 2 CSS-Dateien

Betrachten Sie dieses Beispiel als eine Vorstufe der später zu entwickelnden Seite, in der bei den CSS-Angaben für den Bildschirm (screen) und dem Drucker (print) unterschieden wird. Soche Beispiele als Erklärungsseite und Download-beispiel finden Sie hier:



 Drucken mit CSS - Grundlagen

 Druckversion mit CSS 02 Aufbau - media print + screen

 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

Bei der Vorgehensweise eine HTML-Seite für den Bildschirm und eine weitere für den Ausdruck vorzubereiten, wird innerhalb der Bildschimansicht mit einem Druckersymbol auf die zweite Seite für den Druck verwiesen, die dann in einem neuen Browserfenster zum Ausdruck angeboten wird. Die Methode ist in der Praxis eher selten anzutreffen. Verschwenden Sie keine Zeit auf dieser Seite die zur zur Erklärung gut geeignet ist aber lediglich eine Alternative aufzeigt und wenden sich besser meinen anderen Beispielen zu.




   Die Arbeitsschritte

  • Bildschirmdatei + CSS-Datei erstellen
  • Kopie der HTML-Datei anfertigen
  • Titelgrafik und Menü in der Kopie ausschneiden
  • andere CSS-Datei einbinden
Bei dieser Variante gibt es also immer noch 2 HTML-Dateien. Eine für den Bildschirm, eine für den Ausdruck. Eine Zeitersparnis erreicht man dadurch, dass die zweite HTML-Datei lediglich eine Kopie der ersten Datei ist.

Mit der hier vorgestellten Arbeitsweise ist der Aufwand zur Erstellung einer zusätzlichen HTML-Datei als Druckversion nicht sehr hoch: 1 Minute

Hier gibts also 2 HTML-Dateien und 2 externe CSS-Dateien. Zur Herstellung der Druckversion muss die Titelgrafik und das Menü noch manuell aus der Bildschrimversion ausgeschnitten werden. Die Formatierung übernimmt die externe CSS-Datei der Druckseite. Wenn Sie also mehrere HTML-Seiten auch als Druckversion anbieten möchten, ist eine Variante für den Ausdruck schnell hergestellt.

In einem anderen Anwendungsbeispiel erkläre ich, wie man mit nur einer HTML-Datei auskommt. CSS-Anweisungen für die Medien 'screen' und 'print' weisen Formatierungen für Bildschirm und Druck zu. So kann man mit CSS-Angaben Seitenelemente beim Drucken ausblenden oder völlig anders formatieren.


   Das Beispiel

Eine knallbunte Bildschirmversion, die Sie so nicht drucken möchten (Extreme erklären gut).

So sollen die beiden Dateien aussehen. Während in der Bildschirmversion eine Hintergrundgrafik, eine Titelgrafik und ein Menü zu sehen ist, beschränke ich mich in der Druckversion auf das Wesentliche. Inhaltlich sind beide HTML-Dateien bis auf Grafik und Menü identisch.



Demo der Bildschirmversion    Demo der Druckversion


Die unterschiedlichen CSS-Notierungen sind als externe CSS-Datei referenziert. Im Head der HTML-Dokumente sieht der Bezug auf die externe CSS-Datei so aus:

Bildschirmdatei: 
<link rel="stylesheet" href="bildschirm01.css" type="text/css">
Druckerdatei: 
<link rel="stylesheet" href="drucker01.css" type="text/css">


   Bedingungen für die Druckversion

Bis auf Grafik und Menü sollte der Inhalt der Druckversion mit der Bildschirmversion identisch sein. Für den Ausdruck sollte die Druckversion farblich optimiert sein.

Die Seite für den Ausdruck sollte
  • gut lesbar sein (Textgröße)
  • ohne schmückende Titelgrafiken dargestellt werden
  • ohne Menü angezeigt werden
  • keine Hintergrundgrafik haben
  • entsprechende Ränder und Margins haben
  • druckerfreundlich + tintensparend gestaltet sein
  • einen ausreichenden Heftrand haben


   Aufwand zur Erstellung einer Druckversion: 1 Minute

Alle Angaben für Farbgebung und Formatierung der Duckseite sind in der separaten CSS-Datei festgelegt. Ohne großen Aufwand kann nun eine Druckversion erstellt werden.

Sobald die Bildschirmversion der Seite fertig gestellt wurde, ist der Aufwand für jede zusätzliche Druckversion auch mit dieser Methode gering: 1 Minute.

  • eine Kopie der Seite erstellen
  • Titelgrafik und Menü ausschneiden
  • Link auf die CSS-Datei ändern






   CSS-Formatierungen Gegenüberstellung

Ich verwende 2 CSS-Dateien, die sich geringfügig unterscheiden. Für wichtig erachte ich die Einstellungen für den zusätzlichen linken Rand (Heftrand).

CSS-Angaben für die Bildschirmversion   CSS-Angaben für die Druckerversion 
body {
font-family: Verdana,Arial,sans-serif;
font-size:11px;
font-weight:normal;
color:#000000;
background-color:#9F9C05;

background-image:url(kachel01.gif);

margin:0px;

padding:0px;
}

#inhalt {
font-size:11px;
color:#000000;
background-color:#DEDD04;
border:1px solid #F4F311;
width:640px;
}

#inhalt td {
font-size:11px;
padding:20px;
background-color:#DEDD04;
}

#inhalt p {
font-size:11px;
margin-left: 20px;
margin-top: 2px;
}

h1 {
font-size: 20px;
color: #FFFFFF;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 20px;
}

h4 {
font-size:14px;
color: #9F9C05;
margin-left:0px;
margin-top:10px;
margin-bottom:10px;
}
    
body {
font-family: Verdana,Arial,sans-serif;
font-size:12px;
font-weight:normal;
color:#000000;
background-color:#00BF60;



margin-top:40px;
margin-left:140px;
padding:0px;
}

#inhalt {
font-size:12px;
color:#000000;
background-color:#FFFFFF;
border:1px solid #000000;
width:640px;
}

#inhalt td {
font-size:12px;
padding:20px;
background-color:#FFFFFF;
}

#inhalt p {
font-size:12px;
margin-left: 20px;
margin-top: 2px;
}

h1 {
font-size: 20px;
color : #5F5F5F;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 20px;
}

h4 {
font-size: 14px;
color : #7F7F7F;
margin-left: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
 





   Einleitung zum Ausdrucken mit Browserfunktion

Die Bildschirmversion ruft die Druckversion im neuen Browserfenster auf. Der Ausdruck der Druckversion erfolgt über die Browserfunktion: Datei - Drucken. Falls die Druckversion in einem PopUp-Window angeboten wird, sollte zumindest die Menüleiste angezeigt werden.

Eine Erweiterung für einen automatischen Ausdruck wäre möglich. Eine Variante mit einem Drucker-Button ist ohne Unterscheidung der Medien 'screen' und 'print' nicht empfehlenswert, da der Button innerhalb der Print-Version schließlich mit ausgedruckt werden würde. Sieht man zwar immer wieder, machen wir aber nicht! (sagt Jupp Zupp)

Schauen Sie einmal auf die Beispielseite mit CSS-Angaben für 'screen' und 'print' .




   Download

Inhalt des Downloads für dieses Beispiel:
  • bildschirm01.htm
  • druckversion01.htm
  • bildschirm01.css
  • drucker01.css
  • Hintergrundgrafik
  • Titelgrafik
  • Druckergrafik




Erstellt: 19.08.2002

NACH OBEN