Seite Drucken
Wenn Sie eine Webseite zum Drucken anbieten, ist ein entsprechender Button innerhalb der eigentlichen Seite schon angebracht. So umgehen Sie den Ärger der dann entsteht, wenn die entsprechende Seite innerhalb eines Framesets nicht den Fokus hat.
|
|
Webseite drucken
Allgemeines zum Thema 'Seite ausdrucken'
Das beste Ergebnis zum Ausdrucken einer Webseite erzielen Sie über die 'Druckvorschau'. Der simple Klick auf des Druckersymbol im Browser führt oft zu einem nicht zufridenstelleden Ergebnis. Optimal ist es, wenn der Webmaster über CSS-Anweisungen weniger interessante Seiteninhalte für den Druckvorgang ausblendet.
Inhalte mit CSS ausblenden
Druckvorschau: Klicken Sie in der Menüleiste Ihres Browsers auf 'Datei' und in der angezeigten Auswahl auf 'Druckvorschau'.
Legen Sie im angezeigten Optionsfenster Ihre Einstellungen fest und leiten durch einen Klick auf 'drucken' den Druckvorgang ein. Dann sollte lediglich der Seiteninhalt ohne Titel, Menü- und Infobox ausgedruckt werden.
Wird die für den Ausdruck bestimmte Seite in einem Frameset angezeigt, ist es von Vorteil wenn die betreffende HTML-Datei 'den Focus hat', also das aktive Fenster ist. Die JavaScript-Anweisung 'focus()' macht ein Fenster zum aktiven Fenster.
focus();
<body onLoad="self.focus()" ...
Mit der zweiten Anweisung wird ein Fenster gleich beim Laden zum aktiven Fenster und bleibt es, solange nicht durch Klicken in einem anderen Frame der Focus verlorengeht.
Browserinterne Druckfunktion
1) Drucken mit Formularbutton
Um einen Formularbutton für den Druck einzubinden, notieren sie den unten dargestellten HTML-Code. Beim Klicken wird die browserinterne Funktion print() zum Drucken ausgelöst.
<form>
<input type="button" value=" drucken " onClick="javascript:window.print()">
</form>
2) Drucken mit Textlink
<form>
<a href="javascript:window.print()"> drucken </a>
</form>
drucken
|
Ein Textlink wird angezeigt, mit dem die Druckfunktion ausgelöst werden kann.
|
3) Drucken mit Grafiklink
<form>
<a href="javascript:window.print()">
<img src="print.gif" width="20" height="16" border="0" alt="">
</a>
</form>
|
Eine Grafik wird angezeigt, mit dem die Druckfunktion ausgelöst werden kann.
|
Eigene Druckfunktion
Mit einer eigenen Druckfunktion, die sich allerdings ebenfalls auf die browserinterne Funktion zum Drucken stützt, haben sie die Möglichkeit vor der Auslösung des Druckvorgangs Prüfungen durchzuführen. Hier in diesem Beispiel wird überprüft, ob ein Browser benutzt wird, der mindestens der Version 4 entspricht.
Dazu notieren sie ihr Script im Headbereich:
<script type="text/javascript" language="JavaScript">
<!-- Begin
function SeiteDrucken() {
focus();
Browser = parseInt(navigator.appVersion);
if (Browser >= 4) window.print();
}
// End --<
</script>
Auch für die eigene Funktion stehen ihnen die gleichen Auslösemechanismen zur Verfügung.
1) Drucken mit Formularbutton
Um einen Formularbutton für den Druck einzubinden, notieren sie den unten dargestellten HTML-Code. Beim Klicken wird die Funktion SeiteDrucken() aufgerufen.
<form>
<input type="button" value=" drucken " onClick="javascript:SeiteDrucken()">
</form>
2) Drucken mit Textlink
<form>
<a href="javascript:SeiteDrucken()"> drucken </a>
</form>
drucken
|
Ein Textlink wird angezeigt, mit dem die Druckfunktion aufgerufen werden kann.
|
3) Drucken mit Grafiklink
<form>
<a href="javascript:SeiteDrucken()">
<img src="print.gif" width="20" height="16" border="0" alt="">
</a>
</form>
|
Eine Grafik wird angezeigt, mit dem die Druckfunktion aufgerufen werden kann.
|
Separate Seite
Abhängig vom Layout der Seite (Farben, Grafiken, Werbung) ist es für den Seitenbesucher ganz angenehm, für den Ausdruck eine seperate Seite mit weißem Hintergrund und entsprechenden Formatierungen auswählen zu können. Dann gibt es keine Probleme mit dem Kontrast zwischen Hintergrund- und Textfarbe. Außerdem wird der Tintenvorrat geschont.
Ein Beispiel mit optionaler Druckseite finden sie hier:
zusätzliche Druckversion mit wenig Aufwand
Grafiken:
Die Grafiken können sie durch Rechtsklick herunterladen.
 |
|
|
datei-32-30.gif
32 x 32 Pixel |
print.gif
20 x 16 Pixel |
drucker.gif
22 x 22 Pixel |

Seite automatisch drucken - beim Öffnen der Seite
anderen Frameinhalt drucken
CSS-Vorlage 03 Druckversion + Bildschirmversion
CSS-Vorlage 04 Druckversion + Bildschirmversion
CSS-Anweisungen für Bildschim und Drucker - Grundlagen

|