Aldeia Numaboa

Um portal diferente em Português do Brasil

Informática da Aldeia

Tutoriais

Home

Informática

Tutoriais

CSS

Páginas para impressão

Novo nos Blogs

The game is not over

Aleluia!

Time is not money

Novidades

Linguagem Perl - Loops e Saltos

Linguagem Perl - Variáveis

Linguagem Perl - Fundamentos

Linguagem Perl - Introdução

Perl+CGI - Um script de verdade

Perl+CGI - Dicas de Programação

Tutorial CGI - GET e POST

Tutorial CGI - Variáveis de Contexto

Na Aldeia

Há 79 visitantes online

2775 registros

4 hoje

14 nesta semana

55 neste mês

Boas vindas: lvcivs

Estatística

Artigos: 823
Artigos lidos: 3847976
Arquivados: 41
Downloads: 410
Baixados: 161052
Glossário: 1196
Bibliografia: 24

Visitas de onde?

88,2%		Brasil
9,2%		Portugal
0,8%		EUA
0,2%		Espanha
0,1%		Alemanha

Visitantes

Hoje:	165
Ontem:	1831
Esta semana:	8485
Semana passada:	13257
Este mês:	38226
Mês passado:	49141
Total:	103946

Registro/Login

Para fazer login ou registrar-se

Clique aqui

Fechar

Boas Vindas!

Usuários registrados têm algumas regalias!

Qui

Fev

2007

21:27

Páginas para impressão

Tutoriais - CSS - Cascanding Style Sheet

Escrito por vovó Vicki

Índice do Artigo
Páginas para impressão
Referências
Todas as páginas

Página 1 de 2

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

O Truque
Script
Tela
Alterações
Página
Impressão
Finalmentes

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:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      ... aqui vão as elementos: propriedades ...
    </style>
  </head>
  <body>
    ...

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

<html>
  <head>
    <title>Exemplo</title>
    <link rel="stylesheet" type="text/css" href="formatos.css">
    <style type="text/css">
      ... aqui vão as elementos: propriedades ...
    </style>
  </head>
  <body>
    ...

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:

<html>
  <head>
    <title>Exemplo</title>
    <link rel="stylesheet" media="screen" href="website.css">
    <link rel="stylesheet" media="print, embossed" href="imprimir.css">
    <link rel="stylesheet" media="aural" href="voz.css">
  </head>
  <body>
    ...

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:

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      @import url('/imprimir.css') print, embossed;
      @import url('/pocketPC.css') handheld;
      @import url('/normal.css') screen;
    </style>
  </head>
  <body>
    ...

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

<html>
  <head>
    <title>Exemplo</title>
    <style type="text/css">
      @media print {
        seletor { propriedade: valor; }
      }
      @media screen, handheld {
        seletor { propriedade: valor; }
      }
    </style>
  </head>
  <body>
    ...

Criando um script para impressão

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:

1. Crie 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%;
}

2. 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:

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

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; }

3. A página para a tela

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

Textos

Arquivo

Título aqui

Quinta, 1 de Fevereiro de 2007

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.

4. 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

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

5. Botando pra jambrar

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

<div id="cabeca"><h1>Nome do Site</h1></div>

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 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:

<html>
  <head>
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="tela.css" media="screen">
    <link rel="stylesheet" type="text/css" href="imprime.css" media="print">
  </head>
  ...

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

Siga a sequência das abas para ler o artigo completo. Vá para a próxima página para ver as referências e os comentários.

Anterior - Próximo >>

Última atualização ( Qua, 02.04.2008 22:05 )