Existem várias formas de criar uma "versão para impressão" de uma pagina,
uma delas é criar uma outra página especialmente formatada pra impressão.
Outra é criando classes CSS com a indicação do tipo de mídia.
Uma das formas de usar os tipos de mídia em CSS é;
@media tipo-da-midia{
.sua_classe{...}
.outra_classe{...}
etc.
}
tipos de midia:
- screen - Para computadores, PC´s. Ou algum dispositivo que tenha uma boa tela colorida.
- print - Para impressoras. Muito usado para dar uma versão de impressão do site.
- handheld - Para PDAs, celulares e aparelhos que geralmente tem uma tela pequena.
- projection - Para projetos de apresentações. Você pode transformar seu site em uma apresentação estilo PowerPoint!
- aural - Para Sintetizadores de Tela.
- braille - Para dispositivos táteis. Impressionante, ahn? Um cego poder “imprimir” um artigo para poder ler onde quiser.
- tv - Para televisões. A resolução da televisão é muito inferior a um monitor CRT, eles merecem um tratamento especial.
- tty - Para dispositivos que usam uma grade fixa de caractéres, terminais, dispositivos portáteis, etc…
No nosso caso iremos usar o tipo "print", pois queremos uma formatação para impressão.
Criaremos uma página simples, com topo, menu lateral, area de conteudo e rodapé.
Especificaremos a formatação para a tela como todos nós fazemos normalmente, mas
teremos uma coisinha a mais em nosso CSS: a especificação da mídia.
Para isso usaremos o @media print, e é dentro dele que montaremos a versão
para impressão, podemos ocultar e/ou mostrar elementos, mudar a formatação, etc.
Claro que tais alterações não irão aparecer na tela, não adianta ficar se matando
de apertar F5 e depois me xingar falando que não funciona, tem ir na "visualização de impressão",
ou se tiver muita tinta e papel, imprima.
a lista dos tipos de midia foi retirada desta página
http://www.tableless.com.br/o-que-sao-media-types
Veja o codigo completo:
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{border:1px solid black}
#topo{
display:block;
width: 900px;
height: 80px;
background-color: #274776;
color:white;
}
#menu{
display: block;
float:left;
width: 180px;
background-color: #98C5FC;
}
#meio{
display: block;
width: 600px;
background-color: #E2EFFE;
float: left;
}
#rodape{
display: block;
width: 600px;
background-color: #2D66A6;
float: none;
border:1px solid #2D66A6;
margin-top:20px;
}
#papel{
display: none;
}
@media print{
#papel{display: block; }
#topo,#menu{display: none;}
}
</style>
</head>
<body>
<div id="topo">
TOPO DA PAGINA<br />
não aparece na impressão
</div>
<div id="menu">
o menu não aparece<br />
na impressão
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div id="meio">o conteúdo sempre aparece<br />
</div>
<br style="clear :both" />
<div id="papel">isso só aparece na impressão</div>
<br style="clear :both" />
<div id="rodape">
sempre aparece
</div>
</body></html>
