Konvertieren von XHTML-CSS-Seiten in Druckerseiten
|
<br />In der Vergangenheit musste zum Erstellen einer druckerfreundlichen Version einer Webseite eine separate Seite mit geändertem Layout und geänderter Formatierung entworfen werden, damit sie beim Drucken zufriedenstellend aussah. Jetzt können Sie durch die Verwendung von strukturiertem XHTML und CSS denselben Effekt mit viel weniger Aufwand erzielen. Von der Bildschirmanzeige zum Ausdrucken Die meisten Webseiten sind für die Anzeige auf einem Computerbildschirm konzipiert. Manchmal müssen Benutzer jedoch bestimmte Seiten ausdrucken, möglicherweise um sie langfristig aufzubewahren oder als praktische Offline-Referenz zu verwenden. Das Problem besteht darin, dass viele der Funktionen, die eine Webseite auf einem Farbbildschirm eindrucksvoll und farbenfroh aussehen lassen, auf der gedruckten Version der Webseite nicht auf die gleiche Weise funktionieren – insbesondere, wenn der Drucker schwarzweiß ist. Farbkombinationen verlieren beim Herabstufen auf Graustufen an Kontrast; Grafiken wirken verzerrt und das Drucken dauert zu lange; und Navigationsschaltflächen, die auf einer Webseite so wichtig sind, sind auf einer gedruckten Seite nutzlos. Um diese Probleme zu lösen, erstellen Webentwickler häufig eine druckerfreundliche Version ihrer Seiten, um die Besucher zum Ausdrucken zu verleiten. Druckerfreundliche Versionen enthalten normalerweise denselben Inhalt wie die Hauptwebseite, verzichten jedoch auf die meisten Grafiken, Hintergründe und Navigationselemente. Die Seite konvertiert die Farbe außerdem in eine Form, um ein akzeptables Graustufenbild zu erzeugen. Die CSS-Lösung Ein Vorteil der Verwendung strukturierter XHTML-Auszeichnungen und CSS-Formatierung zum Trennen von Inhalt und Präsentation besteht darin, dass Sie den Inhalt durch Ändern der CSS-Stile 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 ein Bildschirm-Stylesheet als auch ein Druck-Stylesheet in dasselbe XHTML-Dokument einbinden. Es ist daher nicht erforderlich, eine separate druckerfreundliche Seite zu erstellen, sondern nur ein druckerfreundliches Stylesheet. Wenn Sie Ihrem Linkcode eine Multimediadatei hinzufügen, teilen Sie dem Browser mit, welche CSS-Regeln er für die Bildschirmausgabe befolgen oder ignorieren 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: <linkrel="stylesheet"type="text/css"media="screen"href="mysite-screen.css"/> <linkrel="stylesheet"type="text/css"media="drucken"href="mysite-print.css"/> Wenn Sie ältere Browser unterstützen müssen, müssen Sie bei den CSS1-Mediendeskriptoren „Bildschirm“ und „Druck“ bleiben. Sie schließen sich gegenseitig aus, sodass ein Browser ein Druck-Stylesheet beim Generieren einer Seite für die Bildschirmanzeige ignoriert und umgekehrt. Daher muss jedes Stylesheet dieselben Stilselektoren enthalten, jedoch mit unterschiedlichen Regeldeklarationen, um Seitenstile für unterschiedliche Ausgabegeräte zu generieren. CSS vereinfachen Wenn Sie bereit sind, auf die Unterstützung älterer Browser zu verzichten und davon ausgehen, dass Ihre Benutzer Browser verwenden, die CSS2 unterstützen (z. B. IE5 und höher oder Netscape 6 und höher), können Sie Ihren CSS-Code durch die Verwendung des neuen All Media Descriptors erheblich vereinfachen. Hier ist ein Beispiel für einen Link mit CSS2-Mediendeskriptoren: Nachfolgend der zitierte Inhalt: <linkrel="stylesheet"type="text/css"media="alle"href="mysite-all.css"/> <linkrel="stylesheet"type="text/css"media="print"href="mysite-print2.css"/> Diese Links sind fast identisch wie zuvor. Der Unterschied besteht darin, dass die CSS-Datei Stile für 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. CSS-Dateien, die nur mit media="print" verknüpft sind, können viel kleiner sein, da die Seite alle Stile von allen Mediendateien erbt und es nicht erforderlich ist, diese Stile in den Druckmediendateien zu duplizieren. Die einzigen Stile, die in einer CSS-Datei für Druckmedien benötigt werden, sind diejenigen, die den Seitenstil für die Druckausgabe ändern oder ergänzen. Im Allgemeinen ist dies nichts anderes als eine Stiländerung, die die Anzeige von Divs mit Grafiken und Navigationsinhalten deaktiviert und die Breiten- und Randeinstellungen des Body-Tags und des Haupt-Divs durch für die Druckausgabe geeignete Einstellungen ersetzt. Dieser Trick funktioniert, weil alle Medien-CSS-Dateien und die Druck-CSS-Dateien in denselben kaskadierenden Stilregeln kombiniert werden. Daher ist die Reihenfolge, in der Sie diese CSS-Dateien verknüpfen, sehr wichtig. Alle Mediendateilinks müssen vor den Printmediendateilinks platziert werden. Hier einige Tipps zur Verwendung von CSS-Dateien für Printmedien: Wenn Sie die Anzeige eines Div verbieten möchten, müssen Sie display:none anstelle von visibility:hidden verwenden. Punkte (pt) und Zoll (in) sind keine korrekten Maßeinheiten für die Bildschirmanzeige, jedoch für die Druckausgabe. Verwenden Sie in Ihren Druckmediendateien genau dieselben Selektorfunktionen, die Sie in allen Ihren Mediendateien verwenden. Wenn Sie beispielsweise div#sidenav verwenden, um das Div mit der ID sidenav in allen Mediendateien auszuwählen, erreichen Sie Ihr Ziel möglicherweise nicht, wenn Sie #sidenav in Druckmediendateien verwenden. Vergessen Sie nicht, Überschreibungen für Regeldeklarationen, die sich von einer Datei zur anderen ändern, explizit durchzusetzen. Wenn Sie beispielsweise für ein Element in allen Medien eine Innenauffüllung festlegen und diese in der Druckausgabe entfernen möchten, reicht es nicht aus, in der Druckmediendatei einen Stil hinzuzufügen, um die Innenauffüllungsdeklaration zu ignorieren – Sie müssen „padding: 0pt“ explizit festlegen, um die vorherige Einstellung zu überschreiben. Wenn Sie einen Grafikeditor wie Dreamweaver verwenden, können Sie eine Vorschau der generierten Seite anzeigen, wie sie auf dem Bildschirm und nicht als gedruckte Ausgabe angezeigt wird. Um eine Vorschau des Druckstils im Design-Ansichtsfenster von Dreamweaver anzuzeigen, ändern Sie den Link zur CSS-Datei des Druckmediums in media="screen". Dadurch können Sie eine Vorschau der CSS-Stile in der Druckmediendatei anzeigen. Vergessen Sie nicht, den Mediendeskriptor vor dem Veröffentlichen Ihrer Seite wieder in media="print" zu ändern. Wenn Sie Ihren Besuchern eine druckerfreundliche Webseite bereitstellen müssen, müssen Sie nicht mehr eine separate Version der Originalseite 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. |
<<: React kapselt die globale Bullet-Box-Methode
>>: Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang
Artikel empfehlen
So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System
1. Verwenden Sie das Playbook von Ansible, um htt...
Sieben Lösungen für klassische verteilte Transaktionen zwischen MySQL und Golan
Inhaltsverzeichnis 1. Grundlegende Theorie 1.1 Tr...
React implementiert eine mehrkomponentige Wertübertragungsfunktion über Conetxt
Die Wirkung dieser Funktion ist ähnlich wie vue的p...
MySQL-Variablenprinzipien und Anwendungsbeispiele
In der MySQL-Dokumentation können MySQL-Variablen...
Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
<br />In Gästebüchern, Foren und anderen Ort...
mysql bestimmt, ob die aktuelle Zeit zwischen der Start- und Endzeit liegt und ob die Start- und Endzeit leer sein dürfen
Inhaltsverzeichnis Anforderung: Abfrage laufender...
Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird
Vorwort Wir alle wissen, dass MySQL-Abfragen den ...
So installieren Sie Docker CE auf Ubuntu 18.04 (Community Edition)
Deinstallieren Sie alte Versionen Sollten Sie zuv...
Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen
Inhaltsverzeichnis Vorwort Mehrere gängige Bitope...
RGB-Farbtabellensammlung
RGB-Farbtabelle Farbe Englischer Name RGB 16 Farb...
Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy
Einführung 1. <iframe>-Tag: Ein Iframe ist ...
Implementierung von Debugging-Code über den Nginx-Reverse-Proxy
Hintergrund Heutzutage werden die Projekte des Un...
Eine kurze Diskussion über die Simulation von Multithread- und Multiprozess-Abstürzen in Linux
Abschluss: Wenn in einer Multithread-Umgebung ein...
MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen
Hintergrund: Wenn es in MySQL eine begrenzte Eben...
Prozess des Klassenlademechanismus von Tomcat und Quellcodeanalyse
Inhaltsverzeichnis Vorwort 1. Strukturdiagramm de...