Création de pages Web imprimables à l'aide CSS
idées de base:
- Les gens vont imprimer vos pages généralement pour pouvoir lire le contenu, de ne pas voir les images. Vous avez besoin de cacher toutes les images de l'imprimante et cela se fait dans la feuille de style d'impression. Je vais vous expliquer ce que la feuille de style d'impression est en un moment.
- Les éléments de navigation ne sont pas nécessaires dans le document imprimé ainsi, de sorte que tous les éléments de navigation doivent être retirés de la page imprimée.
- Disons que vous avez conçu vos pages avec un fond noir avec du texte blanc. Vous ne voulez pas imprimaient imprimantes gens tout ce noir, ils ne seront pas trop heureux avec le prix de l'encre ces jours-ci! Pour résoudre ce problème, dans notre feuille de style d'impression nous définir la couleur de page « blanche » et la couleur du texte à « noir ».
La « feuille de style d'impression »:
Je l'ai mentionné à quelques reprises la « feuille de style d'impression » sans explication; nous allons prendre soin de maintenant. CSS aujourd'hui vous permet de créer un lien vers la feuille plus d'un style dans votre page Web.
La simple raison que vous voulez faire est pour que vous puissiez avoir la page HTML « changement » son apparence automatiquement lorsque quelqu'un visite votre page avec un type particulier de dispositif. Ces types de dispositifs peuvent inclure un ordinateur de bureau typique, un (périphérique Windows CE, Palm Pilot, etc.) PDA et une imprimante entre autres appareils!
Il fonctionne comme ceci; lorsque vous liez une feuille de style à votre page HTML, il est un attribut que vous pouvez spécifier dans la balise de lien CSS qui indique à l'appareil de lecture de votre page si elle doit utiliser la feuille de style spécifié dans le lien.
Ainsi, les hommes sages et les femmes qui sont venus avec la spécification CSS, est venu avec quelques idées pour les types d'appareils qui pourraient être spécifiés dans le lien CSS. Par souci de ce court article qui nous occupe seulement deux d'entre eux:
Voici une paire d'échantillons de liens CSS qui pointent vers des feuilles de style différentes, l'une pour l'imprimante à utiliser et l'autre pour un moniteur PC normal d'utiliser:
Alors maintenant, nous savons comment dire au navigateur quelle feuille de style à utiliser lors de l'impression de la page HTML, donc ce qui est différent dans la feuille de style d'impression qui rend ce travail?
Il y a toutes sortes sur des choses que vous pouvez faire, mais le plus simple est juste pour envelopper HTML et les images que vous ne désirez pas imprimer avec
Maintenant, dans vos pages HTML tout simplement envelopper autour DIVs éléments que vous ne voulez pas imprimer:
(Ne pas oublier d'inclure vos liens CSS dans le
de votre page HTML!)Ces éléments à l'intérieur des DIVs avec la classe « NoPrint » ne seront pas imprimées.
Une autre chose que vous devez faire est de faire tout ce que vous texte en noir et blanc vos pages:
Si vous utilisez des balises de police ou de définir la couleur de votre police sur d'autres balises (avec CSS) dans votre page HTML, vous devrez changer les ainsi, par exemple:
Le CSS ci-dessus définit tout le texte des balises H1 au noir.
Un dernier conseil - créer un bouton d'impression sur votre page avec ce code:
En tant que tel, je me concentrerai sur les méthodes modernes de conception de sites Web, car ces méthodes vous permettent de construire des pages beaucoup plus rapide et beaucoup plus facilement.
Si vous avez aimé l'article et que vous voulez voir plus me faire savoir!