Drucklayout für Webseite festlegen | Druckausgabe mit media='print' und print.css   


Freitag, 24. März 2023

04:37

Homepage-Tipps & -tricks für Webmaster mit CSS

Drucklayout für Webseite festlegen | Druckausgabe mit media='print' und print.css

Problem 1: Wie kann die Druckausgabe einer Webseite druckerfreundlich gestaltet werden, ohne dafür eine extra Seite anzulegen?

Lösung 1: Abhilfe schafft hierfür eine CSS-Datei, die ausschließlich für das Drucklayout zuständig ist. Hier im Beispiel wurde die Datei mit print.css deklariert!

Zu Beginn fügen Sie nachfolgende Anweisungen zwischen <head> und </head> in das entsprechende Html-Dokument ein:

<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
  • style.css (für Bildschirm-/Browserausgabe = media='screen')
    Mit media='screen' erhält der Browser den Befehl, die style.css für die Browserausgabe auszulesen!
    Wenn Sie auf Ihrer Webseite bereits mit Cascading Stylesheets arbeiten, verwenden Sie ja mindestens schon eine CSS-Datei. Nehmen wir einmal an, dass Sie diese Datei style.css benannt haben (selbstverständlich kann auch ein anderer Name wie format.css, screen.css o.ä. gewählt werden). Die im 'head' eingefügte Anweisung muß jedoch mit der bereits vorhandenen sowie der neu zu erstellenden CSS-Datei für das Drucklayout sowohl vom Dateinamen als auch von der Pfadangabe her übereinstimmen. Liegt bzw. liegen Ihre CSS-Datei/en in einem Ordner, welchen Sie beispielsweise 'css' benannt haben, so lauten die Anweisungen im 'head' wie folgt:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
  • print.css (für Druckausgabe/Drucklayout = media='print')
    Bei Aufruf der Druck-Funktion kommt media='print' zum Einsatz, wodurch die print.css aktiv wird!

Unterschiedliche Darstellung / Anzeige zwischen der Browser- & Druckausgabe durch Ein- oder Ausblenden (verstecken) bestimmter Elemente

Problem 2: Wie können die Navigation, Grafiken und bestimmte Bereiche für die Druckausgabe ausblendet werden?
Lösung 2 a): Für die Ausblendung einzelner Bereiche oder Elemente notieren Sie in der print.css folgende Anweisung (Klassenselektor):

.noprint
{
display: none;
}

Um eine einzelne Grafik auszublenden, notieren Sie zusätzlich noch Folgendes im entsprechenden Html-Dokument:

<div class="noprint">
<img src="images/grafik.jpg" alt="" width="150" height="150">
</div>

alternativ auch so:

<img class="noprint" src="images/grafik.jpg" alt="" width="150" height="150">

Lösung 2 b): Für die Ausblendung aller Elemente des selben Typs (wie z. B. Grafiken = img) notieren Sie in der print.css folgende Anweisung (Typselektor):

img
{
display: none;
}

Im Html-Dokument ist demnach nichts mehr zu notieren, da alle Elemente diesen Typs in der Druckausgabe automatisch ausgeblendet werden!

Problem 3: Wie können bestimmte Bereiche oder Elemente auf der Webseite (Browserausgabe) versteckt werden, die nur in der Druckausgabe erscheinen sollen?
Lösung 3: Für die Ausblendung notieren Sie in der style.css folgende Anweisung (Klassenselektor):

.print
{
display: none;
}

Um beispielsweise einen einzelnen Absatz in der Browserausgabe zu verstecken, welcher nur in der Druckausgabe erscheinen soll, so klassifizieren Sie diesen im entsprechenden Html-Dokument wie folgt:

<p class="print">Dieser Absatz erscheint nur in der Druckausgabe!</p>

komplettes Beispiel ansehen

Spar-Tipp: Wenn Sie Ihre Druckkosten noch etwas mehr senken möchten, so speichern Sie doch einfach Ihre Dokumente oder Webseiten in PDF-Dateien ab anstatt diese auszudrucken. Testen Sie dazu das Freeware-Tool PDFCreator! Das Tool fügt während der Installation einen neuen Druckertreiber hinzu, wodurch dem System einen weiteren Drucker vorgegaukelt wird, kreiert aber lediglich aus jeder Anwendung heraus PDF-Dateien.

Fazit: Das Open Source-Tool ist praktisch, einfach zu bedienen und darüber hinaus eine tolle Alternative zu dem teueren Adobe Acrobat. Selbständige können mit dem PDFCreator übrigens auch für Ihre Kunden Rechnungen im Handumdrehen erstellen!

PDFCreator kostenlos downloaden

[ veröffentlicht am 24.07.2010 ] __________________________

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:11 aktualisiert.