Konvertieren Sie XHTML-CSS-Seiten in Druckerseiten_HTML/Xhtml_Webseitenproduktion

Früher bedeutete die Erstellung einer druckerfreundlichen Version einer Webseite, eine separate Seite mit geändertem Layout und Formatierung zu entwerfen, damit sie beim Drucken gut aussieht. Durch die Verwendung von strukturiertem XHTML und CSS können Sie jetzt den gleichen Effekt mit weitaus weniger Aufwand erzielen.
Von der Bildschirmanzeige bis zum Druckeffekt
Die meisten Webseiten sind für die Anzeige auf einem Computerbildschirm konzipiert. Manchmal müssen Benutzer jedoch bestimmte Seiten ausdrucken, vielleicht um sie langfristig aufzubewahren oder sie als praktische Offline-Referenz zu verwenden.
Das Problem besteht nun darin, dass viele der Funktionen, die Webseiten auf einem farbigen Computerbildschirm auffällig und farbenfroh aussehen lassen, auf einer gedruckten Version einer Webseite nicht die gleiche Wirkung haben – insbesondere, wenn der Drucker schwarz ist Weiß. . Bei der Herabstufung auf Graustufendruck verlieren Farbkombinationen an Kontrast; Grafiken werden zu lange zum Ausdrucken benötigt; Navigationsschaltflächen, die auf Webseiten eine wichtige Rolle spielen, werden auf der Seite ebenfalls nicht richtig gedruckt.
Um diese Probleme zu überwinden, entwerfen Webentwickler häufig eine druckerfreundliche Version der Seite, damit Besucher den Wunsch verspüren, sie auszudrucken. Druckerfreundliche Versionen enthalten normalerweise denselben Inhalt wie die Hauptwebseite, lassen jedoch die meisten Grafiken, Hintergrund- und Navigationselemente weg. Die Seite wandelt auch Farben in eine Form um, um ein akzeptables Graustufenbild zu erzeugen.
CSS-Lösung
Ein Vorteil der Verwendung von strukturiertem XHTML-Markup und CSS-Formatierung zur Trennung von Inhalt und Präsentation besteht darin, dass Sie den Inhalt durch Ändern des CSS-Stils problemlos neu formatieren können. Um eine druckerfreundliche Seite zu erstellen, müssen Sie daher eine andere CSS-Datei mit derselben XHTML-Seite verknüpfen.
Sie können sowohl das Bildschirm-Stylesheet als auch das Druck-Stylesheet in derselben XHTML-Datei verknüpfen, sodass keine separate druckerfreundliche Seite, sondern nur ein druckerfreundliches Stylesheet erstellt werden muss. Wenn Sie eine Multimedia-Datei in den Linkcode einbinden, teilen Sie dem Browser mit, welche CSS-Regeln er für die Bildschirmausgabe befolgen oder ignorieren soll und welche Regeln er für die Druckausgabe verwenden soll.
Hier ist ein Beispiel für die Verknüpfung mit einem Paar CSS-Dateien:
Nachfolgend der zitierte Inhalt:


Wenn Sie ältere Browser unterstützen müssen, müssen Sie sich an die CSS1-Mediendeskriptoren screen and print halten. Sie schließen sich gegenseitig aus, daher ignorieren Browser Druck-Stylesheets beim Generieren von Seiten für die Bildschirmanzeige und umgekehrt. Daher muss jedes Stylesheet denselben Stilselektor enthalten, aber über unterschiedliche Regeldeklarationen verfügen, um Seitenstile separat für verschiedene Ausgabegeräte zu generieren.
　CSS vereinfachen
Wenn Sie bereit sind, die Pflege alter Browserversionen aufzugeben und davon auszugehen, dass Ihre Benutzer Browser verwenden, die CSS2 unterstützen (wie IE5 und höher oder Netscape6 und höher), Sie können den neuen All-Media-Deskriptor verwenden, um den CSS-Code erheblich zu vereinfachen.
Hier ist ein Beispiel für einen Link, der CSS2-Mediendeskriptoren verwendet:
Nachfolgend der zitierte Inhalt:


Diese Links sind fast identisch mit den vorherigen; der Unterschied besteht darin, dass die CSS-Datei die Stile für die Printmedien enthält.
Mit media="all" in einer CSS-Datei verknüpfte Stile können auf die Bildschirmanzeige, den Druck und alle anderen Medien angewendet werden, sodass Sie alle von Ihnen erstellten Stile in diese Datei einfügen können. Die allein mit „media="print" verknüpfte CSS-Datei kann viel kleiner sein, da die Seite alle Stile von allen Mediendateien erbt und es daher nicht erforderlich ist, diese Stile in den Druckmediendateien zu duplizieren.
Die einzigen Stile, die in der CSS-Datei für Druckmedien erforderlich sind, sind diejenigen, die Seitenstile für die Druckausgabe ändern oder hinzufügen. Im Allgemeinen handelt es sich hierbei um nichts anderes als Stile, die die Anzeige von Divs mit Grafiken und Navigationsinhalten unterdrücken und die Breiten- und Randeinstellungen des Body-Tags und des Haupt-Divs durch für den Ausdruck geeignete Einstellungen ersetzen.
Dieser Trick funktioniert, weil alle Medien-CSS-Dateien und Druckmedien-CSS-Dateien in denselben kaskadierenden Stilregeln zusammengefasst sind. Daher ist die Reihenfolge, in der diese CSS-Dateien verknüpft sind, sehr wichtig. Alle Mediendatei-Links müssen vor dem Druckmediendatei-Link platziert werden.
Hier sind einige Tipps für die Verwendung von CSS-Dateien für Printmedien:
Wenn Sie die Anzeige eines Div deaktivieren möchten, verwenden Sie display:none anstelle von Visibility:hidden.
Weder Punkt (pt) noch Zoll (in) sind korrekte Maßeinheiten für die Bildschirmanzeige, wohl aber korrekte Maßeinheiten für die Druckausgabe.
Die Selektoren, die Sie in Druckmediendateien verwenden, sollten genau mit den Selektoren übereinstimmen, die Sie in allen Mediendateien verwenden. Wenn Sie beispielsweise div#sidenav verwenden, um das Div mit der ID sidenav in allen Mediendateien auszuwählen, wird die Verwendung von #sidenav in gedruckten Mediendateien Ihr Ziel möglicherweise nicht erfolgreich erreichen.
Vergessen Sie nicht, Deklarationen von Überschreibungsregeln, die sich von einer Datei zur anderen ändern, explizit zu erzwingen. Wenn Sie beispielsweise den Abstand für ein Element in allen Mediendateien festlegen und den Abstand in der Druckausgabe entfernen möchten, reicht es nicht aus, einen Stil hinzuzufügen, der die Abstandsdeklaration in der Druckmediendatei ignoriert – Sie müssen den Abstand explizit festlegen :0pt, um die vorherige Einstellung zu ersetzen.
Wenn Sie einen Grafikeditor wie Dreamweaver verwenden, können Sie eine Vorschau der generierten Seite auf dem Bildschirm statt als gedruckte Ausgabe anzeigen. Um eine Vorschau der Druckstile im Design-Ansichtsfenster von Dreamweaver anzuzeigen, ändern Sie den Link zur Druckmedien-CSS-Datei in media="screen". Dadurch können Sie CSS-Stile in Druckmediendateien in der Vorschau anzeigen. Vergessen Sie nicht, den Mediendeskriptor wieder in media="print" zu ändern, bevor Sie Ihre Seite veröffentlichen.
Wenn Sie Ihren Besuchern eine druckerfreundliche Webseite bereitstellen müssen, müssen Sie keine separate Version der Originalseite mehr erstellen. Jede XHTML/CSS-Seite kann in eine druckerfreundliche Seite umgewandelt werden, indem ein Link zu einem CSS-Stylesheet mit dem Mediendeskriptor media="print" hinzugefügt wird.