Dans le passé, la création d'une version conviviale d'une imprimante d'une page Web signifie concevoir une page distincte avec la mise en page et le formatage modifié afin que vous puissiez obtenir des résultats satisfaisants lors de l'impression. Maintenant, en utilisant le XHTML et le CSS structurés, vous pouvez obtenir le même effet avec beaucoup moins d'efforts. La plupart des pages Web de l'écran Affichage à l'effet d'impression
Dans le passé, la création d'une version conviviale d'une imprimante d'une page Web signifie concevoir une page distincte avec la mise en page et le formatage modifié afin que vous puissiez obtenir des résultats satisfaisants lors de l'impression. Maintenant, en utilisant le XHTML et le CSS structurés, vous pouvez obtenir le même effet avec beaucoup moins d'efforts.
De l'écran Affichage à l'effet d'impression
La plupart des pages Web sont conçues pour être consacrées à la visualisation sur les écrans d'ordinateur. Cependant, parfois les utilisateurs doivent imprimer certaines pages, peut-être juste pour conserver un enregistrement à long terme, ou l'utiliser comme référence hors ligne pratique.
Le problème est maintenant que la plupart des fonctionnalités qui rendent la page Web, accrocheuse et colorée sur l'écran de couleur de l'ordinateur, ne peuvent pas afficher le même effet sur la version imprimée de la page Web - en particulier lorsque l'imprimante est en noir et blanc. Lorsqu'il est rétrogradé à l'impression en niveaux de gris, la combinaison de couleurs perdra l'effet de contraste (d'origine); Les graphiques seront déformés et prendront trop de temps à imprimer; Les boutons de navigation qui jouent un rôle important sur la page Web sont inutiles sur la page d'impression.
Pour surmonter ces problèmes, les créateurs Web conçoivent souvent une version conviviale de l'imprimante de la page afin que les visiteurs aient le désir d'imprimer. Les versions conviviales imprimantes incluent généralement le même contenu que la page Web principale, mais la plupart des graphiques, des arrière-plans et des éléments de navigation sont omis. La page convertit également la couleur en une certaine forme pour générer des images en niveaux de gris acceptables.
Solution CSS
Un avantage de séparer le contenu et la représentation à l'aide de balises XHTML structurées et de formats CSS est qu'en modifiant le style CSS, vous pouvez facilement reformater le contenu. Par conséquent, la création d'une page conviviale imprimante consiste à lier un fichier CSS différent à la même page XHTML.
Vous pouvez lier la feuille de style de l'écran et la feuille de style d'impression au même fichier xhtml en même temps, il n'est donc pas nécessaire de créer une page conviviale d'imprimante séparément, juste une feuille de style adaptée à l'imprimante est suffisante. Lorsque vous ajoutez des fichiers de type multimédia au code de liaison, cela indique au navigateur quelles règles CSS suivaient ou ignorent la sortie de l'écran et quelles règles à utiliser pour l'impression.
Voici un exemple de liaison à une paire de fichiers CSS:
Ce qui suit est le contenu cité:
<nkrel = stylesheetType = text / cssmedia = screenhref = mysite-screen.css />
<linkRel = StylesheetType = Text / CSSMedia = printHref = MySite-Print.css />
Si vous devez prendre en charge les anciens navigateurs, vous devez vous en tenir à l'utilisation de l'écran des descripteurs multimédias de CSS1 et de l'impression. Ils s'excluent mutuellement, donc lors de la génération de pages pour l'affichage d'écran, le navigateur ignore la feuille de style d'impression et vice versa. Ainsi, chaque feuille de style doit contenir le même sélecteur de style, mais il existe différentes déclarations de règles pour générer des styles de page séparément pour différents périphériques de sortie.
Simplifier CSS
Si vous êtes prêt à renoncer à prendre soin des navigateurs plus âgés et à supposer que vos utilisateurs utilisent des navigateurs compatibles CSS2 (tels que IE5 et ci-dessus ou NetScape6 et ci-dessus), vous pouvez utiliser le nouveau descripteur multimédia pour simplifier considérablement le code CSS.
Voici un exemple de liaison à l'aide de descripteurs de médias CSS2:
Ce qui suit est le contenu cité:
<linkrel = StylesheetType = text / cssmedia = allHref = mysite-all.css />
<linkrel = StylesheetType = text / cssmedia = printHref = mysite-print2.css />
Ces liens sont presque exactement les mêmes que le précédent; La différence est que le fichier CSS contient des styles pour l'impression des supports.
Les styles associés à Media = All dans le fichier CSS peuvent être appliqués pour l'affichage d'écran, l'impression et tous les autres supports, afin que vous puissiez mettre tous les styles créés dans ce fichier. Le fichier CSS qui est individuellement associé à Media = Print peut être beaucoup plus petit car la page hérite de tous les styles de tous les fichiers multimédias, il n'est donc pas nécessaire de copier ces styles dans le fichier multimédia imprimé.
Les seuls styles requis dans le fichier CSS Print Media sont ceux qui modifient ou ajoutent des styles de page pour l'impression. D'une manière générale, ce n'est rien de plus que certains styles qui interdisent à l'affichage des div contenant des graphiques et du contenu de navigation, et en remplacement de l'étiquette corporelle et de la largeur et des paramètres vierges de la div principale avec des paramètres adaptés aux impressions.
Cette astuce fonctionne car tous les fichiers CSS multimédias et les fichiers CSS multimédia sont combinés dans les mêmes règles de style en cascade. Par conséquent, l'ordre de lien de ces fichiers CSS est très important. Tous les liens de fichiers multimédias doivent être placés avant d'imprimer les liens de fichiers multimédias.
Voici quelques conseils sur l'utilisation des fichiers Imprime Media CSS:
Si vous interdisez l'affichage d'une div, vous devez utiliser l'affichage: Aucun au lieu de visibilité: caché.
Ni les points ni les pouces ne sont des unités de mesure correctes pour l'affichage de l'écran, mais ce sont des unités de mesure correctes pour les impressions.
Le sélecteur utilisé dans l'impression des fichiers multimédias devrait être exactement le même que le sélecteur que vous utilisez dans tous les fichiers multimédias. Par exemple, si vous utilisez Div # Sidenav pour sélectionner Divs avec ID comme Sidenav dans tous les fichiers multimédias, l'utilisation de #Sidenav dans l'impression de fichiers multimédias peut ne pas être en mesure d'atteindre avec succès votre objectif.
N'oubliez pas de forcer explicitement le substitut de la déclaration de règles qui passe d'un fichier à un autre. Par exemple, si vous définissez un rembourrage pour un élément dans tous les fichiers multimédias et que vous souhaitez supprimer ce rembourrage dans l'impression, il ne suffit pas d'ajouter un style qui ignore la déclaration de rembourrage dans le fichier multimédia d'impression - vous devez explicitement définir le rembourrage: 0pt pour remplacer les paramètres précédents.
Si vous utilisez un éditeur graphique comme Dreamweaver, vous pouvez prévisualiser l'effet d'écran de la page générée au lieu de l'effet d'impression. Pour prévisualiser le style d'impression dans la fenêtre de visualisation de Dreamweaver Design, modifiez le lien vers le fichier CSS Print Media vers Media = Screen. Cela vous permet de prévisualiser le style CSS dans le fichier multimédia imprimé. N'oubliez pas de modifier le descripteur multimédia en média = imprimer avant de publier votre page.
Lorsque vous devez fournir à vos visiteurs une page Web conviviale, vous n'avez plus besoin de créer une version distincte de la page d'origine. L'ajout d'un lien vers une feuille de style CSS avec Media = IMPRIM MEDIA Descripteur permettra de convertir n'importe quelle page XHTML / CSS en une page adaptée à l'imprimante.