Drucklayout erstellen und in NOF einbauen
Ein CSS-Drucklayout erstellen und in NOF einbauen geht im Prinzip ganz einfach:
- Druck-CSS-Datei erstellen (Vorlage zum Runterladen weiter unten)
- Druck-CSS-Datei mit FTP auf Ihren Webserver hochladen ins entsprechende Verzeichnis
- Druck-CSS-Datei in NOF referenzieren - Referenzierung in die Zwischen-Head-Tags einfügen (siehe unten)
 Den CSS-Druck-Anforderungsbefehl in die Zwischen-Head-Tags einfügen, damit der
Browser auch wirklich das CSS-Druckstyle lädt:
<link rel="stylesheet" type="text/css" media="print" href="http://www.IhreSeite.de/verzeichnis/print.css">
Referenzierung CSS-Datei: verschiedene Möglichkeiten der Pfadangabe:
absolute URI:
<link rel="stylesheet" type="text/css" media="print" href="http://www.Ihre-Seite.de/html/print.css">
absoluter Pfad
<link rel="stylesheet" type="text/css" media="print" href="/html/print.css">
relativer Pfad
<link rel="stylesheet" type="text/css" media="print" href="./html/print.css">
<link rel="stylesheet" type="text/css" media="print" href="../html/print.css">
Wichtig ist die Klassifizierung media=”print” - ansonsten werden die Elemente auch auf dem Bildschirm ausgeblendet!
Druckformate in der Druck-CSS-Datei
visibility:hidden ist für das Drucklayout nicht geeignet, es bewirkt zwar ebenfalls, dass Elemente nicht angezeigt werden, doch gibt es den für das Element reservierten Raum im Dokument nicht frei, es entstünden daher freie Flächen.
display:none hingegen entfernt Bereiche vollständig aus dem Elementenfluss – so, als wären sie im Quelltext nicht vorhanden.
Die “print.css” muss manuell in den Ordner “html” kopiert werden, entweder gleich in der “lokalen Publizierung” oder mit dem FTP-Programm in den Ordner “hmtl” auf Ihrem Webspace.
Wie verlinkt man eine Print.css korrekt im HTML Header?
Man könnte die CSS-Druckformat auch in den Head-Bereich einer jeden Seite schreiben.
Das müsste dann aber für jede einzelne Seite durchgeführt werden - sehr aufwändig! Zumal, wenn man die Druckformate auch mal ändern möchte. Daher empfiehlt es sich, ein Drucklayout als CSS-Datei auszulagern.
Weiterer Vorteil einer ausgelagerten Druck-CSS gegenüber Einfügung in Headbereich: Änderungen müssen nur einmal zentral ausgeführt, und nicht jede Seite neu angepackt werden.
 Vorlage CSS-Datei Drucklayout als zip-Datei runterladen
|
