• Saltar-se la navegació
• Índex del curs

Mòdul 8: La impressió de la web

• Índex
• Pràctica 1
• Pràctica 2
• Pràctica 3
• Pràctica 4
• Pràctica 5
• Exercicis

Com començar

Un full d'estils per a impressió funciona de la mateixa manera que qualsevol altre full d'estils, encara que només se'l crida a l'hora d'imprimir la pàgina. Perquè funcioni, cal inserir el següent codi a l'inici de cada pàgina d'HTML.

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

L'arxiu, print.css és el full d'estil per a la impressió, i el comandament media="print" indica que aquest arxiu CSS només serà cridat quan s'imprimeixen les pàgines. Hi ha molts altres medis que poden utilitzar fulls d'estils propis com reproductors d'MP3, mòbils, la televisió, projeccions, etc.

Que posar en el full d'estil d'impressió?

Els comandaments CSS en el full d'estil per a la impressió essencialment substitueixen els comandaments CSS del full d'estil principal. Per tant aquests són els comandaments que s'hauran d'incloure en el full d'estil d'impressió i això vol dir que no caldrà repetir cap comandament que es pugui utilitzar del full d'estil principal.

De forma general, caldrà que quan es premi el botó d'impressió, els fulls d'estils faci el següent:

• Eliminar els elements innecessaris. Normalment, el que hi ha a la versió impresa de la pàgina web és el logotip i el contingut de la pàgina, mentre que s'ha fet desaparèixer la capçalera i el menú o menús de navegació, un cop impresa la pàgina, no serveixen per a res.
• Molt sovint, també és convenient fer desaparèixer tot o una part del peu de la pàgina, sempre i quan no contingui dades o detalls importants, com l'adreça de correu, dades de contacte, etc.
• També pot donar-se el cas que no es vulguin incloure a la versió impresa, certs elements aïllats de la pàgina web.

Per fer que tots aquests elements no apareguin en la versió impresa, només cal que, en el lloc corresponent del codi HTML, els assigneu una nova classe: class="noimprimir".

El full d'estils d'impressió facilita la tasca de deslliurar-vos d'aquests elements, juntament amb la capçalera i menús de navegació. Només caldrà que afegiu a les divisions que heu assignat com capçalera i menús de navegació, per exemple <div id="capcelera"> i <div id="navegacio">, el comandament de visualització display:none, de la següent manera:

#navegacio, #capcelera, #footer, .noimprimir {
   display: none;
}

Per altra banda, potser també es vol evitar la impressió d'algunes imatges, especialment imatges animades ja que no tenen sentit en la versió impresa de la web. Per això s'haurà d'afegir al lloc corresponent del codi HTML de la pàgina web, el codi següent:

<span class="noimprimir"><img src="abc.jpg" /></span>

Per eliminar qualsevol element a l'hora d'imprimir una web li assignarem, en el codi XHTML, la nova classe class="noimprimir". En el full d'estil es definirà com que no ha d'aparèixer, display:none.

Tornar a l'inici de la pràctica

Pràctica

Comenceu a determinar aquells elements que no voleu que apareguin a la impressió assignant-los, al codi HTML, la classe noprint o noimprimir o aquell nom que us sembli més adient.