Drucken
    
 HomeDiverses • Seite drucken 01   drucken  Seite drucken

 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'.

Optimiert drucken       Optimiert drucken

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>
Ein Formularbutton wird angezeigt, mit dem die Druckfunktion print() ausgelöst werden kann.


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>
Ein Formularbutton wird angezeigt, mit dem die Druckfunktion SeiteDrucken() aufgerufen werden kann.


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