L'impression d'une page Web peut être frustrante. Trop souvent, les pages Web imprimées coupent des sections de texte et des publicités en plâtre sur le reste. À d'autres moments, vous pouvez envoyer une page à l'imprimante et n'obtenir que du papier blanc propre. S'il est important que le contenu de votre site soit attrayant et lisible après son envoi à l'imprimante, vous devez préparer votre page pour son passage sur papier.

Créer une version distincte pour l'impression

1

Créez une page HTML distincte pour l'impression. Dupliquez le contenu principal de la page entière, en le réduisant principalement au texte. Supprimez les en-têtes et pieds de page inutiles (ceux-ci sont souvent composés de liens qui n'auraient aucun sens sur le papier). Supprimez les publicités et les menus des colonnes latérales. Supprimez les images ou assurez-vous qu'elles apparaissent en ligne à une taille appropriée. Minimisez l'utilisation de tableaux et le positionnement explicite des éléments HTML. N'utilisez que des polices que vous êtes certain de trouver sur presque tous les ordinateurs (Times New Roman, Arial, Verdana).

2

Ajoutez un bouton «Imprimer» à la page principale qui renvoie à votre page imprimable. Le bouton, en HTML, pourrait ressembler à ceci:

3

Testez votre page imprimable avec plusieurs imprimantes et effectuez les ajustements nécessaires.

Utilisez CSS pour rendre le contenu plus imprimable

1

Utilisez deux feuilles de style en cascade au lieu d'une lors de la conception de votre site. Une feuille de style sera utilisée lors de l'affichage de votre page sur l'ordinateur. La deuxième feuille de style sera utilisée lorsque votre page est envoyée à l'imprimante pour devenir une copie papier. Définissez l'attribut "média" dans les liens de votre feuille de style pour affecter chaque feuille de style à son média. Par exemple:

2

Créez des balises dans la feuille de style d'impression pour masquer les images, les liens, les en-têtes et autres éléments qui ne doivent pas apparaître sur la page imprimée. Ajoutez une classe "doNotPrint" à la feuille de style d'impression uniquement:

.doNotPrint {affichage: aucun; }

Dans votre HTML, définissez la valeur de classe de tous les éléments que vous souhaitez masquer sur l'imprimante sur "doNotPrint":

Je refuse d'être imprimé!

Des éléments comme celui-ci apparaîtront à l'écran, mais pas sur la page imprimée.

3

Ajoutez du style à la feuille de style d'impression qui rend tout le texte noir sur fond blanc:

body {font-family: "Times New Roman", Arial, serif;
font-size: 12px;
couleur: #000000;
background-color: #FFFFFF;
}

Si vous définissez des éléments spécifiques tels que des titres (par exemple,

) aux couleurs non imprimables, vous devrez également les définir explicitement sur le noir dans la feuille de style d'impression.

4

Testez votre page sur quelques imprimantes si vous le pouvez et ajustez votre conception si nécessaire.