Das Drucken einer Webseite kann frustrierend sein. Zu oft schneiden gedruckte Webseiten Textabschnitte und Gipsanzeigen über den Rest ab. In anderen Fällen senden Sie möglicherweise eine Seite an den Drucker und erhalten nur sauberes weißes Papier. Wenn es wichtig ist, dass der Inhalt Ihrer Website attraktiv und lesbar ist, nachdem er an den Drucker gesendet wurde, müssen Sie Ihre Seite auf die Reise auf Papier vorbereiten.
Erstellen Sie eine separate Version zum Drucken
1
Erstellen Sie eine separate HTML-Seite zum Drucken. Duplizieren Sie den primären Inhalt der gesamten Seite und reduzieren Sie ihn auf hauptsächlich Text. Entfernen Sie unnötige Kopf- und Fußzeilen (diese bestehen häufig aus Links, die auf dem Papier bedeutungslos wären). Entfernen Sie Anzeigen und Menüs aus den Seitenspalten. Entfernen Sie entweder Bilder oder stellen Sie sicher, dass sie in einer geeigneten Größe inline angezeigt werden. Minimieren Sie die Verwendung von Tabellen und die explizite Positionierung von HTML-Elementen. Verwenden Sie nur Schriftarten, die Sie auf fast allen Computern (Times New Roman, Arial, Verdana) finden.
2
Fügen Sie der Hauptseite eine Schaltfläche „Drucken“ hinzu, die auf Ihre druckbare Seite verweist. Die Schaltfläche in HTML könnte ungefähr so aussehen:
3
Testen Sie Ihre druckbare Seite mit mehreren Druckern und nehmen Sie die erforderlichen Anpassungen vor.
Verwenden Sie CSS, um Inhalte druckbarer zu machen
1
Verwenden Sie beim Entwerfen Ihrer Site zwei kaskadierende Stylesheets anstelle von einem. Ein Stylesheet wird verwendet, wenn Ihre Seite auf dem Computer angezeigt wird. Das zweite Stylesheet wird verwendet, wenn Ihre Seite zum Ausdrucken an den Drucker gesendet wird. Legen Sie das Attribut „Medien“ in Ihren Stylesheet-Links fest, um jedes Stylesheet seinen Medien zuzuweisen. Zum Beispiel:
2
Erstellen Sie Tags im Druckstilblatt, um Bilder, Links, Überschriften und andere Elemente auszublenden, die nicht auf der gedruckten Seite angezeigt werden sollen. Fügen Sie dem Druck-Stylesheet nur eine „doNotPrint“ -Klasse hinzu:
.doNotPrint {Anzeige: keine; }}
Setzen Sie in Ihrem HTML-Code den Klassenwert aller Elemente, die auf dem Drucker ausgeblendet werden sollen, auf „doNotPrint“:
Ich lehne es ab, gedruckt zu werden!
Elemente wie dieses werden auf dem Bildschirm angezeigt, jedoch nicht auf der gedruckten Seite.
3
Fügen Sie dem Druck-Stylesheet einen Stil hinzu, der den gesamten Text auf weißem Hintergrund schwarz macht:
Körper {Schriftfamilie: „Times New Roman“, Arial, Serife;
font-size: 12px;
Farbe: #000000;
Hintergrundfarbe: #FFFFFF;
}
Wenn Sie bestimmte Elemente wie Überschriften festlegen (z.
) für nicht druckbare Farben müssen Sie diese auch im Druck-Stylesheet explizit auf Schwarz setzen.
4
Testen Sie Ihre Seite auf einigen Druckern, wenn Sie können, und passen Sie Ihr Design bei Bedarf an.