A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

Páginas para impressão

Qui

1

Fev

2007


21:27

(21 votos, média 4.14 de 5) 


Nível intermediário Muitos sites oferecem nas suas páginas a opção de transformá-las em páginas próprias para impressão, onde não há menus, propaganda, etc. Será que estes sites fazem duas páginas diferentes, uma para navegação web e outra para impressão? Sim e não :smile:

{faqslider} :::: O truque ::::

O truque está em gerar o mesmo conteúdo usando scripts CSS diferentes. Ao definir ou incluir um ou vários scripts, pode-se determinar o valor da propriedade media. Se houver um script com media: screen, o estilo é aplicado quando a saída for a tela do monitor; se houver um com media: print, o estilo é aplicado quando a saída for para a impressora.

Os valores da propriedade media são vários:

media="all"          para todos os tipos de mídia.
media="aural"        para voz sintetizada gerenciada por computador.
media="braille"      para aparelhos que produzem escrita Braille (para cegos).
media="embossed"     para impressoras Braille.
media="handheld"     para handhelds.
media="print"        para impressoras.
media="projection"   para projeção de dados (data show).
media="screen"       para a tela do monitor.
media="tty"          para mídia não gráfica (teletipo ou browser Lynx).
media="tv"           para dispositivos de saída semelhantes a TV.

Como inserir um script CSS

Há várias maneiras de se inserir um script CSS.

A tradicional é colocar o script na área head da página:

Exemplo ...

Outra forma clássica é criar um arquivo próprio para o script e incluí-lo na página:

Exemplo ...

Como mostrado acima, um método não exclui o outro. Além disto, mais de um script externo pode ser incluído, para o mesmo tipo de saída ou para saídas diferentes:

Exemplo ...

Apenas os navegadores mais recentes aceitam o método @import e, com exceção do Internet Explorer, aceitam associar @import com o tipo de mídia:

Exemplo ...

Há ainda o método @media que pode ser usado para definir propriedades de seletores para diversas saídas:

Exemplo ... :::: {/faqslider}

Existem algumas dicas para se criar um script CSS de impressão. Se você quiser que o estilo seja totalmente preservado, então use media: all ou media: screen, print. Por outro lado, se você quiser disponibilizar a chamada página print-friendly, dê uma olhada neste roteiro:

{faqslider} :::: Criando um script para a tela ::::

Antes de mais nada, crie um script completo para a apresentação na tela do monitor. Como exemplo, vou usar o script do tutorial Dê adeus às tabelas:

body { margin: 0; padding: 0; font-size: 85%; font-family: arial, helvetica, sans-serif; text-align: center; color: #333; background-color: #D6D6D6; background-image: url(/sua_url/img_39.gif); } a:link { color: #B52C07; } a:visited { color: #600; } a:hover, a:active { color: #fff; background-color: #B52C07; } h2 { color: #B52C07; font: 120% georgia, times, "times new roman", serif; font-weight: bold; margin: 0 0 2px 0; } h2 a { text-decoration: none; } h3 { color: #5B5E0E; font: 106% georgia, times, "times new roman", serif; font-weight: bold; margin-top: 0; border: none; } #principal { margin: 1em auto; width: 650px; text-align: left; background-color: #fff; border: 1px solid #676767; } #cabeca { height: 45px; background-image: url(/sua_url/header.jpg); background-repeat: no-repeat; background-position: 0 0; border-bottom: 1px solid #fff; position: relative; } #cabeca h1 { font-size: 1px; text-align: right; color: #fff; margin: 0; padding: 0; } #navega { background-color: #9FA41D; color: #272900; padding: 2px 0; margin-bottom: 22px; } #navega ul { margin: 0 0 0 20px; padding: 0; list-style-type: none; border-left: 1px solid #C4C769; } #navega li { display: inline; padding: 0 10px; border-right: 1px solid #C4C769; background-image: none; } #navega li a { text-decoration: none; color: #272900; } #navega li a:hover { text-decoration: none; color: #fff; background-color: #272900; } #meu_menu { float: right; width: 165px; border-left: 1px solid #C5C877; padding-left: 15px; } #meu_menu ul { margin-left: 0; padding-left: 0; list-style-type: none; line-height: 165%; } #texto { margin: 0 200px 40px 20px; } #texto p { line-height: 165%; } .imagefloat { float: right; padding: 2px; border: 1px solid #9FA41D; margin: 0 0 10px 10px; } .ref { border-bottom: 1px solid #C5C877; } .ref ul { list-style-type: none; text-align: right; margin: 1em 0; padding: 0; font-size: 95%; } .ref li { display: inline; padding: 0 0 0 7px; background-image: none; } #rodape { clear: both; color: #272900; background-color: #9FA41D; text-align: right; padding: 5px; font-size: 90%; } :::: :::: Como fazer as alterações ::::

Coloque o script CSS num arquivo próprio e dê-lhe o nome, por exemplo, de tela.css. Faça uma cópia deste arquivo e dê-lhe o nome de imprime.css. Se o script estiver no código da página, retire-o. Faça a seguinte inclusão:

A partir deste ponto, vamos trabalhar no script imprime.css até obtermos o layout desejado para uma página de impressão. Inicialmente a saída ainda será para a tela para facilitar o trabalho de depuração. Seguem algumas sugestões do que e de como fazer algumas alterações:

  • Esconder áreas desnecessárias usando display: none;
  • Mudar todas as cores para preto ou escala de cinza
  • Alterar os links para a { text decoration: none; }
  • Remover tamanho de fonte deixando esta tarefa para o navegador
  • Colocar margens na página, alguma coisa como body { margin: 2em; }
:::: :::: A página para a tela ::::

Como imprime.css ainda não foi alterado, a página de exemplo tem a seguinte aparência:

Título aqui

Quinta, 1 de Fevereiro de 2007

Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Copyright © Nome do Site 2007
:::: :::: A página para impressão ::::

Se alterarmos o script imprime.css para body { margin: 2em; padding: 0; font: 100% arial, helvetica, sans-serif; color: #000; background-color: #fff; } a { color: #000; text-decoration: none;} #cabeca { border-bottom: 1px solid #999; } #cabeca h1 { color: #000; } #navega { display: none; } #meu_menu { display: none; } #texto p { line-height: 165%; } .ref { border-bottom: 1px solid #999; } .ref ul { list-style-type: none; text-align: right; margin: 1em 0; padding: 0; font-size: 95%; } .ref li { display: inline; padding: 0 0 0 7px; } .imagefloat { display: none; } #rodape { clear: both; color: #000; text-align: right; padding: 5px; font-size: 90%; border-top: 1px solid #999; margin-top: 2em; }

o resultado é:

Nome do Site

Título aqui

Quinta, 1 de Fevereiro de 2007

Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Copyright © Nome do Site 2007
:::: :::: Botando pra jambrar ::::

Antes dos finalmentes, uma pequena observação: no compartimento do cabeçalho coloca-se o texto

Nome do Site

Como no script tela.css o seletor font-size de #cabeca está com a propriedade de 1px, o texto não aparece e não se sobrepõe ao gráfico smile Já no script imprime.css, esta propriedade foi eliminada e o browser usa o tamanho de fonte padrão para mostrar o texto.

Uma vez satisfeito com o resultado, basta incluir as duas versões de CSS na(s) página(s), cuidando para que o tipo de mídia esteja correto:

... ...

Está feito o jogo. Agora você já pode oferecer esta mordomia aos visitantes do seu site. Desejo sucesso vovo

:::: {/faqslider}

Fontes de referência

Informações adicionais