Faire son site et le publier

Kompozer et CSS

Feuille de style externe : Créer une feuille de style pour l'imprimante

Créer une feuille de style pour l'impression est  une facilité offerte à l'utilisateur, mais il ne faut pas penser que c'est un moyen d'obtenir, pour un document, une version imprimée de qualité.
Pour les impressions au rendu fidèle, le format de choix est le PDF. Il faut donc faire simple.

L'attribut HTML « media »

La seule manipulation spéciale consiste à indiquer au navigateur que :

Pour cela nous nous servons de l'attribut html « media »
Il existe d'autres valeurs pour cet attribut, comme entre autres :

projection: pour appareils de projection
aural: pour synthétiseur de parole
handheld : pour les portables

Si cet attribut est manquant, la feuille de style s'appliquera à tous les médias.

Dans Kompozer

Ouvrir une page ou bien la page de base et dans Cascades :

Dans Cascades : les 2 feuilles de style

Suivant l'emplacement de la page par rapport à la feuille de style nous aurons un code avec ../ permettant de remonter dans l'arborescence.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

les 2 liens des feuilles de style

Dans Notepad++ 

Pour lier  cette feuille de style "print.css" à toutes les pages :

Rechercher Remplacer

Que faut-il imprimer ?

Nous devons faire en sorte de ne garder à l'impression que le contenu vraiment utile. Ceci afin que les pages imprimées soient plus claires et que l'internaute puisse économiser temps, énergie, papier et encre.

Identification claire de ces éléments
Pour nous permettre d'afficher ou de cacher ces éléments, il faut pouvoir les identifier clairement dans les feuilles de style CSS. Par conséquent le code HTML doit être correctement organisé, avec des éléments et des conteneurs portant des classes (attribut HTML class) et des identifiants (attribut HTML id) pertinents.
Éviter aussi les mises en page avec des tableaux.

Dans Cascades, pour choisir le "non Affichage" d'un élément : Onglet Boite / Affichage / Aucun.
Le code source généré display:none  élimine complétement l'élément du flux, comme s'il était absent du source.

Styles adaptés à l'impression

De nombreux styles adaptés à l'écran (des largeurs en pixels, des textes en blanc sur une couleur de fond sombre, des tailles de texte en pixels ou en em) ne sont pas adaptés pour l'impression.

Choisir, comme pour les livres, un arrière plan blanc et le texte ou éléments graphiques en noir.

Choisir des unités absolues

Pour l'affichage à l'écran choisir au contraire des unités relatives

Choisir des polices avec empattement
L'empattement est constitué par les tirets aux extrémités des lettres. Alors qu'à l'écran des polices sans empattement sont plus lisibles, il est préférable pour l'impression, de recourir à des polices avec empattement, comme Times New Roman, cela rend la lecture plus aisée.

Remplir la feuille de style pour l'impression

Dans Cascades, dérouler les 2 feuilles de style et passer en revue les règles pour savoir ce qu'il convient de garder, de modifier ou de ne pas afficher.
Pour faire simple, voici quelques pistes :

Pour visualiser les règles pour l'impression, clic sur Navigateur puis menu Fichier / Aperçu avant l'impression.Visualiser avec plusieurs navigateurs. Résultat visible en cliquant sur ce lien

Avant d'imprimer l'internaute devra régler la Mise en page à sa convenance dans le menu "Aperçu avant l'impression" du navigateur

Pages à visiter :
http://www.yoyodesign.org/doc/w3c/css2/media.html
http://css.alsacreations.com/Tutoriels-et-articles-divers/feuille-css-impression
http://actuel.fr.selfhtml.org/articles/css/mise_en_page_imp/index.htm
http://www.unixgarden.com/index.php/web/une-mise-en-page-pour-limpression
Haut de page
Jos Argaud - Mise à jour 20/11/2008  Pour m'écrire  Document made with KompoZer