Freitag, 10. Februar 2012

07:47

 

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 extra eine 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  zurück | weiter 
Diese Seite wurde zuletzt am 06.09.2010 13:08 aktualisiert.
© 2007 - 2012 Copyright by www.homepage-vorlagen-webdesign.de | Hosted by 1&1

Anzeigen

Marktplatz

Cabanova Kostenlos: die eigene Homepage direkt online ohne Programmierkenntnisse erstellen, in Flash und HTML mit MMS to Website, Bildergalerie, Gästebuch, Counter ...
[ mehr Infos ]

Schnäppchen in dem Bereich Computer & Co.: Vergleichen Sie die Top Angebote verschiedener Anbieter!
[ mehr Infos ]

Klarmobil.de Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]

Eigene Homepage mit Jimdo - schnell & einfach selbst erstellt incl. eigener Domain für nur EUR 5 / Monat [ mehr Infos ]

WebPack® M 3.0 mit 2 GB Webspace * 100 Subdomains * Traffic-Flatrate * 600 E-Mail-Adressen * 10 FTP-Zugängen * 2 Datenbanken * eigene CGI-Skripte * Webmailer * PHP/Ruby/Python- für nur EUR 3,49*!
[ mehr Infos ]

Virtual Server Windows 4.0 - leistungsstarke VServer mit garantierten RAM-Ressourcen und Prozessor-Power bei vollen Admin-Rechten!
[ mehr Infos ]