Druckversion 01
    
HOME
 DOWNLOAD  BEISPIEL ZURÜCK SITEMAP  

 Druckversion erstellen 01 (Separate Seite)

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.

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 nur zwei Unterschieden:
  • Es werden andere CSS-Formatierungen verwendet
  • Titelgrafik und Menü fehlen

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

Vorschau: Hier gibts also 2 HTML-Dateien und 2 externe CSS-Dateien. In der Druckversion muss die Titelgrafik und das Menü noch manuell ausgeschnitten werden. Später, in einem anderen Beispiel werde ich erklären, wie man mit nur einer Datei auskommt, mit CSS-Anweisungen für die Medien 'screen' und 'print' Formatierungen für Bildschim und Druck zuweist und viel besser, wie man mit Hilfe dieser CSS-Angaben Seitenelemente beim Drucken ausblenden kann.

Zurück zur Variante 01

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.

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




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 ist auch mit dieser Methode gering: 1 Minute.

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






   CSS-Dateien

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;
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;
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 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' micht empfehlenswert, da der Button innerhalb der Print-Version schießlich mit ausgedruckt werden würde. Sieht man zwar immer wieder, machen wir aber nicht! (sagt Jupp Zupp)

Warten wir also auf die Beispielseite mit CSS-Angaben mit '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