Erstellen Sie in wenigen Minuten ein angepasstes Druckstilsheet

Sie haben es schon einmal gesehen: Sie haben ein wunderschönes Layout entworfen und jemand geht mit einem Ausdruck in Ihr Büro und Sie erschrecken auf der Website Ihrer harten Arbeit, die vom Drucker schrecklich falsch dargestellt wird. Gedruckte Versionen eines Webdesigns sind selten das, was Sie erwarten. Sie nehmen zusätzliche Optimierungen und einige Inszenierung. Ein Verständnis dafür, wie eine Druckansicht eingerichtet wird, damit der Inhalt wie erwartet herauskommt, ist nicht zu schwierig, wenn Sie den Dreh raus haben. In diesem Artikel zeige ich Ihnen, wie Sie ein Stylesheet einrichten, um Ihre Inhalte auf einer Website auszudrucken. Ich werde eine WordPress -Site als Ausgangspunkt verwenden, da es sich um ein so beliebtes Framework handelt, aber dies funktioniert für jede Website, solange Sie dieselben Prinzipien anwenden.

Kurzer Hinweis: Es gibt keine einfache Möglichkeit, das Web zum perfekten Drucken zu machen. Sie müssen dort hineinspringen und jedes Element durcharbeiten, das Sie anpassen möchten. Ich gehe zunächst zu einer Seite und drucke sie, um zu sehen, was ich anfange. Dann bricht ich jedes Element oder strukturelle Abschnitt durch das, was ich brauche und was sich ändern muss. Es braucht Zeit, aber es lohnt sich.

Benötigen Sie eine Druckversion?

Das erste, was ich mich frage, bevor ich eine gedruckte Version einer Site erstellt, ist, ob ich sogar eine brauche oder nicht. Der akribische Designer in mir neigt dazu, sich einzuschüttet und ich neige in den meisten Fällen zu „Ja“. Oft besteht oft kein Bedarf an einem Druckstylesheet, abhängig von der Art und dem Zweck Ihrer Website. Was ist ihr Ziel, wenn Leute eine Seite von Ihrer Website drucken? Oft wollen sie nur Ihren Inhalt in der Hand und das ist alles - sie möchten nicht alle Grafiken, hübschen Layouts, Header, Seitenleisten und dergleichen. (Und sie möchten möglicherweise nicht ihre teure Tinte für nicht wichtige Elemente verwenden.) Überlegen Sie also, was tatsächlich benötigt wird.

Überlegungen aus Druck

Ich wandelte meinen Text immer in Schwarz um, damit der Drucker versteht, dass keine Schattierung erforderlich ist (was eine große Tintensparung ist). Ich wechsle auch von Schriftgrößen in Pixeln zu Punkten. Wenn Sie versuchen, Schriftgrößen zu entsprechen, kann dies eine kleine Herausforderung sein, aber hier ist ein Slick -Diagramm, mit dem Sie schnell von px in pt konvertieren, vorausgesetzt, Sie haben eine Basis Schriftgröße von 16px:

• pixels => Punkte
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8Pt
• 12px => 9Pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16Pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18Pt

zielen auf Ihren Inhalt

WordPress hat normalerweise eine integrierte Struktur, die so aussieht:

1. Header
2. Inhalt
3. Kommentare
4. Seitenleiste
5. Fußzeile

Jede Seite enthält diese strukturellen Elemente, auf die Sie leicht mit CSS abzielen können. Auch wenn Ihre Website über diese genaue Struktur nicht verfügt, besteht der Schlüssel darin, Ihr Druckstylesheet einfach für Ihre Zwecke anzupassen. Zielen Sie jede Struktur in CSS mit #Header für diese Abschnitte mit einer ID oder .Header, wenn es sich um eine Klasse handelt. Zuletzt und möglicherweise am wichtigsten ist, dass wir die @media print CSS verwenden, um zu definieren, wann bestimmte CSS -Stile ordnungsgemäß angewendet werden. Um beispielsweise alle Inhalte aus Ihren Druckstilen zu entfernen, würden Sie in Ihrem Stil etwas so Einfaches tun. [SourceCode Language = ”CSS”] @media print { #header {display: keine;} #Content {display: Keine;} #KORMMENTS {Anzeige: Keine;} #sideBar {display: keine;} #footer {display: keine;} .Site-Dezeskription {Anzeige: Keine;} .Site-title {display: keine;} } [/Sourcecode] Dies funktionierte für das zwölfundzwanzig -Thema für WordPress und gibt mir zunächst eine schöne, saubere Blankenteile. Wenn Sie Schwierigkeiten haben, ein Stragglerelement zu entfernen, klicken Sie am einfachsten auf das Element in Ihrem Browser und finden Sie es in Ihrem Quelldokument. Chrome verfügt über die Funktion „Inspect Element“, die direkt zum Code für dieses Element springt und es sehr einfach macht, das beleidigende Element zu finden. Suchen Sie entweder nach der ID oder der Klassendefinition und richten Sie sie anschließend entsprechend ab. In diesem Beispiel haben wir diesen Straggler möglicherweise in unseren Drucken aufgetaucht. Hier sehen Sie die ID: Wir können jetzt dieses Element mit den folgenden CSS ansprechen: [SourceCode Language = ”CSS”] #Contact-Popup {Anzeige: Keine;} [/Sourcecode]

Seite bricht

Die Drucker unterteilen Ihre Inhalte in Seiten, vorausgesetzt, Sie haben mehr als eine Seite zum Drucken. Sie können den Browser angeben, dass er an bestimmten Stellen Seitenunterbrechungen vermeiden soll. Auf der Seite W3.org können Sie alles über Seitenausbrüche in CSS lesen. Kurz gesagt, Ihre Optionen sind wie folgt:

• Seitenausbruch vor: Immer | Vermeiden Sie - immer/vermeiden Sie Seitenunterbrechungen vor dem Artikel
• Seitenbrecher nach After: Immer | Vermeiden Sie - immer/vermeiden Sie die Seitenbrüche nach dem Artikel
• Seiten-Break-Inside: Immer | Vermeiden Sie - immer/vermeiden Sie Seitenbrüche in der Mitte des Elements

Denken Sie daran, dass die Seite bricht nur für Blockinhalte. Ein häufiges Beispiel ist eine Liste - Sie möchten möglicherweise Listenblöcke erstellen und dann verhindern, dass Seitenpausen in der Mitte einer Liste stattfinden. Die Ausnahme ist Text, den Sie als Block definieren können und dann die Seitenunterbrechungen verwenden, um die Art und Weise zu ändern, wie er druckt, aber in der Regel sollte der Text fließen, und Sie können dem Browser herausfinden, wo er platziert werden kann. Beispielfall

Nachdem wir einen leeren Schiefer haben, fügen wir die strukturellen Stücke hinzu, die wir beim Drucken tatsächlich anzeigen möchten. Der Inhaltsabschnitt ist ein offensichtlicher Kandidat. Fügen wir ihn also wieder ein und konvertieren die Absatz -Schriftgröße in Punkte: [SourceCode Language = ”CSS”] @media print { #Content p { Schriftgröße: 11pt; Farbe: Schwarz; }#Content img { Anzeige: Block; Page-Break-After: Vermeiden Sie; Page-Break-Inside: Vermeiden Sie; } #Content ul, li { Anzeige: Block; Page-Break-Inside: Vermeiden Sie; } #header {display: keine;} #KORMMENTS {Anzeige: Keine;} #sideBar {display: keine;} #footer {display: keine;} .Site-Dezeskription {Anzeige: Keine;} .Site-title {display: keine;} } [/Sourcecode] Ich habe die Anzeige entfernt: keine; Inhalt CSS und unseren Absatztext von 14px auf 11PT konvertiert. Sie können jedes Element Ihrer Seite durchgehen und jeden nur zum Drucken dieser Methodik anpassen.

up

Das Ausgehen von Web -zu -Drucken kann frustrierend sein, aber die @media print Medienabfrage ermöglicht es uns, sehr zielgerichtet zu werden, wie das, was Elemente gedruckt werden und wie sie gedruckt werden. Es gibt keine wirkliche Abkürzung. Wenn Sie Ihre Website im Druck gut aussehen müssen, müssen Sie wahrscheinlich eine separate CSS -Definition auf einer Elementebene erstellen, bis sie perfekt ist. Sind Druckstilsheets Teil Ihres Standard-Designprozesses, oder betrachten Sie sie als zusätzliche Ergänzung zu einer gründlich gestalteten Website? ?

häufig gestellte Fragen zum Erstellen eines angepassten Druckstilsheets

Was ist die Bedeutung des Erstellens eines Druckstylesheetes? Sie können steuern, wie die Seite beim Drucken aussieht und unnötige Elemente wie Navigationsmenüs, Hintergrundfarben und Anzeigen entfernen. Dies spart nicht nur Tinte, sondern stellt auch sicher, dass sich die gedruckte Version auf den wesentlichen Inhalt konzentriert, wodurch das Lesen und Verständnis einfacher ist. Kann beim Drucken einer Webseite bestimmte Elemente ausblenden, indem Sie die Eigenschaft "Anzeige: None" in Ihrem Druckstylesheet verwenden. Wenn Sie beispielsweise das Navigationsmenü ausblenden möchten, würden Sie das Element ansprechen, das das Menü enthält, und die Anzeigeeigenschaft auf keine festlegen. Dadurch wird sichergestellt, dass das Element nicht gedruckt wird.

Kann ich die Schriftgröße und Farbe in der Druckversion einer Webseite ändern? Druckversion einer Webseite drucken. Sie können dies tun, indem Sie das Körperelement in Ihrem Druckstylesheet abzielen und die gewünschte Schriftgröße und -farbe festlegen. Dies kann nützlich sein, wenn Sie sicherstellen möchten, dass die gedruckte Version Ihrer Webseite leicht zu lesen ist. Verwenden des Attributs "Medien" im Linkelement, das auf Ihr Stylesheet verweist. Das Medienattribut sollte auf "Drucken" festgelegt werden, um anzuzeigen, dass das Stylesheet beim Drucken der Webseite verwendet werden sollte. Auf diese Weise können Sie ein Stylesheet für die Bildschirmanzeige und eine andere für die Druckversion haben.

Kann ich die Seitenausbrüche in der Druckversion einer Webseite steuern? Sie können dies tun, indem Sie die Eigenschaften „Page-Break-vorne“ und „Seitenausbruch“ in Ihrem Druckstylesheet verwenden. Mit diesen Eigenschaften können Sie angeben, wo Seitenunterbrechungen stattfinden sollten, und helfen dabei, unangenehme Pausen in der Mitte Ihres Inhalts zu verhindern.

Wie kann ich mein Druckstylesheet testen? Verwenden Sie die Funktion zur Druckvorschau in Ihrem Webbrowser. Auf diese Weise wird angezeigt, wie Ihre Webseite beim Drucken aussehen wird, sodass Sie die erforderlichen Anpassungen an Ihrem Druckstylesheet vornehmen können. Ja, Sie können Header und Fußzeilen in die Druckversion einer Webseite aufnehmen. Sie können dies tun, indem Sie die Eigenschaft "Position: Fix" in Ihrem Druckstilsheet verwenden. Dadurch wird sichergestellt, dass die Header und Fußzeilen auf jeder gedruckten Seite angezeigt werden. Die 'Float' -Eigenschaft in deinem Druckstylesheet. Auf diese Weise können Sie die Positionierung von Elementen auf der Seite steuern und sicherstellen, dass sie so angeordnet sind, dass sie beim Drucken sinnvoll sind. >

Ja, Sie können die Ränder und Polsterung in der Druckversion einer Webseite steuern. Sie können dies tun, indem Sie die Eigenschaften „Rand“ und „Polsterung“ in Ihrem Druckstilsheet verwenden. Auf diese Weise können Sie sicherstellen, dass Ihr Inhalt ordnungsgemäß verteilt ist und einfach zu lesen ist, wenn Sie gedruckt werden. Druckversion einer Webseite drucken. Sie sollten sich jedoch darüber im Klaren sein, wie sie beim Drucken aussehen werden. Möglicherweise möchten Sie Hintergrundbilder entfernen und sicherstellen, dass wichtige Bilder klar und leicht in Schwarzweiß zu sehen sind. Sie können die Anzeige von Bildern mithilfe der Eigenschaft "Anzeige" in Ihrem Druckstylesheet steuern.

Das obige ist der detaillierte Inhalt vonErstellen Sie in wenigen Minuten ein angepasstes Druckstilsheet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!