home > articole > optimizare-pagina-web-pentru-imprimanta.php
Tutorial Rotuts.com

Optimizare pagina Web pentru imprimanta

Articol adaugat pe data de 15 Septembrie 2010 de Mihail Alin

In acest articol vom vorbi despre cum putem optimiza pagina Web pentru imprimare, mai bine spus "cum se va vedea pagina mea Web atunci cand cineva încearcă sa o printeze".

articole
Autor :   Mihail Alin

Optimizare pagina Web pentru imprimanta

Inainte de a aborda propietatile de stil ( css ) specifice pentru imprimare, trebuie sa revizuim caracteristicile paginilor Web pentru a optimiza imprimarea lor. O sa o facem in trei faze :

  • cautam si eliminam prin intermediul css toate elementele inutile
  • revizarea continutului textual
  • adaugare de informatii care normal ar fi rezervate pentru vizualizare pe ecran

Putem spune ca, pe ecran, o pagina Web trebuie sa fie placuta la vedere si pe hartie trebuie sa fie pentru intelect.Pe o pagina imprimata un user cauta informatii.

Printre altele, trebuie sa acordam atentie urmatorilor factori :

  • culoarea sau imaginea de fundal
  • culoarea textului
  • font-ul textului
  • marimea textului
  • link-uri
  • imagini
  • meniuri
  • animatii (Flash , JavaScript , DHTML )
  • formularii
  • margini
  • etc ...

Haideti sa vedem fiecare dintre aceste puncte :

- modificati fundalurile de pagini. Implicit, majoritatea browsere-lor nu imprima culorile si nici imaginile de fundal.Dar daca utilizatorul a ales optiunea avansata Print background ( colors and images ) , este posibil sa nu ajunga sa vada pagina asa cum tu te asteptai si sa te considere un designer mediocru.Asa ca, prudent ar fi sa definim fundalul de pagina ca fiind alb pentru imprimare.
Exemplu :

       body{
       	background: white;
       	background-image:none;
       }
       

- textul sa fie de culoare neagra. Desi pe ecran arata foarte bine, textul colorat provoaca o pierdere de tus pentru imprimanta.
Eexemplu :

       body{
       	color: black;
       }
       

- marimea fontului.Daca pagina este scrisa cu o marime mica de font, ar fi bine sa mariti marimea fontului la 11 sau 12 puncte, sau chiar mai mare, depinzand de audienta.Es recomandat folosirea punctelor in loc de pixeli pentru ca sunt mai specifice pentru imprimarea pe hartie.
Exemplu :

       body{
       	font-size: 12pt;
       }
       

- indentifica link-urile.Este destul de clar ca pe hartie nu sunt la fel de folositoare ca pe ecran, dar de multe ori este important sa indicam ca textul original avea link-uri.
Putem specifica sa apara subliniate chiar daca am specificat contrariul in prezentarea pentru ecran cu propietatea " text-decoration:none; ".

       a{
       text-decoration:underline;
       }
       

De asemenea putem include URL-ul dupa fiecare link folosind CSS

       #body a:link:after, 
       #body a:visited:after {
       content: " (" attr(href) ") ";
       font-size: 90%;
       }
       

- Eliminati toate imaginile si bannere-le care pe hartie sunt inutile.

       /*sa spunem ca avem un banner caruia i s-a aplicat clasa .bannerTop atunci pentru al ascunde folosim :*/
       .bannerTop{
       display:none;
       }
       

- eliminati toate elementele de navigare. Meniurile ( in special cele laterale ) ocupa foarte mult spatiu, daca se elimina , textul se va imprima mult mai bine.

       #meniu{
       display:none;
       }
       

- formulariile nu sunt folositoare pe hartie, se pot elimina cu propietatea display:none; exact cum am facut in punctul anterior

Salt de pagina anterior

Aceasta propietate forteaza un salt de pagina imediat inainte de un element din pagina sau interzice sa se faca un salt.

       page-break-before: always; /* mai poate avea urmatoarele valori: avoid si auto*/
       

Parametrul always forteaza un salt de pagina inaintea elementului care este difinit.
Parametrul avoid interzice un posibil salt de pagina inaintea elementului definit.
Parametrul auto lasa broser-ul sa decida cand trebuie facut un salt de pagina.

Salt de pagina posterior

Aceasta propietate forteaza un salt de pagina dupa elementul definit sau interzice sa se faca un salt

       page-break-after:always; /* mai poate avea urmatoarele valori : avoid si auto*/
       

Acesti parametrii functioneaza la fel ca in punctul anterior dar se aplica dupa fiecare element definit

Aplicare

In mod normal codul css pentru imprimanta se scrie pe un nou document css, acest document se conecteaza cu documentul la care dorim sa aplicam aceste stiluri prin intermediul etichetei HTML link:

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


Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul: