Konvertieren von XHTML-CSS-Seiten in Druckerseiten
|
In der Vergangenheit bedeutete das Erstellen einer druckerfreundlichen Version einer Webseite, dass eine separate Seite mit geändertem Layout und geänderter Formatierung entworfen werden musste, damit sie beim Drucken gut aussieht. Jetzt können Sie durch die Verwendung von strukturiertem XHTML und CSS denselben Effekt mit viel weniger Aufwand erzielen. Von der Bildschirmdarstellung zum Druckeffekt Die meisten Webseiten gehören der Vergangenheit an. Um eine druckerfreundliche Version einer Webseite zu erstellen, muss eine separate Seite mit geändertem Layout und Formatierung entworfen werden, damit sie zufriedenstellend gedruckt werden kann. 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. |
<<: MySQL-Lösung zum Erstellen eines horizontalen Histogramms
>>: Der gesamte Prozess der lokalen Konfiguration des Reverse-Proxys über Nginx
Artikel empfehlen
Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen
Inhaltsverzeichnis WebAPI DOM DOM-Baum Methode zu...
Detaillierte Erklärung der Ansichten in MySQL
Sicht: Ansichten in MySQL haben viele Ähnlichkeit...
So verwenden Sie Nginx als Load Balancer für MySQL
Hinweis: Die Nginx-Version muss 1.9 oder höher se...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac
MySQL 5.7.13 Installations-Tutorial für Mac, sehr...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...
Beispiel für automatischen Stoppeffekt nach Text-Scrollen
Die Wirkung ist ganz einfach: Kopieren Sie einfach...
Neuer Ansatz zum Umschalten der Tab-Leiste mit zwei Auswahlmöglichkeiten in Vue
Problembeschreibung Wenn wir an einem Projekt arb...
Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse
Im Allgemeinen verfügen Listen über Auswahlfunkti...
Verwendung regulärer Ausdrücke in CSS-Selektoren
Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...
Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container
1. Stellen Sie den Nginx-Dienst im Container bere...
Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.
Manchmal möchten wir nicht, dass der Inhalt unser...
Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR
Um die Tabelle zu verschönern, können Sie für die...
Implementierung der Konvertierung zwischen Unterstreichung und Camel Case in js (mehrere Methoden)
Inhaltsverzeichnis Anwendungsszenarien: Methode 1...
Analysieren Sie das Problem der automatischen Erkennung und Lese-/Schreibüberwachung von Zabbix 5.0-Festplatten
Datenträger automatisch erkennen Konfigurationssc...
Vue implementiert einen Scrollbar-Stil
Zuerst wollte ich den Stil der Bildlaufleiste des...