Ich beschreibe in diesem Tutorial kurz, wie man eine Webseite für den Ausdruck optimieren kann, z.B. Bilder und Menü ausblendet.
Voraussetzung hierfür ist, dass du eine Webseite hast, die auf CSS und divs basiert - also eine nach dem "neuesten Schrei" ;o).
Du musst einfach deine CSS-Datei, die die Seite für die Online-Darstellung definiert, kopieren und z.B. als "print.css" abspeichern.
Dabei darf man natürlich nicht vergessen, sie auch in den Seiten zu referenzieren:
<link rel="stylesheet" type="text/css" href="print.css" media="print" /> für die neue Datei und
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" /> für das Stylesheet, das die Seite online hat.
Dann beginnt die eigentliche Arbeit: Das Ausblenden von den divs, die man beim Ausdruck nicht sehen soll oder die anders dargestellt werden sollen.
1. Ausblenden beim Druck
Ausblenden geht einfach, indem du in das entsprechende Tag „display:none;“ hineinschreibst und die anderen Definitionen daraus löscht, also z.B. so:
Im screen.css:
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:78px;
background: url(_pictures/sitetemplate/headbg02.jpg) repeat-x;
border-top:0px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;
}
Im print.css:
#header{
display:none;
}
2. Farbe ändern beim Druck
Wenn du eine andere Schriftfarbe oder Hintergrundfarbe verwenden willst als bei der Online-Darstellung, musst du nur die entsprechenden Farbangaben im print.css austauschen, also so z.B.
Für Schriftfarbe:
screen.css:
h2 {
font-family: arial, verdana, helvetica, sans-serif;
font-size:13px;
line-height:13px;
color:#FFFFFF;
font-weight:bold;
}
print.css:
h2 {
font-family: arial, verdana, helvetica, sans-serif;
font-size:13px;
line-height:13px;
color:#000000;
font-weight:bold;
}
Für Hintergrundfarbe:
screen.css:
#outer{
height:100%;
min-height:100%;
margin-left:59px;
margin-bottom:-21px;
background-color:#000000;
}
print.css:
#outer{
height:100%;
min-height:100%;
margin-left:59px;
margin-bottom:-21px;
background-color:#FFFFFF;
}
Hinweis: Wenn du im screen.css eine Hintergrundfarbe angegeben hast und den Inhalt des divs ausdrucken willst, aber dabei keine Hintergrundfarbe haben möchtest, musst du das im print.css unbedingt angeben. Wenn dazu keine Angabe gemacht wird, wird die aus dem screen.css genommen.
3. Hintergrundbild ausblenden
Dabei ist der Trick, dass man beim Ausblenden nicht nur statt des Bildes eine Hintergrundfarbe angeben muss, man muss zusätzlich auch noch sagen, dass der Hintergrund auch diese Farbe zugewiesen bekommt. Sonst wird das Bild trotzdem gedruckt.
Screen.css:
body {
padding:0;
margin:0;
background: url(_pictures/sitetemplate/linksbg04.gif) repeat-y;
}
print.css:
body {
padding:0;
margin:0;
background-color:#FFFFFF;
background:background-color;
}
Alle diese Tricks funktionieren übrigens auch „anders herum“, d.h. du kannst auch divs auf deine Seite packen, die du im screen.css als unsichtbar definierst und im print.css als sichtbar. Die kommen dann nur beim Ausdruck zum Vorschein und nehmen online noch nicht einmal Platz weg. Sinnvoll z.B. für Copyrights oder Unterschrift-Felder.
Viel Spaß beim ausprobieren!