Drucken mit druckerfreundlichem Layout

[RalfB]

Bisher habe ich im unteren Bereich der Seite das drucken mit den Befehl angeboten:

Code: Select all

<a href="javascript:window.print()">drucken</a>

Dann wird aber immer alles mit ausgedruckt, Logo, Keyvisua, Menueleiste etc. Also alles eben so wie es auf dem Monitor sichtbar ist.

Was muss ich da reinschreiben, damit der Ausdruck im druckerfreundlichem Layout gemacht wird, nach dem Druck aber die Seite wieder "normal" angezeigt wird?

[update]

Hier wirst Du fündig: http://www.phpwcms-howto.de/wiki/doku.p ... B%5D=print

[top]

Wenn so was mal gewünscht ist, ziehe ich es vor eine Reine CSS-Lösung für die Druckausgabe zu nutzen.
Also eine ergänzende CSS-Datei welche sich durch media="print" nur auf Ausdrucke (und die Druckvorschau) auswirkt.
http://www.css4you.de/wscss/css07.html

Alles was nicht gedruckt werden braucht setzte ich auf display: none; (z. B. Navigationen, Teaser zu ähnlichen Artikeln und überflüssige Deko).
Sollten dadurch unschöne Lücken entstehen, lassen die sich meistens durch überschreiben von unnötig gewordenen Abstandsangaben schließen.

Dadurch bekommt der Nutzer auch dann die optimierte Druckversion zu sehen, wenn er die Druckfunktion seines Browsers verwendet.

So braucht man sich ganz nebenbei auch weniger Gedanken wegen Duplicate Content oder ungewünschter Verlinkung zur Druckversion machen.

Voraussetzung ist natürlich ein aufgeräumter Quellcode und der konsequente Verzicht von inline-CSS.

[RalfB]

Im Ordner /template/inc_css/ liegt bei mir schon ein "Druckerlaypout" --> print_layout.css
Das könnte ich doch benutzen. oder?
Und wie binde ich das richtig ein?

[top]

Den Mehraufwand gönne ich mir nur, wenn der Wunsch vom Kunden selbst gestellt wird. Das kommt leider nur selten vor. (Wann ich das das letzte mal gemacht habe kann ich mich schon nicht mehr erinnern.)

Ich bevorzuge es alles in eine große CSS-Datei zu packen um die Anzahl der Serverzugriffe gering zuhalten. (Und bei phpwcms kann ich dann auch Kleinigkeiten bequem im Backend erledigen.)

Per Media-Queries lassen sich umgekehrt auch Bereiche für den Druck einblenden, die in der normalen Webansicht nicht angezeigt werden sollen.

Code: Select all

<p><a href="http://www.phpwcms.de">Zum gutesten CMS wo gibt! <span class="drucklink">http://www.phpwcms.de</span></a></p>

Code: Select all

p {
  color: gray;
}
p a span.drucklink{
  display: none; 
}
/* am Ende der normalen CSS-Datei */
@media print {
  #meinetollenavi,
  .teserkasten {
    display: none;
  }
  p {
    color: black; 
  }
  p a span.drucklink{
    display: inline; 
    color: blue;
    text-decoration: underline;
  }
}

[RalfB]

Per Media-Queries lassen sich umgekehrt auch Bereiche für den Druck einblenden, die in der normalen Webansicht nicht angezeigt werden sollen.

Code: Select all

<p><a href="http://www.phpwcms.de">Zum gutesten CMS wo gibt! <span class="drucklink">http://www.phpwcms.de</span></a></p>

So jetzt noch einmal für Dummies. OK. Also den Code setzte in die Vorlage z.B. in den Fußteil ein. Dann habe ich dort im Frontend einen Link mit dem Text "Zum gutesten CMS wo gibt!" zur Seite "http://www.phpwcms.de",
der wenn ich ihn ausführe, meine Seite verlässt und die Seite "http://www.phpwcms.de" anzeigt.

Code: Select all

p {
  color: gray;
}
p a span.drucklink{
  display: none; 
}
/* am Ende der normalen CSS-Datei */
@media print {
  #meinetollenavi,
  .teserkasten {
    display: none;
  }
  p {
    color: black; 
  }
  p a span.drucklink{
    display: inline; 
    color: blue;
    text-decoration: underline;
  }
}

Und diesen Code kopiere ich mir ans Ende meiner Standard css.

Von Drucken und Druck"ansicht" nix zu sehen.

[Oliver Georgi]

Für die korrekte Druckansicht existiert der BBCode

Code: Select all

[PRINT]Drucken[/PRINT]

Des Weiteren kann die Druckansicht gesteuert werden mittels:

• inc_css/print.css
• inc_default/print.tmpl
• <!--NO_PRINT_START//--><!--NO_PRINT_END//-->