Aller au menu - Aller au contenu

Imprimer uniquement le contenu d'une page web

Informations sur le tutoriel

Avatar
Auteur : JoJoNeiL
Visualisations : 24 595


Plus d'informations Plus d'informations
Gràce à ce tuto, vous pourrez imprimer uniquement le contenu de vos pages ! C'est assez utile pour économiser les cartouches d'encre des internautes. :ninja:
Sommaire du tutoriel :
Icône du chapitre

Préface

Vous l'avez peut être remarqué : quand vous voulez imprimer un tuto du Site du Zéro, tout est imprimé sauf le menu de gauche, l'en-tête et le pied de page ! Vous voulez faire la même chose ? Allez, on commence :D !
Pour ce tuto, la feuille de style et la page xHTML seront placées à la racine du site.

La structure de vos pages

Pour être en totale harmonie avec le Site du Zér0, on va prendre l'exemple de M@teo21. :p

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   
<head>
<title>PAGE WEB DE BASE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" title="css principal avec en-tête, menu et pied de page" /><!-- CSS DE BASE -->
</head>

<body>
<div id="en_tete"><!-- la bannière --></div>
<div id="menu"><!-- le menu --></div>

<div id="corps">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</div>

<div id="pied_de_page"><!--  le nom de l'auteur, un copyright... --></div>
</body>
</html>

Nous, nous voulons imprimer tout ce qui se trouve entre <div id="corps"> et </div>.

La feuille de style

Pour travailler convenablement, nous allons donc créer une feuille de style print.css.
Ne nommez pas la feuille de style autrement que print.css ! Sinon le CSS ne sera pas pris en compte.

Donc, pour commencer : mettre le fond en blanc et le texte en noir, et éventuellement la taille du texte pour l'ensemble de la page.
Code : CSS
1
2
3
4
body{
  background-color:#FFFFFF;
  color:#000000;
  font-size:12pt;}


Ensuite, il faut cacher les éléments non désirés (en-tête, menu, pied de page) simplement en mettant la propriété display et la valeur none.
Code : CSS
1
2
3
4
5
6
7
8
#en_tete{
  display:none;}

#menu{
  display:none;}

#pied_de_page{
  display:none;}


Ensuite pour le corps, il faut mettre la couleur de fond blanche (2 précautions valent mieux qu'une ;) ).
Code : CSS
1
2
#corps{
  background-color:#FFFFFF;}

Petite astuce : copiez les propriétés de la balise corps pour avoir la même mise en page... :)
...et le fond blanc est utile pour les cartouches d'encre. ^^


Voici donc print.css terminé :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body{
  background-color:#FFFFFF;
  color:#000000;
  font-size:12pt;}



/*  début de la partie à ne PAS imprimer  */
#en_tete{
  display:none;}

#menu{
  display:none;}

#pied_de_page{
  display:none;}
/*  fin de la partie à ne PAS imprimer  */




/*  début de la partie à imprimer  */
#corps{
  background-color:#FFFFFF;}
/*  fin de la Partie a imprimer  */

Le code de la page web

Voici l'élément principal pour imprimer uniquement le contenu. Il va rechercher les balises à cacher et celles à imprimer :
Code : HTML
1
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Voici un lien en JavaScript pour imprimer :
Code : HTML
1
<a href="#" onclick="javascript:window.print()">Imprimer cette page</a>


Code final de la page :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   
<head>
<title>Imprimer uniquement le contenu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" title="CSS principal avec en-tête, menu et pied de page" /><!-- CSS DE BASE -->
<link rel="stylesheet" type="text/css" media="print" href="print.css" /><!-- CSS SPÉCIAL IMPRESSIONS -->
</head>

<body>
<div id="en_tete"><!-- la bannière --></div>
<div id="menu"><!-- le menu --></div>

<div id="corps">
<a href="#" onclick="javascript:window.print()">Imprimer cette page</a><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.
</div>

<div id="pied_de_page"><!--  le nom de l'auteur, un copyright... --></div>
</body>
</html>
Maintenant, vous savez comment faire pour votre site web. ;)
Voilà, c'est mon premier tuto et j'espère que vous avez tout compris :) !

Informations sur le tutoriel

Retour en haut Retour en haut

Créé : Le 27/01/2006 à 14:13:31
Modifié : Le 22/08/2008 à 16:07:30
Avancement : 100%
Licence : Copie non autorisée

35 commentaires