In der Vergangenheit bedeutet das Erstellen einer druckerfreundlichen Version einer Webseite, eine separate Seite mit Layout und Formatierung zu entwerfen, damit Sie beim Drucken zufriedenstellende Ergebnisse erzielen können. Durch die Verwendung strukturierter XHTML und CSS können Sie nun den gleichen Effekt mit viel weniger Aufwand erzielen. Die meisten Webseiten von Bildschirmanzeige bis zum Druckeffekt
In der Vergangenheit bedeutet das Erstellen einer druckerfreundlichen Version einer Webseite, eine separate Seite mit Layout und Formatierung zu entwerfen, damit Sie beim Drucken zufriedenstellende Ergebnisse erzielen können. Durch die Verwendung strukturierter XHTML und CSS können Sie nun den gleichen Effekt mit viel weniger Aufwand erzielen.
Vom Bildschirmanzeige zum Druckeffekt
Die meisten Webseiten sind so konzipiert, dass sie für die Anzeige auf Computerbildschirmen geeignet sind. Manchmal müssen Benutzer jedoch bestimmte Seiten ausdrucken, möglicherweise nur, um einen langfristigen Aufzeichnungen zu führen oder sie als bequeme Offline-Referenz zu verwenden.
Das Problem ist nun, dass viele der Funktionen, die die Webseite auf dem Computer -Farbbildschirm auffällig und farbenfroh aussehen lassen, nicht den gleichen Effekt auf die gedruckte Version der Webseite anzeigen können - insbesondere wenn der Drucker schwarz und weiß ist. Wenn die Farbkombination zum (ursprünglichen) Kontrasteffekt verliert; Die Grafik sieht verzerrt aus und dauert zu lange zum Drucken. Die Navigationsschaltflächen, die auf der Webseite eine wichtige Rolle spielen, sind auf der Druckseite nutzlos.
Um diese Probleme zu überwinden, entwerfen Web-Ersteller häufig eine druckerfreundliche Version der Seite, damit die Besucher den Wunsch zum Drucken haben. Druckerfreundliche Versionen enthalten normalerweise den gleichen Inhalt wie die Hauptwebseite, aber die meisten Grafiken, Hintergründe und Navigationselemente werden weggelassen. Die Seite wandelt auch Farbe in irgendeine Form um, um akzeptable Graustufenbilder zu erzeugen.
CSS -Lösung
Ein Vorteil der Trennung von Inhalten und Darstellung unter Verwendung strukturierter XHTML -Tags und CSS -Formate besteht darin, dass Sie durch Ändern des CSS -Stils den Inhalt leicht neu formatieren können. Das Erstellen einer druckerfreundlichen Seite besteht daher darin, eine andere CSS-Datei mit derselben XHTML-Seite zu verknüpfen.
Sie können das Bildschirmstilblatt und das Druckstilblatt gleichzeitig mit derselben XHTML-Datei verknüpfen, sodass keine druckerfreundliche Seite separat erstellt werden muss, nur ein druckerfreundliches Stilblatt ist ausreichend. Wenn Sie dem Linkcode Multimedia -Typ -Dateien hinzufügen, wird der Browser angefochten, welcher CSS -Regeln für die Bildschirmausgabe befolgt oder ignoriert werden soll und welche Regeln für den Ausdruck verwendet werden sollen.
Hier ist ein Beispiel, das mit einem Paar CSS -Dateien verlinkt wird:
Das Folgende ist der zitierte Inhalt:
<linkrel = stylesHeetType = text/csSmedia = screenHref = mySite-Screen.css/>
<linkrel = stylesHeetType = text/cssmedia = printHref = mySite-print.css/>
Wenn Sie ältere Browser unterstützen müssen, müssen Sie sich an den Bildschirm der CSS1 -Mediendeskriptoren halten und drucken. Sie schließen sich gegenseitig aus. Bei der Erzeugung von Seiten für die Bildschirmanzeige ignoriert der Browser das Druckstilblatt und umgekehrt. Jedes Stylesheet muss also denselben Style -Selektor enthalten. Es gibt jedoch unterschiedliche Regeldeklarationen, um Seitenstile für verschiedene Ausgabegeräte getrennt zu generieren.
Vereinfachen Sie CSS
Wenn Sie bereit sind, sich um ältere Browser zu kümmern und davon auszugehen, dass Ihre Benutzer CSS2-fähige Browser verwenden (wie IE5 und höher oder Netscape6 und höher), können Sie den neuen gesamten Mediendeskriptor verwenden, um den CSS-Code erheblich zu vereinfachen.
Hier ist ein Beispiel für die Verknüpfung mit CSS2 -Mediendeskriptoren:
Das Folgende ist der zitierte Inhalt:
<linkrel = styleSheetType = text/CSSmedia = Allhref = mySite-ALL.CSS/>
<linkrel = stylesheetType = text/csSmedia = printHref = mySite-print2.css/>
Diese Links sind fast genau die gleichen wie die vorherige; Der Unterschied besteht darin, dass die CSS -Datei Stile für das Drucken von Medien enthält.
Die mit Media = alle in der CSS -Datei zugeordneten Stile können auf Bildschirmanzeige, Drucken und alle anderen Medien angewendet werden, sodass Sie alle erstellten Stile in diese Datei einfügen können. Die CSS -Datei, die individuell mit Media = Print zugeordnet ist, kann viel kleiner sein, da die Seite alle Stile aus allen Mediendateien erbt. Daher müssen diese Stile nicht in der Printmediendatei kopiert werden.
Die einzigen Stile, die in der Printmedien -CSS -Datei erforderlich sind, sind diejenigen, die Seitenstile für den Ausdruck ändern oder hinzufügen. Im Allgemeinen ist dies nichts anderes als einige Stile, die das Anzeigen von Divs mit Grafik- und Navigationsinhalten sowie das Ersetzen des Body -Etiketts sowie die Breite und leere Einstellungen der Hauptdiv mit Einstellungen, die für Ausdrucke geeignet sind, ersetzt werden.
Dieser Trick funktioniert, da alle Medien -CSS -Dateien und Printmedien -CSS -Dateien zu den gleichen Regeln für Kaskadierungsstile kombiniert werden. Daher ist die Linkreihenfolge dieser CSS -Dateien sehr wichtig. Alle Mediendatei -Links müssen vor dem Drucken von Mediendateilinks platziert werden.
Hier finden Sie einige Tipps zur Verwendung von Print -Medien -CSS -Dateien:
Wenn Sie die Anzeige eines DIV untersagen, müssen Sie Anzeige verwenden: keine anstelle von Sichtbarkeit: versteckt.
Weder Punkte noch Zoll sind korrekte Messeinheiten für die Bildschirmanzeige, aber sie sind korrekte Messeinheiten für Ausdrucke.
Der im Druck von Mediendateien verwendete Selektor sollte genau mit dem Selektor, den Sie in allen Mediendateien verwenden, übereinstimmen. Wenn Sie beispielsweise Div #SIDENAV verwenden, um Divs mit ID als SIDENAV in allen Mediendateien auszuwählen, können Sie Ihr Ziel möglicherweise nicht erfolgreich erreichen.
Vergessen Sie nicht, ausdrücklich die Regelerklärung zu ersetzen, die von einer Datei zu einer anderen ändert. Wenn Sie beispielsweise die Polsterung für ein Element in allen Mediendateien festlegen und diese Polsterung im Ausdruck entfernen möchten, reicht es nicht aus, einen Stil hinzuzufügen, der die Polstererklärung in der Printmediendatei ignoriert. Sie müssen die Polsterung ausdrücklich festlegen: 0PT, um die vorherigen Einstellungen zu ersetzen.
Wenn Sie einen Grafikeditor wie DreamWeaver verwenden, können Sie den Bildschirmffekt der generierten Seite anstelle des Ausdrucksffekts in der Vorschau anstellen. Um den Druckstil im Fenster Dreamweaver Design anzusuchen, ändern Sie den Link zur Printmedien -CSS -Datei in Media = Bildschirm. Auf diese Weise können Sie den CSS -Stil in der Printmediendatei anzeigen. Vergessen Sie nicht, den Mediendeskriptor zurück in Media = Print zu ändern, bevor Sie Ihre Seite veröffentlichen.
Wenn Sie Ihren Besuchern eine druckerfreundliche Webseite zur Verfügung stellen müssen, müssen Sie keine separate Version der Originalseite mehr erstellen. Durch Hinzufügen eines Links zu einem CSS-Stylesheet mit Media = Print Media Descriptor kann jede XHTML/CSS-Seite in eine druckerfreundliche Seite konvertiert werden.