Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Une mise en page différente à l'écran et à l'impression

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par piloue, le 13 août 2005

Vous faites peut être partie (comme moi) de ces gens qui préférent avoir une table d'environ 730px de large centrée dans la page. Vous avez déjà essayé d'en faire une impression ? Il manque environ 3 cm sur votre belle feuille A4…

Vous faites partie (comme moi) de ces gens qui se préoccupent de savoir si le contenu de leur page doit être imprimé tel quel. Est ce utile de laisser sur le papier ces images qui servent de lien, comment les remplacer par des lettres pour spécifier le lien qu'elles illustraient ; est-ce utile d'imprimer ce menu, et ne serait-ce pas plus sympatique d'imprimer mes textes en noir et de remplacer ces beaux titres caligraphiques par du texte qui pompera moins d'encre…

Bienvenue, ce tutorial est fait pour vous

1. La théorie

1.1. Faire deux feuilles de styles : une pour l'affichage écran l'autre pour l'impression

Vous connaissez certainement les styles css et la manière de les inclures dans la page. Si ce n'est pas le cas, je vous encourrage à consulter le tutorial Utiliser les CSS.

Les feuilles de style peuvent se voir attribuer la notion de media qui permet de cibler le type d'objet qui affichera la page : aural, braille, embossed, handheld, print, projection, screen, tty

Par défaut, lorsque cet attribut n'est pas spécifié, la feuille de style créée est attribuée à tous les médias.

On spécifie le ou les médias requis pour les feuilles de styles créées de la manière suivante :

<style type="text/css" media="screen">
<!--
/* Feuille de style qui s'appliquera lorsque le document sera à l'écran */
//-->
</style>

<style type="text/css" media="print">
<!--
/* Feuille de style qui s'appliquera lorsque le document sera imprimé et/ou en apperçu impression */
//-->
</style>

<style type="text/css" media="all">
<!--
/* Feuille de style qui s'appliquera tout le temps */
//-->
</style>

1.2. Bien penser les éléments du site pour leur attribuer la bonne class

Il vous faut repérer les élements qui ne devront par exemple pas apparaitre à l'impression, ceux qui devront être différents (position, couleur, police, fond, bordure…) et ce qui ne doit par apparaitre à l'écran mais qui doit apparaitre sur la feuille de Papier.

Par exemple, On veut que notre tableau général, celui qui fait 730px de large, soit complétement imprimé On attribut à ce tableau la class tableaugeneral

On veut que notre menu, présent dans un tableau, n'apparaisse pas à l'impression. On attribut à ce tableau la class pasimprime

Et on définie nos feuilles de styles de la manière suivante :

<style type="text/css" media="screen">
<!--
.tableaugeneral {width: 730px;}
/* Par défaut les elements ayant la class .pasimprime apparaitront à l'écran. */
//-->
</style>

<style type="text/css" media="print">
<!--
.tableaugeneral {width: 100%;}
.pasimprime {display: none;} /* cela signifie que les ?ments ayant cette classe "disparaissent" *///-->
</style>

<style type="text/css" media="all">
<!--
body {margin: 5px}
//-->
</style>

2. La pratique

Dézippez le dossier joint.

Désolé mais ce lien est rompu (lilive - 11/12/2009)

Il contient un document htm et un dossier qui comporte les deux feuilles de styles (screen et print) et les images. Regardez la page dans votre navigateur puis demandez un aperçu avant impression. Etonnant, non ?

La mise en page est faire grâce au couplage des div et du CSS ce qui permet de positionner les éléments de manière plus souple qu'avec une mise en page type “tableaux”.