Créez une feuille de styles d'impression personnalisée en quelques minutes

Vous l'avez déjà vu: vous avez conçu une belle mise en page et quelqu'un entre dans votre bureau avec une impression et vous grincez des dents sur le site de votre travail acharné horriblement déformé par l'imprimante. Les versions imprimées d'une conception Web sont rarement ce à quoi vous vous attendez. Ils prennent des ajustements supplémentaires et une mise en scène. Mais, une compréhension de la façon de configurer une vue imprimée afin que le contenu sache comme prévu n'est pas trop difficile une fois que vous avez compris. Dans cet article, je vais vous montrer comment configurer une feuille de style juste pour imprimer votre contenu sur un site Web. J'utiliserai un site WordPress comme point de départ, car c'est un cadre si populaire, mais cela fonctionnera pour n'importe quel site tant que vous appliquez les mêmes principes.

Remarque rapide: il n'y a pas de moyen facile de rendre le Web à imprimer parfait. Vous devez sauter là-bas et travailler sur chaque élément que vous souhaitez adapter. Je commence par aller sur une page et l'imprimer pour voir ce que je commence. Ensuite, je brise chaque élément ou section structurelle par ce dont j'ai besoin et ce qui doit changer. Cela prend du temps, mais cela en vaut la peine.

avez-vous besoin d'une version imprimée?

La première chose que je me demande avant de créer une version imprimée d'un site est de savoir si j'en ai même besoin ou non. Le designer méticuleux en moi a tendance à entrer en jeu et je me penche vers «oui» dans la plupart des cas. Mais, souvent il n'y a tout simplement pas besoin d'une feuille de style imprimée, selon la nature et le but de votre site Web. De plus, lorsque les gens impriment une page de votre site, quel est leur objectif? Souvent, ils veulent juste votre contenu en main et c'est tout - ils ne veulent pas tous les graphiques, les jolies mises en page, les en-têtes, les barres latérales, etc. (Et, ils peuvent ne pas vouloir utiliser leur encre coûteuse sur des éléments non essentiels.) Alors, considérez ce qui est réellement nécessaire.

Considérations d'impression

Je convertisse toujours mon texte en noir pour que l'imprimante comprenne qu'aucun ombrage n'est nécessaire (ce qui est un grand économiseur d'encre). Je passe également des tailles de police en pixels aux points. Si vous essayez de faire correspondre les tailles de police, cela peut être un peu un défi, mais voici un graphique lisse pour vous aider à vous convertir rapidement de px à pt en supposant que vous avez une base Taille de la police de 16px:

• pixels => points
• 6px => 5pt
• 7px => 5pt
• 8px => 6pt
• 9px => 7pt
• 10px => 8pt
• 11px => 8pt
• 12px => 9pt
• 13px => 10pt
• 14px => 11pt
• 15px => 11pt
• 16px => 12pt
• 17px => 13pt
• 18px => 14pt
• 19px => 14pt
• 20px => 15pt
• 21px => 16pt
• 22px => 17pt
• 23px => 17pt
• 24px => 18pt

Cibler votre contenu

WordPress a généralement une structure intégrée qui ressemble à ceci:

1. En-tête
2. Contenu
3. Commentaires
4. barre latérale
5. pied de page

Chaque page a ces éléments structurels que vous pouvez facilement cibler avec CSS. Même si votre site n'a pas cette structure exacte, la clé est de personnaliser simplement votre feuille de style d'impression à vos fins. Cibler chaque structure dans CSS à l'aide de #Header pour ces sections avec un ID ou .header si c'est une classe. Enfin, et peut-être surtout, nous allons utiliser le CSS @media imprimer pour définir lorsque certains styles CSS sont appliqués correctement. Par exemple, pour supprimer tout le contenu de vos styles d'impression, vous feriez quelque chose d'aussi simple que dans votre style.css: [SourceCode Language = ”CSS”] @media print { #Header {affichage: aucun;} #Content {affichage: aucun;} #comments {affichage: aucun;} #sidebar {affichage: aucun;} #footer {affichage: aucun;} .site-description {affichage: aucun;} .Tite-title {affichage: aucun;} } [/ SourceCode] Cela a fonctionné pour le thème des vingt-douze pour WordPress et me donne une belle ardoise vierge propre pour commencer. Si vous avez du mal à supprimer un élément Straggler, la chose la plus simple à faire est de cliquer avec le bouton droit sur l'élément de votre navigateur et de le trouver dans votre document source. Chrome a la fonction «Inspecter l'élément» qui saute à droite au code de cet élément, ce qui facilite la recherche de l'élément offensant. Recherchez la définition d'ID ou de classe, puis ciblez-la en conséquence. Dans cet exemple, nous avons peut-être fait apparaître ce traîneau dans nos impressions. Ici, vous pouvez voir l'ID: Nous pouvons désormais cibler cet élément avec le CSS suivant: [SourceCode Language = ”CSS”] # Contact-Popup {affichage: aucun;} [/ SourceCode]

Page Breaks

Les imprimantes divisent votre contenu en pages, en supposant que vous avez plus d'une page à imprimer. Vous pouvez dire au navigateur d'éviter les pauses de page à certains moments. Vous pouvez tout lire sur les pauses de page en CSS sur la page W3.org. En bref, vos options sont les suivantes:

• PAGE-BEAPER-Avant: Toujours | Évitez - toujours / éviter les pauses de page avant l'article
• PAGE-BROUPE-APRÈS: Toujours | Évitez - toujours / éviter les pauses de page après l'article
• PAGE-CONSIDE-INSIDE: Toujours | Évitez - toujours / éviter les pauses de page au milieu de l'élément

Gardez à l'esprit que les pauses de page s'appliquent uniquement au contenu de blocage. Un exemple courant est une liste - vous voudrez peut-être créer des blocs de listes, puis empêcher les pauses de page qui se produisent au milieu d'une liste. L'exception est le texte, que vous pouvez définir comme un bloc, puis utilisez les ruptures de page pour modifier la façon dont elle imprimera, mais généralement le texte devrait circuler et vous pouvez permettre au navigateur de déterminer où le placer.

Exemple de cas

Maintenant que nous avons une ardoise vierge, commençons à ajouter les pièces structurelles que nous voulons réellement afficher lorsqu'elles sont imprimées. La section de contenu est un candidat évident, alors ajoutons-le et convertissons la taille de la police de paragraphe en points: [SourceCode Language = ”CSS”] @media print { #Content P { taille de police: 11pt; Couleur: noir; }#Content img { Affichage: bloc; PAGE-BROUPE-APRÈS: Éviter; PAGE-CUPE-ISDIDE: Évitez; } #Content ul, li { Affichage: bloc; PAGE-CUPE-ISDIDE: Évitez; } #Header {affichage: aucun;} #comments {affichage: aucun;} #sidebar {affichage: aucun;} #footer {affichage: aucun;} .site-description {affichage: aucun;} .Tite-title {affichage: aucun;} } [/ SourceCode] J'ai supprimé l'affichage : aucun; contenu CSS et converti notre texte de paragraphe de 14px à 11pt. Vous pouvez passer par chaque élément de votre page et personnaliser chacun pour l'impression avec cette méthodologie.

enveloppent

Passer du web à imprimer peut être frustrant, mais la requête multimédia @media nous permet d'être très ciblé avec la façon dont les éléments sont imprimés et comment ils sont imprimés. Il n'y a pas de véritable raccourci. Si vous avez besoin de votre site pour être bien imprimé, vous devrez probablement créer une définition CSS distincte au niveau par élément jusqu'à ce qu'elle soit parfaite. Les feuilles de style imprimées font-elles partie de votre processus de conception standard, ou les considérez-vous comme un ajout supplémentaire et agréable à un site Web complètement conçu?

Des questions fréquemment posées sur la création d'une feuille de style d'impression personnalisée

Quelle est l'importance de créer une feuille de style imprimée?

Une feuille de style imprimée est cruciale pour fournir une version imprimante de votre page Web. Il vous permet de contrôler l'apparence de la page lorsqu'il est imprimé, en supprimant des éléments inutiles comme les menus de navigation, les couleurs d'arrière-plan et les publicités. Cela enregistre non seulement l'encre mais garantit également que la version imprimée se concentre sur le contenu essentiel, ce qui facilite la lecture et la compréhension.

Comment puis-je cacher certains éléments lors de l'impression d'une page Web?

Vous Peut masquer des éléments spécifiques lors de l'impression d'une page Web en utilisant la propriété «Afficher: Aucune» dans votre feuille de style d'impression. Par exemple, si vous souhaitez masquer le menu de navigation, vous cibleriez l'élément qui contient le menu et définissez sa propriété d'affichage sur aucun. Cela garantira que l'élément n'est pas imprimé.

Puis-je modifier la taille et la couleur de la police dans la version imprimée d'une page Web?

Oui, vous pouvez modifier la taille et la couleur de la police dans le Version d'impression d'une page Web. Vous pouvez le faire en ciblant l'élément corporel dans votre feuille de style d'impression et en définissant la taille et la couleur de la police souhaitées. Cela peut être utile si vous souhaitez vous assurer que la version imprimée de votre page Web est facile à lire.

Comment puis-je créer une feuille de style d'impression séparée?

Vous pouvez créer une feuille de style imprimée séparée par Utilisation de l'attribut «Media» dans l'élément de lien qui fait référence à votre feuille de style. L'attribut multimédia doit être défini sur «imprimer», indiquant que la feuille de style doit être utilisée lors de l'impression de la page Web. Cela vous permet d'avoir une feuille de style pour l'écran et une autre pour la version imprimée.

Puis-je contrôler les pauses de page dans la version imprimée d'une page Web?

Oui, vous pouvez contrôler les pauses de page dans la version imprimée d'une page Web. Vous pouvez le faire en utilisant les propriétés «Page-Break-Before» et «Page-Break-après» dans votre feuille de style d'impression. Ces propriétés vous permettent de spécifier où des pauses de page devraient se produire, aidant à prévenir les pauses maladroites au milieu de votre contenu.

Comment puis-je tester ma feuille de style d'impression?

Vous pouvez tester votre feuille de style imprimée En utilisant la fonction d'aperçu d'impression dans votre navigateur Web. Cela vous montrera à quoi ressemblera votre page Web une fois imprimée, vous permettant de faire des ajustements nécessaires à votre feuille de style imprimée.

Puis-je inclure des en-têtes et des pieds de page dans la version imprimée d'une page Web?

Oui, vous pouvez inclure des en-têtes et des pieds de page dans la version imprimée d'une page Web. Vous pouvez le faire en utilisant la propriété «Position: fixe» dans votre feuille de style d'impression. Cela garantira que les en-têtes et les pieds de page apparaissent sur chaque page imprimée.

Comment puis-je modifier la disposition d'une page Web pour l'impression?

Vous pouvez modifier la disposition d'une page Web pour l'impression en utilisant la propriété «flottante» dans votre feuille de style imprimée. Cela vous permet de contrôler le positionnement des éléments sur la page, en vous assurant qu'ils sont disposés d'une manière qui est logique lorsqu'elle est imprimée.

Puis-je contrôler les marges et le rembourrage dans la version imprimée d'une page Web?

Oui, vous pouvez contrôler les marges et le rembourrage dans la version imprimée d'une page Web. Vous pouvez le faire en utilisant les propriétés «marge» et «rembourrage» dans votre feuille de style imprimée. Cela vous permet de vous assurer que votre contenu est correctement espacé et facile à lire lorsqu'il est imprimé.

Puis-je utiliser des images dans la version imprimée d'une page Web?

Oui, vous pouvez utiliser des images dans le Version d'impression d'une page Web. Cependant, vous devriez être conscient de leur apparence lorsqu'ils seront imprimés. Vous voudrez peut-être supprimer des images d'arrière-plan et vous assurer que toutes les images importantes sont claires et faciles à voir en noir et blanc. Vous pouvez contrôler l'affichage des images à l'aide de la propriété «Affichage» dans votre feuille de style d'impression.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!