Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Lecture du tutoriel

Imprimer uniquement le contenu d'une page web

Avatar
 Auteur : JoJoNeiL
Créé : le 27/01/2006 14:13:31
Modifié : le 22/05/2008 08:57:40
Noter et commenter ce tutoriel
Imprimer ce tutoriel
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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 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 :) !
Auteur : JoJoNeiL
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | Fil RSS | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 443 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.043s (0.0315s)